/* ===========================================================================
 * solquim.css — Capa de tema del portal Solquim sobre Bootstrap 5.3
 * ---------------------------------------------------------------------------
 * Se carga SIEMPRE DESPUÉS del CSS de Bootstrap. No reemplaza a Bootstrap:
 * solo redefine sus variables (--bs-*) y agrega los componentes propios del
 * portal (tabla de reporte, tarjetas de módulo, tarjetas de indicador).
 *
 * Regla de color del portal:
 *   - El ROJO Solquim es identidad: franja del navbar, pestaña activa, logo.
 *     Nunca se usa en un botón de guardar.
 *   - El AZUL acero es acción: botón primario, enlaces, foco de teclado.
 *   - Los cuatro niveles (OK / atención / riesgo / crítico) vienen de semanal/
 *     y no se usan para nada que no sea estado.
 *
 * Modo oscuro: se define a nivel de token, en tres bloques. No pongas un color
 * SOLO dentro de un bloque de tema; se rompe para quien tiene el sistema en
 * "automático".
 * =========================================================================== */

/* ── 1. Tokens: tema claro (base) ─────────────────────────────────────────── */
:root{
  /* Identidad */
  --sq-brand:#E30613;
  --sq-brand-dark:#B00510;

  /* Acción */
  --sq-primary:#2456A6;
  --sq-primary-hover:#1B4383;
  --sq-primary-soft:#E8EFF9;

  /* Estados */
  --sq-ok:#2E7D32;    --sq-ok-bg:#E8F5E9;
  --sq-warn:#B26B00;  --sq-warn-bg:#FFF6E0;
  --sq-risk:#C62828;  --sq-risk-bg:#FDECEA;
  --sq-crit:#1F2329;  --sq-crit-fg:#FFFFFF;

  /* Neutros (gris con sesgo frío hacia el azul de acción) */
  --sq-bg:#F2F4F7;
  --sq-surface:#FFFFFF;
  --sq-surface-2:#EAEDF2;
  --sq-border:#D6DBE4;
  --sq-text:#1B1F27;
  --sq-text-2:#5C6675;

  --sq-radius:10px;
  --sq-radius-sm:6px;
  --sq-shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);

  --sq-font:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --sq-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ── 2. Tokens: modo oscuro por preferencia del sistema ───────────────────── */
/*    El :not([data-theme="light"]) hace que, si la persona eligió claro a
      mano, esa elección le gane al sistema operativo.                        */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sq-brand:#FF3B45; --sq-brand-dark:#E30613;
    --sq-primary:#6C9BFF; --sq-primary-hover:#8FB3FF; --sq-primary-soft:#18243B;
    --sq-ok:#4CC262;   --sq-ok-bg:#0E2A16;
    --sq-warn:#E9A93A; --sq-warn-bg:#2A2108;
    --sq-risk:#FF5A52; --sq-risk-bg:#2E0F0D;
    --sq-crit:#0A0C10; --sq-crit-fg:#FFFFFF;
    --sq-bg:#0D1016; --sq-surface:#151A22; --sq-surface-2:#1D242F;
    --sq-border:#2B3341; --sq-text:#E5E9F0; --sq-text-2:#8B95A6;
    --sq-shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

