/* =====================================================================
   SURKIA — hoja de estilo propia
   Escrita desde cero sobre Bootstrap 5 (MIT). No contiene CSS de ninguna
   plantilla comercial: los valores de color están elegidos a ojo a partir
   de una referencia visual, que es lo que no está protegido; el código no
   se copió de ningún lado.

   Tema claro: lienzo gris muy claro, tarjetas blancas, barra lateral
   oscura, acento violeta. Silueta de panel administrativo.
   ===================================================================== */

:root {
  /* lienzo y superficies */
  --fondo:#f4f6fa;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --rail:#171a21;
  --rail-2:#20242d;
  --topbar:#ffffff;

  /* tinta */
  --ink:#1f2733;          /* texto principal */
  --ink-2:#4a5567;        /* secundario */
  --muted:#8b95a7;        /* rótulos, notas */
  --ink-rail:#c8cfdb;     /* texto sobre la barra oscura */
  --muted-rail:#6d7789;

  /* líneas y sombras */
  --hair:#e4e9f1;
  --hair-2:#eef2f7;
  --hair-rail:rgba(255,255,255,.07);
  --grid:#eef2f7;
  --sombra:0 1px 2px rgba(20,28,44,.05), 0 4px 14px rgba(20,28,44,.045);

  /* acento */
  --accent:#6d5efc;
  --accent-2:#8c7fff;
  --accent-dim:rgba(109,94,252,.10);

  /* series de gráfica: contraste verificado sobre blanco y distinguibles
     en las tres formas comunes de daltonismo */
  --s1:#4a63e7; --s2:#e0662c; --s3:#0f9d70; --s4:#c98500;

  /* semáforo */
  --good:#0f9d70; --warn:#b8860b; --crit:#d4453f; --info:#3b6fd4;

  --radio:12px;
  --rail-ancho:224px;

  color-scheme:light;
}

* { box-sizing:border-box; }

body {
  min-height:100vh; margin:0;
  color:var(--ink); background:var(--fondo);
  font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-2); }

/* ---------------------------------------------------------- estructura */

.shell { display:flex; min-height:100vh; align-items:stretch; }

.rail {
  width:var(--rail-ancho); flex:none;
  background:var(--rail); color:var(--ink-rail);
  padding:18px 0 24px;
  display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.marca { padding:0 20px; display:flex; flex-direction:column; gap:1px; }
.marca b { font-size:18px; font-weight:700; letter-spacing:.01em; color:#fff; }
.marca span {
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-rail);
}

.nav-grupo { display:flex; flex-direction:column; }
.nav-grupo > h6 {
  margin:0 0 4px; padding:0 20px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-rail); font-weight:600;
}
.nav-grupo a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 20px; color:var(--ink-rail); font-size:13.5px;
  border-left:3px solid transparent;
}
.nav-grupo a:hover { background:var(--rail-2); color:#fff; }
.nav-grupo a.activo {
  background:var(--rail-2); color:#fff;
  border-left-color:var(--accent); font-weight:500;
}
.nav-grupo a .pip {
  min-width:20px; text-align:center; padding:1px 6px; border-radius:999px;
  background:var(--crit); color:#fff; font-size:10.5px; font-weight:600; font-style:normal;
}

.principal { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {
  display:flex; align-items:center; gap:16px;
  padding:12px 22px; border-bottom:1px solid var(--hair);
  background:var(--topbar);
  position:sticky; top:0; z-index:20;
}
.topbar .titulo { font-size:15px; font-weight:600; }
.topbar .ruta { color:var(--muted); font-size:12.5px; }
.topbar .quien { margin-left:auto; display:flex; align-items:center; gap:12px; }
.topbar .quien .nom { font-size:13px; line-height:1.25; text-align:right; }
.topbar .quien .nom small { display:block; color:var(--muted); font-size:11px; }
.avatar {
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--accent),#4a3ce0);
  color:#fff; font-weight:700; font-size:13px;
  display:grid; place-items:center;
}

.lienzo { padding:22px; flex:1; }
.pie {
  padding:14px 22px; border-top:1px solid var(--hair);
  color:var(--muted); font-size:12px; background:var(--panel);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ------------------------------------------------------------ tarjetas */

.tarjeta {
  background:var(--panel);
  border:1px solid var(--hair); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra);
}
/* Sólo dentro de una fila las tarjetas se igualan de alto. Suelta, una
   tarjeta con height:100% se estira hasta el fondo del lienzo y deja un
   hueco enorme debajo del texto. */
.row > [class*="col"] > .tarjeta { height:100%; }

.tarjeta > header { display:flex; align-items:center; gap:10px; margin:-2px 0 14px; }
.tarjeta > header h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.01em; }
.tarjeta > header .der { margin-left:auto; font-size:12px; color:var(--muted); }

