/* =============================================================================
   EAGLE — the 2026-09 redesign (boards 6a-6o).

   Loaded AFTER ark.css. It does two jobs:

   1. It redefines ark's tokens with the new palette and typography, so every
      screen that still speaks ark's vocabulary (.card, .pill, .kpi, table.data)
      changes skin at once, before any of them is rewritten.
   2. It adds the new shell and the component primitives the boards share:
      navy sidebar with the campaign subtree, dark 52px header, cards, KPI strip,
      toggles, chips, icon buttons, state dots and tables.

   Fonts are SELF-HOSTED (web/static/fonts). No CDN anywhere: the CSP is
   `default-src 'self'`, and a second origin would also cost a round trip before
   the first paint.
   ============================================================================= */

/* ----------------------------------------------------------------- IBM Plex --
   Only the weights the design uses, latin + latin-ext (Spanish lives in latin;
   latin-ext is there for names that carry other diacritics). `font-display:swap`
   so text is readable while the file arrives. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------------ tokens ---
   The names on the left are ark's, kept so the screens that have not been
   rewritten yet inherit the new skin. The `--e-` names are the new system. */
:root{
  /* marca */
  --navy-900:#0e1732;          /* barra, cabeceras, KPI en negativo */
  --navy-700:#1a2456;          /* botón primario, enlaces */
  --red-600:#cf2440;           /* la lira: lo real y lo destructivo */
  --danger:#cf2440;

  --e-navy-800:#16204a;        /* campos sobre fondo oscuro */
  --e-navy-600:#242f5e;        /* ítem activo de la barra */
  --e-navy-500:#252f5e;        /* botón sobre cabecera oscura */
  --e-navy-linea:#1b2650;      /* separadores dentro de la barra */
  --e-navy-sub:#2a3563;        /* borde del subárbol y de los campos oscuros */

  /* datos y estados */
  --e-dato:#3b5bc0;
  --e-dato-fuerte:#2b4ba8;
  --success:#0f7a5a;  --success-bg:#e6f4ef;
  --caution:#d98324;  --caution-bg:#fdf3e0;
  --e-aviso-texto:#a1620a;
  --danger-bg:#fdeaed;
  --info-bg:#eef1f9;

  /* texto */
  --ink:#0e1732;               /* principal */
  --e-ink-2:#3a4460;           /* secundario */
  --slate-400:#5a6480;         /* terciario (ark lo usa para .muted) */
  --e-ink-4:#6b7590;           /* marcador de posición */
  /* sobre fondo oscuro */
  --e-claro:#ffffff;
  --e-claro-2:#93a0c4;
  --e-claro-3:#7b88b0;
  --e-claro-4:#a9b4d4;
  --e-claro-5:#c9d3ee;
  --e-claro-6:#5d6a90;
  --e-verde-claro:#7de0b4;
  --e-verde-punto:#2fd39a;

  /* superficies */
  --paper:#f6f7fa;             /* lienzo */
  --surface:#ffffff;
  --e-relleno:#eef0f5;
  --e-relleno-2:#f1f3f9;
  --e-relleno-3:#eef1f9;
  --e-cab-tabla:#f8f9fc;
  --e-campo-bg:#fbfbfd;

  /* bordes */
  --line:#e4e7ef;              /* tarjeta */
  --e-borde-campo:#dfe3ec;
  --e-borde-btn:#cfd6e4;
  --e-borde-fila:#f4f5f9;
  --e-borde-fila-2:#f7f8fb;
  --e-borde-peligro:#f2c3cc;

  /* tipografía */
  --font-ui:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-display:'IBM Plex Sans','Segoe UI Semibold','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Cascadia Mono','Consolas','Courier New',monospace;

  --radius:8px;
  --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(14,23,50,.05),0 1px 3px rgba(14,23,50,.05);
  --shadow-md:0 6px 20px rgba(14,23,50,.10);
  --sidebar-w:252px;
}

/* ------------------------------------------------------------- tema oscuro ---
   Derived from the new palette (the design ships one palette only). The sidebar
   and the header are navy in both themes, so they barely move; what changes is
   the canvas, the cards and the text. Every pair here clears 4.5:1. */