/* ── 3. Tokens: modo oscuro elegido a mano ────────────────────────────────── */
:root[data-theme="dark"]{
  --sq-brand:#FF3B45; --sq-brand-dark:#E30613;
  --sq-primary:#6C9BFF; --sq-primary-hover:#8FB3FF; --sq-primary-soft:#18243B;
  --sq-ok:#4CC262;   --sq-ok-bg:#0E2A16;
  --sq-warn:#E9A93A; --sq-warn-bg:#2A2108;
  --sq-risk:#FF5A52; --sq-risk-bg:#2E0F0D;
  --sq-crit:#0A0C10; --sq-crit-fg:#FFFFFF;
  --sq-bg:#0D1016; --sq-surface:#151A22; --sq-surface-2:#1D242F;
  --sq-border:#2B3341; --sq-text:#E5E9F0; --sq-text-2:#8B95A6;
  --sq-shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

/* ── 4. Puente hacia Bootstrap ────────────────────────────────────────────── */
/*    A partir de aquí, .btn-primary, .text-primary, .table, .form-control,
      .alert-success y compañía ya salen con la paleta Solquim sin tocarlos.  */
:root{
  --bs-primary:var(--sq-primary);
  --bs-primary-rgb:36,86,166;
  --bs-link-color:var(--sq-primary);
  --bs-link-hover-color:var(--sq-primary-hover);
  --bs-body-bg:var(--sq-bg);
  --bs-body-color:var(--sq-text);
  --bs-secondary-color:var(--sq-text-2);
  --bs-border-color:var(--sq-border);
  --bs-border-radius:var(--sq-radius);
  --bs-border-radius-sm:var(--sq-radius-sm);
  --bs-body-font-family:var(--sq-font);
  --bs-body-font-size:.925rem;
  --bs-body-line-height:1.55;
  --bs-success:var(--sq-ok);
  --bs-warning:var(--sq-warn);
  --bs-danger:var(--sq-risk);
  --bs-emphasis-color:var(--sq-text);
}

body{
  background:var(--sq-bg);
  color:var(--sq-text);
  font-family:var(--sq-font);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.018em;text-wrap:balance}
a{text-underline-offset:2px}
:focus-visible{outline:2px solid var(--sq-primary);outline-offset:2px}

/* Botones */
.btn{--bs-btn-font-weight:600;border-radius:var(--sq-radius-sm)}
.btn-primary{
  --bs-btn-bg:var(--sq-primary); --bs-btn-border-color:var(--sq-primary);
  --bs-btn-hover-bg:var(--sq-primary-hover); --bs-btn-hover-border-color:var(--sq-primary-hover);
  --bs-btn-active-bg:var(--sq-primary-hover); --bs-btn-active-border-color:var(--sq-primary-hover);
}
/* Botón de identidad: salir, cancelar sesión. NO para guardar. */
.btn-marca{
  --bs-btn-color:#fff; --bs-btn-bg:var(--sq-brand); --bs-btn-border-color:var(--sq-brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--sq-brand-dark); --bs-btn-hover-border-color:var(--sq-brand-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--sq-brand-dark);
}
.btn-outline-secondary{
  --bs-btn-color:var(--sq-text); --bs-btn-border-color:var(--sq-border);
  --bs-btn-bg:var(--sq-surface);
  --bs-btn-hover-color:var(--sq-primary); --bs-btn-hover-bg:var(--sq-surface);
  --bs-btn-hover-border-color:var(--sq-primary);
}

/* Formularios */
.form-control,.form-select{
  background-color:var(--sq-surface); color:var(--sq-text);
  border-color:var(--sq-border); border-radius:var(--sq-radius-sm);
}
.form-control:focus,.form-select:focus{
  background-color:var(--sq-surface); color:var(--sq-text);
  border-color:var(--sq-primary); box-shadow:0 0 0 3px var(--sq-primary-soft);
}
.form-control::placeholder{color:var(--sq-text-2)}
.form-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sq-text-2);font-weight:600;margin-bottom:.25rem}
.card{background:var(--sq-surface);border-color:var(--sq-border);border-radius:var(--sq-radius)}

