:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --linea:#2a2f3a;
  --texto:#e8eaf0; --suave:#9aa3b2; --acento:#6366f1; --ok:#10b981; --mal:#ef4444; --alta:#f59e0b;
  --r:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:.55rem 1rem;
  background:var(--acento);color:#fff;font-weight:600}
button:hover{filter:brightness(1.12)}
button.peligro{background:transparent;color:var(--mal);border:1px solid var(--mal);padding:.35rem .7rem}
input,select,textarea{font:inherit;background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea);border-radius:8px;padding:.5rem .65rem;width:100%}
textarea{resize:vertical}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--suave);font-weight:600}

/* login */
.pantalla-login{display:grid;place-items:center;min-height:100vh}
.tarjeta-login{background:var(--panel);border:1px solid var(--linea);border-radius:14px;
  padding:2rem;width:min(360px,92vw);display:flex;flex-direction:column;gap:.9rem}
.tarjeta-login h1{margin:0;font-size:1.6rem;letter-spacing:-.02em}
.tarjeta-login .sub{margin:-.7rem 0 .4rem;color:var(--suave);font-size:.9rem}
.error{background:rgba(239,68,68,.12);border:1px solid var(--mal);color:#fca5a5;
  padding:.55rem .7rem;border-radius:8px;font-size:.85rem}
.ok{background:rgba(16,185,129,.12);border:1px solid var(--ok);color:#6ee7b7;
  padding:.55rem .7rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem}

/* barra */
.barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.3rem;background:var(--panel);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:10}
.marca{font-weight:700;letter-spacing:-.01em}
.marca span{color:var(--suave);font-weight:500}
.barra nav{display:flex;align-items:center;gap:1rem;font-size:.85rem}
.yo{padding:.25rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);
  border:1px solid var(--c);font-weight:600;font-size:.8rem}
.salir{color:var(--suave)}

main{max-width:1000px;margin:0 auto;padding:1.5rem 1.3rem 4rem}
h2{margin:.2rem 0 .6rem;font-size:1.25rem}
h3{margin:1.6rem 0 .5rem;font-size:1rem}
.nota{color:var(--suave);font-size:.87rem;max-width:70ch}

/* resumen */
.resumen{display:flex;gap:.7rem;margin-bottom:1.2rem}
.dato{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  padding:.7rem 1.1rem;display:flex;flex-direction:column;min-width:96px}
.dato b{font-size:1.5rem;line-height:1.1}
.dato span{font-size:.75rem;color:var(--suave)}
.dato.alerta b{color:var(--mal)}

/* alta */
.alta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:1.2rem}
.alta summary{padding:.8rem 1.1rem;cursor:pointer;font-weight:600;user-select:none}
.form-alta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.8rem;padding:0 1.1rem 1.1rem;align-items:end}
.form-alta .ancho{grid-column:1/-1}
.form-alta button{grid-column:1/-1;justify-self:start}

/* filtros */
.filtros{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.filtros select{width:auto;min-width:150px}

/* lista */
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.tarea{background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--linea);
  border-radius:var(--r);padding:.85rem 1rem}