[data-theme="dark"]{
  --paper:#0c111f;
  --surface:#141b2d;
  --ink:#e7eaf2;
  --e-ink-2:#c3cbe0;
  --slate-400:#9aa6c4;
  --e-ink-4:#8592b4;

  --line:#232c45;
  --e-borde-campo:#2a3450;
  --e-borde-btn:#38446a;
  --e-borde-fila:#1c2440;
  --e-borde-fila-2:#1a2138;
  --e-borde-peligro:#5e2836;

  --e-relleno:#1a2238;
  --e-relleno-2:#19203a;
  --e-relleno-3:#1c2647;
  --e-cab-tabla:#19213a;
  --e-campo-bg:#121a2c;

  --e-dato:#7f96d4;
  --e-dato-fuerte:#9db1e8;
  --success:#4cc38a;  --success-bg:#17291f;
  --caution:#e2a54e;  --caution-bg:#3a2a16;
  --e-aviso-texto:#f0c99a;
  --danger-bg:#3a1620;
  --info-bg:#1c2647;

  --navy-700:#9db1e8;          /* enlaces legibles sobre oscuro */
  --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.5);
}

/* La raiz manda: ark.css mide casi todo en `rem`, asi que subirla un 20 % sube
   tambien las pantallas que el rediseno todavia no ha tocado. 16 -> 19,2 px. */
html{font-size:19.2px}
body{font-family:var(--font-ui);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:var(--font-display);color:var(--ink)}
:focus-visible{outline:2px solid var(--e-dato);outline-offset:2px}

/* =========================================================== armazón =========
   Sidebar 228px navy + dark 52px header + canvas. */
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}

.sidebar{background:var(--navy-900);border-right:0;color:var(--e-claro-2);
  padding:14px 10px 12px;gap:0}

/* marca: cuadrado rojo con el rayo + nombre */
.sidebar .brand,.sidebar a.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
/* El águila va SOBRE el marino, sin cuadro rojo: la variante «blanca» está dibujada
   para este fondo (su cabeza se rellena de marino), y sobre rojo se enturbia. */
.sidebar .brand .brandmark{width:32px;height:32px;flex:none}
.sidebar .brand .wordmark{font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--e-claro);letter-spacing:.03em;line-height:1.1}
.sidebar .brand .wordmark small{display:block;font-size:11.5px;letter-spacing:.1em;
  color:var(--e-claro-3);font-weight:500;text-transform:uppercase}
.sidebar a.brand:hover .wordmark{color:var(--e-claro)}

.nav-global{display:flex;flex-direction:column;gap:2px}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;
  margin:0;border:0;border-radius:7px;font-family:var(--font-ui);font-size:16px;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--e-claro-2);line-height:1}
.sidebar .nav-link:hover{background:var(--e-navy-linea);color:var(--e-claro);text-decoration:none}
.sidebar .nav-link.active{background:var(--e-navy-600);color:var(--e-claro);font-weight:600}
.sidebar .nav-ic{width:16px;color:inherit}
.sidebar .nav-ic .ic{width:19px;height:19px}
.sidebar .nav-txt{flex:1;font-size:16px}

/* contador del menú: rojo solo cuando exige acción */
.nav-badge.nav-cuenta,.sidebar .nav-badge{margin-left:auto;min-width:0;height:auto;
  padding:1px 7px;border:0;border-radius:10px;background:var(--e-navy-linea);
  color:var(--e-claro-2);font-family:var(--font-mono);font-size:12.5px;font-weight:600}
.sidebar .nav-badge.exige{background:var(--red-600);color:var(--e-claro)}

/* separador y rótulo de sección */
.nav-sep{height:1px;background:var(--e-navy-linea);margin:12px 8px}
.nav-seccion{font-size:11.5px;letter-spacing:.12em;color:var(--e-claro-6);font-weight:600;
  padding:0 12px 6px;text-transform:uppercase}

/* subárbol de la campaña abierta (sustituye la fila de pestañas) */
.nav-camp{display:flex;flex-direction:column;gap:1px;padding:4px 0 6px}
.nav-camp-nombre{display:flex;align-items:center;gap:7px;padding:4px 12px 6px 22px;
  margin-left:12px;border-left:1px solid var(--e-navy-sub);font-size:14px;
  color:var(--e-claro-5);overflow:hidden}
/* El nombre va en su propio hueco: los puntos suspensivos no funcionan sobre el
   texto suelto de una caja flexible. */