.kpi .rotulo {
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.kpi .cifra {
  font-size:30px; line-height:1.1; font-weight:700; margin:8px 0 4px;
  font-variant-numeric:tabular-nums;
}
.kpi .nota { font-size:12px; color:var(--ink-2); }
.kpi.alerta .cifra { color:var(--warn); }
.kpi.critico .cifra { color:var(--crit); }
.kpi .icono {
  float:right; width:38px; height:38px; border-radius:11px;
  background:var(--accent-dim); color:var(--accent);
  display:grid; place-items:center; font-size:17px;
}

/* -------------------------------------------------------------- tablas */

.tabla { width:100%; border-collapse:collapse; font-size:13px; }
.tabla th {
  text-align:left; font-weight:600; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  padding:0 10px 9px; border-bottom:1px solid var(--hair);
  white-space:nowrap;
}
.tabla td { padding:10px; border-bottom:1px solid var(--hair-2); vertical-align:top; }
.tabla tbody tr:last-child td { border-bottom:0; }
.tabla tbody tr:hover { background:var(--panel-2); }
.tabla .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabla .folio { font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:12.5px; white-space:nowrap; }

.envoltorio-tabla { overflow-x:auto; }

/* Píldoras de estado. El color dice qué hacer, no sólo qué es. */
.pildora {
  display:inline-block; padding:2.5px 9px; border-radius:999px;
  font-size:11px; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.pildora.gris  { background:#f1f4f8; color:#5b6678; border-color:#e2e8f0; }
.pildora.info  { background:#e8effc; color:#2f5fc0; border-color:#d3e0fa; }
.pildora.buena { background:#e3f6ee; color:#0a7a57; border-color:#c8ebdd; }
.pildora.aviso { background:#fdf1dc; color:#96650a; border-color:#f7e2bd; }
.pildora.mala  { background:#fdeaea; color:#b8322d; border-color:#f8d3d2; }

/* -------------------------------------------------------- línea de tiempo */

.linea { list-style:none; margin:0; padding:0; }
.linea li { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--hair-2); }
.linea li:last-child { border-bottom:0; }
.linea .punto {
  width:28px; height:28px; border-radius:9px; flex:none;
  background:var(--accent-dim); color:var(--accent);
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.linea .que { font-size:13px; }
.linea .cuando { color:var(--muted); font-size:11.5px; margin-top:1px; }

/* ------------------------------------------------------------- vacíos */

.vacio {
  text-align:center; color:var(--muted); font-size:13px;
  padding:26px 12px; border:1px dashed var(--hair); border-radius:11px;
  background:var(--panel-2);
}

/* ------------------------------------------------------------- login */

.pantalla-login {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(680px 420px at 80% 6%, rgba(109,94,252,.10), transparent 62%),
    radial-gradient(560px 480px at 8% 96%, rgba(59,111,212,.09), transparent 64%),
    var(--fondo);
}
.caja-login {
  width:100%; max-width:390px;
  background:var(--panel);
  border:1px solid var(--hair); border-radius:16px; padding:30px 28px;
  box-shadow:0 2px 6px rgba(20,28,44,.06), 0 18px 40px rgba(20,28,44,.08);
}
.caja-login .marca { padding:0; margin-bottom:22px; }
.caja-login .marca b { color:var(--ink); }
.caja-login .marca span { color:var(--muted); }

/* ------------------------------------- formularios (sobre Bootstrap 5) */

.form-label { font-size:12px; color:var(--ink-2); margin-bottom:5px; font-weight:500; }
.form-control, .form-select {
  background:#fff; border:1px solid #d9e0ea;
  color:var(--ink); border-radius:9px; padding:9px 12px; font-size:14px;
}
.form-control:focus, .form-select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim); color:var(--ink);
}
.form-control::placeholder { color:#a6b0c0; }

.btn-surkia {
  background:var(--accent); border:0; color:#fff; font-weight:600;
  border-radius:9px; padding:9px 18px; font-size:14px;
}
.btn-surkia:hover { background:var(--accent-2); color:#fff; }
.btn-tenue {
  background:#fff; border:1px solid #d9e0ea;
  color:var(--ink-2); border-radius:9px; padding:8px 14px; font-size:13px;
}
.btn-tenue:hover { color:var(--accent); border-color:var(--accent); }

.aviso {
  border-radius:10px; padding:11px 14px; font-size:13px;
  border:1px solid #f8d3d2; background:#fdeaea; color:#b8322d;
}

code { color:var(--accent); background:var(--accent-dim); padding:1px 5px; border-radius:5px; }

/* Aviso de contraseña de fábrica. Ocupa el ancho completo y no se puede
   cerrar: no es una notificación, es una condición del sistema. */
.aviso-instalacion {
  margin:0 0 18px; padding:12px 16px; border-radius:10px;
  background:#fdeaea; border:1px solid #f3bfbd; border-left:4px solid var(--crit);
  color:#8c2521; font-size:13px; line-height:1.5;
}
.aviso-instalacion strong { color:#7a1f1b; }
.aviso-instalacion code { background:rgba(212,69,63,.10); color:#8c2521; }

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .rail { position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:transform .18s; }
  .rail.abierta { transform:none; }
  .principal { width:100%; }
  .abrir-rail { display:inline-grid !important; }
}
.abrir-rail {
  display:none; width:34px; height:34px; border-radius:9px; place-items:center;
  background:#fff; border:1px solid #d9e0ea; color:var(--ink-2);
}

@media print {
  .rail, .topbar, .pie, .btn-surkia, .btn-tenue { display:none !important; }
  body { background:#fff; }
  .tarjeta { border:1px solid #ccc; box-shadow:none; }
}