/* ═══════════════════════════════════════════════════════════════════════════
   bastien-marca.css — implementación de la NORMA DE MARCA Grupo Bastien
   ───────────────────────────────────────────────────────────────────────────
   La NORMA manda: shared/marca/NORMA.md (y el manual oficial, shared/marca/
   Manual-Normas-Graficas-Grupo-Bastien.pdf). Este archivo sólo la implementa.
   Romperla: sólo Yoel o Álvaro, y queda registrado en NORMA.md § Excepciones.

   CANÓNICO acá. Cada app sirve una COPIA BYTE-IDÉNTICA como /marca.css, con la
   carpeta /marca/ al lado (logos oficiales + íconos):
       bash scripts/marca-sync.sh            # copia a todas
       bash scripts/marca-sync.sh --check    # falla si alguna copia divergió
       python3 scripts/marca-check.py        # verifica que las apps cumplan la norma
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colores corporativos (manual pág. 7) ── */
  --verde-900: #012e36;
  --verde-800: #2c484d;
  --verde-700: #1d5856;
  --verde-500: #5a8486;
  --verde-300: #96aeac;
  /* ── Tintes (manual pág. 8: cada color al 10-90 % sobre blanco). Sólo estos. ── */
  --verde-300-50: #cad6d6;
  --verde-300-40: #d5dfde;
  --verde-300-30: #e0e7e6;
  --verde-300-20: #eaefee;
  --verde-300-10: #f4f7f7;
  --verde-500-10: #eef3f3;
  --verde-700-10: #e8eeee;
  --verde-800-90: #415a5f;
  --verde-800-70: #6b7f82;
  --verde-900-90: #1a434a;
  --verde-900-80: #34585e;

  /* ── Dorado: el ÚNICO color que se suma al manual. Sólo detalles. ── */
  --oro:       #c5a253;
  --oro-osc:   #9a7b34;   /* versión oscura: sólo para texto chico dorado sobre fondo claro */
  --oro-60:    #dcc798;
  --oro-40:    #e8daba;
  --oro-20:    #f3ecdd;
  --oro-10:    #f9f6ee;
  /* nombres de la v1, conservados para no romper las apps */
  --oro-claro: var(--oro-40);
  --oro-tinte: var(--oro-10);
  --verde-200: var(--verde-300-50);
  --verde-100: var(--verde-300-30);
  --verde-50:  var(--verde-300-10);

  /* ── Tokens semánticos (lo que usan las apps) ── */
  --bg:          var(--verde-300-10);
  --bg-alt:      var(--verde-300-30);
  --card:        #ffffff;
  --card-hover:  var(--verde-500-10);
  --line:        var(--verde-300-40);
  --line-soft:   var(--verde-300-20);
  --ink:         var(--verde-900);
  --ink-soft:    var(--verde-800-90);
  --ink-mute:    var(--verde-800-70);
  --accent:      var(--verde-700);
  --accent-hover:var(--verde-900);
  --accent-soft: var(--verde-700-10);
  --on-accent:   #ffffff;
  --info:        var(--verde-500);
  --warn:        var(--oro-osc);   /* "atención" es dorado: el ámbar no está en la marca */
  --warn-soft:   var(--oro-20);

  /* ── EXCEPCIÓN autorizada (Yoel, 05-nov-2026): verde/rojo de SEÑAL.
     Sólo para variaciones (sube/baja, regla #8) y alertas. Nunca decoración. ── */
  --good:      #1f8a4c;
  --good-soft: #e3f4ea;
  --bad:       #c0392b;
  --bad-70:    #d3746b;
  --bad-soft:  #fbe9e7;

  /* Series de gráficos, en este orden. Si hacen falta más: tintes de esta misma lista. */
  --serie-1: var(--verde-700);
  --serie-2: var(--oro);
  --serie-3: var(--verde-500);
  --serie-4: var(--verde-300);
  --serie-5: var(--verde-900);
  --serie-6: var(--oro-60);

  /* Escala de antigüedad/criticidad: dorado → rojo de señal */
  --calor-1: var(--oro-40);
  --calor-2: var(--oro);
  --calor-3: var(--oro-osc);
  --calor-4: var(--bad-70);
  --calor-5: var(--bad);

  /* Forma */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(1,46,54,.06), 0 1px 3px rgba(1,46,54,.05);
  --shadow-md: 0 10px 28px -10px rgba(1,46,54,.28), 0 2px 6px rgba(1,46,54,.06);

  /* Tipografía: UNA sola, Nunito Sans (Google Fonts), la más cercana a Avenir (99 % de ancho).
     El logo NO es texto: es la imagen oficial y conserva su Avenir. */
  --font: 'Nunito Sans', sans-serif;

  color-scheme: light;
}