/* ── 5. Navbar del portal ─────────────────────────────────────────────────── */
.sq-nav{
  background:var(--sq-surface);
  border-bottom:1px solid var(--sq-border);
  border-top:3px solid var(--sq-brand);   /* la única marca constante */
  padding-top:0;padding-bottom:0;
}
.sq-nav .navbar-brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;letter-spacing:-.01em;padding:.6rem 0}
.sq-nav .navbar-brand img{height:26px;width:auto}
.sq-nav .navbar-brand small{display:block;font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--sq-text-2);line-height:1}
.sq-nav .nav-link{
  font-size:.845rem;font-weight:500;color:var(--sq-text-2);
  border-radius:var(--sq-radius-sm);padding:.55rem .75rem;position:relative;
}
.sq-nav .nav-link:hover,.sq-nav .nav-link:focus{color:var(--sq-text);background:var(--sq-surface-2)}
.sq-nav .nav-link.active{color:var(--sq-text);font-weight:700;background:transparent}
.sq-nav .nav-link.active::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:2px;
  background:var(--sq-brand);border-radius:2px;
}
.sq-nav .dropdown-menu{
  background:var(--sq-surface);border-color:var(--sq-border);
  border-radius:var(--sq-radius);box-shadow:var(--sq-shadow);font-size:.87rem;
}
.sq-nav .dropdown-item{color:var(--sq-text)}
.sq-nav .dropdown-item:hover,.sq-nav .dropdown-item:focus{background:var(--sq-surface-2);color:var(--sq-primary)}
.sq-usuario{display:flex;align-items:center;gap:.6rem;font-size:.83rem;color:var(--sq-text-2);white-space:nowrap}
.sq-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--sq-primary-soft);color:var(--sq-primary);
  display:grid;place-items:center;font-size:.68rem;font-weight:700;font-family:var(--sq-mono);
}
.sq-salir{color:var(--sq-text-2);font-size:1.1rem;line-height:1;text-decoration:none}
.sq-salir:hover{color:var(--sq-brand)}
.sq-tema{background:none;border:0;color:var(--sq-text-2);font-size:1rem;line-height:1;padding:.25rem;cursor:pointer}
.sq-tema:hover{color:var(--sq-primary)}

/* ── 6. Tarjetas de módulo (portal de entrada) ────────────────────────────── */
.sq-grupo{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sq-text-2);font-weight:600;margin:1.4rem 0 .6rem}
.sq-modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:.75rem}
.sq-modulo{
  background:var(--sq-surface);border:1px solid var(--sq-border);border-radius:var(--sq-radius);
  padding:.9rem .95rem;text-decoration:none;color:inherit;display:block;
  transition:border-color .15s,transform .15s;
}
.sq-modulo:hover{border-color:var(--sq-primary);transform:translateY(-1px);color:inherit}
.sq-modulo .ic{
  width:30px;height:30px;border-radius:8px;background:var(--sq-primary-soft);color:var(--sq-primary);
  display:grid;place-items:center;margin-bottom:.6rem;font-size:.95rem;
}
.sq-modulo .t{font-size:.88rem;font-weight:700}
.sq-modulo .d{font-size:.76rem;color:var(--sq-text-2);margin-top:.15rem;line-height:1.45}

/* ── 7. Tarjetas de indicador ─────────────────────────────────────────────── */
.sq-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:1.1rem}
.sq-kpi{
  background:var(--sq-surface);border:1px solid var(--sq-border);border-radius:var(--sq-radius);
  padding:.8rem .95rem;position:relative;overflow:hidden;
}
.sq-kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--sq-primary)}
.sq-kpi.k-ok::before{background:var(--sq-ok)}
.sq-kpi.k-warn::before{background:var(--sq-warn)}
.sq-kpi.k-risk::before{background:var(--sq-risk)}
.sq-kpi.k-crit::before{background:var(--sq-crit)}
:root[data-theme="dark"] .sq-kpi.k-crit::before{background:#8A93A3}
.sq-kpi .l{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sq-text-2);font-weight:600}
.sq-kpi .v{font-family:var(--sq-mono);font-size:1.6rem;font-weight:600;margin-top:.2rem;font-variant-numeric:tabular-nums}
.sq-kpi .c{font-size:.72rem;color:var(--sq-text-2);margin-top:.1rem}
.sq-kpi.k-ok .v{color:var(--sq-ok)} .sq-kpi.k-warn .v{color:var(--sq-warn)} .sq-kpi.k-risk .v{color:var(--sq-risk)}