.nav-camp-nombre .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-sub{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 22px;
  margin-left:12px;border-left:1px solid var(--e-navy-sub);color:var(--e-claro-2);
  font-size:15.5px;line-height:1}
.nav-sub:hover{color:var(--e-claro);text-decoration:none}
.nav-sub .ic{width:17px;height:17px;flex:none}
.nav-sub .nav-txt{flex:1}
.nav-sub.active{color:var(--e-claro);font-weight:600;box-shadow:inset 2px 0 0 var(--red-600)}

/* pie de la barra: estado de Chartmetric y sesión */
.nav-pie{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:12px 8px 0;
  border-top:1px solid var(--e-navy-linea)}
.nav-cm{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12.5px;
  color:var(--e-verde-claro);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.nav-cm .punto{width:6px;height:6px;border-radius:50%;background:var(--e-verde-punto);flex:none}
.nav-cm.off{color:var(--e-claro-3)}
.nav-cm.off .punto{background:var(--e-claro-6)}
.nav-cm.vivo .punto{background:var(--red-600);animation:e-latido 1.2s ease-in-out infinite}
@keyframes e-latido{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.nav-cm.vivo .punto{animation:none}}
.nav-sesion{display:flex;align-items:center;gap:9px}
.nav-sesion .avatar{width:34px;height:34px;border-radius:7px;background:var(--e-navy-500);
  color:var(--e-claro);display:grid;place-items:center;font-size:14.5px;font-weight:600;flex:none}
.nav-sesion .quien{min-width:0;flex:1}
.nav-sesion .usuario{font-size:15px;color:var(--e-claro);font-weight:600;line-height:1.2}
.nav-sesion .rol{font-size:12.5px;color:var(--e-claro-3);line-height:1.2}
.nav-sesion .salir{display:grid;place-items:center;background:none;border:0;padding:0;
  cursor:pointer;color:var(--e-claro-3)}
.nav-sesion .salir:hover{color:var(--e-claro)}

/* ------------------------------------------------------------- cabecera -----*/
.topbar{height:58px;padding:0 20px;background:var(--navy-900);border-bottom:0;gap:12px}
.topbar .section{font-family:var(--font-ui);font-size:17.5px;font-weight:600;color:var(--e-claro)}
.tb-meta{font-family:var(--font-mono);font-size:14px;color:var(--e-claro-2);white-space:nowrap}
.tb-buscar{height:38px;padding:0 13px;border:1px solid var(--e-navy-sub);border-radius:7px;
  background:var(--e-navy-800);color:var(--e-claro-2);max-width:330px;flex:1 1 260px}
.tb-buscar:focus-within{border-color:var(--e-claro-2);background:var(--e-navy-800)}
.tb-buscar input{color:var(--e-claro);font-size:15.5px}
.tb-buscar input::placeholder{color:var(--e-claro-2)}
.tb-kbd{font-family:var(--font-mono);font-size:12px;color:var(--e-claro-3);
  border:1px solid var(--e-navy-sub);border-radius:4px;padding:1px 5px;background:transparent}
/* botón sobre la cabecera oscura */
.btn-cab{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  background:var(--e-navy-500);border:0;border-radius:6px;color:var(--e-claro);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-cab:hover{background:var(--e-navy-600);text-decoration:none;color:var(--e-claro)}
.btn-cab.real{background:var(--red-600)}
.btn-cab.real:hover{background:#b81f38}
.topbar .btn.btn-ghost{color:var(--e-claro-2);border-color:transparent}
.topbar .btn.btn-ghost:hover{color:var(--e-claro);background:var(--e-navy-600)}

.content{padding:18px 22px 24px}
.stage{grid-template-columns:minmax(0,1fr)}

/* ======================================================= componentes =========*/
/* tarjeta */
.card,.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:none}
.card.pad,.tarjeta{padding:15px 18px}
.tarjeta{display:flex;flex-direction:column;gap:10px}

/* rótulo de tarjeta: icono + texto en versalitas */
.rotulo{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  letter-spacing:.07em;color:var(--e-ink-2);text-transform:uppercase;margin:0}
.rotulo .ic{width:18px;height:18px;color:var(--slate-400)}
.rotulo .n{font-family:var(--font-mono);font-size:13px;color:var(--slate-400);
  letter-spacing:0;text-transform:none}
.rotulo .der{margin-left:auto;display:flex;align-items:center;gap:10px}
/* la ayuda vive en un icono, nunca en un párrafo */
.pista{display:grid;place-items:center;cursor:help;color:var(--e-ink-4)}
.pista .ic{width:17px;height:17px}

/* tira de KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:12px 15px}
.kpi .l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400);
  font-weight:600;margin-bottom:4px}
.kpi .v{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--ink);line-height:1.15}
.kpi .s{font-family:var(--font-mono);font-size:12px;color:var(--e-ink-4);margin-top:2px}
.kpi.inv{background:var(--navy-900);border-color:var(--navy-900)}
.kpi.inv .l,.kpi.inv .s{color:var(--e-claro-4)}
.kpi.inv .v{color:var(--e-claro)}

/* conmutador: dos vistas del mismo dato, dentro de la cabecera de su tarjeta */
.conmutador{display:inline-flex;gap:2px;padding:2px;background:var(--e-relleno-2);
  border-radius:7px}
.conmutador button,.conmutador a{display:inline-flex;align-items:center;gap:6px;height:29px;
  padding:0 9px;border:0;border-radius:5px;background:transparent;color:var(--slate-400);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  text-decoration:none}
.conmutador a:hover{color:var(--ink);text-decoration:none}
.conmutador button .ic{width:17px;height:17px}
.conmutador button.activa,.conmutador a.activa{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(14,23,50,.12)}
.conmutador button .n,.conmutador a .n{font-family:var(--font-mono);font-size:13px;opacity:.75}
.conmutador.grande button{height:33px;padding:0 14px;font-size:15px}
[data-theme="dark"] .conmutador{background:var(--e-relleno)}
[data-theme="dark"] .conmutador button.activa{background:var(--e-relleno-3);color:var(--ink)}

/* chip de filtro con contador */
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  color:var(--e-ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  white-space:nowrap}
.chip:hover{border-color:var(--e-borde-btn);text-decoration:none}
.chip .punto{width:7px;height:7px;border-radius:50%;flex:none}
.chip .n{font-family:var(--font-mono);font-size:12.5px;opacity:.8}
.chip.activo{background:var(--e-relleno-3);color:var(--navy-700);border-color:#c9d3ee}
[data-theme="dark"] .chip.activo{border-color:var(--e-dato)}

/* botón de icono */
.btn-icono{width:34px;height:34px;display:inline-grid;place-items:center;background:var(--surface);
  border:1px solid var(--e-borde-btn);border-radius:6px;cursor:pointer;color:var(--e-ink-2);padding:0}
.btn-icono:hover{border-color:var(--navy-700);color:var(--navy-700);text-decoration:none}
.btn-icono .ic{width:18px;height:18px}
.btn-icono.grande{width:42px;height:42px;border-radius:7px}
.btn-icono.peligro{border-color:var(--e-borde-peligro);color:var(--red-600)}
.btn-icono.peligro:hover{background:var(--danger-bg);border-color:var(--red-600)}
.btn-icono.principal{background:var(--navy-700);border-color:var(--navy-700);color:var(--e-claro)}

/* estado: punto + texto (nunca el gris como texto) */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;
  color:var(--e-ink-2);white-space:nowrap}
.estado .punto{width:6px;height:6px;border-radius:50%;flex:none;background:var(--slate-400)}
.estado.ok{color:var(--success)} .estado.ok .punto{background:var(--success)}
.estado.aviso{color:var(--e-aviso-texto)} .estado.aviso .punto{background:var(--caution)}
.estado.error{color:var(--red-600)} .estado.error .punto{background:var(--red-600)}
.estado.dato{color:var(--e-dato-fuerte)} .estado.dato .punto{background:var(--e-dato)}
.estado.neutro{color:var(--e-ink-2)} .estado.neutro .punto{background:#9aa2b5}

/* píldora (rol, estado con fondo) */
.pill,.pastilla{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;
  font-size:14px;font-weight:500;line-height:1.35}
.pill.tone-success,.pastilla.ok{color:var(--success);background:var(--success-bg)}
.pill.tone-caution,.pastilla.aviso{color:var(--e-aviso-texto);background:var(--caution-bg)}
.pill.tone-danger,.pastilla.error{color:var(--red-600);background:var(--danger-bg)}
.pill.tone-info,.pastilla.dato{color:var(--e-dato-fuerte);background:var(--info-bg)}
.pill.tone-muted,.pastilla.neutro{color:var(--e-ink-2);background:var(--e-relleno-2)}

/* botones */
.btn{font-family:inherit;font-size:15px;font-weight:600;border-radius:6px;height:38px;
  padding:0 15px;display:inline-flex;align-items:center;gap:6px;line-height:1}
.btn .ic{width:17px;height:17px}
.btn-primary{background:var(--navy-700);border:0;color:#fff}
.btn-primary:hover{background:var(--navy-900);text-decoration:none;color:#fff}
.btn-ghost{background:var(--surface);border:1px solid var(--e-borde-btn);color:var(--e-ink-2)}
.btn-ghost:hover{border-color:var(--navy-700);color:var(--navy-700);text-decoration:none}
.btn-real{background:var(--red-600);border:0;color:#fff}
.btn-real:hover{background:#b81f38;color:#fff;text-decoration:none}
[data-theme="dark"] .btn-primary{background:var(--e-dato);color:#0c111f}
[data-theme="dark"] .btn-primary:hover{background:var(--e-dato-fuerte);color:#0c111f}

/* tablas */
table.data,.tabla{width:100%;border-collapse:collapse;font-size:15px}
table.data th,.tabla th{background:var(--e-cab-tabla);border-bottom:1px solid var(--line);
  padding:11px 18px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-400);text-align:left}
table.data td,.tabla td{padding:10px 18px;border-bottom:1px solid var(--e-borde-fila);
  color:var(--ink)}
table.data tbody tr:hover,.tabla tbody tr:hover{background:var(--e-borde-fila-2)}
.num,.tabla .num{font-family:var(--font-mono);text-align:right}
.dinero{font-family:var(--font-mono);color:var(--red-600)}

/* barra proporcional dentro de una fila */
.barra{display:block;height:6px;border-radius:3px;background:var(--e-relleno);overflow:hidden}
.barra>span{display:block;height:100%;border-radius:3px;background:var(--e-dato)}

/* tarjeta de intervención: lo primero de cada pantalla */
.interv{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.interv-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--slate-400);border-radius:8px}
.interv-card.aviso{border-left-color:var(--caution)}
.interv-card.dato{border-left-color:var(--e-dato)}
.interv-card.peligro{border-left-color:var(--red-600)}
.interv-ic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--e-relleno-2)}
.interv-card.aviso .interv-ic{background:var(--caution-bg);color:var(--e-aviso-texto)}
.interv-card.dato .interv-ic{background:var(--info-bg);color:var(--e-dato-fuerte)}
.interv-card.peligro .interv-ic{background:var(--danger-bg);color:var(--red-600)}
.interv-ic .ic{width:21.5px;height:21.5px}
.interv-n{font-family:var(--font-mono);font-size:26.5px;font-weight:600;color:var(--ink);line-height:1.1}
.interv-txt{min-width:0;flex:1}
.interv-txt .que{font-size:14.5px;color:var(--slate-400)}

/* campo de formulario */
.field label,.campo label{font-size:14.5px;font-weight:600;color:var(--e-ink-2)}
.field input,.field select,.field textarea,.campo input,.campo select,.campo textarea{
  height:42px;border:1px solid var(--e-borde-campo);border-radius:7px;padding:0 13px;
  font:inherit;font-size:16px;color:var(--ink);background:var(--surface)}
.field textarea,.campo textarea{height:auto;padding:10px 12px}
.field input::placeholder,.campo input::placeholder{color:var(--e-ink-4)}
.field input:focus,.campo input:focus{border-color:var(--navy-700);outline:none}
/* `break-word` parte una palabra solo si no cabe; el `anywhere` de ark deja que
   la columna se encoja hasta una letra y corta el ISWC por la mitad. */
.mono{font-family:var(--font-mono);overflow-wrap:break-word}

/* zona de arrastre */
.soltar{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;
  border:1.5px dashed var(--e-borde-btn);border-radius:7px;background:var(--e-campo-bg);
  font-size:15.5px;color:var(--e-ink-2)}

/* zona de riesgo */
.riesgo{border-color:var(--e-borde-peligro)}

/* --------------------------------------------------------------- responsive --
   Bajo 1100px la barra se reduce a iconos; el subárbol de la campaña conserva su
   marca activa pero pierde los rótulos. */
@media (max-width:1100px){
  :root{--sidebar-w:62px}
  .sidebar{padding:14px 8px 12px}
  .sidebar .brand{justify-content:center;padding:2px 0 16px}
  .sidebar .brand .wordmark,.sidebar .nav-txt,.nav-seccion,.nav-camp-nombre,
  .nav-sesion .quien,.nav-cm span:not(.punto){display:none}
  .sidebar .nav-link,.nav-sub{justify-content:center;padding:0;gap:0}
  .nav-sub{margin-left:0;border-left:0;padding:0}
  .sidebar .nav-badge{position:absolute;margin:0;transform:translate(12px,-10px)}
  .sidebar .nav-link{position:relative}
  .nav-pie{align-items:center}
}
@media (max-width:900px){
  :root{--sidebar-w:252px}
  .sidebar .brand .wordmark,.sidebar .nav-txt,.nav-seccion,.nav-camp-nombre,
  .nav-sesion .quien,.nav-cm span{display:revert}
  .sidebar .nav-link,.nav-sub{justify-content:flex-start;padding:0 12px;gap:10px}
  .sidebar .nav-badge{position:static;transform:none;margin-left:auto}
}

/* ------------------------------------------- paneles del pie de la barra -----
   El estado de Chartmetric y la cuenta viven abajo, en una columna de 228px: sus
   paneles no pueden caer hacia abajo ni a la derecha del borde, así que se anclan
   a la ventana, junto a la barra. */
.nav-pie .tb-pop-wrap{position:relative}
.nav-pie .tb-pop{position:fixed;left:calc(var(--sidebar-w) + 8px);bottom:12px;top:auto;right:auto;
  width:380px;max-width:min(92vw,400px);max-height:min(80vh,640px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:12px;z-index:95}
.rail-pop:not([hidden]){display:flex;flex-direction:column;gap:12px}
.rail-pop .card.pad{padding:14px 16px}
.nav-cm{width:100%;text-transform:uppercase;letter-spacing:.04em}
.nav-sesion .avatar-btn{border:0;padding:0;cursor:pointer;font-family:inherit}
.nav-pie .cuenta-pop{width:260px}
.nav-pie .cuenta-head{text-align:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.nav-pie .cuenta-links{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.nav-pie .cuenta-links a{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:6px;color:var(--e-ink-2);font-size:15.5px}
.nav-pie .cuenta-links a:hover{background:var(--e-relleno-2);text-decoration:none;color:var(--navy-700)}
@media (max-width:900px){
  .nav-pie .tb-pop{left:12px;right:12px;width:auto;max-width:none}
}

/* --------------------------------------------------------------- remiendos ---
   Tres cosas que el armazón nuevo tenía que devolver a su sitio:
   1. `.btn` de aquí declara `display:inline-flex`, que revivía la hamburguesa en
      escritorio (ark la esconde con `display:none`);
   2. sobre la cabecera oscura, un botón fantasma con fondo blanco es un recuadro;
   3. el campo de búsqueda heredaba el marco blanco de los `input` de ark dentro de
      su propia píldora. */
.menu-toggle{display:none}
@media (max-width:900px){.menu-toggle{display:inline-flex}}
.topbar .btn.btn-ghost{background:transparent;border-color:transparent}
.topbar .btn.btn-ghost:hover{background:var(--e-navy-600);border-color:transparent}
.tb-buscar input{border:0;background:transparent;padding:2px 0;flex:1;min-width:0;
  box-shadow:none}
.tb-buscar input:focus{outline:none;box-shadow:none}

/* ------------------------------------------------------------- plegables ----
   Una tarjeta que se abre. El <details> NO puede llevar `.tarjeta` (flex): en
   Chrome eso deja el contenido visible con la tarjeta cerrada. El triángulo del
   navegador se cambia por un signo propio para que el encabezado se lea como un
   rótulo de tarjeta y no como un control de formulario. */
.plegable>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.plegable>summary::-webkit-details-marker{display:none}
.plegable>summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  font-size:18px;color:var(--slate-400);line-height:1}
.plegable[open]>summary::after{content:"‘2"}
.plegable[open]>summary{margin-bottom:12px}
.plegable>summary:hover::after{color:var(--navy-700)}