:root{
  --bg:#f4f5f7; --panel:#fff; --texto:#1b1d21; --suave:#6b7280; --borde:#e2e5ea;
  --acento:#2563eb; --ok:#16a34a; --alerta:#b45309; --alerta-bg:#fff7ed;
  --radio:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16181d; --panel:#1f222a; --texto:#e8eaee; --suave:#9aa1ad; --borde:#2e333d;
    --acento:#60a5fa; --ok:#4ade80; --alerta:#fbbf24; --alerta-bg:#2a2418;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
header{
  background:var(--panel); border-bottom:1px solid var(--borde);
  padding:.7rem 1rem; position:sticky; top:0; z-index:5;
}
header h1{margin:0 0 .4rem; font-size:1.15rem}
nav{display:flex; flex-wrap:wrap; gap:.4rem}
nav a{
  color:var(--suave); text-decoration:none; padding:.3rem .6rem;
  border-radius:var(--radio); font-size:.9rem; white-space:nowrap;
}
nav a:hover{background:var(--bg)}
nav a.act{background:var(--acento); color:#fff}
nav a.sec{margin-left:auto}
nav .n{opacity:.7; font-variant-numeric:tabular-nums}
main{max-width:780px; margin:0 auto; padding:1rem}
h2{font-size:1rem; margin:1.4rem 0 .5rem; color:var(--suave)}

.nueva,.buscar,.ajustes,.editar,.reprog{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:.75rem; margin-bottom:1rem;
}
.nueva{display:flex; gap:.5rem; align-items:flex-end}
.nueva textarea{flex:1}
.buscar{display:flex; gap:.5rem}
.buscar input{flex:1}
textarea,input[type=text],input[type=search],input[type=password],input[type=time],input[type=number],input[type=datetime-local]{
  width:100%; padding:.5rem .6rem; border:1px solid var(--borde); border-radius:8px;
  background:var(--bg); color:var(--texto); font:inherit;
}
textarea{resize:vertical}
label{display:block; margin-bottom:.7rem; color:var(--suave); font-size:.9rem}
label input{margin-top:.25rem}
button{
  font:inherit; padding:.45rem .8rem; border:1px solid var(--borde); border-radius:8px;
  background:var(--panel); color:var(--texto); cursor:pointer; white-space:nowrap;
}
button:hover{border-color:var(--acento); color:var(--acento)}
button.pri{background:var(--acento); border-color:var(--acento); color:#fff}
button.pri:hover{opacity:.9; color:#fff}
button.ok{border-color:var(--ok); color:var(--ok)}
button.ok:hover{background:var(--ok); color:#fff}

.nota{
  background:var(--panel); border:1px solid var(--borde); border-left:4px solid var(--borde);
  border-radius:var(--radio); padding:.8rem; margin-bottom:.7rem;
}
.nota.vencida{border-left-color:var(--alerta); background:var(--alerta-bg)}
.nota.resuelta{opacity:.72}
.nota.resuelta .texto{text-decoration:line-through; text-decoration-color:var(--suave)}
.nota .texto{font-size:1.02rem; margin-bottom:.4rem; overflow-wrap:anywhere}
.nota .meta{font-size:.8rem; color:var(--suave); margin-bottom:.6rem}
.nota .meta a{color:var(--acento)}
.botones{display:flex; flex-wrap:wrap; gap:.4rem}
form.ib{display:inline}

.vacio{color:var(--suave); text-align:center; padding:2rem 0}
.aviso{background:var(--alerta-bg); border:1px solid var(--alerta); color:var(--alerta);
  padding:.6rem .8rem; border-radius:var(--radio)}
.pista{font-size:.85rem; color:var(--suave)}
.token code{
  display:block; background:var(--panel); border:1px solid var(--borde); border-radius:8px;
  padding:.6rem; overflow-wrap:anywhere; font-size:.85rem;
}
.hist{list-style:none; padding:0; margin:0; font-size:.85rem}
.hist li{border-bottom:1px solid var(--borde); padding:.4rem 0}
.hist .cuando{color:var(--suave); margin-right:.4rem}
.hist .det{color:var(--suave)}
.hist .org{float:right; color:var(--suave); font-size:.75rem}

body.login{display:grid; place-items:center; min-height:100vh}
body.login form{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.5rem; width:min(320px,90vw); text-align:center;
}
body.login h1{margin:0 0 1rem; font-size:1.2rem}
body.login input{margin-bottom:.7rem}
body.login button{width:100%}
.err{color:#dc2626; font-size:.9rem}