/* ── 8. Tabla de reporte ──────────────────────────────────────────────────── */
/*    Pensada para los reportes anchos (12 meses): encabezado y las primeras
      columnas se quedan fijas, y la tabla tiene su propio scroll para que la
      página nunca se desborde de lado en el celular.                         */
.sq-tabla-wrap{border:1px solid var(--sq-border);border-radius:var(--sq-radius);overflow:hidden;background:var(--sq-surface)}
.sq-tabla-scroll{overflow-x:auto;overflow-y:auto;max-height:70vh}
.sq-tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem;margin:0}
.sq-tabla thead th{
  background:var(--sq-surface-2);color:var(--sq-text-2);text-align:left;
  font-size:.65rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:.55rem .7rem;border-bottom:1px solid var(--sq-border);white-space:nowrap;
  position:sticky;top:0;z-index:3;
}
.sq-tabla tbody td{padding:.5rem .7rem;border-bottom:1px solid var(--sq-border);background:var(--sq-surface)}
.sq-tabla tbody tr:hover td{background:var(--sq-surface-2)}
.sq-tabla .num,.sq-tabla th.num{
  font-family:var(--sq-mono);text-align:right;font-variant-numeric:tabular-nums;font-size:.775rem;
}
.sq-tabla .code{font-family:var(--sq-mono);font-size:.74rem;color:var(--sq-text-2)}
/* Columnas fijas: se aplican por clase, en el mismo orden en thead y tbody */
.sq-tabla .c1{position:sticky;left:0;z-index:2;width:38px}
.sq-tabla .c2{position:sticky;left:38px;z-index:2}
.sq-tabla .c3{position:sticky;left:140px;z-index:2;min-width:230px}
.sq-tabla thead .c1,.sq-tabla thead .c2,.sq-tabla thead .c3{z-index:4;background:var(--sq-surface-2)}
.sq-tabla .c3::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--sq-border)}
/* Fila de totales, fija al pie */
.sq-tabla tfoot td{
  position:sticky;bottom:0;background:var(--sq-surface-2);font-family:var(--sq-mono);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;padding:.55rem .7rem;
  border-top:1px solid var(--sq-border);z-index:3;font-size:.775rem;
}
.sq-tabla tfoot td.lbl{
  text-align:left;font-family:var(--sq-font);letter-spacing:.06em;text-transform:uppercase;
  font-size:.65rem;color:var(--sq-text-2);z-index:5;
}
.sq-mes-actual{background:var(--sq-primary-soft)!important}
.sq-tabla thead th.sq-mes-actual{color:var(--sq-primary)}
.sq-tabla-pie{
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.5rem .7rem;
  background:var(--sq-surface-2);border-top:1px solid var(--sq-border);font-size:.72rem;color:var(--sq-text-2);
}

/* ── 9. Distintivos de nivel ──────────────────────────────────────────────── */
.sq-nivel{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.05em;padding:.12rem .45rem;border-radius:5px}
.sq-nivel.ok{background:var(--sq-ok-bg);color:var(--sq-ok)}
.sq-nivel.atencion{background:var(--sq-warn-bg);color:var(--sq-warn)}
.sq-nivel.riesgo{background:var(--sq-risk-bg);color:var(--sq-risk)}
.sq-nivel.critico{background:var(--sq-crit);color:var(--sq-crit-fg)}

/* ── 10. Utilidades ───────────────────────────────────────────────────────── */
.sq-mono{font-family:var(--sq-mono)}
.sq-num{font-family:var(--sq-mono);font-variant-numeric:tabular-nums}
.sq-titulo{font-size:1.2rem;font-weight:700}
.sq-sub{color:var(--sq-text-2);font-size:.83rem}
.sq-etiqueta{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sq-text-2);font-weight:600}

@media print{
  .sq-nav,.sq-no-imprimir{display:none!important}
  .sq-tabla-scroll{max-height:none;overflow:visible}
  .sq-tabla thead th,.sq-tabla tfoot td,.sq-tabla .c1,.sq-tabla .c2,.sq-tabla .c3{position:static}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}