:root {
  --fondo: #0e1014;
  --barra: #12151a;
  --tarjeta: #171a20;
  --tarjeta2: #1e222a;
  --borde: #343a45;
  --texto: #f0f2f5;
  --suave: #9ca3af;
  --rojo: #ef4444;
  --rojo-boton: #c82020;
  --rojo-osc: #7f1d1d;
  --verde: #34d399;
  --verde-fondo: #063c28;
  --azul: #60a5fa;
  --ambar: #fbbf24;
  --ambar-fondo: #422f06;
  --peligro: #f87171;
  --peligro-fondo: #450a0a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
}

button, input, select { font: inherit; color: inherit; }

/* ---------- barra superior ---------- */
.barra {
  display: flex; align-items: center; gap: 18px;
  background: var(--barra); border-bottom: 2px solid var(--rojo-osc);
  padding: 10px 20px;
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { height: 38px; background: #fff; border-radius: 8px; padding: 4px 8px; }
.tit { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.empresa { color: var(--suave); flex: 1; display: flex; align-items: center; gap: 10px; }
.empresa img { height: 34px; background: #fff; border-radius: 8px; padding: 3px 8px; }
.usuario { display: flex; align-items: center; gap: 10px; color: var(--suave); }

/* ---------- pestañas ---------- */
.tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--borde); background: var(--barra); }
.tabs button {
  background: transparent; border: 0; padding: 10px 18px; cursor: pointer;
  color: var(--suave); border-bottom: 3px solid transparent; font-weight: 600;
}
.tabs button:hover { color: var(--texto); }
.tabs button.act { color: #fff; border-bottom-color: var(--rojo); }

main { padding: 18px 20px 40px; max-width: 1500px; margin: 0 auto; }
section[hidden] { display: none; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--azul);
  padding: 14px 16px; border-radius: 4px;
}
.tarjeta h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: .05em; color: var(--azul); }
.rejilla { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 14px; }
.kpi .valor { font-size: 30px; font-weight: 700; margin-top: 4px; }
.kpi .nota { color: var(--suave); font-size: 13px; }
.kpi.verde { border-top-color: var(--verde); } .kpi.verde .valor { color: var(--verde); }
.kpi.azul { border-top-color: var(--azul); } .kpi.azul .valor { color: var(--azul); }
.kpi.ambar { border-top-color: var(--ambar); } .kpi.ambar .valor { color: var(--ambar); }
.kpi.rojo { border-top-color: var(--rojo); }

.dos { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
@media (max-width: 1000px) { .dos { grid-template-columns: 1fr; } }

/* ---------- equipo ---------- */
.equipo { border-top-color: var(--rojo); margin-bottom: 14px; }
.equipo .fila { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--tarjeta2); }
.equipo .fila:last-child { border-bottom: 0; }
.equipo .fila span:first-child { color: var(--suave); }
.peso-vivo { font-size: 34px; font-weight: 700; }
.insignia { display: inline-block; padding: 3px 10px; border-radius: 3px; font-weight: 700; font-size: 12px; }
.ins-ok { background: var(--verde-fondo); color: var(--verde); }
.ins-aviso { background: var(--ambar-fondo); color: var(--ambar); }
.ins-error { background: var(--peligro-fondo); color: var(--peligro); }
.ins-gris { background: var(--tarjeta2); color: var(--suave); }

/* ---------- tablas ---------- */
.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: #22272f; text-align: left; padding: 8px 10px; white-space: nowrap; position: sticky; top: 0; }
td { padding: 7px 10px; border-bottom: 1px solid var(--tarjeta2); }
tbody tr:nth-child(even) { background: var(--tarjeta2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { color: var(--suave); padding: 18px 6px; }
.t-ok { color: var(--verde); } .t-aviso { color: var(--ambar); } .t-error { color: var(--peligro); }

/* ---------- barra de filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.filtros label { display: flex; flex-direction: column; gap: 3px; color: var(--suave); font-size: 13px; }
input, select {
  background: #242a34; border: 1px solid var(--borde); padding: 7px 9px; border-radius: 3px; min-width: 150px;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* ---------- botones ---------- */
button.pri { background: var(--rojo-boton); border: 0; color: #fff; padding: 9px 18px; font-weight: 700; border-radius: 3px; cursor: pointer; }
button.pri:hover { background: #dc2626; }
button.sec { background: var(--tarjeta2); border: 1px solid var(--borde); padding: 7px 14px; border-radius: 3px; cursor: pointer; }
button.sec:hover { background: #2a303a; }
button.verde { background: #15803d; border: 0; color: #fff; padding: 9px 18px; font-weight: 700; border-radius: 3px; cursor: pointer; }
a.btn-verde { display: inline-block; text-decoration: none; background: #15803d; color: #fff; padding: 9px 18px; font-weight: 700; border-radius: 3px; }

/* ---------- barra de avance ---------- */
.avance { height: 12px; background: var(--tarjeta2); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.avance > div { height: 100%; background: linear-gradient(90deg, #15803d, var(--verde)); width: 0; transition: width .4s; }

/* ---------- diálogos ---------- */
dialog { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-top: 4px solid var(--rojo); border-radius: 4px; padding: 20px 24px; min-width: 340px; }
dialog::backdrop { background: rgba(0, 0, 0, .65); }
dialog h3 { margin: 0 0 14px; }
dialog label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; color: var(--suave); font-size: 13px; }
dialog input, dialog select { width: 100%; }
.acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.mensaje-error { color: var(--peligro); font-weight: 700; min-height: 1.3em; }

/* ---------- login ---------- */
.login-pagina { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-marca {
  background: linear-gradient(160deg, #3a0e0e, #0a0b0e); border-right: 3px solid var(--rojo);
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 50px;
}
.logo-blanco { background: #fff; border-radius: 12px; padding: 14px 22px; display: flex; align-items: center; justify-content: center; min-height: 100px; }
.logo-blanco img { max-width: 100%; max-height: 90px; }
.logo-blanco span { color: #111; font-weight: 800; font-size: 24px; letter-spacing: .2em; }
.login-marca h1 { margin: 6px 0 0; font-size: 30px; }
.login-marca p { margin: 0; color: #cbd5e1; }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 60px; max-width: 460px; width: 100%; margin: 0 auto; }
.login-form h2 { font-size: 28px; margin: 0 0 4px; }
.login-form p { color: var(--suave); margin: 0 0 22px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; color: var(--suave); }
.login-form input { font-size: 17px; padding: 10px; }
.login-form button { margin-top: 6px; padding: 12px; font-size: 17px; }
@media (max-width: 800px) {
  .login-pagina { grid-template-columns: 1fr; }
  .login-marca { padding: 30px; border-right: 0; border-bottom: 3px solid var(--rojo); }
  .login-form { padding: 30px; }
}

/* ---------- casillas de verificación (herramientas del desarrollador) ---------- */
label.chk { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--texto); margin-bottom: 8px; }
label.chk input { min-width: 0; width: 18px; height: 18px; }