:root{
  --bg:#0b0f1a;
  --surface:#0f172a;
  --panel:#0b1220;
  --panel-2:#0c1528;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;
  --primary:#22c55e;
  --primary-600:#16a34a;
  --accent:#38bdf8;
  --danger:#ef4444;
  --warning:#f59e0b;
}

/* RESET & BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,#0a0f1a, var(--surface));
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:var(--panel-2);border:1px solid var(--accent);border-radius:8px}

/* UTILITIES */
.container{max-width:1180px;margin:0 auto;padding:0 1rem}
.hidden{display:none}
.center{display:grid;place-items:center}
.gap-sm{gap:.5rem} .gap-md{gap:1rem}
.mt-sm{margin-top:.5rem} .mt-md{margin-top:1rem} .mt-lg{margin-top:2rem}
.app-main { padding-top: 2rem; }
.h3-reset{margin:0;font-size:1rem}

/* HEADER */
.app-header{position:sticky;top:0;z-index:20;background:#0b1020;border-bottom:1px solid var(--border)}
.app-header .row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;gap:.75rem}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand .logo{width:68px;height:68px;display:grid;place-items:center;background:var(--panel);border-radius:10px;font-size:1.6rem}
.brand .titles h1{font-size:1.05rem;margin:0}
.brand .titles small{color:var(--muted)}
.userbox{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
.badge{background:#1e293b;color:#93c5fd;padding:2px 6px;border-radius:999px;font-size:.75rem}
.burger{display:none;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.35rem .55rem;min-width:44px;min-height:44px}

/* NAVBAR */
.navbar{background:#0c1324;border-bottom:1px solid var(--border)}
.navbar .container{display:flex;gap:.5rem;overflow:auto;padding:.4rem 1rem}
.navbar a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:10px;border:1px solid transparent;white-space:nowrap}
.navbar a:hover{background:#0f1b33}
.navbar a.active{border-color:var(--accent);box-shadow:0 0 0 1px inset var(--accent)}
.navbar.open .container{display:flex;flex-wrap:wrap}

/* LAYOUT */
.app-main{padding:1rem 0}
.card{
  background:radial-gradient(1200px 400px at top left,#0e1728 10%, #0a1220 60%, #091021 100%);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.card-header--wrap{flex-wrap:wrap}
.card-title{margin:0;font-size:clamp(1rem, 1.2vw + .8rem, 1.25rem)}
.card-tools{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap}
.card-body{padding:1rem 1.25rem}

/* FORMS */
label, .form-field{display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.92rem}
input[type="text"], input[type="password"], input[type="date"], select, .comment{
  background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  padding:.6rem .75rem;border-radius:10px;outline:none;min-width:0;width:100%
}
input:focus, select:focus, .comment:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.15)}

/* BUTTONS */
.btn{background:var(--primary);color:#081016;border:none;padding:.65rem .95rem;border-radius:10px;cursor:pointer;font-weight:600}
.btn:hover{background:var(--primary-600)}
.btn:disabled{opacity:.65;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--accent)}
.btn-link{background:transparent;border:none;color:var(--accent);cursor:pointer}

/* TABLE-LIKE (tasks) */
.table{display:grid;gap:.75rem}
.table .row.task-row{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 520px);
  gap:.75rem;align-items:center;
  border:1px solid var(--border);border-radius:12px;padding:.75rem .85rem;background:#0b1528
}
.task-row__name{min-width:0}
.task-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row__controls{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.result{min-width:160px;flex:0 0 auto}
.comment{flex:1 1 240px}

/* ACTIONS BAR */
.actions-bar{display:flex;gap:.6rem;flex-wrap:wrap}
.actions-bar .btn{min-width:140px}

/* FOOTER */
.app-footer{margin-top:2rem;padding:1rem;border-top:1px solid var(--border);color:var(--muted)}
.app-footer .container{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.app-footer a{color:var(--muted)}
.app-footer a:hover{color:var(--text)}

/* LOGIN PAGE */
.login-body{min-height:100dvh;display:grid;place-items:center;padding:1rem}
.login-card{
  width:100%;max-width:420px;padding:1.25rem;
  background:radial-gradient(900px 320px at top left,#0e1728 10%, #0a1220 60%, #091021 100%);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.login-card .brand{justify-content:center;margin-bottom:1rem}
.login-card .actions{display:flex;gap:.75rem}
.login-card .actions .btn{flex:1}
.login-msg{min-height:1.2em;color:var(--danger);margin-top:.5rem}
#pin { position: relative; z-index: 10; pointer-events: auto; }

/* RESPONSIVE */
@media (max-width: 960px){
  .burger{display:inline-block}
  .brand .logo{width:54px;height:54px}
  .navbar .container{display:none}
  .navbar.open .container{display:flex;flex-wrap:wrap}
  .card-tools{width:100%}
}
@media (max-width: 820px){
  .table .row.task-row{
    grid-template-columns: 1fr; /* stack */
  }
  .task-row__controls{
    justify-content:stretch;
  }
  .result{min-width:0;flex:1 1 160px}
  .comment{flex:1 1 100%}
}
@media (max-width: 560px){
  .actions-bar{flex-direction:column}
  .actions-bar .btn{width:100%}
  .userbox{justify-content:flex-start}
}

/* TOASTS & LOADER */
.toast{
  position:fixed;right:1rem;bottom:1rem;background:#0b1528;border:1px solid var(--border);
  padding:.8rem 1rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.spinner{
  width:18px;height:18px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;
  display:inline-block;vertical-align:-3px;animation:spin 1s linear infinite
}

  /* oculta h1 + small */
  .app-header .brand .titles{ display:none; }

  /* logo más grande */
  .app-header .brand .logo{
    width:96px; height:96px;         /* antes 68px (y 54px en <=960px) */
    font-size:2.2rem;                 /* agranda el emoji/icono */
  }

  /* opcional: ajusta alineación si hiciera falta */
  .app-header .row{
    align-items:center;
  }
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none}
}


/* Icono a la izquierda del nombre de tarea */
.task-row__name{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}
.task-icon{
  display:inline-grid;
  place-items:center;
  width:24px; height:24px;
  flex:0 0 24px;
}
.task-icon svg{
  width:20px; height:20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  opacity:.9;
}
/* ====== SOLO cambios responsive (ESCRITORIO SE MANTIENE) ====== */

/* Header móvil: logo algo mayor y ocultar títulos para ganar espacio */
@media (max-width: 640px){
  .brand .logo img{ width:48px; height:48px; object-fit:contain }
  .brand .titles{ display:none }
}

/* Filtros: se apilan progresivamente; en desktop no cambia nada */
.filters-grid{
  display:grid; grid-template-columns: repeat(4, minmax(140px,1fr)); gap:.6rem;
}
.filters-actions{ display:flex; align-items:flex-end }
@media (max-width: 1024px){
  .filters-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .filters-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .filters-grid{ grid-template-columns: 1fr; }
  .filters-actions .btn{ width:100% }
}

/* Contenedor lista + gráfico: en desktop sigue 1fr 360px; en móvil pasa a 1 columna */
.alerts-layout{
  display:grid; grid-template-columns: 1fr 360px; gap:1rem; /* <-- ESCRITORIO (igual que antes) */
}
@media (max-width: 1060px){
  .alerts-layout{ grid-template-columns: 1fr; }  /* <-- SOLO móvil/tablet */
  .chart-card canvas{ width:100% !important; height:auto !important; }
}

/* Fila detalle por usuario: 4 columnas en desktop; 2/1 en pantallas pequeñas */
.alert-detail{
  display:grid; gap:.5rem; align-items:center;
  grid-template-columns: 1fr auto auto auto;   /* <-- ESCRITORIO intacto */
}
.alert-detail .u-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width: 640px){
  .alert-detail{ grid-template-columns: 1fr auto; row-gap:.35rem }
  .alert-detail .u-result{ justify-self:start }
  .alert-detail .u-time{ justify-self:end }
}

/* Controles táctiles un poco más cómodos en móviles */
@media (max-width: 480px){
  .btn{ padding:.7rem 1rem }
  input[type="date"], select{ padding:.7rem .8rem }
}