/* ==========================================================================
   Segunda Jugada · Capa FM — ALIAS del 2J Brand System (product_system.css)
   --------------------------------------------------------------------------
   IMPORTANTE: esto NO es una paleta nueva. Los tokens --fm-* son ALIAS de las
   variables --prod-* del sistema de marca, para que las vistas estilo FM usen
   EXACTAMENTE la misma identidad que el resto de la app (colores, tipografía,
   radios) y hereden el tema claro/oscuro sin duplicar nada.

   Cambiar la identidad = cambiar product_system.css (fuente única).
   Aquí solo se define el mapeo + componentes .fm-* reutilizables.
   ========================================================================== */
:root {
  /* Superficies (marca) */
  --fm-bg:        var(--prod-bg, #0b1626);
  --fm-panel:     var(--prod-panel-flat, rgba(18,30,50,.94));
  --fm-panel-2:   var(--prod-bg-soft, #101f33);
  --fm-line:      var(--prod-line, rgba(144,161,185,.28));
  --fm-line-2:    rgba(144, 161, 185, 0.45);
  /* Superficies del bloque de perfil FM: iban como literales dentro del propio HTML,
     y un estilo en linea no lo puede corregir ninguna hoja. Ahora son tokens. */
  --fm-surface-1: rgba(2, 6, 23, 0.32);
  --fm-surface-2: rgba(2, 6, 23, 0.40);
  --fm-surface-3: rgba(2, 6, 23, 0.85);
  /* Tinta para lo que va SOBRE el dorado (la pastilla "Rol optimo"): antes usaba
     --fm-bg, que en claro se vuelve papel y dejaba letra clara sobre dorado. */
  --fm-on-gold: #0b1626;
  /* Tinta (marca) */
  --fm-ink:       var(--prod-text, #f5f7fa);
  --fm-ink-2:     var(--prod-muted-soft, #c3cee0);
  --fm-ink-3:     var(--prod-muted, #a7b6cf);
  /* Acento e identidad (marca) */
  --fm-gold:      var(--prod-amber, #f4b400);
  --fm-accent:    #4a86e8;
  /* Semánticos de estado: verde/rojo de marca; ámbar propio para no
     confundirse con el dorado de acento. */
  --fm-good:      var(--prod-success, #22c55e);
  --fm-mid:       #e2a53a;
  --fm-low:       var(--prod-danger, #d64545);
  --fm-teal:      var(--prod-info, #22d3ee);
  /* Radios, sombras y tipografía (marca) */
  --fm-radius:    var(--prod-radius-md, 16px);
  --fm-radius-sm: 10px;
  --fm-shadow:    var(--prod-shadow-md, 0 16px 36px rgba(0,0,0,.24));
  --fm-sans:      var(--prod-font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Nota: los alias usan valores de respaldo en var(--prod-x, fallback) donde
   importa, así que no hace falta un bloque de fallback aparte. */

/* ---------- Componentes reutilizables (.fm-*) ---------- */
.fm-card { background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: var(--fm-radius); padding: 1rem 1.1rem; color: var(--fm-ink); }
.fm-card--accent { border-left: 4px solid var(--fm-gold); }
.fm-panel-2 { background: var(--fm-panel-2); border: 1px solid var(--fm-line); border-radius: 13px; }

.fm-label { font-size: var(--prod-fs-xs, .7rem); text-transform: uppercase; letter-spacing: .08em; color: var(--fm-ink-3); font-weight: 800; }
.fm-title { font-size: var(--prod-fs-lg, 1.05rem); font-weight: 800; color: var(--fm-ink); margin: 0; }

.fm-chip { font-size: var(--prod-fs-sm, .78rem); font-weight: 800; padding: .5rem .85rem; border-radius: var(--fm-radius-sm); border: 1px solid var(--fm-line-2); background: var(--fm-panel); color: var(--fm-ink-2); display: inline-flex; gap: .4rem; align-items: center; }
.fm-chip b { color: var(--fm-ink); }
.fm-chip--good { color: var(--fm-good); border-color: rgba(34,197,94,.4);  background: rgba(34,197,94,.12); }
.fm-chip--warn { color: var(--fm-mid);  border-color: rgba(226,165,58,.4); background: rgba(226,165,58,.12); }
.fm-chip--low  { color: var(--fm-low);  border-color: rgba(214,69,69,.4);  background: rgba(214,69,69,.12); }

.fm-tag { font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.fm-tag--good { color: var(--fm-good); background: rgba(34,197,94,.14); }
.fm-tag--warn { color: var(--fm-mid);  background: rgba(226,165,58,.14); }
.fm-tag--low  { color: var(--fm-low);  background: rgba(214,69,69,.14); }
.fm-tag--gold { color: var(--prod-midnight, #0b1626); background: var(--fm-gold); }

.fm-pill { font-size: var(--prod-fs-sm, .8rem); font-weight: 700; color: var(--fm-ink-2); background: var(--fm-panel-2); border: 1px solid var(--fm-line-2); border-radius: 999px; padding: .3rem .7rem; text-decoration: none; }

.fm-table { width: 100%; border-collapse: collapse; font-size: var(--prod-fs-sm, .82rem); color: var(--fm-ink); }
.fm-table th, .fm-table td { padding: .5rem .7rem; border-top: 1px solid var(--fm-line); text-align: left; white-space: nowrap; }
.fm-table thead th { border-top: none; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fm-ink-3); }
.fm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fm-table tbody tr:hover { background: rgba(144,161,185,.07); }

/* Color helpers por estado (texto) */
.fm-t-good { color: var(--fm-good) !important; }
.fm-t-mid  { color: var(--fm-mid)  !important; }
.fm-t-low  { color: var(--fm-low)  !important; }
.fm-t-gold { color: var(--fm-gold) !important; }
.fm-t-muted{ color: var(--fm-ink-3)!important; }

/* ==========================================================================
   Componentes de apartado (usados por _zone_header.html y _zone_chips.html)
   Cambiar aqui = cambia en todos los apartados que los usen.
   ========================================================================== */
.zh { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:0 0 .2rem; }
.zh-sp { flex:1 1 auto; }
.zh-kit { width:8px; height:42px; border-radius:4px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--zh-k1) 0 50%, var(--zh-k2) 50% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.zh-id { min-width:0; }
.zh-title { margin:0; font-size:1.4rem; font-weight:900; letter-spacing:-.01em; color:var(--fm-ink); line-height:1.1; }
.zh-context { margin:.16rem 0 0; font-size:.8rem; font-weight:700; color:var(--fm-ink-3); }

.zc-row { display:flex; gap:.6rem; flex-wrap:wrap; margin:.9rem 0 1rem; }
.zc-chip { border:1px solid var(--fm-line); background:var(--fm-panel); border-radius:12px; padding:.55rem .9rem; min-width:96px; }
.zc-n { font-size:1.35rem; font-weight:900; line-height:1; color:var(--fm-ink); font-variant-numeric:tabular-nums; }
.zc-d { font-size:.78rem; font-weight:700; opacity:.55; }
.zc-k { font-size:.58rem; text-transform:uppercase; letter-spacing:.07em; color:var(--fm-ink-3); font-weight:800; margin-top:.2rem; }
.zc-gold .zc-n { color:var(--fm-gold); }
.zc-ok   .zc-n { color:var(--fm-good); }
.zc-red  .zc-n { color:var(--fm-low); }
.zc-mid  .zc-n { color:var(--fm-mid); }
.zc-blue .zc-n { color:var(--fm-accent); }

/* --- Ritmo de pagina (identidad = organizacion) ---------------------------------------
   Tres anchos y nada mas, para que todas las pantallas "encajen" entre si:
     --fm-page        estandar (la mayoria de apartados)
     --fm-page-wide   pizarras y vistas de proyeccion (11 inicial, stats, registro)
     --fm-page-narrow lecturas de una columna (bandeja/feed)
   Tambien el padding y el tamano de titulo de referencia. */
:root{
  --fm-page: 1120px;
  --fm-page-wide: 1520px;
  --fm-page-narrow: 860px;
  --fm-page-pad: 1rem;
  --fm-h1: 1.5rem;
}
.fm-page      { width:100%; max-width:var(--fm-page);        margin:0 auto; padding:var(--fm-page-pad); }
.fm-page-wide { width:100%; max-width:var(--fm-page-wide);   margin:0 auto; padding:var(--fm-page-pad); }
.fm-page-narrow{width:100%; max-width:var(--fm-page-narrow); margin:0 auto; padding:var(--fm-page-pad); }

/* --- Modo claro: componentes compartidos -------------------------------------------
   Los tokens ya cambian solos (product_system.css define la paleta clara), pero muchas
   pantallas heredadas pintan superficies oscuras con literales en su propio <style>.
   Aqui se corrigen los COMPONENTES COMPARTIDOS (los que esta identidad ha unificado),
   que es lo que aparece en todas las pantallas: sub-nav de zona, chips de estado,
   tarjetas y tablas. Lo que siga oscuro sera CSS propio de una pantalla concreta. */
:root[data-theme="light"] {
  --fm-ink:   #0f172a;
  --fm-ink-2: rgba(15,23,42,.78);
  --fm-ink-3: rgba(15,23,42,.58);
  --fm-line:  rgba(15,23,42,.14);
  --fm-line-2:rgba(15,23,42,.22);
  --fm-panel: #ffffff;
  --fm-panel-2: #f4f7fb;
  --fm-surface-1: #f8fafc;
  --fm-surface-2: #ffffff;
  --fm-surface-3: #ffffff;
  --fm-on-gold: #3f2d00;
  /* El ambar medio (#e2a53a) se queda en 2,2 de contraste sobre papel. */
  --fm-mid: #96650f;
  /* Los tres semanticos nacieron para fondo oscuro: sobre papel el verde se queda en
     2,3 y el cian en 1,8. Se oscurecen manteniendo el significado. */
  --fm-good: #15803d;
  --fm-low: #b91c1c;
  --fm-teal: #0e7490;
}
:root[data-theme="light"] .zone-subnav a {
  color: rgba(15,23,42,.78);
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.14);
}
:root[data-theme="light"] .zone-subnav a.on {
  background: rgba(244,180,0,.18);
  border-color: rgba(244,180,0,.62);
  color: #7a5b00;
}
:root[data-theme="light"] .zone-subnav .zt { color: rgba(15,23,42,.55); }
:root[data-theme="light"] .zc-chip {
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
:root[data-theme="light"] .zc-n { color: #0f172a; }
:root[data-theme="light"] .zc-k { color: rgba(15,23,42,.58); }
:root[data-theme="light"] .fm-card,
:root[data-theme="light"] .fm-table { background: #ffffff; border-color: rgba(15,23,42,.12); }

/* Titulos que usan el color secundario del club: en claro puede ser casi blanco
   (aqui #ebebeb) y quedar ilegible sobre fondo claro. */
:root[data-theme="light"] body.prod-commercial :where(.card, .panel, .product-card) :where(h2, h3),
:root[data-theme="light"] body.prod-commercial .eyebrow,
:root[data-theme="light"] body.prod-commercial .kicker,
:root[data-theme="light"] body.prod-commercial .hero-kicker { color: rgba(15,23,42,.72); }