/* ── Variante PANTALLA (TV Gerencia kiosco, TV Móvil, TV del CRM, Brain) ─────
   <html data-marca="pantalla">: fondo verde 900; tarjetas y líneas en sus tintes. */
:root[data-marca="pantalla"] {
  --bg:          var(--verde-900);
  --bg-alt:      var(--verde-900-90);
  --card:        var(--verde-900-90);
  --card-hover:  var(--verde-900-80);
  --line:        var(--verde-900-80);
  --line-soft:   var(--verde-900-90);
  --ink:         #ffffff;
  --ink-soft:    var(--verde-300);
  --ink-mute:    var(--verde-500);
  --accent:      var(--oro);
  --accent-hover:var(--oro-60);
  --accent-soft: rgba(197,162,83,.14);
  --on-accent:   var(--verde-900);
  --warn:        var(--oro);
  --warn-soft:   rgba(197,162,83,.14);
  /* señal (excepción) en su versión para fondo oscuro */
  --good:      #5fd08f;  --good-soft: rgba(95,208,143,.14);
  --bad:       #ff7a6b;  --bad-soft:  rgba(255,122,107,.14);  --bad-70: #ff7a6b;
  --serie-1: var(--verde-300); --serie-2: var(--oro); --serie-3: var(--verde-500);
  --serie-4: var(--verde-300-30); --serie-5: var(--oro-60); --serie-6: var(--verde-700);
  --shadow-sm: 0 1px 2px rgba(1,46,54,.5);
  --shadow-md: 0 12px 30px -12px rgba(1,46,54,.9);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--oro-40); color: var(--verde-900); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }

/* ── Logo: SIEMPRE la imagen oficial (marca/…png). Nunca texto, nunca recoloreado. ──
   Sobre fondos oscuros (verde 900/800/700/500): versión BLANCA. Sobre claros: verde 900.
   Rutas RELATIVAS a este CSS a propósito: la TV lo sirve desde /tv-gerencia/marca.css. */
.bm-iso {
  display: inline-block; width: 30px; height: 30px; flex-shrink: 0;
  background: url('marca/isotipo-blanco.png') center / contain no-repeat;
}
.bm-iso.sobre-claro { background-image: url('marca/isotipo-verde-900.png'); }
.bm-logo { display: block; height: auto; }   /* <img class="bm-logo" src="/marca/grupo-bastien-blanco.png"> */

/* ── Íconos: SÓLO de línea, del sprite oficial (marca/iconos.svg). Sin emojis. ──
   <svg class="bm-ico"><use href="/marca/iconos.svg#cobranza"/></svg>                 */
.bm-ico {
  width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Barra superior común a todas las apps ────────────────────────────────
   <header class="bm-bar">
     <a class="bm-erp" href="https://erp.grupobastien.cl">← ERP</a>
     <span class="bm-iso" role="img" aria-label="Grupo Bastien"></span>
     <div class="bm-titulo"><b>Cobranza</b><small>Finanzas</small></div>
     <div class="bm-bar-der"> … usuario, filtros … </div>
   </header>                                                                */
.bm-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 22px;
  background: linear-gradient(100deg, var(--verde-900) 0%, var(--verde-700) 100%);
  color: #ffffff;
  border-bottom: 2px solid var(--oro);
  position: relative;
}
.bm-bar a { color: inherit; }
.bm-erp {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  color: var(--oro-40) !important; padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(197,162,83,.35); white-space: nowrap;
}
.bm-erp:hover { background: rgba(197,162,83,.16); color: #ffffff !important; }
.bm-titulo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bm-titulo b { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: #ffffff; white-space: nowrap; }
.bm-titulo small { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.bm-bar-der { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--verde-300-30); flex-wrap: wrap; justify-content: flex-end; }

/* ── Piezas comunes ── */
.bm-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.bm-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-osc); }
.bm-sec { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-700); }
.bm-sec::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--oro); flex-shrink: 0; }
.bm-sec::after { content: ''; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 700px) {
  .bm-bar { padding: 8px 14px; gap: 10px; }
  .bm-titulo small { display: none; }
}