/* ==========================================================================
   TOR WISP — TEMA VISUAL COMÚN (capa de unificación, 09-10-2026)
   --------------------------------------------------------------------------
   Una sola fuente de identidad para las apps operativas RED TORCH
   (Facturación :17300, Créditos :17100, Caja/Tesorería :443, Inventario
   :17203). Se carga DESPUÉS del stylesheet propio de cada app y remapea sus
   variables; no toca lógica, datos ni circuitos.

   Mantenimiento: este archivo es idéntico en las cuatro apps
   (static/wisp-tema.css). Editar una copia y repartirla; no crear
   variantes locales. El acento de área se define por app en base.html
   mediante <style>:root{--wisp-acento:…}</style> después del link.

   Acentos por área (criterio visual TOR WISP):
     Finanzas (Facturación/Créditos/Caja)  verde esmeralda #047857
     Almacén (Inventario)                  ámbar           #b45309
   ========================================================================== */

:root {
  /* tokens comunes */
  --wisp-acento: #047857;
  --wisp-acento-osc: #065f46;
  --wisp-acento-suave: #e6f4ef;
  --wisp-sb-1: #0a2e23;          /* sidebar: verde institucional oscuro */
  --wisp-sb-2: #0d3b2e;
  --wisp-fondo: #F3F5F7;         /* fondo ERP acordado */
  --wisp-tinta: #1c1917;

  /* remapeo de las variables propias de cada app hacia el tema común */
  --bg: var(--wisp-fondo);                       /* facturación / caja */
  --fondo: var(--wisp-fondo);                    /* inventario */
  --blue: var(--wisp-acento);                    /* facturación / caja */
  --brand: var(--wisp-acento);                   /* créditos */
  --brand-dark: var(--wisp-acento-osc);
  --brand-soft: var(--wisp-acento-suave);
  --primario: var(--wisp-acento);                /* inventario */
  --primario-hover: var(--wisp-acento-osc);
  --primario-suave: var(--wisp-acento-suave);
  --sidebar-bg: var(--wisp-sb-1);                /* créditos */
  --sb-fondo: var(--wisp-sb-1);                  /* inventario */
  --sb-activo: var(--wisp-acento);
  --sidebar-active: var(--wisp-acento);
}

/* ---------- marco: fondo, familia y escala base ---------- */
body { background: var(--wisp-fondo); font-size: 14px; }

/* ---------- sidebar común: verde oscuro, ancho 232 px ---------- */
.sidebar {
  background: linear-gradient(180deg, var(--wisp-sb-1) 0%, var(--wisp-sb-2) 100%);
  width: 232px;
}
.page { margin-left: 232px; }        /* facturación / caja (172 → 232) */
@media (max-width: 900px) { .page { margin-left: 0; } }

/* marca textual unificada: sin logo de imagen, misma tipografía */
.side-brand img, .sidebar .brand img, .brand-logo { display: none; }
.side-brand h1, .sidebar .brand h1 {
  font-size: 15px; font-weight: 700; letter-spacing: 1.2px; color: #fff;
}
.side-brand p, .sidebar .brand p { font-size: 10px; letter-spacing: .6px; }

/* menú: 14 px, selección activa con acento del área */
.side-nav .nav-btn { font-size: 14px; }
.side-nav .nav-btn.nav-sub { font-size: 13px; }
.side-nav .nav-btn.active,
.side-nav .nav-btn.nav-sub.active,
.side-nav .nav-btn.nav-sub3.active {
  box-shadow: inset 3px 0 0 var(--wisp-acento);
}

/* ---------- encabezado y títulos ---------- */
.page-title { color: var(--wisp-tinta); font-weight: 600; }