.tarea.p-alta{border-left-color:var(--alta)}
.tarea.e-hecha,.tarea.e-cancelada{opacity:.5}
.tarea.e-hecha .titulo{text-decoration:line-through}
.linea1{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.titulo{font-weight:600}
.titulo:hover{color:#a5b4fc}
.proyecto{font-size:.68rem;font-weight:700;letter-spacing:.05em;color:var(--suave);
  border:1px solid var(--linea);border-radius:5px;padding:.1rem .4rem}
.chip{font-size:.68rem;font-weight:700;border-radius:5px;padding:.1rem .4rem}
.chip.alta{background:rgba(245,158,11,.16);color:#fbbf24}
.chip.venc{background:rgba(239,68,68,.16);color:#fca5a5}
.detalle{margin:.4rem 0 0;color:var(--suave);font-size:.87rem}
.linea2{display:flex;align-items:center;gap:.55rem;margin-top:.6rem;flex-wrap:wrap;font-size:.78rem}
.en-linea{display:inline}
.linea2 select{width:auto;padding:.2rem .45rem;font-size:.78rem}
select.quien{border-color:var(--c);color:var(--c);font-weight:600;background:transparent}
.vence{color:var(--suave)}
.vence.mal{color:#fca5a5;font-weight:600}
.origen,.auto{color:var(--suave);border:1px solid var(--linea);border-radius:5px;padding:.05rem .4rem;font-size:.7rem}
.auto{color:#a5b4fc;border-color:#4338ca}
.vacio{color:var(--suave);text-align:center;padding:2.5rem 0}

/* detalle */
.detalle-tarea{display:grid;grid-template-columns:1fr 280px;gap:1.6rem;align-items:start}
.detalle-tarea .form-alta{background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.1rem}
.detalle-tarea aside{background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.1rem;font-size:.85rem}
.detalle-tarea aside h3:first-child{margin-top:0}
.detalle-tarea aside p{margin:.35rem 0;color:var(--suave)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.log li{border-left:2px solid var(--linea);padding-left:.7rem;color:var(--suave)}
.log small{color:#6b7280}

/* biometría */
button.bio{width:100%;background:transparent;border:1px solid var(--acento);color:#a5b4fc;
  display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem}
button.bio:hover:not(:disabled){background:color-mix(in srgb,var(--acento) 16%,transparent);filter:none}
button.bio:disabled{opacity:.6;cursor:default}
.bio-icono{width:19px;height:19px;flex:none}
.separador{display:flex;align-items:center;gap:.7rem;color:var(--suave);font-size:.75rem}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.form-login{display:flex;flex-direction:column;gap:.9rem}

/* Aviso discreto: acompaña, no compite con las tareas. */
.aviso-bio{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  padding:.6rem .8rem;font-size:.85rem}
.aviso-icono{width:20px;height:20px;flex:none;color:#a5b4fc;opacity:.9}
.aviso-bio p{margin:0;flex:1;min-width:0;color:var(--suave)}
.aviso-bio b{color:var(--texto);font-weight:600}
.aviso-cta{color:#a5b4fc;font-weight:600;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,#a5b4fc 45%,transparent);padding-bottom:1px}
.aviso-cta:hover{color:#c7d2fe;border-bottom-color:#c7d2fe}
.aviso-cerrar{background:transparent;color:#6b7280;padding:.15rem .35rem;
  font-size:.85rem;line-height:1;border-radius:6px}
.aviso-cerrar:hover{color:var(--texto);background:var(--panel2);filter:none}

@media (max-width:520px){
  /* Dos filas exactas: icono + texto + cerrar arriba, botón completo abajo. */
  .aviso-bio{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem .6rem;align-items:start}
  .aviso-icono{grid-area:1/1;margin-top:1px}
  .aviso-bio p{grid-area:1/2}
  .aviso-cerrar{grid-area:1/3;margin-top:-2px}
  .aviso-cta{grid-area:2/1/2/4;text-align:center;padding:.45rem;border-bottom:0;
    border:1px solid color-mix(in srgb,#a5b4fc 40%,transparent);border-radius:8px}
}

.dispositivos{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.dispositivos li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border-top:1px solid var(--linea);padding-top:.5rem}
.dispositivos small{display:block;color:var(--suave);font-size:.75rem;margin-top:.15rem}

/* equipo y perfil */
.angosto{max-width:520px}
.encuadre{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:1.1rem;margin-top:.6rem}
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:.8rem}
.ficha.inactiva{opacity:.5}
.ficha .form-alta{padding:1.1rem 1.1rem .8rem}
.ficha-pie{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  border-top:1px solid var(--linea);padding:.7rem 1.1rem;font-size:.8rem}
.abiertas{color:var(--suave)}
.mini{display:flex;gap:.4rem;align-items:center}
.mini input{width:auto;padding:.3rem .5rem;font-size:.8rem}
.mini button,button.tenue{background:transparent;border:1px solid var(--linea);
  color:var(--suave);padding:.3rem .7rem;font-size:.78rem;font-weight:500}
.mini button:hover,button.tenue:hover{color:var(--texto);border-color:var(--acento);filter:none}
code{background:var(--panel2);border-radius:4px;padding:.05rem .35rem;font-size:.9em}
a.yo{cursor:pointer}
a.yo:hover{filter:brightness(1.2)}

/* tabla reglas */
.tabla{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:1rem}
.tabla th{text-align:left;color:var(--suave);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;padding:.5rem .4rem;border-bottom:1px solid var(--linea)}
.tabla td{padding:.5rem .4rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla .acciones{white-space:nowrap}
.probador{display:flex;gap:.6rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
.probador input{flex:1;min-width:240px}
.resultado{color:var(--suave)}

@media (max-width:760px){
  .detalle-tarea{grid-template-columns:1fr}
  .tabla{display:block;overflow-x:auto}
}