/* ---------- tablas: encabezados claros estilo ERP ---------- */
th { background: #f1f5f9; color: #475569; }
tfoot td { background: var(--wisp-acento-suave); color: var(--wisp-tinta); }

/* ---------- estados activos con acento del área ---------- */
.chip.active { background: var(--wisp-acento); border-color: var(--wisp-acento); }

/* ---------- contraste: opciones habilitadas en blanco sobre verde ---------- */
.side-nav .nav-btn, .side-nav .nav-btn:link, .side-nav .nav-btn:visited,
.side-nav .nav-sub, .side-nav .nav-sub3,
.sidebar nav a, .sidebar nav a:link, .sidebar nav a:visited {
  color: #fff;
}
.side-nav .nav-btn:hover, .side-nav .nav-btn:focus,
.side-nav .nav-sub:hover, .side-nav .nav-sub3:hover,
.sidebar nav a:hover, .sidebar nav a:focus { color: #fff; }
.side-nav .nav-btn.active, .side-nav .nav-sub.active, .side-nav .nav-sub3.active,
.sidebar nav a.active { color: #fff; font-weight: 600; }
/* deshabilitados: atenuados pero legibles, con indicación de estado */
.side-nav .nav-btn:disabled, .side-nav .nav-btn.disabled,
.sidebar nav a.disabled, .sidebar nav a[aria-disabled="true"] { color: #87a596; }

/* ---------- pie del sidebar ---------- */
.side-foot, .sidebar-footer { color: #9db8ad; }
.side-foot a, .sidebar-footer a { color: #9db8ad; }
.side-foot a:hover, .sidebar-footer a:hover { color: #fff; }

/* P1 legibilidad (09-10-2026): encabezados de tabla con fondo de acento
   (caja table.mini usa --blue → esmeralda) llevan texto blanco. */
table.mini th { color: #fff; }

/* ==========================================================================
   SISTEMA DE CUADROS POR FUNCIÓN (09-10-2026, 3ª etapa)
   A. Indicador principal · B. Resumen secundario · C. Panel · D. Tablas
   Clases existentes cubiertas: .kpi (facturación/caja), .card.kpi
   (inventario), .cards > .card (créditos). Colores semánticos intactos.
   ========================================================================== */

/* A. Indicador principal */
:is(.kpi, .cards > .card) {
  min-height: 104px; padding: 16px; border-radius: 8px;
  border: 1px solid #d5dbe1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  background: #fff; box-sizing: border-box;
}
:is(.kpi, .cards > .card) { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; }
/* separación uniforme entre tarjetas */
.cards { gap: 16px; }

/* 4ª etapa: Créditos traía la etiqueta con alto mínimo de 2 líneas y el
   valor empujado al fondo (margin-top:auto): separación vertical excesiva.
   Se compacta: etiqueta de alto natural y valor inmediatamente debajo. */
.cards > .card .label { min-height: 0; }
.cards > .card .value { margin-top: 2px; padding-top: 0; }

/* orden común: etiqueta arriba, valor debajo, nota al final.
   Inventario trae valor primero: se invierte por flex sin tocar el HTML. */
.card.kpi .lbl { order: -1; }

/* tipografía del indicador */
:is(.kpi h3, .kpi .lbl, .cards > .card .label) {
  font-size: 12px; font-weight: 600; color: #475569; margin: 0;
  text-transform: uppercase; letter-spacing: .4px;
}
:is(.kpi .val, .kpi .num, .cards > .card .value) {
  font-size: 28px; font-weight: 600; line-height: 1.15;
}
:is(.kpi .sub, .kpi .kpi-sub) { font-size: 12px; color: #64748b; }

/* B. Resumen secundario (datos subordinados, p. ej. resúmenes diarios) */
.kpi-sm, .cards .card.kpi-sm {
  min-height: 64px; padding: 12px 16px;
}
:is(.kpi-sm .val, .kpi-sm .num) { font-size: 20px; font-weight: 600; }

/* C. Panel de gráfico o listado: mismo borde/radio; título 16 px/600 */
.card { border-radius: 8px; border: 1px solid #d5dbe1; }
:is(.card > h2, .card-head h2) { font-size: 16px; font-weight: 600; }

/* D. Tabla: filas con mínimo ~40 px vía relleno, texto 14 px */
tbody td { padding-top: 9px; padding-bottom: 9px; }

/* Facturación: etiquetas de barras contiguas escalonadas para no superponerse */
.bf-bar.egr span { top: -36px; }

/* ==========================================================================
   4ª etapa (09-10-2026): MENÚ CONTRAÍBLE COMÚN en pantallas ≤1000 px.
   El lateral sale del flujo (drawer fijo) y se abre con el botón ☰ que cada
   base.html inserta con clase .wisp-hamb; el velo .wisp-overlay cierra.
   Neutraliza las variantes propias de "menú apilado arriba" de Créditos e
   Inventario. Facturación y Tesorería ya tenían este patrón (nav-open).
   ========================================================================== */
.wisp-hamb { display: none; position: fixed; top: 10px; left: 10px; z-index: 1300;
  background: #fff; border: 1px solid #d5dbe1; border-radius: 8px; padding: 7px 9px;
  cursor: pointer; color: #0a2e23; box-shadow: 0 1px 4px rgba(16,24,40,.18); }
.wisp-hamb svg { width: 18px; height: 18px; display: block; }
.wisp-overlay { display: none; position: fixed; inset: 0; background: rgba(15,25,45,.45); z-index: 1150; }

@media (max-width: 1000px) {
  .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; height: 100%;
    width: 232px !important; transform: translateX(-105%);
    transition: transform .25s ease; z-index: 1200; overflow-y: auto; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.nav-open .wisp-overlay { display: block; }
  .wisp-hamb { display: block; }
  .content, .cuerpo, main.content { margin-left: 0 !important; }

  /* Créditos ≤900 apilaba el menú en horizontal: se restaura lista vertical */
  .sidebar .menu { display: block; overflow: visible; padding: 6px 8px; }
  .sidebar .menu-group { display: block; }
  .sidebar .menu-title { display: block; }
  .sidebar .menu a { white-space: normal; border-bottom: none;
    border-left: 3px solid transparent; }
  .sidebar .search-side { display: block; }

  /* scroll horizontal solo DENTRO de las tablas, nunca de la página */
  .content table, .cuerpo table, main.content table {
    display: block; width: 100%; overflow-x: auto; }
}

/* Detalle 4ª etapa: con el drawer abierto el ☰ corre a la derecha del
   lateral para no tapar el logo, y actúa como botón de cierre. */
body.nav-open .wisp-hamb { left: 242px; }