/* =====================================================================
   radar_visual.css — Sistema visual V4.6 para Radar Comercial V2
   Acabado V4.6 con pulido Opción 2 (transiciones .22s, sombras difusas,
   radios levemente mayores, hover -4px, bordes finos).
   Fuentes: REFERENCIA_VISUAL_V46.md + prototipos_visuales/opcion-02.
   Se carga DESPUÉS del CSS inline de index.html; gana por orden.
   ===================================================================== */

/* ----------------------------------------------------------------------
   1. TOKENS SEMÁNTICOS
   ---------------------------------------------------------------------- */
:root{
  /* ==================================================================
     PALETA FRONT-2 — de MAQUETA_FRONT2_BENDECIDA.png (contrato visual
     sellado por Juanjo el 23/07/2026; los 8 primeros hex los verificó el
     auditor contra la imagen y no hace falta reverificarlos).
     Semántica sellada: azul eléctrico = ACCIÓN · verde/rojo = RESULTADO ·
     ámbar = ESTADO DEL DATO · arena = ESTRUCTURA · marfil = LECTURA LARGA.
     Son tokens nuevos y aditivos: no reemplazan a los de abajo, así que
     ninguna pantalla cambia por definirlos. Los hereda quien los use.
     ================================================================== */
  --rc-petroleo:#0F2A36;        /* estructura oscura: sidebar, tab activo */
  --rc-electrico:#1E88FF;       /* SOLO acción principal y acentos de dato */
  --rc-verde:#17C88A;           /* resultado positivo */
  --rc-rojo:#E53935;            /* resultado negativo / destructivo */
  --rc-ambar:#D49A18;           /* estado del dato (auditoría importada) */
  --rc-arena:#F3EFE5;           /* estructura y fondo de página */
  --rc-marfil:#FFF7EC;          /* lectura larga: paneles y tablas */
  --rc-carbon:#111111;          /* tipografía y cifras */
  /* El 9º swatch de la maqueta no trae su hex legible (la etiqueta queda
     cortada en el borde de la imagen); la guía manda tomarlo con
     cuentagotas: el swatch es uniforme en #E3DBCC. */
  --rc-gris-suave:#E3DBCC;      /* neutros: bordes, separadores, chips */

  /* Derivados de esa paleta, para no repetir rgba() suelto en cada regla. */
  --rc-borde-fino:#E0D8C8;              /* borde de tarjeta sobre arena */
  --rc-borde-tenue:rgba(17,17,17,.09);  /* separadores dentro de un panel */
  --rc-tinta-media:#5B5F63;             /* etiquetas y metadatos */
  --rc-tinta-suave:#83888D;             /* texto terciario / "desapareció" */
  --rc-verde-tinta:#12885F;             /* verde legible sobre marfil (AA) */
  --rc-rojo-tinta:#C0271F;              /* rojo legible sobre marfil (AA) */
  --rc-ambar-tinta:#8A6410;             /* ámbar legible sobre marfil (AA) */
  --rc-verde-suave:#EAF7F0;
  --rc-rojo-suave:#FCECEB;
  --rc-ambar-suave:#FAF0D9;
  --rc-electrico-suave:#E9F2FE;
  --rc-sombra-corta:0 1px 2px rgba(17,17,17,.05),0 2px 8px rgba(17,17,17,.05);

  /* azules */
  --rc-accent:#178fff;          /* acentos SIN texto: línea, glow, chevron, iconos, radar */
  --rc-accent-btn:#0a75d4;      /* fondo de botones con texto blanco (AA pleno) */
  --rc-accent-soft:rgba(23,143,255,.14);
  --rc-accent-glow:rgba(23,143,255,.22);

  /* fondos */
  --rc-bg:#0b141b;
  --rc-bg-deep:#070d12;
  --rc-bg-mid:#1b2a33;
  --rc-topbar:#101a22;
  --rc-panel:rgba(18,34,54,.78);

  /* piedra / crema */
  --rc-cream:#f3ead8;
  --rc-cream-light:#fbf6eb;
  --rc-cream-mid:#d7c7ad;
  --rc-cream-dark:#c1bbb2;
  --rc-stone-text:#101820;
  --rc-stone-body:#1c2b35;

  /* texto */
  --rc-text:#efe5d2;
  --rc-text-soft:#9fb3c4;
  --rc-text-muted:#6b7884;
  --rc-kicker:#4aaeff;

  /* estados (familias cromáticas fijas) */
  --rc-green:#426f22;
  --rc-amber:#9d5c09;
  --rc-red:#af241e;
  --rc-blue-tag:#0e5fa8;
  --rc-grey:#44505b;
  --rc-teal:#1f6e6e;

  /* relieve */
  --rc-radius-sm:8px;
  --rc-radius:12px;
  --rc-radius-lg:18px;
  --rc-radius-xl:20px;
  --rc-transition:.22s ease;

  /* sombras difusas Opción 2 */
  --rc-shadow-soft:
    0 20px 44px rgba(0,0,0,.38),
    0 2px 8px rgba(0,0,0,.18);
  --rc-shadow-soft-lg:
    0 28px 56px rgba(0,0,0,.42),
    0 4px 12px rgba(0,0,0,.18);
  /* RELIEVE V4.6 (REF §6b): doble bisel obligatorio — inset claro arriba
     + inset OSCURO abajo. Sin el bisel inferior la tarjeta queda plana. */
  --rc-shadow-card:
    0 18px 40px rgba(0,0,0,.30),
    0 2px 8px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.72),
    inset 0 -2px rgba(0,0,0,.18);
  --rc-shadow-card-hover:
    0 26px 52px rgba(0,0,0,.34),
    0 4px 12px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.80),
    inset 0 -2px rgba(0,0,0,.18);

  /* ====================================================================
     TOKENS — PAPEL TÁCTICO (Opción 2)
     Única fuente de color del sistema operativo. Cambiar el tono del
     papel, del metal o del texto de TODA la app = editar UNA de estas
     líneas. Los elementos congelados (Inicio, sidebar, header, radar,
     logout) NO consumen estos tokens.
     ==================================================================== */

  /* Texto sobre papel (fondo claro) — prompt §7 */
  --rc-texto-principal:#101820;      /* títulos, nombres, valores fuertes */
  --rc-texto-operativo:#1a1f1a;      /* texto operativo general, flechas */
  --rc-texto-secundario:#2f362f;     /* texto secundario legible */
  --rc-texto-secundario-papel:#354039; /* texto secundario sobre papel — más oscuro que --rc-texto-secundario para Metal Arena */
  --rc-texto-muted-papel:#5a6359;    /* muted/labels/counters sobre papel */

  /* Acentos y semánticos sobre papel */
  --rc-accent-papel:#0a75d4;         /* azul activo, kicker, enlaces */
  --rc-verde-tactico:#667365;        /* verde táctico (kicker barra) */
  --rc-positivo-papel:#2e6b2b;       /* verde motivo/positivo */
  --rc-amber-papel:#8a5d00;          /* advertencia sobre papel */
  --rc-rojo-papel:#8a2f27;           /* peligro sobre papel */
  --rc-placeholder-papel:#8a8a8a;    /* placeholders */

  /* Papel (superficie clara operativa) */
  --rc-papel-translucido-top:rgba(231,228,219,.93);   /* capa sobre mapa */
  --rc-papel-translucido-bottom:rgba(216,210,196,.93);
  --rc-papel-solido:#d8d2c4;                          /* papel sin mapa (móvil) */
  --rc-papel-panel-top:#f1eee5;                       /* panel crema top */
  --rc-papel-panel-bottom:#e7e2d6;                    /* panel crema bottom */
  --rc-papel-hover-top:#e9e6dd;                       /* hover panel top */
  --rc-papel-hover-bottom:#ded9cd;                    /* hover panel bottom */
  --rc-control-claro:#f7f6f2;                         /* fondo de input/select claro */

  /* Bordes y sombras sobre papel */
  --rc-borde-papel:rgba(124,132,120,.35);             /* borde gris oliva */
  --rc-borde-papel-fuerte:rgba(124,132,120,.55);      /* hover/activo */
  --rc-borde-papel-suave:rgba(124,132,120,.20);       /* separador fino */
  --rc-sombra-papel:rgba(40,46,38,.12);               /* sombra exterior papel */
  --rc-sombra-papel-media:rgba(40,46,38,.20);

  /* Metal (paneles oscuros modernos: Estadísticas, Cuenta, resúmenes) */
  --rc-metal-top:#3a4750;                             /* gradiente metal top */
  --rc-metal-bottom:#26323a;                          /* gradiente metal bottom */
  --rc-metal-borde:rgba(120,140,150,.35);             /* borde metal */
  --rc-metal-borde-fuerte:rgba(120,140,150,.55);
  --rc-metal-texto:#ffffff;                           /* texto/títulos sobre metal */
  --rc-metal-texto-soft:#e6edf0;                      /* valores/leyendas metal */
  --rc-metal-texto-muted:#b9c4ca;                     /* muted legible metal */
  /* METAL ARENA — Opción 3 (superficie CLARA metálica arena, base #e0ddd7).
     Para tarjetas KPI, paneles de gráfico, ranking, comparativas y
     bloques que necesitan una superficie mejor definida dentro del Papel
     táctico. Texto siempre oscuro (#101820/#1a1f1a/#2f362f). */
  --rc-metal-arena:#e0ddd7;
  --rc-metal-arena-top:#e8e5df;
  --rc-metal-arena-bottom:#d8d4cc;
  --rc-metal-arena-borde:rgba(124,132,120,.40);
  --rc-metal-arena-borde-fuerte:rgba(124,132,120,.55);
  --rc-metal-arena-separador:rgba(124,132,120,.25);
  --rc-metal-arena-texto:#101820;
  --rc-metal-arena-texto-secundario:#2f362f;
  --rc-metal-arena-texto-muted:#5a6359;
  --rc-metal-arena-sombra:0 2px 8px rgba(40,46,38,.10);
  --rc-metal-arena-sombra-hover:0 4px 14px rgba(40,46,38,.16);

  /* Rojo/verde semánticos reforzados (sobre Metal Arena y Papel) */
  --rc-sem-rojo:#a3231b;
  --rc-sem-verde:#2e6b2b;
  /* Series y grilla para gráficos Chart.js sobre Metal Arena (Ronda 2) */
  --rc-metal-arena-serie-actual:rgba(10,117,212,.85);
  --rc-metal-arena-serie-anterior:rgba(110,118,108,.55);
  --rc-metal-arena-serie-extra:rgba(98,140,90,.65);
  --rc-metal-arena-grilla:rgba(124,132,120,.30);
  --rc-metal-arena-axis:#354039;

  /* Encabezado verde oliva medio (Fichas) + estado neutro */
  --rc-verde-oliva-medio:#5a7a4a;
  --rc-estado-neutro:#6b7568;
  /* Variantes de Metal Arena para superficies Ronda 3 (botones, pestañas, paneles Agenda) */
  --rc-metal-arena-50:#f1eee5;       /* más claro que papel (fondos suaves) */
  --rc-metal-arena-100:#ebe7df;      /* contenedor pestañas semana */
  --rc-metal-arena-200:#d8d4cc;      /* base botón inactivo / tab inactivo */
  --rc-metal-arena-300:#bdb7ab;      /* hover / borde fuerte */
  --rc-azul-electrico-papel:#178fff; /* azul brillante para hover/gradientes */

  /* Blanco unificado para texto sobre fondos oscuros */
  --rc-blanco:#ffffff;
}

/* ----------------------------------------------------------------------
   2. FONDO GLOBAL
   ---------------------------------------------------------------------- */
body{
  background:
    radial-gradient(circle at 72% 18%,rgba(23,143,255,.13),transparent 22%),
    linear-gradient(180deg,#1b2a33,#0b141b 60%,#070d12);
  background-attachment:fixed;
}

/* ----------------------------------------------------------------------
   3. MARCO — HEADER
   ---------------------------------------------------------------------- */
.co-top{
  height:64px;
  padding:0 20px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.20),transparent 28%),
    linear-gradient(180deg,#1e2f39,#101a22 58%,#050a0e);
  border-bottom:2px solid #071016;
  box-shadow:0 4px 16px rgba(0,0,0,.30);
}
.co-brand{gap:14px}
.co-emblem{
  width:46px;height:46px;border-radius:6px;
  background:linear-gradient(180deg,#fff2d8,#b6a889);
  border:none;
  color:#3a2f1c;font-size:15px;font-weight:950;
  box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.65);
}
.co-brand h1{
  font-family:Tahoma,Verdana,"Segoe UI",Arial,sans-serif;
  font-size:25px;
  color:#e7dcc8;
  letter-spacing:.14em;
  text-shadow:0 2px 0 rgba(0,0,0,.72),0 0 12px rgba(255,255,255,.14);
}
.co-sub{
  font-size:10px;
  letter-spacing:.21em;
  font-weight:950;
  color:#f2ead9;
  text-transform:uppercase;
}
.co-user-pill{
  background:rgba(7,12,17,.55);
  color:#efe5d2;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:8px 13px;
  font-size:12px;
  font-weight:950;
}
.co-dot{background:#2d91ff;box-shadow:0 0 12px rgba(45,145,255,.8)}
.co-logout{cursor:pointer;color:var(--rc-kicker)}
.co-logout:hover{color:var(--rc-accent)}

.hamburger{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  color:#efe5d2;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
}

/* ----------------------------------------------------------------------
   4. MARCO — SIDEBAR
   ---------------------------------------------------------------------- */
.co-side{
  width:236px;min-width:236px;
  padding:14px 12px;
  background:linear-gradient(180deg,rgba(9,20,28,.98),rgba(4,10,15,.98));
  border-right:1px solid rgba(255,255,255,.10);
}
.co-nav{gap:8px}
.co-nav a{
  display:flex;align-items:center;gap:11px;
  min-height:48px;padding:0 15px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(26,44,55,.78),rgba(11,23,32,.78));
  color:#efe5d2;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.22);
  transition:transform var(--rc-transition),border-color var(--rc-transition),box-shadow var(--rc-transition),color var(--rc-transition);
}
.co-nav a:hover{
  transform:translateY(-1px);
  border-color:rgba(23,143,255,.35);
  color:#efe5d2;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 28px rgba(0,0,0,.30);
}
.co-nav a.active{
  background:linear-gradient(90deg,rgba(14,118,255,.30),rgba(8,20,30,.86));
  color:#55b7ff;
  border-color:rgba(23,143,255,.55);
  border-left:4px solid #178fff;
  box-shadow:0 0 18px rgba(23,143,255,.22),inset 0 1px rgba(255,255,255,.08);
}
.co-side-foot{
  margin-top:auto;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;color:var(--rc-text-soft);
}
.co-side-foot a{
  display:block;color:#ff8a8a;text-decoration:none;cursor:pointer;margin-top:6px;
  font-weight:950;
}

/* ----------------------------------------------------------------------
   5. MARCO — RADAR SECTOR ALFA
   ---------------------------------------------------------------------- */
.radar-scope{
  height:220px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(56,153,255,.38);margin-top:8px;
  background:
    radial-gradient(circle at 50% 55%,rgba(23,143,255,.20),transparent 56%),
    linear-gradient(180deg,#071722,#02070b);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:inset 0 0 26px rgba(0,0,0,.55);
}
.radar-scope .lbl{
  position:static;
  color:#49adff;font-size:16px;letter-spacing:.17em;font-weight:950;
  text-shadow:0 0 10px rgba(73,173,255,.4);
}
.radar-scope .scope{
  position:relative;left:auto;top:auto;
  transform:none;
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(23,143,255,.50);
  background:
    radial-gradient(circle at 28% 62%,#55baff 0 4px,transparent 5px),
    radial-gradient(circle at 74% 37%,#55baff 0 4px,transparent 5px),
    radial-gradient(circle at 64% 77%,#55baff 0 3px,transparent 4px),
    repeating-radial-gradient(circle,transparent 0 31px,rgba(23,143,255,.26) 32px 33px),
    linear-gradient(135deg,#0e2738,#02070b);
  box-shadow:0 0 18px rgba(23,143,255,.25),inset 0 0 30px rgba(0,0,0,.70);
}
.radar-scope .scope:before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(23,143,255,.68),rgba(23,143,255,.18) 34deg,transparent 62deg,transparent 360deg);
  animation:coSweep 4s linear infinite}
.radar-scope .scope:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(63,197,255,.28);box-shadow:0 0 18px rgba(63,197,255,.55)}
@keyframes coSweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ----------------------------------------------------------------------
   6. MARCO — ÁREA PRINCIPAL (haces + puntos + grilla)
   ---------------------------------------------------------------------- */
.main-bg{
  background:
    linear-gradient(90deg,rgba(3,12,18,.92),rgba(5,18,27,.70) 48%,rgba(3,10,16,.88)),
    linear-gradient(135deg,#0b1a24,#03080d);
}
.main-bg:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:1;
  background:
    linear-gradient(28deg,transparent 0 18%,rgba(221,211,190,.22) 18.2%,transparent 18.5% 100%),
    linear-gradient(145deg,transparent 0 61%,rgba(221,211,190,.16) 61.2%,transparent 61.5% 100%),
    radial-gradient(circle at 70% 19%,rgba(23,143,255,.65) 0 3px,transparent 4px),
    radial-gradient(circle at 82% 35%,rgba(23,143,255,.60) 0 3px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 42px);
}

/* ----------------------------------------------------------------------
   7. MARCO — BOTTOM NAV (móvil)
   ---------------------------------------------------------------------- */
.bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:997;
  background:linear-gradient(180deg,#1e2f39,#050a0e);
  border-top:2px solid #071016;
  height:auto;padding:6px;
  justify-content:space-around;
  box-shadow:0 -4px 16px rgba(0,0,0,.25);
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:#efe5d2;font-size:10px;font-weight:950;
  padding:6px 2px;text-decoration:none;border-radius:8px;
  min-height:44px;justify-content:center;
  transition:color .15s,background .15s;
}
.bottom-nav a.active{color:#55b7ff;background:rgba(23,143,255,.12)}
.bottom-nav a:hover{color:#55b7ff;background:rgba(255,255,255,.05)}

/* ----------------------------------------------------------------------
   8. RECETAS BASE (para etapas posteriores; no aplicadas aún)
   ---------------------------------------------------------------------- */

/* panel claro con relieve */
.rc-panel{
  background:linear-gradient(180deg,#fbf6eb,#e4d8c4);
  border:2px solid rgba(255,255,255,.22);
  border-radius:var(--rc-radius-lg);
  box-shadow:0 16px 30px rgba(0,0,0,.46),
    inset 0 1px rgba(255,255,255,.60),
    inset 0 -2px rgba(0,0,0,.14);            /* bisel V4.6 (REF §6b) */
  color:var(--rc-stone-text);
  position:relative;overflow:hidden;
}
.rc-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),transparent 18%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(25,35,43,.08) 18px 19px);
}
.rc-panel>*{position:relative;z-index:1}

/* tarjeta de acceso crema */
.rc-card{
  position:relative;
  display:grid;grid-template-columns:64px 1fr 26px;gap:16px;align-items:center;
  padding:16px 18px;
  background:linear-gradient(180deg,#f3ead8,#d7c7ad);
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--rc-radius);
  box-shadow:var(--rc-shadow-card);
  overflow:hidden;cursor:pointer;
  transition:transform var(--rc-transition),border-color var(--rc-transition),box-shadow var(--rc-transition);
}
.rc-card::before{
  /* TEXTURA símil piedra V4.6 (REF §6b, receta TEXTUAL — no reinterpretar):
     brillo radial arriba-izquierda + rayas diagonales OSCURAS cada 18px. */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.24;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),transparent 18%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(25,35,43,.08) 18px 19px);
}
.rc-card>*{position:relative;z-index:1}
.rc-card:hover{
  transform:translateY(-3px);
  border-color:rgba(23,143,255,.45);
  box-shadow:var(--rc-shadow-card-hover);
}
.rc-card .ico{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#1a3a52 0%,#0c2233 38%,#04111d 74%);
  border:1px solid rgba(22,143,255,.22);
  box-shadow:0 6px 12px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.08);
  color:#3fc5ff;font-size:24px;font-weight:950;
}
.rc-card h3{
  font-size:17px;color:var(--rc-stone-text);font-weight:950;margin:0 0 4px;
}
.rc-card h3:after{
  content:"";display:block;width:28px;height:2px;background:var(--rc-accent);margin-top:4px;
}
.rc-card p{font-size:13px;color:var(--rc-stone-body);margin:0;line-height:1.42}
.rc-card .go{font-size:26px;color:var(--rc-accent);font-weight:950;text-align:right;line-height:1}

/* ===== CENTRO DE OPERACIONES (E2) ===== */
.co-cards{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  grid-auto-rows:1fr;              /* todas las filas de la misma altura */
  gap:16px;
  margin-top:1.2rem;
}
.co-cards .rc-card{
  height:100%;                     /* la tarjeta llena su celda */
  min-height:104px;                /* piso uniforme (V4.6 usaba min-height) */
}
#page-dashboard .kicker:after{background:var(--rc-accent);height:3px;border-radius:2px}

@media(max-width:1024px){
  .co-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .co-cards{grid-template-columns:1fr}
  .co-cards .rc-card{padding:14px 16px}
  .co-cards .rc-card .ico{width:52px;height:52px;font-size:22px}
}
@media(max-width:480px){
  .co-cards .rc-card{grid-template-columns:52px 1fr 22px;gap:12px;padding:14px}
  .co-cards .rc-card .ico{width:48px;height:48px;font-size:20px}
  .co-cards .rc-card h3{font-size:15px}
  .co-cards .rc-card p{font-size:12px}
  .co-cards .rc-card .go{font-size:22px}
}
@media(hover:none) and (pointer:coarse){
  .rc-card:hover{transform:none!important}
}

/* ===== CONFIGURACIÓN (E3) ===== */
/* Se mantiene class="cfg-card" en el HTML porque test_f6a_config_piedra.py
   cuenta 4 <div class="cfg-card"> dentro de .cfg-grid. Se aplica la receta
   V4.6 de panel (REF §6b) por CSS, caracter por caracter. */
#page-config .cfg-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fbf6eb,#e4d8c4);
  border:2px solid rgba(255,255,255,.22);
  border-radius:var(--rc-radius-lg);
  box-shadow:
    0 16px 30px rgba(0,0,0,.46),
    inset 0 1px rgba(255,255,255,.60),
    inset 0 -2px rgba(0,0,0,.14);
  color:var(--rc-stone-text);
  position:relative;overflow:hidden;
  transition:transform var(--rc-transition),border-color var(--rc-transition),box-shadow var(--rc-transition);
}
#page-config .cfg-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),transparent 18%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(25,35,43,.08) 18px 19px);
}
#page-config .cfg-card>*{position:relative;z-index:1}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#page-config .cfg-card:hover{
  transform:translateY(-2px);
  border-color:rgba(23,143,255,.45);
  box-shadow:
    0 22px 40px rgba(0,0,0,.50),
    inset 0 1px rgba(255,255,255,.68),
    inset 0 -2px rgba(0,0,0,.12);
}
}
#page-config .cfg-card h3{
  color:var(--rc-stone-text);
  font-size:17px;
  font-weight:950;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(138,112,89,.22);
}
#page-config .cfg-help,
#page-config .cfg-help-inline{color:#5a5650}
#page-config .cfg-item{
  background:rgba(255,255,255,.45);
  border-color:rgba(138,112,89,.22);
  color:var(--rc-stone-text);
}
#page-config .cfg-item .del-btn{color:var(--rc-stone-body)}
#page-config .cfg-item .del-btn:hover{color:var(--rc-red)}
/* Botones sobre panel crema: NO crema/marron, uso secundario oscuro V4.6 */
#page-config .cfg-card .btn-compact,
#page-config .cfg-card .btn.sm{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.30);
}
#page-config .cfg-card .btn-compact:hover,
#page-config .cfg-card .btn.sm:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}
#page-config .cfg-card .cfg-add-inline button{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85))!important;
  color:#efe5d2!important;
  border-color:rgba(255,255,255,.16)!important;
}
#page-config .cfg-card .cfg-add-inline button:hover{
  border-color:rgba(23,143,255,.40)!important;
  color:#9fd0ff!important;
}
#page-agenda .kicker:after{background:var(--rc-accent);height:3px;border-radius:2px}

/* ===== PLANIFICACIÓN (E5) ===== */
/* Pantalla operativa → capa oscura (REF §9). Se migran las tarjetas de
   resultados y opciones desde el gradient piedra claro al sistema oscuro
   V4.6 sin tocar reglas inline que los tests parsean. */

/* Tarjetas de resultado del plan (renderPlan) */
#page-planes .plan-item{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(14,24,34,.94));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rc-radius);
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
  color:var(--rc-text);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5: en touch el :hover de la tarjeta disparaba al tocar un
   botón/semaforo interno (sticky hover de WebKit/Blink) y el feedback de
   presión abrazaba la tarjeta ENTERA. Scoop a hover real (mouse). */
#page-planes .plan-item:hover{
  border-color:rgba(23,143,255,.35);
  box-shadow:0 14px 32px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.10);
}
}
#page-planes .plan-card__header strong{color:var(--rc-text)}
#page-planes .plan-card__num{color:var(--rc-kicker)}
/* PILOTO-CALLE 1 §1: chip discreto de contacto sin ficha comercial */
#app .plan-sin-ficha-chip{
  display:inline-block;margin:1px 0 5px;font-size:.66rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
  color:var(--rc-text-muted,#8b9488);background:rgba(124,132,120,.16);
  border:1px solid rgba(124,132,120,.34);
}
#app .plan-item--sin-ficha{opacity:.94}
#page-planes .plan-card__body{color:var(--rc-text-soft)}
#page-planes .plan-card__body strong{color:var(--rc-text)}
#page-planes .plan-card__meta{color:var(--rc-text-muted)}
#page-planes .plan-card__actions .btn{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.35);
  color:#9fd0ff;
}
#page-planes .plan-card__actions .btn:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}

/* Tarjetas de opciones generadas */
#page-planes .plan-opc-card{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(18,34,54,.88));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.24);
}
#page-planes .plan-opc-card:hover{
  border-color:rgba(23,143,255,.40);
  box-shadow:0 12px 28px rgba(0,0,0,.30);
}
#page-planes .plan-opc-card:has(input:checked){
  border-color:var(--rc-accent);
  box-shadow:0 0 0 2px rgba(23,143,255,.25),0 10px 24px rgba(0,0,0,.28);
}
#page-planes .plan-opc-card__head strong{color:var(--rc-text)}

/* Botones secundarios dentro de criterios (ciclo, excluir, config) */
#page-planes .plan-section .btn.sm:not(.plan-step-btn),
#page-planes .plan-ciclo-editor .btn.sm,
#page-planes .plan-excluir .btn.sm{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#page-planes .plan-section .btn.sm:not(.plan-step-btn):hover,
#page-planes .plan-ciclo-editor .btn.sm:hover,
#page-planes .plan-excluir .btn.sm:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}

/* Botones de pasos */
#page-planes .plan-step-btn:not(.plan-step-btn--active):not(:disabled){
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#page-planes .plan-step-btn:not(.plan-step-btn--active):not(:disabled):hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}
#page-planes .plan-step-btn--active{
  background:linear-gradient(180deg,var(--rc-accent),var(--rc-accent-btn));
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(23,143,255,.28);
}
#page-planes .plan-step-btn--active:hover{filter:brightness(1.08)}

/* plan-section__clear: eliminada la regla modo oscuro (rgba(255,255,255,..))
   porque es ilegible en Papel táctico. En su lugar se usa el override
   del bloque 19b. La base inline del index.html y el plan-redesign-css
   definen rgba(201,193,183,.08) que es la versión piedra. */

/* Diagnóstico y estadísticas */
#page-planes .diagnostic-box{
  background:rgba(21,151,255,.06);
  border-color:rgba(23,143,255,.30);
  color:var(--rc-text-soft);
}
#page-planes .diagnostic-box.cb-stale{
  background:rgba(215,168,77,.08);
  border-color:rgba(215,168,77,.40);
  color:var(--rc-amber);
}
#page-planes .plan-diag-contact,
#page-planes .plan-diag-stat,
#page-planes .plan-diag-card{
  background:rgba(18,34,54,.72);
  border-color:rgba(255,255,255,.12);
}
#page-planes .plan-diag-contact__header strong{color:var(--rc-text)}
#page-planes .plan-diag-contact__body{color:var(--rc-text-soft)}
#page-planes .plan-diag-contact__meta{color:var(--rc-text-muted)}
#page-planes .plan-diag-contact__commercial{color:var(--rc-kicker)}
#page-planes .plan-diag-contact__motivo{color:var(--rc-green)}

/* Modales de planificación */
#page-planes .modal-panel,
#plan-agendar-modal .modal-panel,
#plan-continuar-modal .modal-panel,
#plantillas-modal .modal-panel{
  background:linear-gradient(180deg,#1b2a33,#0b141b);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rc-radius-lg);
  box-shadow:var(--rc-shadow-soft-lg);
}

#page-planes .kicker:after{background:var(--rc-accent);height:3px;border-radius:2px}

/* ===== E7 — RESTO DE PANTALLAS ===== */

/* ===== E9 — INICIO: GESTIÓN DE AUDITORÍAS CLARA (Juanjo) =====
   Bloque "Gestión de auditorías" en Inicio: superficie clara gris-beige,
   renglones claros, texto gris carbón, botones con estilo táctico de la
   barra lateral. No toca sidebar/header/Sector Alfa/fondo/imagen. */

/* Contenedor general */
#page-inicio .inicio-gestion{
  margin-top:24px;
  background:linear-gradient(180deg,rgba(231,228,219,.92),rgba(216,210,196,.92));
  border:1px solid #7c8478;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:
    0 10px 24px rgba(40,46,38,.14),
    inset 0 1px rgba(255,255,255,.55),
    inset 0 -2px rgba(0,0,0,.08);
}
#page-inicio .inicio-gestion__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:12px;
}
#page-inicio .inicio-gestion__head h3{
  margin:0;color:#1a1f1a;font-size:1.05rem;font-weight:800;letter-spacing:.01em;
}

/* Estado vacío */
#page-inicio .inicio-gestion .empty{
  background:rgba(255,255,255,.42);
  border:1px dashed rgba(124,132,120,.40);
  color:#4a5249;
  border-radius:10px;
}

/* Renglón de auditoría */
#page-inicio .inicio-aud-row{
  background:linear-gradient(180deg,#ece9e0,#ddd8cc);
  border:1px solid rgba(124,132,120,.35);
  border-radius:10px;
  box-shadow:
    0 4px 10px rgba(40,46,38,.10),
    inset 0 1px rgba(255,255,255,.65);
  padding:12px 14px;margin-bottom:10px;
  overflow:hidden;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
#page-inicio .inicio-aud-row:hover{
  background:linear-gradient(180deg,#e4e1d8,#d4cfc3);
  border-color:rgba(124,132,120,.55);
  box-shadow:
    0 6px 14px rgba(40,46,38,.14),
    inset 0 1px rgba(255,255,255,.55);
}

/* Cabecera del renglón */
#page-inicio .inicio-aud-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;
}
#page-inicio .inicio-aud-titulo{
  color:#2f362f;font-size:14px;line-height:1.4;font-weight:500;
}
#page-inicio .inicio-aud-titulo b{
  color:#1a1f1a;margin-right:6px;font-weight:700;
}

/* Badges semánticos sobre fondo claro */
#page-inicio .inicio-aud-row .rc-tag.green{
  background:#3a6b2a;color:#fff;border-color:#2f5522;
}
#page-inicio .inicio-aud-row .rc-tag.red{
  background:#9a2b24;color:#fff;border-color:#7c221c;
}

/* Botones: mismo estilo táctico acero/verde petróleo de la barra lateral */
#page-inicio .inicio-aud-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn,
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn.sec{
  min-height:44px;white-space:nowrap;
  border-radius:10px;
  padding:8px 14px;
  font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.45);
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.02) 22%,transparent 40%),
    linear-gradient(180deg,rgba(40,72,76,.92),rgba(13,30,34,.94));
  color:#f7f8f5;
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.05);
  transition:transform .15s,box-shadow .15s,border-color .15s,filter .15s;
}
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn:hover,
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn.sec:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.35);
  box-shadow:
    inset 0 2px rgba(255,255,255,.18),
    inset 0 -2px rgba(0,0,0,.45),
    0 8px 18px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.08);
}
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn:active,
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn.sec:active{transform:translateY(0);filter:brightness(.96)}
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn:focus-visible,
#page-inicio .inicio-aud-actions .btn.inicio-aud-btn.sec:focus-visible{outline:2px solid #7b8b96;outline-offset:2px}

/* Desplegable */
#page-inicio .inicio-aud-detalle{
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(124,132,120,.30);
}
#page-inicio .inicio-aud-metrics{
  color:#4a5249;font-size:12.5px;margin-bottom:6px;font-weight:600;
}

/* Líneas de archivo generadas por _archivoLinea (inline styles oscuros) */
#page-inicio .inicio-aud-detalle div[style*="color:var(--text-muted)"]{
  color:#5a6359 !important;
  border-top-color:rgba(124,132,120,.22) !important;
}
#page-inicio .inicio-aud-detalle b[style*="color:var(--text-secondary)"]{
  color:#2f362f !important;
}
#page-inicio .inicio-aud-detalle span[style*="color:var(--amber)"]{
  color:#8a5d00 !important;
}

/* Móvil */
@media(max-width:480px){
  #page-inicio .inicio-aud-head{flex-direction:column;align-items:stretch}
  #page-inicio .inicio-aud-actions{width:100%}
  #page-inicio .inicio-aud-actions .btn.inicio-aud-btn,
  #page-inicio .inicio-aud-actions .btn.inicio-aud-btn.sec{flex:1 1 auto;min-width:44px}
}

/* ===== E11 — INICIO: FONDO TÁCTICO + LENGUAJE CLARO GRIS-BEIGE (Juanjo) =====
   Solo el área principal de Inicio. Imagen frontend/assets/tactical-map-bg.png
   como marca de agua bajo una capa clara gris-beige translúcida; contenido
   central recoloreado a la paleta clara. No toca sidebar/header/Sector Alfa
   ni otras pantallas (todas usan otros #page-*). Tonos base (Juanjo):
   #d8d2c4 fondo/capa · #7c8478 trazos oscuros · #aaa18f trazos secundarios
   · #667365 verde táctico · #7b8b96 azul grisáceo. */
/* MARCA DE AGUA REAL (corrección Claude 18/07): el mapa va en una capa
   propia, en ESCALA DE GRISES y a baja opacidad, sobre un fondo papel
   sólido — no encima del fondo oscuro anterior. */
#page-inicio{
  position:relative;
  background:#d6d0c2;
  /* La página debe llenar TODA el área principal: sin esto, debajo del
     contenido asoma el fondo oscuro del contenedor (bug visto por Juanjo). */
  min-height:calc(100vh - 64px);
}
#page-inicio::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/assets/tactical-map-bg.png") center/cover no-repeat;
  /* La imagen nueva ya viene tratada (mapa gris + implementos en color):
     sin grayscale. La opacidad es el único dial de "marca de agua". */
  opacity:.85;
}
#page-inicio>*{position:relative;z-index:1;}

/* Titulares: gris carbón / verde muy oscuro */
#page-inicio .hero{margin-bottom:4px}
#page-inicio .hero h2{color:#2f362f}
#page-inicio .hero .kicker{color:#56655a}
#page-inicio .hero .kicker:after{background:#667365}
#page-inicio .hero p{color:#5f6b60}

/* Panel de carga: beige grisáceo claro semitransparente, borde oliva, texto oscuro */
#page-inicio #inicio-dropzone{
  background:rgba(230,226,214,.62);
  border:2px dashed #7c8478;
  color:#3a4139;
  box-shadow:0 8px 18px rgba(40,46,38,.14);
}
#page-inicio #inicio-dropzone.drag{
  border-color:#667365;
  background:rgba(214,224,214,.72);
  color:#2f362f;
}
#page-inicio #inicio-dropzone .ico{color:#556356}

/* Resumen del proceso */
#page-inicio #inicio-resumen-carga{
  background:rgba(230,226,214,.50);
  border:1px solid rgba(124,132,120,.30);
  border-radius:10px;padding:12px 14px;margin-top:14px;
}
#page-inicio #inicio-resumen-carga h3{color:#2f362f!important}
#page-inicio #inicio-resumen-totales{color:#3a4139}
#page-inicio .det-line{background:rgba(255,255,255,.40);color:#3a4139}
#page-inicio .det-line.ok{color:#3f6b2f}
#page-inicio .det-line.err{color:#8a2f27}

/* Móvil: marca de agua algo más tenue para no competir con el contenido */
@media(max-width:768px){
  #page-inicio::before{opacity:.60;}
}

/* Operativas restantes: Instituciones, Radar, Estadísticas, Cuenta, Log, Carga */
#app #page-instituciones,
#app #page-radar,
#app #page-estadisticas,
#app #page-cuenta,
#app #page-log,
#app #page-carga{color:var(--rc-text)}

/* Botones en páginas operativas (no afecta Planificación piedra) */
#app #page-instituciones .btn,
#app #page-instituciones .btn-compact,
#app #page-instituciones .btn-sec,
#app #page-radar .btn,
#app #page-radar .btn-compact,
#app #page-radar .btn-sec,
#app #page-estadisticas .btn,
#app #page-estadisticas .btn-compact,
#app #page-estadisticas .btn-sec,
#app #page-cuenta .btn,
#app #page-cuenta .btn-compact,
#app #page-cuenta .btn-sec,
#app #page-log .btn,
#app #page-log .btn-compact,
#app #page-log .btn-sec,
#app #page-carga .btn,
#app #page-carga .btn-compact,
#app #page-carga .btn-sec{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;border-color:rgba(255,255,255,.16);
}
#app #page-instituciones .btn:hover,
#app #page-instituciones .btn-compact:hover,
#app #page-instituciones .btn-sec:hover,
#app #page-radar .btn:hover,
#app #page-radar .btn-compact:hover,
#app #page-radar .btn-sec:hover,
#app #page-estadisticas .btn:hover,
#app #page-estadisticas .btn-compact:hover,
#app #page-estadisticas .btn-sec:hover,
#app #page-cuenta .btn:hover,
#app #page-cuenta .btn-compact:hover,
#app #page-cuenta .btn-sec:hover,
#app #page-log .btn:hover,
#app #page-log .btn-compact:hover,
#app #page-log .btn-sec:hover,
#app #page-carga .btn:hover,
#app #page-carga .btn-compact:hover,
#app #page-carga .btn-sec:hover{
  border-color:rgba(23,143,255,.40);color:#9fd0ff;
}

/* Master layout (instituciones) */
#app #page-instituciones .master-list,
#app #page-instituciones .master-detail{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
#app #page-instituciones .master-list .list-counter,
#app #page-instituciones .master-detail .empty{color:var(--rc-text-muted)}

/* Radar */
#app #page-radar .radar-summary>div{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  color:var(--rc-text-muted);
}
#app #page-radar .radar-summary b{color:var(--rc-text)}
#app #page-radar .signal-card{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(14,24,34,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app #page-radar .signal-card:hover{
  border-color:rgba(23,143,255,.35);
  box-shadow:0 14px 32px rgba(0,0,0,.32);
}
}
#app #page-radar .signal-head h3{color:var(--rc-text)}
#app #page-radar .signal-head .ficha-header-meta{color:var(--rc-text-muted)}
#app #page-radar .signal-market{color:var(--rc-kicker)}
#app #page-radar .signal-indicator{color:var(--rc-text-soft)}
#app #page-radar .signal-reason{color:var(--rc-text-muted)}
#app #page-radar .priority-chip{
  background:rgba(23,143,255,.12);border-color:rgba(23,143,255,.30);color:#9fd0ff;
}

/* Estadísticas y Cuenta (comparten .est-*) */
#app #page-estadisticas .est-filtros,
#app #page-cuenta .est-filtros{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
#app #page-estadisticas .est-kpi,
#app #page-cuenta .est-kpi,
#app #page-estadisticas .est-grafico-box,
#app #page-cuenta .est-grafico-box,
#app #page-estadisticas .est-tabla-wrap,
#app #page-cuenta .est-tabla-wrap{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
#app #page-estadisticas .est-kpi b,
#app #page-cuenta .est-kpi b{color:var(--rc-text)}
#app #page-estadisticas .est-kpi span,
#app #page-cuenta .est-kpi span{color:var(--rc-text-muted)}
#app #page-estadisticas .est-tabla th,
#app #page-cuenta .est-tabla th{color:var(--rc-text-muted)}
/* E1 — porcentajes honestos: nota de base, badge MIX y zonas nominales */
/* E1-bis (Juanjo 22/07): sobre el fondo arena, LETRAS NEGRAS y bordes
   visibles en notas/leyenda — el gris lavado no contrasta. */
#app #page-estadisticas .est-nota-base{
  font-size:.78rem;color:#101820;margin:8px 0 0;line-height:1.45;
  border:1px solid rgba(53,64,57,.45);border-radius:8px;
  padding:8px 10px;background:rgba(255,255,255,.25);
}
#app #page-estadisticas .est-nota-base b{color:#101820}
#app #page-estadisticas .est-tabla th{color:#101820}
#app #page-estadisticas .est-tabla td{color:#101820}
#app #page-estadisticas .est-tabla{border:1px solid rgba(53,64,57,.45)}
#app #page-estadisticas .est-grafico-box,
#app #page-estadisticas .est-kpis > div{border:1px solid rgba(53,64,57,.40);border-radius:10px}
#app #page-estadisticas .est-base-mix{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:1px 8px;border-radius:999px;color:#8a6d2b;
  background:rgba(210,170,70,.16);border:1px solid rgba(210,170,70,.4);
}
#app #page-estadisticas .est-mz-zona{margin-bottom:6px}
#app #page-estadisticas .est-tabla td,
#app #page-cuenta .est-tabla td{color:var(--rc-text-soft)}
#app #page-estadisticas .est-tabla .pos{color:var(--rc-green)}
#app #page-estadisticas .est-tabla .neg{color:var(--rc-red)}
#app #page-estadisticas .est-tabla-head h3,
#app #page-cuenta .est-tabla-head h3{color:var(--rc-kicker)}
#app #page-estadisticas .est-tabs{
  background:rgba(18,34,54,.60);border-color:rgba(255,255,255,.12);
}
#app #page-estadisticas .est-tab{color:var(--rc-text-muted)}
#app #page-estadisticas .est-tab.active{
  background:linear-gradient(180deg,var(--rc-accent),var(--rc-accent-btn));
  color:#fff;border-color:transparent;
  box-shadow:0 0 12px rgba(23,143,255,.35);
}
#app #page-cuenta #cuenta-nuevo-usuario{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
}

/* Log */
#app #page-log .filter-bar{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
  color:var(--rc-text-soft);
}

/* Carga de auditorías */
#app #page-carga #dropzone{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.20);
  color:var(--rc-text-muted);
}
#app #page-carga #dropzone.drag{
  background:rgba(23,143,255,.10);border-color:var(--rc-accent);color:#9fd0ff;
}
#app #page-carga .det-line{background:rgba(0,0,0,.25);color:var(--rc-text-soft)}
#app #page-carga .det-line.ok{color:var(--rc-green)}
#app #page-carga .det-line.err{color:var(--rc-red)}

/* Modales globales */
/* CORRECCIÓN REMATE-4 (orden de Juanjo, 20/07/2026): los selectores .smm-*
   se RETIRAN de este grupo. El selector múltiple (Zona/Provincia/Localidad/
   Sector) ya recibe su repintado CLARO desde el CSS inline de index.html
   (.smm-modal/.smm-header/.smm-body/.smm-item label/.smm-footer). Como
   radar_visual.css carga DESPUÉS del inline, este grupo oscuro ganaba por
   orden de cascada y producía la "ventana negra" con botones sueltos claros.
   ui-modal / modal-content / bloque-modal__card SIGUEN siendo modales oscuros
   legítimos del marco y no se tocan. */
.ui-modal,
.modal-content,
.bloque-modal__card{
  background:linear-gradient(180deg,#1b2a33,#0b141b);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rc-radius-lg);
  box-shadow:var(--rc-shadow-soft-lg);
}
.ui-modal__head,
.modal-content h3{
  color:var(--rc-text);border-bottom-color:rgba(255,255,255,.12);
}
.ui-modal__body,
.modal-content{
  color:var(--rc-text-soft);
}
.ui-modal__foot,
.modal-content .button-row{
  border-top-color:rgba(255,255,255,.12);
}
.ui-modal .btn,
.modal-content .btn{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;border-color:rgba(255,255,255,.16);
}
.ui-modal .btn:hover,
.modal-content .btn:hover{
  border-color:rgba(23,143,255,.40);color:#9fd0ff;
}
.ui-modal .btn.sec,
.modal-content .btn.sec{
  background:transparent;color:var(--rc-text-soft);border-color:rgba(255,255,255,.16);
}
.ui-modal .btn.sec:hover,
.modal-content .btn.sec:hover{
  border-color:rgba(23,143,255,.40);color:#9fd0ff;
}

/* Estados vacíos y mensajes (mantener semántica) */
.empty{
  background:rgba(90,104,118,.08);
  border-color:rgba(255,255,255,.12);
  color:var(--rc-text-muted);
}
.module-msg{color:var(--rc-kicker)}
.module-msg.error{color:var(--rc-red)}
.list-counter{color:var(--rc-text-muted)}

/* Kicker azul para todas las páginas restantes */
#app #page-instituciones .kicker:after,
#app #page-radar .kicker:after,
#app #page-estadisticas .kicker:after,
#app #page-cuenta .kicker:after,
#app #page-log .kicker:after,
#app #page-carga .kicker:after{
  background:var(--rc-accent);height:3px;border-radius:2px;
}

/* ===== FICHAS TÉCNICAS (E6) ===== */
/* Operativa → oscuro V4.6; se respetan optgroups, badges de tipo, estados
   vigente/histórica, leyenda "Sin datos comparables" y tablas comparativas. */

/* Filtros */
#page-fichas .fichas-filter-grid{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
#page-fichas .fichas-filter-group label{color:var(--rc-text-muted)}
#page-fichas .fichas-filter-actions .btn.sm{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#page-fichas .fichas-filter-actions .btn.sm:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}

/* Resumen / chips */
#page-fichas .fichas-contador{color:var(--rc-text-muted)}
#page-fichas .fichas-chip{
  background:rgba(23,143,255,.12);
  border-color:rgba(23,143,255,.30);
  color:#9fd0ff;
}

/* Tarjetas resumen del listado */
#page-fichas .ficha-summary{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(14,24,34,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#page-fichas .ficha-summary:hover{
  border-color:rgba(23,143,255,.40);
  box-shadow:0 16px 34px rgba(0,0,0,.32);
}
}
#page-fichas .ficha-summary.active{
  background:rgba(23,143,255,.10);
  border-color:var(--rc-accent);
  box-shadow:0 0 0 1px rgba(23,143,255,.20),0 12px 28px rgba(0,0,0,.28);
}
#page-fichas .ficha-summary-name{color:var(--rc-text)}
#page-fichas .ficha-summary-meta{color:var(--rc-text-muted)}
#page-fichas .ficha-summary-market{border-top-color:rgba(124,132,120,.35);color:var(--rc-text-soft)}
#page-fichas .ficha-summary-pct{
  background:var(--rc-metal-arena);
  color:var(--rc-accent-papel);
  border:1px solid var(--rc-metal-arena-borde);
  font-weight:800;
}
#page-fichas .ficha-summary-cat{color:var(--rc-accent-papel)}
#page-fichas .ficha-summary-actions .btn{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.35);
  color:#9fd0ff;
}
#page-fichas .ficha-summary-actions .btn:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}

/* Header de ficha abierta */
#page-fichas .ficha-header-fichas,
#page-fichas .ficha-card,
#page-fichas .market-block,
#page-fichas .ficha-card-wide,
#page-fichas .ficha-os{
  background:linear-gradient(145deg,rgba(22,38,56,.82),rgba(14,26,40,.86));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
#page-fichas .market-block.selected{
  border-color:var(--rc-accent);
  box-shadow:0 0 0 1px rgba(23,143,255,.20),0 12px 28px rgba(0,0,0,.28);
}
#page-fichas .ficha-header-fichas .ficha-label{color:var(--rc-kicker)}
#page-fichas .ficha-header-fichas .ficha-title{color:var(--rc-text)}
#page-fichas .ficha-header-fichas .ficha-meta{color:var(--rc-text-muted)}
#page-fichas .ficha-header-market{border-top-color:rgba(255,255,255,.10)}
#page-fichas .ficha-header-market-name{color:var(--rc-text)}
#page-fichas .ficha-header-cat-row .actual{color:var(--rc-text)}
#page-fichas .ficha-header-cat-row .anterior{color:var(--rc-text-muted)}

/* Botón volver */
#page-fichas .ficha-volver,
#page-fichas .ficha-back-btn{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#page-fichas .ficha-volver:hover,
#page-fichas .ficha-back-btn:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
}

/* Resumen canónico dentro de ficha */
#page-fichas .ficha-resumen-canonical.plan-item{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(14,24,34,.94));
  border:1px solid rgba(255,255,255,.12);
  color:var(--rc-text);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#page-fichas .ficha-resumen-canonical.plan-item:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.26);
  border-color:rgba(255,255,255,.12);
}
}

/* Tablas comparativas */
#page-fichas .ficha-compare-grid{
  border-color:rgba(255,255,255,.10);
  background:rgba(18,34,54,.50);
}
#page-fichas .ficha-compare-header .ficha-compare-cell{
  color:var(--rc-text-muted);
  background:rgba(0,0,0,.25);
  border-bottom-color:rgba(255,255,255,.12);
}
#page-fichas .ficha-compare-cell{
  color:var(--rc-text-soft);
  border-bottom-color:rgba(255,255,255,.08);
}
#page-fichas .ficha-compare-row:hover .ficha-compare-cell{background:rgba(255,255,255,.04)}
#page-fichas .ficha-compare-cell.producto .prod-nombre{color:var(--rc-text)}
#page-fichas .ficha-compare-cell.producto .prod-lab{color:var(--rc-text-muted)}

/* Badges de tipo de comparación */
#page-fichas .ficha-tipo-comp--imp{
  background:rgba(23,143,255,.12);
  color:#9fd0ff;
  border-color:rgba(23,143,255,.38);
}
#page-fichas .ficha-tipo-comp--der{
  background:rgba(154,118,86,.14);
  color:var(--rc-cream-mid);
  border-color:rgba(154,118,86,.45);
}

/* Leyendas y cajas informativas */
#page-fichas .comparativa-periodos{
  background:rgba(23,143,255,.08);
  border-color:rgba(23,143,255,.30);
  color:var(--rc-text-soft);
}
#page-fichas .comparativa-periodos b{color:var(--rc-kicker)}
#page-fichas .comparativa-intro{
  background:rgba(23,143,255,.08);
  border-color:rgba(23,143,255,.30);
  color:var(--rc-text-soft);
}
#page-fichas .no-comparativa{
  background:rgba(90,104,118,.12);
  border-color:rgba(255,255,255,.20);
  color:var(--rc-text-muted);
}
#page-fichas .semaforo-text.sin-datos{color:var(--rc-text-muted)}

/* Obras sociales */
#page-fichas .ficha-os__title{color:var(--rc-kicker)}
#page-fichas .ficha-os__chip{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:var(--rc-text-soft);
}
#page-fichas .ficha-os__chip b{color:var(--rc-kicker)}

/* Toggle de vistas */
#page-fichas .vista-toggle{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
#page-fichas .vista-toggle button{color:var(--rc-text-muted)}
#page-fichas .vista-toggle button:hover{color:var(--rc-text)}
#page-fichas .vista-toggle button.active{
  background:rgba(23,143,255,.20);
  color:#9fd0ff;
}

/* Tabs de estadísticas */
#page-fichas .est-tabs{
  background:rgba(18,34,54,.60);
  border-color:rgba(255,255,255,.12);
}
#page-fichas .est-tab{color:var(--rc-text-muted)}
#page-fichas .est-tab.active{
  background:linear-gradient(180deg,var(--rc-accent),var(--rc-accent-btn));
  color:#fff;
  border-color:transparent;
}

/* Modales */
#page-fichas .modal-panel{
  background:linear-gradient(180deg,#1b2a33,#0b141b);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rc-radius-lg);
  box-shadow:var(--rc-shadow-soft-lg);
}

#page-fichas .kicker:after{background:var(--rc-accent);height:3px;border-radius:2px}

/* ===== AGENDA + AGENDA PROGRAMADA (E4) ===== */
/* Pantalla operativa → fondo oscuro (REF §9). Las reglas inline originales
   conservan sus tokens para que los tests de harness sigan verdes; esta capa
   las pisa visualmente. */

/* --- Agenda normal --- */
#page-agenda .plan-item{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(14,24,34,.94));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rc-radius);
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
  color:var(--rc-text);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#page-agenda .plan-item:hover{
  border-color:rgba(23,143,255,.40);
  box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.10),0 0 0 1px rgba(23,143,255,.12);
}
}
#page-agenda .plan-item.active{
  border-color:var(--rc-accent);
  box-shadow:0 0 0 2px rgba(23,143,255,.22),0 12px 28px rgba(0,0,0,.32);
}
#page-agenda .plan-card__header strong{color:var(--rc-text)}
#page-agenda .plan-card__num{color:var(--rc-kicker)}
#page-agenda .plan-card__body{color:var(--rc-text-soft)}
#page-agenda .plan-card__body strong{color:var(--rc-text)}
#page-agenda .plan-card__meta{color:var(--rc-text-muted)}
#page-agenda .plan-card__meta strong{color:var(--rc-text)}
#page-agenda .plan-card__motivo{color:var(--rc-green)}
#page-agenda .plan-card__actions .btn{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.35);
  color:#9fd0ff;
}
#page-agenda .plan-card__actions .btn:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}

#page-agenda .agenda-primary-tabs{border-bottom-color:rgba(255,255,255,.10)}
#page-agenda .agenda-primary button{
  background:linear-gradient(180deg,rgba(26,44,55,.78),rgba(11,23,32,.78));
  color:#efe5d2;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--rc-radius-sm);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.22);
}
#page-agenda .agenda-primary button.active{
  background:linear-gradient(90deg,rgba(14,118,255,.30),rgba(8,20,30,.86));
  color:#55b7ff;
  border-color:rgba(23,143,255,.45);
  box-shadow:0 0 18px rgba(23,143,255,.22),inset 0 1px rgba(255,255,255,.08);
}
#page-agenda .agenda-subbar__label{color:var(--rc-text-muted)}
#page-agenda .agenda-subselect{
  background:rgba(120,136,150,.12);
  border-color:rgba(255,255,255,.12);
}
#page-agenda .agenda-subselect button{color:var(--rc-text-muted)}
#page-agenda .agenda-subselect button.active{
  background:rgba(23,143,255,.20);
  color:#9fd0ff;
}
#page-agenda .agenda-actions .btn-compact{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#page-agenda .agenda-actions .btn-compact:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}

#page-agenda .agenda-detail-header{border-bottom-color:rgba(255,255,255,.12)}
#page-agenda .agenda-detail-header h3{color:var(--rc-kicker)}
#page-agenda .agenda-detail-nombre{color:var(--rc-text)}
#page-agenda .agenda-detail-body{color:var(--rc-text-soft)}

#page-agenda .route-day{
  background:rgba(18,34,54,.72);
  border-color:rgba(255,255,255,.12);
  border-radius:var(--rc-radius);
}
#page-agenda .route-time{color:var(--rc-kicker)}
#page-agenda .agenda-disp-line{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:var(--rc-text-soft);
}
#page-agenda .agenda-disp-line b{color:var(--rc-text)}

/* --- Agenda programada --- */
#agenda-programada-content .agp-card{
  background:linear-gradient(145deg,rgba(27,42,51,.94),rgba(18,34,54,.90));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rc-radius);
  box-shadow:0 10px 24px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.08);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#agenda-programada-content .agp-card:hover{
  border-color:rgba(23,143,255,.40);
  box-shadow:0 16px 34px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.10),0 0 0 1px rgba(23,143,255,.10);
}
}
#agenda-programada-content .agp-card__head strong{color:var(--rc-text)}
#agenda-programada-content .agp-card__linea{color:var(--rc-text-soft)}
#agenda-programada-content .agp-card__linea--crit{color:var(--rc-text)}
#agenda-programada-content .agp-card__meta{color:var(--rc-text-muted)}
#agenda-programada-content .agp-badge--borrador{background:rgba(215,168,77,.14);color:var(--rc-amber);border-color:rgba(215,168,77,.40)}
#agenda-programada-content .agp-badge--confirmado{background:rgba(105,164,58,.12);color:var(--rc-green);border-color:rgba(105,164,58,.38)}

#agenda-programada-content .agp-visita{
  background:linear-gradient(145deg,rgba(27,42,51,.92),rgba(18,34,54,.88));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rc-radius);
  box-shadow:0 8px 20px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.06);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#agenda-programada-content .agp-visita:hover{
  border-color:rgba(23,143,255,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08);
}
}
#agenda-programada-content .agp-visita__check{color:var(--rc-text-soft)}
#agenda-programada-content .agp-visita__check--protegida{color:var(--rc-green)}
#agenda-programada-content .agp-visita .plan-card__header strong,
#agenda-programada-content .agp-visita .plan-card__body strong,
#agenda-programada-content .agp-visita .plan-card__meta strong{color:var(--rc-text)}
#agenda-programada-content .agp-visita .plan-card__meta{color:var(--rc-text-soft)}
#agenda-programada-content .agp-visita__sin-disp{color:var(--rc-text-muted)}

#agenda-programada-content .agp-card__actions .btn,
#agenda-programada-content .agp-visita__actions .btn{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.35);
  color:#9fd0ff;
}
#agenda-programada-content .agp-card__actions .btn:hover,
#agenda-programada-content .agp-visita__actions .btn:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}
#agenda-programada-content .agp-reag-sem,
#agenda-programada-content .agp-reag-dia{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.45);
  color:#9fd0ff;
}
#agenda-programada-content .agp-reag-sem:hover,
#agenda-programada-content .agp-reag-dia:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}

#agenda-programada-detalle .plan-day-tabs{
  background:rgba(18,34,54,.60);
  border-radius:var(--rc-radius-sm);
  padding:6px;
}
#agenda-programada-detalle .plan-day-tab{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--rc-text-soft);
  border-radius:var(--rc-radius-sm);
}
#agenda-programada-detalle .plan-day-tab.active{
  background:linear-gradient(180deg,var(--rc-accent),var(--rc-accent-btn));
  color:#fff;
  border-color:transparent;
  box-shadow:0 0 12px rgba(23,143,255,.35);
}
#agenda-programada-detalle .plan-day__heading{
  background:rgba(18,34,54,.72);
  border-left-color:var(--rc-accent);
  color:var(--rc-text);
}
#agenda-programada-detalle .plan-day__heading .btn{
  background:rgba(21,151,255,.12);
  border-color:rgba(23,143,255,.35);
  color:#9fd0ff;
}
#agenda-programada-detalle .plan-day__heading .btn:hover{
  background:rgba(21,151,255,.22);
  border-color:var(--rc-accent);
  color:#fff;
}
#agenda-programada-detalle .plan-pending-box,
#agenda-programada-detalle .plan-pending-group{
  background:rgba(18,34,54,.60);
  border-color:rgba(255,255,255,.12);
  color:var(--rc-text-soft);
}
#agenda-programada-detalle .plan-pending-group__title{color:var(--rc-text)}

/* calendario flotante */
#agp-cal{
  background:linear-gradient(180deg,#1b2a33,#0b141b);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rc-radius);
  box-shadow:var(--rc-shadow-soft-lg);
}
#agp-cal .agp-cal__head{color:var(--rc-text)}
#agp-cal .agp-cal__head button{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:var(--rc-text-soft);
}
#agp-cal .agp-cal__head button:hover{
  background:rgba(23,143,255,.20);
  border-color:var(--rc-accent);
  color:#fff;
}
#agp-cal .agp-cal__nota{color:var(--rc-kicker)}
#agp-cal .agp-cal__dow{color:var(--rc-text-muted)}
#agp-cal .agp-cal__dia{color:var(--rc-text)}
#agp-cal .agp-cal__dia:hover{
  background:var(--rc-accent);
  color:#fff;
}
#agp-cal span.agp-cal__dia.off{color:var(--rc-text-muted)}

/* diálogo Mover/Copiar */
#agp-modo{background:rgba(4,10,15,.80)}
#agp-modo .agp-modo__caja{
  background:linear-gradient(180deg,#1b2a33,#0b141b);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rc-radius-lg);
  box-shadow:var(--rc-shadow-soft-lg);
}
#agp-modo .agp-modo__caja h4{color:var(--rc-text)}
#agp-modo .agp-modo__caja p{color:var(--rc-text-soft)}
#agp-modo .agp-modo__acciones .btn{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));
  color:#efe5d2;
  border-color:rgba(255,255,255,.16);
}
#agp-modo .agp-modo__acciones .btn:hover{
  border-color:rgba(23,143,255,.40);
  color:#9fd0ff;
}

#page-agenda .kicker:after{background:var(--rc-accent);height:3px;border-radius:2px}

/* titulares */
.rc-eyebrow{
  color:var(--rc-kicker);letter-spacing:.12em;font-weight:950;font-size:11px;
  text-transform:uppercase;display:inline-block;
}
.rc-title{
  color:#e6dcc8;text-transform:uppercase;letter-spacing:.10em;
  font-size:30px;font-weight:950;margin:4px 0 2px;
  text-shadow:0 3px 0 rgba(0,0,0,.72),0 0 18px rgba(255,255,255,.12);
}

/* botones */
.rc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;padding:8px 16px;font-size:13px;font-weight:950;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--rc-transition),filter var(--rc-transition),box-shadow var(--rc-transition);
}
.rc-btn:hover{transform:translateY(-1px)}
.rc-btn:active{transform:translateY(0)}
.rc-btn-primary{
  background:linear-gradient(180deg,#1f9bff,var(--rc-accent-btn));color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(23,143,255,.35),inset 0 1px rgba(255,255,255,.3);
}
.rc-btn-primary:hover{filter:brightness(1.08);box-shadow:0 10px 22px rgba(23,143,255,.45)}
.rc-btn-secondary{
  background:linear-gradient(180deg,rgba(26,44,55,.85),rgba(11,23,32,.85));color:#efe5d2;
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.30);
}
.rc-btn-secondary:hover{border-color:rgba(23,143,255,.40);color:#9fd0ff}
.rc-btn-danger{
  background:linear-gradient(180deg,#e85a4f,#c0392b);color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(192,57,43,.30),inset 0 1px rgba(255,255,255,.25);
}
.rc-btn-danger:hover{filter:brightness(1.08)}

/* inputs */
.rc-input{
  background:rgba(0,0,0,.35);border:1px solid rgba(139,171,192,.18);
  color:#dbe6ef;border-radius:8px;padding:8px 12px;font-size:13px;
  outline:none;min-height:42px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.rc-input:focus{border-color:rgba(23,143,255,.60);box-shadow:0 0 0 3px rgba(23,143,255,.18)}

/* chips/tags */
.rc-tag{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  font-weight:950;letter-spacing:.04em;font-size:11px;padding:3px 11px;border:1px solid;white-space:nowrap;
}
.rc-tag b{font-weight:950}
.rc-tag.green{background:rgba(105,164,58,.12);color:var(--rc-green);border-color:rgba(105,164,58,.38)}
.rc-tag.orange{background:rgba(215,137,25,.14);color:var(--rc-amber);border-color:rgba(215,137,25,.40)}
.rc-tag.red{background:rgba(211,59,50,.10);color:var(--rc-red);border-color:rgba(211,59,50,.40)}
.rc-tag.blue{background:rgba(23,143,255,.12);color:var(--rc-blue-tag);border-color:rgba(23,143,255,.38)}
.rc-tag.grey{background:rgba(90,104,118,.14);color:var(--rc-grey);border-color:rgba(90,104,118,.40)}
.rc-tag.teal{background:rgba(38,150,150,.12);color:var(--rc-teal);border-color:rgba(38,150,150,.40)}

/* ----------------------------------------------------------------------
   9. RESPONSIVE
   ---------------------------------------------------------------------- */
@media(max-width:768px){
  .hamburger{display:flex}
  .co-top{padding:0 12px;height:60px}
  .co-brand h1{font-size:18px;letter-spacing:.10em}
  .co-sub{display:none}
  .co-user-pill{display:none}
  .co-side{position:fixed;left:0;top:60px;bottom:0;z-index:999;width:260px;transform:translateX(-100%);transition:transform .25s}
  .co-side.open{transform:translateX(0)}
  .co-layout{flex-direction:column}
  .co-main{width:100%;height:100%}
  .bottom-nav{display:flex}
}

@media(max-width:480px){
  .co-brand h1{font-size:16px}
  .co-emblem{width:42px;height:42px}
}

/* ======================================================================
   E4.1 — Barra de acciones del detalle de Agenda programada (Juanjo):
   compactar y ordenar "Volver al listado" + los 5 botones de acción.
   Solo piel: el markup y los onclick no se tocan.
   ====================================================================== */
#agenda-programada-detalle .mini-action{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#9fb0bd;border-radius:8px;
  height:30px;padding:0 12px;
  font-size:.74rem;font-weight:700;cursor:pointer;
}
#agenda-programada-detalle .mini-action:hover{
  color:#55b7ff;border-color:rgba(23,143,255,.45);
}
#agenda-programada-detalle .plan-card__actions{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:flex-start;margin-top:10px;
}
#agenda-programada-detalle .plan-card__actions .btn{
  width:auto!important;min-width:0!important;
  height:34px!important;min-height:34px!important;
  padding:0 14px!important;font-size:.78rem!important;line-height:1!important;
  white-space:nowrap;flex:0 0 auto;
}
/* Vaciar (destructivo) separado a la derecha del grupo */
#agenda-programada-detalle .plan-card__actions .agp-btn-danger{margin-left:auto;}
@media(max-width:760px){
  #agenda-programada-detalle .plan-card__actions .btn{
    flex:1 1 calc(50% - 8px);height:40px!important;
  }
  #agenda-programada-detalle .plan-card__actions .agp-btn-danger{
    margin-left:0;flex-basis:100%;
  }
}

/* ======================================================================
   DEFINITIVO (decisión de Juanjo 18/07): los paneles de Planificación van
   en PIEDRA (excepción aprobada a la regla crema=navegación). Textura y
   bisel V4.6 completos; textos oscurecidos para legibilidad sobre crema.
   ====================================================================== */
#page-planes .plan-section,
#page-planes .plan-advanced,
#page-planes .plan-opciones,
/* FIX FABLE 24/07: .plan-ciclo-editor RETIRADO de este grupo con !important
   (era la regla fantasma que 2 rondas de override no pudieron pisar): el
   editor de ciclo va PLANO sobre la tarjeta madre, sin recuadro propio. */
#page-planes .diagnostic-box{
  background:linear-gradient(180deg,#fbf6eb,#e4d8c4)!important;
  border:2px solid rgba(255,255,255,.22)!important;
  box-shadow:0 16px 30px rgba(0,0,0,.46),
    inset 0 1px rgba(255,255,255,.60),
    inset 0 -2px rgba(0,0,0,.14)!important;
  color:#1c2b35!important;
  position:relative;overflow:hidden;
}
#page-planes .plan-section::before,
#page-planes .plan-advanced::before,
#page-planes .plan-opciones::before,
#page-planes .diagnostic-box::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),transparent 18%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(25,35,43,.08) 18px 19px);
}
#page-planes .plan-section>*,
#page-planes .plan-advanced>*,
#page-planes .plan-opciones>*,
#page-planes .plan-ciclo-editor>*,
#page-planes .diagnostic-box>*{
  position:relative;z-index:1;
}
/* textos legibles sobre crema */
#page-planes .plan-section h3,
#page-planes .plan-section label,
#page-planes .plan-advanced label,
#page-planes .plan-opciones h3{
  color:#101820!important;
}

/* Legibilidad sobre crema (Juanjo: "algunas letras quedaron muy claras"):
   textos genéricos dentro de los paneles piedra pasan a oscuro. Los
   elementos con clase propia (badges, semáforos, kicker, botones)
   conservan sus colores. */
#page-planes .plan-section :where(label,p,li,small,legend,dt,dd,span:not([class])),
#page-planes .plan-advanced :where(label,p,li,small,legend,span:not([class])),
#page-planes .plan-opciones :where(label,p,li,small,span:not([class])),
#page-planes .plan-ciclo-editor :where(label,p,li,small,span:not([class])),
#page-planes .diagnostic-box :where(label,p,li,small,span:not([class])){
  color:#1c2b35!important;
}
#page-planes .plan-section :where(h3,h4,strong,b),
#page-planes .plan-advanced :where(h3,h4,strong,b),
#page-planes .plan-opciones :where(h3,h4,strong,b),
#page-planes .plan-ciclo-editor :where(h3,h4,strong,b),
#page-planes .diagnostic-box :where(h3,h4,strong,b){
  color:#101820!important;
}

/* ======================================================================
   TÁCTICO DEFINITIVO (Juanjo 18/07): barra militar metálica + radar.
   Consolidado permanente; el fondo-mapa quedó DESCARTADO (fuera de alcance).
   Incluye: 1) fondo con marca de agua estilo mapa de planificación militar
   (curvas de nivel, ruta punteada, cruces de coordenadas) en vez de la
   grilla sola; 2) sidebar verde-azulado militar con brillo metálico;
   3) iconos más grandes y tipografía de barra más profesional (mayúsculas,
   espaciada); 4) menos saturación azul general para ganar contraste.
   Si convence, se vuelve definitivo y se extiende (iconos SVG reales).
   ====================================================================== */


/* 2) Sidebar verde-azulado militar con luz metálica */
.co-side{
  background:
    linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 16%,transparent 30%),
    linear-gradient(180deg,#15343a,#0b2126 55%,#071518);
  border-right:1px solid rgba(140,190,180,.16);
}
.co-nav a{
  background:linear-gradient(180deg,rgba(38,68,72,.85),rgba(14,32,36,.88));
  border:1px solid rgba(140,190,180,.14);
  color:#d7e4dd;
  font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.10),inset 0 -1px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.25);
}
.co-nav a:hover{
  border-color:rgba(90,200,180,.35);
  color:#eef6f1;
}
.co-nav a.active{
  background:linear-gradient(90deg,rgba(64,160,140,.28),rgba(10,26,30,.90));
  color:#9fe8d6;
  border-left:4px solid #35c2a4;
  box-shadow:0 0 18px rgba(53,194,164,.20),inset 0 1px rgba(255,255,255,.12);
}
/* 3) Iconos más grandes y con presencia */
.co-nav a:before{
  font-size:21px;width:26px;
  color:#8fd9c8;
  text-shadow:0 0 8px rgba(90,200,180,.35);
}
/* Radar acompaña la paleta táctica */
.radar-scope{border-color:rgba(90,200,180,.38);}
.radar-scope .lbl{color:#7fd8c4;text-shadow:0 0 10px rgba(90,200,180,.4);}


/* ======================================================================
   ICONOS TÁCTICOS DEL SIDEBAR (Juanjo 18/07): SVG inline vía mask —
   reemplazan los glifos viejos (markup: data-ico en los <a> del nav).
   Toman el color del texto (currentColor), así funcionan en cualquier
   paleta. Sin recursos externos.
   ====================================================================== */
.co-nav a::before{
  content:"";width:22px;height:22px;flex:0 0 22px;
  background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.co-nav a[data-ico="inicio"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 21V4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/><path d='M6 5h11l-2.4 3.5L17 12H6z' fill='%23000'/></svg>")}
.co-nav a[data-ico="centro"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><path d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/><circle cx='12' cy='12' r='1.7' fill='%23000' stroke='none'/></svg>")}
.co-nav a[data-ico="config"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='3.4'/><path d='M12 2.8v2.8M12 18.4v2.8M2.8 12h2.8M18.4 12h2.8M5.5 5.5l2 2M16.5 16.5l2 2M18.5 5.5l-2 2M7.5 16.5l-2 2'/></svg>")}
.co-nav a[data-ico="cuenta"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><rect x='3.5' y='5' width='17' height='14' rx='2.2'/><circle cx='9' cy='11' r='2.1'/><path d='M5.8 16.2c.7-2 5.7-2 6.4 0M14.5 9.5h4M14.5 13h4'/></svg>")}
.co-nav a[data-ico="salir"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M12 3v8'/><path d='M7.2 6.4a7 7 0 1 0 9.6 0'/></svg>")}

/* ======================================================================
   TÁCTICO v2 (feedback de Juanjo): botones del sidebar más redondeados y
   con más volumen metálico.
   ====================================================================== */
.co-nav a{
  border-radius:13px;
  min-height:50px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.02) 22%,transparent 40%),
    linear-gradient(180deg,rgba(40,72,76,.92),rgba(13,30,34,.94));
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.05);
}
.co-nav a:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px rgba(255,255,255,.18),
    inset 0 -2px rgba(0,0,0,.45),
    0 9px 18px rgba(0,0,0,.42);
}
.co-nav a.active{
  border-radius:13px;
  box-shadow:
    0 0 18px rgba(53,194,164,.22),
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.40);
}

/* Icono táctico también en "Cerrar sesión" del pie del sidebar */
.co-side-foot a[data-ico]::before{
  content:"";display:inline-block;width:15px;height:15px;margin-right:6px;
  vertical-align:-2px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.co-side-foot a[data-ico="salir"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M12 3v8'/><path d='M7.2 6.4a7 7 0 1 0 9.6 0'/></svg>")}

/* ======================================================================
   AJUSTES GENERALES (Juanjo 18/07) — valen en ambos modos
   ====================================================================== */
/* Radar 25% más chico, círculo centrado sin tocar el borde inferior */
.radar-scope{height:172px;padding:8px 0 10px;gap:8px;}
.radar-scope .lbl{font-size:13px;letter-spacing:.15em;}
.radar-scope .scope{
  width:148px;height:148px;
  background:
    radial-gradient(circle at 28% 62%,#55baff 0 3px,transparent 4px),
    radial-gradient(circle at 74% 37%,#55baff 0 3px,transparent 4px),
    radial-gradient(circle at 64% 77%,#55baff 0 2.5px,transparent 3.5px),
    repeating-radial-gradient(circle,transparent 0 23px,rgba(23,143,255,.26) 24px 25px),
    linear-gradient(135deg,#0e2738,#02070b);
}

/* ======================================================================
   TÁCTICO v3 (feedback de Juanjo): contraste y color
   ====================================================================== */
/* 1) Radar completo en paleta táctica (fondo, anillos, barrido y letras) */
.radar-scope{
  background:
    radial-gradient(circle at 50% 55%,rgba(53,194,164,.18),transparent 56%),
    linear-gradient(180deg,#0b201f,#04100e);
  border-color:rgba(90,200,180,.38);
}
.radar-scope .scope{
  border-color:rgba(64,200,175,.50);
  background:
    radial-gradient(circle at 28% 62%,#6fe0c8 0 3px,transparent 4px),
    radial-gradient(circle at 74% 37%,#6fe0c8 0 3px,transparent 4px),
    radial-gradient(circle at 64% 77%,#6fe0c8 0 2.5px,transparent 3.5px),
    repeating-radial-gradient(circle,transparent 0 23px,rgba(53,194,164,.28) 24px 25px),
    linear-gradient(135deg,#0d2b28,#03100e);
  box-shadow:0 0 18px rgba(53,194,164,.25),inset 0 0 30px rgba(0,0,0,.70);
}
.radar-scope .scope:before{
  background:conic-gradient(from 0deg,rgba(64,220,190,.68),rgba(64,220,190,.18) 34deg,transparent 62deg,transparent 360deg);
}
.radar-scope .scope:after{
  background:rgba(120,235,205,.30);
  box-shadow:0 0 18px rgba(120,235,205,.55);
}

/* 2) Letras del sidebar en ARENA (contraste real contra el verde militar) */
.co-nav a{color:#efe7cf;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.co-nav a:hover{color:#fff6dd;}
.co-nav a.active{color:#ffe9b0;}

/* ===================================================================
   TÁCTICO v4 (feedback de Juanjo): iconos eléctricos +5%, letras blanco
   luminoso, botones que SOBRESALEN de la barra, radar INCRUSTADO.
   ====================================================================== */
/* 1) Iconos: +5% y colores eléctricos con halo propio sobre fondo oscuro */
.co-nav a::before{width:24px;height:24px;flex:0 0 24px;}
.co-nav a[data-ico="inicio"]::before{
  background:#ffb300;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,179,0,.55));
}
.co-nav a[data-ico="centro"]::before{
  background:#3ec2ff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(62,194,255,.60));
}
.co-nav a[data-ico="config"]::before{
  background:#e8f1f6;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(220,235,245,.50));
}
.co-nav a[data-ico="cuenta"]::before{
  background:#ff7a55;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,122,85,.55));
}

/* 2) Letras: blanco luminoso con destello gris sutil */
.co-nav a{
  color:#f7f8f5;
  text-shadow:0 1px 2px rgba(0,0,0,.50),0 0 7px rgba(216,226,222,.30);
}
.co-nav a:hover{color:#ffffff;}
.co-nav a.active{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.50),0 0 9px rgba(159,232,214,.45);
}

/* 3) Botones que sobresalen: aro de luz + relieve profundo */
.co-nav a{
  border:1px solid rgba(190,220,210,.26);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 1px rgba(255,255,255,.22),
    inset 0 -3px 4px rgba(0,0,0,.55),
    0 8px 16px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.40);
}
.co-nav a:hover{
  border-color:rgba(210,235,225,.40);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 2px 1px rgba(255,255,255,.26),
    inset 0 -3px 4px rgba(0,0,0,.55),
    0 11px 20px rgba(0,0,0,.50),
    0 2px 4px rgba(0,0,0,.40);
}
.co-nav a.active{
  box-shadow:
    0 0 0 1px rgba(120,220,195,.20),
    0 0 18px rgba(53,194,164,.25),
    inset 0 2px 1px rgba(255,255,255,.20),
    inset 0 -3px 4px rgba(0,0,0,.50),
    0 8px 16px rgba(0,0,0,.45);
}

/* 4) Radar incrustado en la barra (bisel hundido: sombra interna arriba,
      filo de luz abajo) */
.radar-scope{
  border:1px solid rgba(8,18,16,.85);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.60),
    inset 0 -1px rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.07);
}

/* ======================================================================
   TÁCTICO v5 (feedback de Juanjo): contornos con gama NEUTRA (plata/negro,
   sin tinte verdoso que ensucia el volumen) y barra más METAL: más gris,
   más luz y veta de acero cepillado.
   ====================================================================== */
/* Barra: acero grisáceo-verdoso con veta vertical y haz de luz más franco */
.co-side{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.030) 0 1px,transparent 1px 3px),
    linear-gradient(115deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 15%,transparent 33%),
    linear-gradient(180deg,#35484c,#1e3134 55%,#122021);
  border-right:1px solid rgba(205,218,215,.20);
}

/* Botones: bisel PLATA y sombra NEGRA pura (sin verde en el contorno),
   con línea de separación oscura que los despega del fondo */
.co-nav a{
  background:
    linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 18%,rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#46585b,#2a3c3f 55%,#1b2a2d);
  border:1px solid rgba(228,236,238,.24);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 1px rgba(255,255,255,.30),
    inset 0 -3px 5px rgba(0,0,0,.50),
    0 9px 16px rgba(0,0,0,.45);
}
.co-nav a:hover{
  border-color:rgba(240,246,248,.34);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 1px rgba(255,255,255,.36),
    inset 0 -3px 5px rgba(0,0,0,.50),
    0 12px 20px rgba(0,0,0,.50);
}
.co-nav a.active{
  border:1px solid rgba(228,236,238,.28);
  border-left:4px solid #35c2a4;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 0 16px rgba(53,194,164,.22),
    inset 0 2px 1px rgba(255,255,255,.26),
    inset 0 -3px 5px rgba(0,0,0,.45),
    0 9px 16px rgba(0,0,0,.45);
}

/* Radar: marco con la misma gama neutra (keyline negra + filo plata) */
.radar-scope{
  border:1px solid rgba(0,0,0,.65);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.60),
    inset 0 -1px rgba(255,255,255,.14),
    0 1px 0 rgba(255,255,255,.10);
}

/* ======================================================================
   TÁCTICO v6 (Juanjo): el botón ACTIVO entra en la fórmula de acero —
   mismo degradé que los demás pero un paso más claro, y el filo izquierdo
   en PLATA (gris luminoso) en vez de verde. Identificable sin desentonar.
   ====================================================================== */
.co-nav a.active{
  background:
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#54666a,#35474b 55%,#223235);
  border:1px solid rgba(236,242,244,.30);
  border-left:4px solid #d9e4e2;
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.50),0 0 8px rgba(235,242,240,.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 0 14px rgba(230,240,238,.16),
    inset 0 2px 1px rgba(255,255,255,.32),
    inset 0 -3px 5px rgba(0,0,0,.45),
    0 9px 16px rgba(0,0,0,.45);
}

/* ======================================================================
   BARRA DEFINITIVA — REMATES (Juanjo 18/07)
   ====================================================================== */
/* En DESKTOP manda el botón de la barra y se oculta el "salir" del header;
   en MÓVIL (barra oculta) el del header vuelve a aparecer para no dejar al
   usuario sin salida. */
@media(min-width:761px){.co-logout{display:none;}}

/* ======================================================================
   TARJETAS CUADRADAS DEFINITIVAS (Juanjo 18/07): esquinas 7px para que
   el bisel/volumen se lea, como su diseño original.
   ====================================================================== */
.rc-card,
.rc-panel,
#page-inicio .inicio-aud-row,
#page-config .cfg-card{
  border-radius:7px;
}

/* ======================================================================
   CERRAR SESIÓN DEFINITIVO (Juanjo): misma fórmula de acero que los demás
   botones de la barra — solo el icono y las letras en ROJO BRILLANTE.
   ====================================================================== */
.co-side-foot a[data-ico="salir"]{
  display:flex;align-items:center;gap:9px;
  padding:0 14px;min-height:50px;border-radius:13px;
  font-size:13.2px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  background:
    linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 18%,rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#46585b,#2a3c3f 55%,#1b2a2d);
  border:1px solid rgba(228,236,238,.24);
  color:#ff5247;
  text-shadow:0 1px 2px rgba(0,0,0,.50),0 0 10px rgba(255,82,71,.60);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 1px rgba(255,255,255,.30),
    inset 0 -3px 5px rgba(0,0,0,.50),
    0 9px 16px rgba(0,0,0,.45);
}
.co-side-foot a[data-ico="salir"]:hover{
  border-color:rgba(240,246,248,.34);
  color:#ff6157;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 0 14px rgba(255,82,71,.25),
    inset 0 2px 1px rgba(255,255,255,.36),
    inset 0 -3px 5px rgba(0,0,0,.50),
    0 12px 20px rgba(0,0,0,.50);
}
.co-side-foot a[data-ico="salir"]::before{
  width:19px;height:19px;
  background:#ff5247;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(255,82,71,.65));
}

/* ===================================================================
   E8 — BOTTOM NAV: iconos SVG tácticos del sidebar (data-ico)
   =================================================================== */
.bottom-nav a::before{
  content:"";display:block;width:22px;height:22px;margin-bottom:2px;
  background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.bottom-nav a[data-ico="inicio"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 21V4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/><path d='M6 5h11l-2.4 3.5L17 12H6z' fill='%23000'/></svg>")}
.bottom-nav a[data-ico="centro"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><path d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/><circle cx='12' cy='12' r='1.7' fill='%23000' stroke='none'/></svg>")}
.bottom-nav a[data-ico="config"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='3.4'/><path d='M12 2.8v2.8M12 18.4v2.8M2.8 12h2.8M18.4 12h2.8M5.5 5.5l2 2M16.5 16.5l2 2M18.5 5.5l-2 2M7.5 16.5l-2 2'/></svg>")}
.bottom-nav a[data-ico="cuenta"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><rect x='3.5' y='5' width='17' height='14' rx='2.2'/><circle cx='9' cy='11' r='2.1'/><path d='M5.8 16.2c.7-2 5.7-2 6.4 0M14.5 9.5h4M14.5 13h4'/></svg>")}

.bottom-nav a[data-ico="inicio"]::before{
  background:#ffb300;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,179,0,.55));
}
.bottom-nav a[data-ico="centro"]::before{
  background:#3ec2ff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(62,194,255,.60));
}
.bottom-nav a[data-ico="config"]::before{
  background:#e8f1f6;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(220,235,245,.50));
}
.bottom-nav a[data-ico="cuenta"]::before{
  background:#ff7a55;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,122,85,.55));
}
.bottom-nav a.active::before{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 10px currentColor);
}

/* ======================================================================
   INICIO — REMATES (Juanjo 18/07, corrección Claude)
   ====================================================================== */
/* Los botones de auditoría se definen en la sección E9 con estilo táctico
   acero/verde petróleo (coherentes con la barra lateral). */

/* Chips VIGENTE / CERRADA con relieve */
#page-inicio .inicio-aud-row .rc-tag.green,
#page-inicio .inicio-aud-row .rc-tag.red{
  border-radius:8px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.45),
    inset 0 -1px rgba(0,0,0,.28),
    0 2px 4px rgba(0,0,0,.25);
}

/* Header: fuera el recuadro con el punto azul en desktop (el usuario y el
   cerrar sesión ya viven en el pie de la barra); en móvil se conserva
   porque la barra está oculta. */
@media(min-width:761px){.co-user-pill{display:none;}}

/* =======================================================================
   OPCIÓN 2 — PAPEL TÁCTICO (implementación en app real, 2026-07-18)
   Aplica exclusivamente al contenido de las pantallas operativas.
   Inicio, barra lateral, header y radar permanecen congelados.
   ======================================================================= */

/* 1) Fondo del área principal: mapa táctico + capa papel gris-beige */
.main-bg.papel-tactico-bg{
  background:
    linear-gradient(180deg,rgba(231,228,219,.93),rgba(216,210,196,.93)),
    url("/assets/tactical-map-bg.png") center/cover no-repeat;
}
.main-bg.papel-tactico-bg:before{display:none;}

/* 2) Texto estructural en páginas operativas */
#app .papel-tactico,
#app .papel-tactico .hero h2,
#app .papel-tactico .hero .kicker,
#app .papel-tactico .hero p,
#app .papel-tactico h2,
#app .papel-tactico h3,
#app .papel-tactico .ficha-header-meta,
#app .papel-tactico .detail-field label,
#app .papel-tactico .est-tabla-head h3{
  color:#2f362f;
}
#app .papel-tactico .hero .kicker:after{background:#667365;}
#app .papel-tactico .kicker{color:#56655a;}

/* 3) Paneles y tarjetas crema/piedra con relieve */
#app .papel-tactico .rc-card,
#app .papel-tactico .cfg-card,
#app .papel-tactico .ficha-summary,
#app .papel-tactico .fichas-filter-grid,
#app .papel-tactico .ficha-card,
#app .papel-tactico .market-block,
#app .papel-tactico .ficha-card-wide,
#app .papel-tactico .ficha-os,
#app .papel-tactico .ficha-resumen-canonical.plan-item,
#app .papel-tactico .master-list,
#app .papel-tactico .master-detail,
#app .papel-tactico .est-filtros,
#app .papel-tactico .est-kpi,
#app .papel-tactico .est-grafico-box,
#app .papel-tactico .est-tabla-wrap,
#app .papel-tactico #cuenta-nuevo-usuario,
#app .papel-tactico .filter-bar,
#app .papel-tactico .agenda-item,
#app .papel-tactico .agenda-card,
#app .papel-tactico .plan-item,
#app .papel-tactico .plan-card,
#app .papel-tactico .plan-day-card,
#app .papel-tactico .plan-section,
#app .papel-tactico .plan-advanced,
#app .papel-tactico .plan-opciones,
#app .papel-tactico .radar-summary>div,
#app .papel-tactico .signal-card,
#app .papel-tactico .radar-tabs,
#app .papel-tactico .est-tabs,
#app .papel-tactico #dropzone,
#app .papel-tactico .det-line,
#app .papel-tactico .module-msg,
#app .papel-tactico .no-comparativa,
#app .papel-tactico .comparativa-periodos,
#app .papel-tactico .comparativa-intro{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  border-radius:10px;
  box-shadow:
    0 6px 16px rgba(40,46,38,.12),
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -2px rgba(0,0,0,.08);
  color:#2f362f;
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app .papel-tactico .rc-card:hover,
#app .papel-tactico .cfg-card:hover,
#app .papel-tactico .ficha-summary:hover,
#app .papel-tactico .market-block:hover,
#app .papel-tactico .master-list:hover,
#app .papel-tactico .master-detail:hover,
#app .papel-tactico .agenda-item:hover,
#app .papel-tactico .plan-item:hover,
#app .papel-tactico .plan-card:hover,
#app .papel-tactico .plan-day-card:hover,
#app .papel-tactico .signal-card:hover{
  background:linear-gradient(180deg,#e9e6dd,#ded9cd);
  border-color:rgba(124,132,120,.55);
}
}

/* 4) Tablas */
#app .papel-tactico .tbl,
#app .papel-tactico .est-tabla,
#app .papel-tactico .ficha-compare-grid{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  border-radius:10px;
  color:#2f362f;
}
#app .papel-tactico .tbl th,
#app .papel-tactico .est-tabla th,
#app .papel-tactico .ficha-compare-header .ficha-compare-cell{
  background:linear-gradient(180deg,#8f9a8a,#6f7a6b);
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.18);
}
#app .papel-tactico .tbl td,
#app .papel-tactico .est-tabla td,
#app .papel-tactico .ficha-compare-cell{
  border-bottom:1px solid rgba(124,132,120,.18);
  color:#2f362f;
}
#app .papel-tactico .tbl tr.sin-datos td,
#app .papel-tactico .semaforo-text.sin-datos,
#app .papel-tactico .no-comparativa{
  color:#5a6359;
}
#app .papel-tactico .tbl .legend,
#app .papel-tactico .no-comparativa{
  display:inline-block;
  background:rgba(124,132,120,.15);
  border:1px dashed rgba(124,132,120,.45);
  color:#5a6359;
  padding:2px 8px;
  border-radius:4px;
}

/* 5) Botones tácticos acero/verde petróleo */
#app .papel-tactico .btn,
#app .papel-tactico .btn-compact,
#app .papel-tactico .btn-sec,
#app .papel-tactico .mini-action,
#app .papel-tactico .ficha-volver,
#app .papel-tactico .ficha-back-btn,
#app .papel-tactico .vista-toggle button,
#app .papel-tactico .est-tab,
#app .papel-tactico .radar-tabs button,
#app .papel-tactico .agenda-primary button,
#app .papel-tactico .segmented button{
  border-radius:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.45);
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.02) 22%,transparent 40%),
    linear-gradient(180deg,rgba(40,72,76,.92),rgba(13,30,34,.94));
  color:#f7f8f5;
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.30);
}
#app .papel-tactico .btn:hover,
#app .papel-tactico .btn-compact:hover,
#app .papel-tactico .btn-sec:hover,
#app .papel-tactico .mini-action:hover,
#app .papel-tactico .ficha-volver:hover,
#app .papel-tactico .ficha-back-btn:hover,
#app .papel-tactico .vista-toggle button:hover,
#app .papel-tactico .est-tab:hover,
#app .papel-tactico .radar-tabs button:hover,
#app .papel-tactico .agenda-primary button:hover,
#app .papel-tactico .segmented button:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
#app .papel-tactico .btn.active,
#app .papel-tactico .est-tab.active,
#app .papel-tactico .vista-toggle button.active,
#app .papel-tactico .agenda-primary button.active,
#app .papel-tactico .segmented button.active{
  background:
    linear-gradient(180deg,rgba(64,160,140,.85),rgba(40,100,90,.88));
  border-color:rgba(90,200,180,.45);
  color:#fff;
  box-shadow:
    inset 0 2px rgba(255,255,255,.18),
    inset 0 -2px rgba(0,0,0,.45),
    0 0 14px rgba(53,194,164,.25);
}

/* 6) Inputs y selects */
#app .papel-tactico .inp,
#app .papel-tactico select,
#app .papel-tactico input[type="text"],
#app .papel-tactico input[type="number"],
#app .papel-tactico input[type="email"],
#app .papel-tactico input[type="password"],
#app .papel-tactico textarea{
  background:#f6f4ee;
  border:1px solid rgba(124,132,120,.45);
  color:#2f362f;
  border-radius:8px;
}
#app .papel-tactico select optgroup{
  color:#17212b;
  background:#d7d1c8;
}
#app .papel-tactico select optgroup option{
  color:#17212b;
  background:#f4efe7;
}

/* 6b) Flecha visible en todos los selects reales de pantallas tácticas */
#app .papel-tactico select.inp,
#app .papel-tactico #page-planes select.inp{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1f1a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}

/* 7) Estados y badges */
#app .papel-tactico .rc-tag.green,
#app .papel-tactico .plan-diag-badge--success,
#app .papel-tactico .indicador-up{background:#3a6b2a;color:#fff;border-color:#2f5522;}
#app .papel-tactico .rc-tag.red,
#app .papel-tactico .plan-diag-badge--danger,
#app .papel-tactico .indicador-down{background:#9a2b24;color:#fff;border-color:#7c221c;}
#app .papel-tactico .rc-tag.amber,
#app .papel-tactico .plan-diag-badge--warning,
#app .papel-tactico .indicador-aparecio{background:#b8860b;color:#1a1f1a;border-color:#8f6800;}
#app .papel-tactico .rc-tag.blue,
#app .papel-tactico .plan-diag-badge--info{background:#0a75d4;color:#fff;border-color:#084e8c;}
#app .papel-tactico .indicador-same{background:#7a8d8a;color:#fff;border-color:#5a6a68;}

/* 8) Textos secundarios/muted */
#app .papel-tactico .ficha-summary-meta,
#app .papel-tactico .ficha-header-meta,
#app .papel-tactico .signal-head .ficha-header-meta,
#app .papel-tactico .signal-market,
#app .papel-tactico .signal-indicator,
#app .papel-tactico .signal-reason,
#app .papel-tactico .est-kpi span,
#app .papel-tactico .est-tabla th,
#app .papel-tactico .est-tabla-head h3,
#app .papel-tactico .fichas-contador,
#app .papel-tactico .detail-field label,
#app .papel-tactico .list-counter,
#app .papel-tactico .empty{
  color:#5a6359;
}

/* 9) Acentos azul eléctrico */
#app .papel-tactico .kicker,
#app .papel-tactico .signal-market,
#app .papel-tactico .ficha-summary-cat,
#app .papel-tactico .comparativa-periodos b,
#app .papel-tactico .comparativa-intro b,
#app .papel-tactico .ficha-os__title,
#app .papel-tactico .plan-section h3{
  color:#0a75d4;
}

/* 9b) Resumen de radar: paneles claros con números oscuros */
#app #page-radar.papel-tactico .radar-summary>div{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  box-shadow:
    0 6px 16px rgba(40,46,38,.12),
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -2px rgba(0,0,0,.08);
}
#app #page-radar.papel-tactico .radar-summary,
#app #page-radar.papel-tactico .radar-summary>div,
#app #page-radar.papel-tactico .radar-summary b{
  color:#2f362f;
}

/* 10) Planificación: convertir paneles piedra a papel táctico */
#app .papel-tactico .plan-section,
#app .papel-tactico .plan-advanced,
#app .papel-tactico .plan-opciones{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border-color:rgba(124,132,120,.35);
  color:#2f362f;
}
#app .papel-tactico .plan-criteria,
#app .papel-tactico .plan-days,
#app .papel-tactico .plan-cards-grid,
#app .papel-tactico .plan-day-pane{
  background:transparent;
}
#app .papel-tactico .plan-card,
#app .papel-tactico .plan-opc-card,
#app .papel-tactico .plan-diag-card,
#app .papel-tactico .plan-day-card{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  color:#2f362f;
}

/* 11) Planificación: sobreescribir excepción PIEDRA anterior con Option 2 */
#app .papel-tactico #page-planes .plan-section .btn,
#app .papel-tactico #page-planes .plan-ciclo-editor .btn,
#app .papel-tactico #page-planes .plan-excluir .btn,
#app .papel-tactico #page-planes .plan-step-btn:not(.plan-step-btn--active):not(:disabled),
#app .papel-tactico #page-planes .plan-section__clear,
#app .papel-tactico #page-planes .plan-card__actions .btn,
#app .papel-tactico #page-planes .plan-day-tab,
#app .papel-tactico #page-planes .agp-card__actions .btn{
  border-radius:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.45);
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.02) 22%,transparent 40%),
    linear-gradient(180deg,rgba(40,72,76,.92),rgba(13,30,34,.94));
  color:#f7f8f5;
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.30);
}
#app .papel-tactico #page-planes .plan-step-btn--active,
#app .papel-tactico #page-planes .plan-day-tab.active{
  background:linear-gradient(180deg,rgba(64,160,140,.85),rgba(40,100,90,.88));
  border-color:rgba(90,200,180,.45);
  color:#fff;
  box-shadow:
    inset 0 2px rgba(255,255,255,.18),
    inset 0 -2px rgba(0,0,0,.45),
    0 0 14px rgba(53,194,164,.25);
}
#app .papel-tactico #page-planes .plan-section .btn:hover,
#app .papel-tactico #page-planes .plan-card__actions .btn:hover,
#app .papel-tactico #page-planes .plan-day-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
#app .papel-tactico #page-planes .inp,
#app .papel-tactico #page-planes select,
#app .papel-tactico #page-planes input[type="text"],
#app .papel-tactico #page-planes input[type="number"],
#app .papel-tactico #page-planes input[type="date"]{
  background:#f6f4ee;
  border:1px solid rgba(124,132,120,.45);
  color:#2f362f;
  border-radius:8px;
}
#app .papel-tactico #page-planes .plan-card__header strong,
#app .papel-tactico #page-planes .plan-card__body strong,
#app .papel-tactico #page-planes .plan-opc-card__head strong,
#app .papel-tactico #page-planes .plan-diag-contact__header strong,
#app .papel-tactico #page-planes .plan-section :where(h3,h4,strong,b){
  color:#101820;
}
#app .papel-tactico #page-planes .plan-card__body,
#app .papel-tactico #page-planes .plan-card__meta,
#app .papel-tactico #page-planes .plan-diag-contact__body,
#app .papel-tactico #page-planes .plan-diag-contact__meta,
#app .papel-tactico #page-planes .plan-section :where(label,p,li,small,span:not([class])){
  color:#2f362f;
}

/* ======================================================================
   OPCIÓN 2 — OVERRIDES ESPECÍFICOS POR PÁGINA
   Algunos componentes tienen reglas oscuras con #page-xxx que ganan
   por especificidad a las reglas comunes .papel-tactico. Se fuerzan
   a la paleta clara sin tocar Inicio ni la barra lateral.
   ====================================================================== */

/* 13) Paneles y tarjetas con overrides oscuros por página
   Nota: en el markup real, #page-xxx y .papel-tactico conviven en el
   mismo <section>, por lo que el selector debe ser #page-xxx.papel-tactico
   (sin espacio) para que la regla gane por especificidad. */
#app #page-radar.papel-tactico .signal-card,
#app .papel-tactico #agenda-programada-content .agp-card,
#app .papel-tactico #agenda-programada-content .agp-visita,
#app #page-agenda.papel-tactico .route-day,
#app #page-agenda.papel-tactico .agenda-disp-line,
#app #page-estadisticas.papel-tactico .est-tabs,
#app #page-estadisticas.papel-tactico .est-filtros,
#app #page-cuenta.papel-tactico .est-filtros,
#app #page-estadisticas.papel-tactico .est-tabla-wrap,
#app #page-cuenta.papel-tactico .est-tabla-wrap,
#app #page-fichas.papel-tactico .est-tabs,
#app #page-fichas.papel-tactico .fichas-filter-grid,
#app #page-fichas.papel-tactico .ficha-summary,
#app #page-fichas.papel-tactico .ficha-card,
#app #page-fichas.papel-tactico .ficha-card-wide,
#app #page-fichas.papel-tactico .ficha-os,
#app #page-fichas.papel-tactico .ficha-compare-grid,
#app #page-fichas.papel-tactico .comparativa-periodos,
#app #page-fichas.papel-tactico .comparativa-intro,
#app #page-fichas.papel-tactico .no-comparativa,
#app #page-log.papel-tactico .filter-bar,
#app #page-instituciones.papel-tactico .master-list,
#app #page-instituciones.papel-tactico .master-detail{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  box-shadow:
    0 6px 16px rgba(40,46,38,.12),
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -2px rgba(0,0,0,.08);
  color:#2f362f;
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app #page-radar.papel-tactico .signal-card:hover,
#app .papel-tactico #agenda-programada-content .agp-card:hover,
#app .papel-tactico #agenda-programada-content .agp-visita:hover,
#app #page-agenda.papel-tactico .route-day:hover,
#app #page-fichas.papel-tactico .ficha-summary:hover,
#app #page-instituciones.papel-tactico .master-list:hover,
#app #page-instituciones.papel-tactico .master-detail:hover{
  background:linear-gradient(180deg,#e9e6dd,#ded9cd);
  border-color:rgba(124,132,120,.55);
}
}

/* 14) Textos secundarios y muted en paneles con override */
#app #page-radar.papel-tactico .signal-head .ficha-header-meta,
#app #page-radar.papel-tactico .signal-indicator,
#app #page-radar.papel-tactico .signal-reason,
#app .papel-tactico #agenda-programada-content .agp-card__linea,
#app .papel-tactico #agenda-programada-content .agp-card__meta,
#app .papel-tactico #agenda-programada-content .agp-visita__sin-disp,
#app #page-estadisticas.papel-tactico .est-tab:not(.active),
#app #page-fichas.papel-tactico .est-tab:not(.active),
#app #page-fichas.papel-tactico .ficha-summary-meta,
#app #page-fichas.papel-tactico .ficha-header-meta,
#app #page-fichas.papel-tactico .ficha-compare-cell,
#app #page-fichas.papel-tactico .no-comparativa,
#app #page-fichas.papel-tactico .comparativa-periodos,
#app #page-fichas.papel-tactico .comparativa-intro,
#app #page-instituciones.papel-tactico .master-detail .empty,
#app #page-instituciones.papel-tactico .master-list .list-counter,
#app #page-log.papel-tactico .filter-bar .empty{
  color:#5a6359;
}

/* 15) Acentos y chips en paneles claros */
#app #page-radar.papel-tactico .signal-market,
#app #page-radar.papel-tactico .signal-head .ficha-header-meta strong,
#app .papel-tactico #agenda-programada-content .agp-card__head strong,
#app .papel-tactico #agenda-programada-content .agp-card__linea--crit,
#app #page-fichas.papel-tactico .ficha-summary-cat,
#app #page-fichas.papel-tactico .ficha-os__title{
  color:#0a75d4;
}
#app #page-radar.papel-tactico .priority-chip{
  background:rgba(10,117,212,.12);
  border-color:rgba(10,117,212,.30);
  color:#0a75d4;
}
#app #page-fichas.papel-tactico .fichas-chip{
  background:rgba(10,117,212,.12);
  border-color:rgba(10,117,212,.30);
  color:#0a75d4;
}
#app #page-fichas.papel-tactico .ficha-tipo-comp--imp{
  background:rgba(10,117,212,.12);
  border-color:rgba(10,117,212,.38);
  color:#0a75d4;
}
#app #page-fichas.papel-tactico .ficha-tipo-comp--der{
  background:rgba(124,132,120,.14);
  border-color:rgba(124,132,120,.45);
  color:#5a6359;
}
#app #page-fichas.papel-tactico .ficha-os__chip{
  background:rgba(124,132,120,.14);
  border-color:rgba(124,132,120,.25);
  color:#2f362f;
}

/* 16) Botones secundarios/acción dentro de paneles que venían azules.
   RONDA 4 (19/07/2026): .agp-card__actions y .agp-visita__actions retirados
   de este bloque oscuro — ahora se normalizan en bloque 3.1 (relieve + keyline)
   para convivir con el tema Papel Táctico, no con el tema oscuro heredado. */
#app #page-radar.papel-tactico .signal-card .btn,
#app #page-fichas.papel-tactico .ficha-summary-actions .btn{
  border-radius:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.45);
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.02) 22%,transparent 40%),
    linear-gradient(180deg,rgba(40,72,76,.92),rgba(13,30,34,.94));
  color:#f7f8f5;
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.30);
}
#app #page-radar.papel-tactico .signal-card .btn:hover,
#app #page-fichas.papel-tactico .ficha-summary-actions .btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

/* 16b) Agenda de Contactos normal — tarjetas claras, tabs legibles,
   select Turno unificado con los selects nativos de Opción 2. */
#app #page-agenda.papel-tactico .plan-item{
  background:linear-gradient(145deg,var(--rc-stone-light),var(--rc-stone));
  border:1px solid var(--rc-stone-border);
  box-shadow:0 6px 16px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.25);
  color:var(--rc-ink);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app #page-agenda.papel-tactico .plan-item:hover{
  background:linear-gradient(145deg,#e7e0d8,#d8d0c6);
  border-color:rgba(124,132,120,.55);
}
}
#app #page-agenda.papel-tactico .plan-item.active{
  border-color:var(--rc-blue);
  box-shadow:0 0 0 2px var(--rc-blue-soft),0 10px 24px rgba(0,0,0,.22);
}

#app #page-agenda.papel-tactico .plan-card__header strong,
#app #page-agenda.papel-tactico .plan-card__body strong,
#app #page-agenda.papel-tactico .plan-card__meta strong{color:#101820;}
#app #page-agenda.papel-tactico .plan-card__num{color:#5a6359;}
#app #page-agenda.papel-tactico .plan-card__body{color:#2f362f;}
#app #page-agenda.papel-tactico .plan-card__meta{color:#5a6359;}
#app #page-agenda.papel-tactico .plan-card__motivo{color:#2e6b2b;}

#app #page-agenda.papel-tactico .plan-card__actions .btn{
  background:transparent;
  border:1px solid var(--rc-stone-border);
  color:#101820;
  border-radius:8px;
  font-weight:700;
}
#app #page-agenda.papel-tactico .plan-card__actions .btn:hover{
  background:rgba(255,255,255,.25);
  border-color:#5a6359;
}

/* Tabs primarios */
#app #page-agenda.papel-tactico .agenda-primary-tabs{border-bottom-color:rgba(124,132,120,.25);}
/* Pestañas principales (Agenda / Agenda programada): inactiva Metal Arena
   con texto carbón; activa azul sólido con texto blanco. Mismo tamaño,
   peso 800, sombra suave. Ronda 2 (correcciones finales). */
#app #page-agenda.papel-tactico .agenda-primary button{
  background:linear-gradient(180deg,var(--rc-metal-arena-top),var(--rc-metal-arena-bottom));
  color:var(--rc-metal-arena-texto);
  border:1px solid var(--rc-metal-arena-borde);
  font-weight:800;
  box-shadow:var(--rc-metal-arena-sombra);
}
#app #page-agenda.papel-tactico .agenda-primary button:hover{
  background:linear-gradient(180deg,#efebdf,#dcd7cb);
  color:var(--rc-metal-arena-texto);
  border-color:var(--rc-metal-arena-borde-fuerte);
}
#app #page-agenda.papel-tactico .agenda-primary button.active{
  background:linear-gradient(180deg,#0a75d4,#0968be);
  color:#ffffff;
  border-color:rgba(10,117,212,.85);
  box-shadow:0 4px 12px rgba(10,117,212,.32);
}

/* Subbarra de filtros */
#app #page-agenda.papel-tactico .agenda-subbar__label{color:#5a6359;}
#app #page-agenda.papel-tactico .agenda-subselect{
  background:rgba(124,132,120,.12);
  border-color:rgba(124,132,120,.25);
}
#app #page-agenda.papel-tactico .agenda-subselect button{color:#5a6359;}
#app #page-agenda.papel-tactico .agenda-subselect button.active{
  background:rgba(10,117,212,.12);
  color:#0a75d4;
  border-color:rgba(10,117,212,.35);
}

/* Botones de acción (Agenda Instituciones, Importar agenda): patrón general
   de botón oscuro del sistema. Fondo azul/gris oscuro, texto blanco, hover
   azul eléctrico. NO crema. Ronda 2. */
#app #page-agenda.papel-tactico .agenda-actions .btn-compact{
  background:linear-gradient(180deg,rgba(26,44,55,.92),rgba(11,23,32,.94));
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.45);
  font-weight:800;
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -2px rgba(0,0,0,.40),
    0 4px 10px rgba(0,0,0,.20);
}
#app #page-agenda.papel-tactico .agenda-actions .btn-compact:hover{
  background:linear-gradient(180deg,#0a75d4,#0968be);
  border-color:rgba(23,143,255,.55);
  color:#ffffff;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -2px rgba(0,0,0,.40),
    0 6px 14px rgba(10,117,212,.35);
}

/* Detalle del contacto */
#app #page-agenda.papel-tactico .agenda-detail-header{border-bottom-color:rgba(124,132,120,.35);}
#app #page-agenda.papel-tactico .agenda-detail-header h3{color:#0a75d4;}
#app #page-agenda.papel-tactico .agenda-detail-nombre{color:#101820;}
#app #page-agenda.papel-tactico .agenda-detail-body{color:#2f362f;}

/* Ruta / día */
#app #page-agenda.papel-tactico .route-day h3{color:#0a75d4;}
#app #page-agenda.papel-tactico .route-time{color:#0a75d4;}
#app #page-agenda.papel-tactico .agenda-disp-line{
  background:rgba(124,132,120,.10);
  border-color:rgba(124,132,120,.20);
  color:#2f362f;
}
#app #page-agenda.papel-tactico .agenda-disp-line b{color:#101820;}

/* Select Turno (cb-dropdown) unificado con selects nativos */
#app #page-agenda.papel-tactico .cb-dropdown .cb-toggle{
  background:#f7f6f2;
  border:1px solid rgba(124,132,120,.45);
  border-radius:10px;
  color:#101820;
  min-height:42px;
  padding:0 12px;
}
#app #page-agenda.papel-tactico .cb-dropdown .cb-toggle::after{
  content:"▾";
  color:#1a1f1a;
}
#app #page-agenda.papel-tactico .cb-dropdown.open .cb-toggle{
  border-color:rgba(10,117,212,.60);
  box-shadow:0 0 0 3px rgba(10,117,212,.18);
}
#app #page-agenda.papel-tactico .cb-dropdown .cb-panel{
  background:#f7f6f2;
  border:1px solid rgba(124,132,120,.45);
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
#app #page-agenda.papel-tactico .cb-dropdown .cb-row{color:#2f362f;}
#app #page-agenda.papel-tactico .cb-dropdown .cb-row:hover{background:rgba(10,117,212,.08);}
#app #page-agenda.papel-tactico .cb-dropdown .cb-actions{border-top-color:rgba(124,132,120,.25);}
#app #page-agenda.papel-tactico .cb-dropdown .cb-actions .cb-apply{
  background:#0a75d4;
  color:#fff;
}
#app #page-agenda.papel-tactico .cb-dropdown .cb-actions .cb-clear{
  background:transparent;
  border:1px solid rgba(124,132,120,.45);
  color:#5a6359;
}

/* Contadores y mensajes */
#app #page-agenda.papel-tactico .list-counter,
#app #page-agenda.papel-tactico .empty{color:#5a6359;}

/* 17) Focus y placeholders claros */
#app .papel-tactico .inp:focus,
#app .papel-tactico input[type="text"]:focus,
#app .papel-tactico input[type="number"]:focus,
#app .papel-tactico input[type="email"]:focus,
#app .papel-tactico input[type="password"]:focus,
#app .papel-tactico select:focus,
#app .papel-tactico textarea:focus{
  border-color:rgba(10,117,212,.60);
  box-shadow:0 0 0 3px rgba(10,117,212,.18);
}
#app .papel-tactico .inp::placeholder,
#app .papel-tactico input::placeholder,
#app .papel-tactico textarea::placeholder{
  color:#8a8a8a;
}

/* 18) Disabled */
#app .papel-tactico .btn:disabled,
#app .papel-tactico .btn-compact:disabled,
#app .papel-tactico .btn-sec:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.4);
}

/* 12) Móvil: capa ligeramente más opaca para mantener legibilidad */
@media(max-width:768px){
  .main-bg.papel-tactico-bg{background:linear-gradient(180deg,rgba(231,228,219,.96),rgba(216,210,196,.96)),url("/assets/tactical-map-bg.png") center/cover no-repeat;}
}
@media(max-width:480px){
  #app .papel-tactico .btn,
  #app .papel-tactico .btn-compact,
  #app .papel-tactico .btn-sec{min-height:44px;}
}
/* Ronda 2 — Responsive: tablas con scroll horizontal seguro en móvil */
@media(max-width:768px){
  #app .papel-tactico .est-tabla-wrap,
  #app .papel-tactico .est-tabla{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  #app .papel-tactico .est-tabla{display:block;}
  /* FIX FABLE 27/07 (la fantasma de la tabla apilada): esta regla forzaba UNA
     columna con especificidad de tema (#app .papel-tactico) y le ganaba al
     layout móvil correcto de index.html (4 columnas compactas). Cinco rondas
     de H4/H5 editaron la regla de abajo mientras esta pisaba desde arriba.
     Ahora acompaña el mismo layout: producto flexible + 3 columnas auto. */
  #app .papel-tactico .ficha-compare-grid{grid-template-columns:minmax(0,1fr) auto auto auto;}
  #app .papel-tactico .market-compare-line{flex-wrap:wrap;gap:6px;}
}
/* ======================================================================
   19) REASIGNACIÓN SISTÉMICA DE TOKENS — PAPEL TÁCTICO (2026-07-19)
   El :root define las variables en modo OSCURO (--text-secondary:#c1bab0,
   --rc-text:#edf3f7, --rc-bg-deep:#06121b, etc.). Muchas reglas inline las
   consumen vía var(...). En lugar de override por componente, aquí se
   reasignan esas variables dentro del scope .papel-tactico.

   Esto cumple el contrato METODO_TRABAJO_VISUAL: cambiar el papel/metal/
   texto de TODA la app operativa = editar UNA línea de token.

   Inicio, sidebar, header y radar NO reciben .papel-tactico (ver go() en
   index.html), por tanto permanecen congelados. Los modales globales
   (.ui-modal, .modal-content) viven fuera del .page y tampoco se afectan.
   ====================================================================== */
.papel-tactico{
  /* Texto: claro (modo oscuro) -> carbón/piedra (papel táctico) */
  --text-primary:#101820;
  --text-secondary:#2f362f;
  --text-muted:#5a6359;
  --rc-text:#1a1f1a;
  --rc-text-soft:#2f362f;
  --rc-text-muted:#5a6359;
  --rc-ink:#101820;
  --rc-ink-soft:#2f362f;
  /* Fondos: negro/azul petróleo -> piedra clara */
  --rc-bg-deep:#f6f4ee;
  --rc-bg:#f1eee5;
  --rc-panel:#ebe6dc;
  --rc-panel-soft:#e3ddcf;
  --rc-panel-elevated:#efeadf;
  --bg-panel:#ebe6dc;
  --bg-panel-raised:#efeadf;
  --bg-input:#f6f4ee;
  /* Bordes: celeste translúcido -> borde piedra */
  --rc-border:rgba(124,132,120,.35);
  --rc-border-strong:rgba(124,132,120,.55);
  --line:rgba(124,132,120,.25);
  /* Azules consistentes con Papel táctico */
  --rc-blue:#0a75d4;
  --rc-blue-soft:rgba(10,117,212,.14);
  --rc-blue-border:rgba(10,117,212,.45);
  --blue:#0a75d4;
}

/* 19b) Componentes hardcoded que NO usan variables y por tanto no se
   redirigen solos. Se reescriben con la paleta papel táctico. */

/* cb-dropdown (Turno y otros): el background rgba(15,22,38,.9) está
   hardcoded en index.html. Override a control claro unificado. */
#app .papel-tactico .cb-toggle{
  background:#f6f4ee;
  border:1px solid rgba(124,132,120,.45);
  color:#1a1f1a;
  border-radius:8px;
}
#app .papel-tactico .cb-toggle::after{color:#1a1f1a;}
#app .papel-tactico .cb-dropdown.open .cb-toggle{
  border-color:var(--rc-blue,#0a75d4);
  box-shadow:0 0 0 3px rgba(10,117,212,.14);
}
#app .papel-tactico .cb-panel{
  background:#fbf9f3;
  border:1px solid rgba(124,132,120,.45);
  box-shadow:0 12px 30px rgba(60,50,40,.22);
}
/* CORRECCIÓN REMATE-4 (Hallazgo B, orden de Juanjo 20/07/2026): en
   Planificación el .cb-panel (position:fixed, anclaje YA correcto —
   DIF panel.top - toggle.bottom = 6px, verificado con probes en vivo)
   quedaba CAMUFLADO: su fondo claro (#fbf9f3, regla de arriba) se
   confundía con la sección de papel táctico igualmente clara
   (#fbf6eb->#e4d8c4) y, con borde/sombra suaves, el menú se veía
   "suelto", sin caja. NO era posición ni z-index (demostrado en vivo:
   elementFromPoint sin elemento encima, cero ancestros con
   transform/filter/zoom, DIF=6). Fix mínimo: SOLO en #page-planes,
   contraste de caja real — fondo blanco nítido, borde definido y sombra
   marcada — para que lea como tarjeta flotante sobre el papel claro. No
   se toca posición, z-index, texto de fila ni la mecánica del filtro.
   Gana por orden de fuente sobre #app .papel-tactico .cb-panel de arriba
   (misma especificidad, sin !important). */
#page-planes .cb-dropdown .cb-panel{
  /* Pasada final Fable 20/07: papel claro (coherente con el texto oscuro
     definido en index.html; el blanco puro quedaba frío y el texto seguía
     con token claro = ilegible). Esta regla gana la cascada por cargar
     después: es la fuente de verdad del fondo del panel en planes. */
  background:#fbf9f3;
  border:1px solid rgba(28,43,53,.45);
  box-shadow:0 18px 44px rgba(20,30,40,.34),0 2px 10px rgba(20,30,40,.20);
}
#app .papel-tactico .cb-row{color:#2f362f;border-radius:6px;}
#app .papel-tactico .cb-row:hover{background:rgba(10,117,212,.08);}
#app .papel-tactico .cb-actions{border-top:1px solid rgba(124,132,120,.25);gap:6px;}
#app .papel-tactico .cb-actions .cb-apply{
  background:linear-gradient(180deg,rgba(26,44,55,.92),rgba(11,23,32,.92));
  color:#efe5d2;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;font-weight:800;
}
#app .papel-tactico .cb-actions .cb-clear{
  background:transparent;color:#2f362f;border:1px solid rgba(124,132,120,.45);
  border-radius:8px;font-weight:700;
}
#app .papel-tactico .cb-actions .cb-clear:hover{
  border-color:var(--rc-blue,#0a75d4);color:var(--rc-blue,#0a75d4);
}

/* Instituciones: .master-card y .detail-field con backgrounds oscuros
   hardcoded. Se reconvierten a papel táctico. */
#app #page-instituciones.papel-tactico .master-card{
  background:linear-gradient(180deg,#f4f1e8,#e9e3d5);
  border:1px solid rgba(124,132,120,.35);
  border-radius:10px;
  box-shadow:0 2px 6px rgba(60,50,40,.10),inset 0 1px rgba(255,255,255,.5);
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app #page-instituciones.papel-tactico .master-card:hover{
  background:linear-gradient(180deg,#ece9e0,#ded9cd);
  border-color:rgba(10,117,212,.45);
}
}
#app #page-instituciones.papel-tactico .master-card.active{
  background:linear-gradient(180deg,#ece9e0,#ded9cd);
  border-color:rgba(10,117,212,.45);
}
#app #page-instituciones.papel-tactico .master-card h4{color:#101820;}
#app #page-instituciones.papel-tactico .master-card .meta{color:#5a6359;}
#app #page-instituciones.papel-tactico .master-card .priority,
#app #page-instituciones.papel-tactico .master-card .sub{color:#0a75d4;}

#app #page-instituciones.papel-tactico .detail-field{
  background:rgba(124,132,120,.08);
  border:1px solid rgba(124,132,120,.20);
  border-radius:8px;
}
#app #page-instituciones.papel-tactico .detail-field label{color:#5a6359;}
#app #page-instituciones.papel-tactico .detail-field div{color:#101820;}

/* Formulario Agregar/Editar institución */
#app #page-instituciones.papel-tactico .form-grid label{color:#5a6359;}

/* .segmented tenía rgba(0,0,0,..) hardcoded */
#app .papel-tactico .segmented{
  background:rgba(124,132,120,.10);
  border:1px solid rgba(124,132,120,.30);
}
#app .papel-tactico .segmented button{color:#5a6359;}
#app .papel-tactico .segmented button.active{
  background:var(--rc-blue,#0a75d4);color:#fff;
}

/* Borde superior de market/meta en ficha-header */
#app .papel-tactico .ficha-header-market{border-top-color:rgba(124,132,120,.20);}

/* Planificación: ciclos/selectores con borde modo oscuro */
#app .papel-tactico #page-planes .plan-section,
/* FIX-CALLE-3 ronda3 §1: el editor de ciclo se sacó de este grupo — ESTA regla
   (papel-táctico) era la que seguía pintándole el fondo/recuadro detrás de
   Inicio/Fin (background linear-gradient), pisando el fix plano de la ronda 2.
   Ahora queda transparente sobre la tarjeta madre. */
#app .papel-tactico #page-planes .plan-advanced,
#app .papel-tactico #page-planes .plan-opciones{
  border-color:rgba(124,132,120,.35);
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
}
#app .papel-tactico #page-planes .plan-ciclo-editor{background:none;border:0;box-shadow:none;}
#app .papel-tactico #page-planes .plan-section__clear{
  background:rgba(124,132,120,.10);
  border:1px solid rgba(124,132,120,.30);
  color:#5a6359;
  border-radius:10px;
  font-weight:800;letter-spacing:.03em;
}
#app .papel-tactico #page-planes .plan-section__clear:hover{
  border-color:var(--rc-blue,#0a75d4);
  color:var(--rc-blue,#0a75d4);
}
#app .papel-tactico #page-planes .plan-field__label{color:#5a6359;}

/* Select geográfico (plan-selector) con fondo oscuro hardcoded */
#app .papel-tactico #page-planes .plan-selector__toggle,
#app .papel-tactico #page-planes .plan-selector{
  background:#f6f4ee;
  border:1px solid rgba(124,132,120,.45);
  color:#1a1f1a;
  border-radius:10px;
}

/* Estadísticas: KPI/grafico-box border modo oscuro -> papel */
#app #page-estadisticas.papel-tactico .est-kpi,
#app #page-cuenta.papel-tactico .est-kpi,
#app #page-estadisticas.papel-tactico .est-grafico-box,
#app #page-cuenta.papel-tactico .est-grafico-box{border-color:rgba(124,132,120,.35);}
#app #page-estadisticas.papel-tactico .est-tabla-head h3,
#app #page-cuenta.papel-tactico .est-tabla-head h3{color:#0a75d4;}

/* ficha-header-fichas: border modo oscuro -> papel */
#app .papel-tactico .ficha-header-fichas{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  border-radius:12px;
}
#app .papel-tactico .ficha-header-fichas .ficha-label{color:#0a75d4;}
#app .papel-tactico .ficha-header-fichas .ficha-title{color:#101820;}
#app .papel-tactico .ficha-header-fichas .ficha-meta{color:#5a6359;}

/* fichas-filter-group label */
#app .papel-tactico .fichas-filter-group label{color:#5a6359;}

/* list-counter y empty en todas las páginas operativas */
#app .papel-tactico .list-counter,
#app .papel-tactico .empty{color:#5a6359;}

/* est-tab inactivo (Comercial / Agenda y visitas) */
#app .papel-tactico .est-tab:not(.active){color:#5a6359;}

/* =====================================================================
   BLOQUE 20 — DETALLE FICHAS: rank, %, comparativas y deltas (Metal Arena)
   Aplica Metal Arena Opción 3 a chips de ranking (#1/#2/#3), porcentajes
   y comparativa de períodos. Refuerza semánticos rojo/verde (peso >=700).
   ===================================================================== */
/* Ranking en lista (ficha-summary-rank) y comparativa rápida (rapida-rank) */
#app #page-fichas.papel-tactico .ficha-summary-rank,
#app #page-fichas.papel-tactico .rapida-rank{
  background:var(--rc-metal-arena);
  border:1px solid var(--rc-metal-arena-borde);
  color:var(--rc-metal-arena-texto);
  font-weight:900;
  padding:2px 8px;
  border-radius:6px;
}

/* % en lista (ficha-summary-pct) — Metal Arena override del bloque base */
#app #page-fichas.papel-tactico .ficha-summary-pct{
  background:var(--rc-metal-arena);
  border:1px solid var(--rc-metal-arena-borde);
  color:var(--rc-accent-papel);
}

/* Línea de comparativa rápida: rank + pct separados por separador visible */
#app #page-fichas.papel-tactico .market-compare-line{
  background:linear-gradient(180deg,var(--rc-metal-arena-top),var(--rc-metal-arena-bottom));
  border:1px solid var(--rc-metal-arena-borde);
  border-radius:8px;
  color:var(--rc-metal-arena-texto-secundario);
}
#app #page-fichas.papel-tactico .market-compare-line .market-period-label{color:var(--rc-metal-arena-texto-muted);}
#app #page-fichas.papel-tactico .market-compare-line .market-period-value{color:var(--rc-metal-arena-texto);font-weight:700;}
#app #page-fichas.papel-tactico .market-compare-line .market-arrow{color:var(--rc-metal-arena-texto-muted);}

/* Delta sube/baja: semánticos reforzados, peso >=700 */
#app #page-fichas.papel-tactico .market-delta.sube{color:var(--rc-sem-verde);font-weight:700;}
#app #page-fichas.papel-tactico .market-delta.baja{color:var(--rc-sem-rojo);font-weight:700;}

/* Cat-change: fondo Metal Arena con separador y borde visible */
#app #page-fichas.papel-tactico .market-cat-change{
  background:var(--rc-metal-arena);
  border:1px solid var(--rc-metal-arena-borde);
  color:var(--rc-metal-arena-texto-secundario);
  border-radius:6px;
}

/* Potencial estimado y TPQ: legibles (muted a secundario) */
#app #page-fichas.papel-tactico .market-potencial-lab,
#app #page-fichas.papel-tactico .market-potencial{color:var(--rc-metal-arena-texto-muted);font-weight:600;}

/* Chevrons: mute visible sobre Metal Arena */
#app #page-fichas.papel-tactico .market-head-chevron{color:var(--rc-metal-arena-texto-muted);}

/* =====================================================================
   BLOQUE 21 — ESTADÍSTICAS: KPIs, ranking y comparativas (Metal Arena)
   KPIs sobre superficie Metal Arena con texto carbón; ranking posicional
   #1/#2/#3 con token arena; semánticos rojo/verde reforzados.
   ===================================================================== */
#app #page-estadisticas.papel-tactico .est-kpi,
#app #page-cuenta.papel-tactico .est-kpi{
  background:linear-gradient(180deg,var(--rc-metal-arena-top),var(--rc-metal-arena-bottom));
  border:1px solid var(--rc-metal-arena-borde);
  box-shadow:var(--rc-metal-arena-sombra);
  color:var(--rc-metal-arena-texto);
}
#app #page-estadisticas.papel-tactico .est-kpi .kpi-label,
#app #page-cuenta.papel-tactico .est-kpi .kpi-label{color:var(--rc-metal-arena-texto-muted);}
#app #page-estadisticas.papel-tactico .est-kpi b,
#app #page-cuenta.papel-tactico .est-kpi b{color:var(--rc-metal-arena-texto);}
#app #page-estadisticas.papel-tactico .est-kpi .kpi-delta,
#app #page-cuenta.papel-tactico .est-kpi .kpi-delta{font-weight:700;}
#app #page-estadisticas.papel-tactico .est-kpi .kpi-delta.up,
#app #page-estadisticas.papel-tactico .est-kpi .kpi-delta.sube{color:var(--rc-sem-verde);}
#app #page-estadisticas.papel-tactico .est-kpi .kpi-delta.down,
#app #page-estadisticas.papel-tactico .est-kpi .kpi-delta.baja{color:var(--rc-sem-rojo);}

/* Ranking posicional y barras */
#app #page-estadisticas.papel-tactico .est-rank,
#app #page-estadisticas.papel-tactico .rank-num,
#app #page-estadisticas.papel-tactico .est-top .pos{
  background:var(--rc-metal-arena);
  border:1px solid var(--rc-metal-arena-borde);
  color:var(--rc-metal-arena-texto);
  font-weight:900;
  border-radius:6px;
  padding:2px 8px;
}
#app #page-estadisticas.papel-tactico .est-tabla td b,
#app #page-estadisticas.papel-tactico .est-tabla td strong{color:var(--rc-metal-arena-texto);}
#app #page-estadisticas.papel-tactico .est-tabla td .up,
#app #page-estadisticas.papel-tactico .est-tabla td .sube{color:var(--rc-sem-verde);font-weight:700;}
#app #page-estadisticas.papel-tactico .est-tabla td .down,
#app #page-estadisticas.papel-tactico .est-tabla td .baja{color:var(--rc-sem-rojo);font-weight:700;}

/* Panel de gráfico: superficie Metal Arena con título accent */
#app #page-estadisticas.papel-tactico .est-grafico,
#app #page-estadisticas.papel-tactico .est-grafico-box,
#app #page-estadisticas.papel-tactico .est-chart-wrap,
#app #page-estadisticas.papel-tactico .est-panel,
#app #page-cuenta.papel-tactico .est-grafico,
#app #page-cuenta.papel-tactico .est-grafico-box,
#app #page-cuenta.papel-tactico .est-chart-wrap{
  background:linear-gradient(180deg,var(--rc-metal-arena-top),var(--rc-metal-arena-bottom));
  border:1px solid var(--rc-metal-arena-borde);
  box-shadow:var(--rc-metal-arena-sombra);
  color:var(--rc-metal-arena-texto-secundario);
}

/* Refuerzo: barras .pos, cabecera de tabla y separadores en Estadísticas */
#app #page-estadisticas.papel-tactico .pos{color:var(--rc-sem-verde);font-weight:700;}
#app #page-estadisticas.papel-tactico .neg{color:var(--rc-sem-rojo);font-weight:700;}
#app #page-estadisticas.papel-tactico .est-tabla th{
  background:linear-gradient(180deg,var(--rc-metal-arena-top),var(--rc-metal-arena-bottom));
  border-color:var(--rc-metal-arena-borde);
  color:var(--rc-metal-arena-texto);
}
#app #page-estadisticas.papel-tactico .est-tabla td,
#app #page-cuenta.papel-tactico .est-tabla td{color:var(--rc-metal-arena-texto-secundario);}


/* =====================================================================
   BLOQUE 23 — PLANIFICACIÓN: eliminar marrón, normalizar a Papel táctico
   Aplica a plan-section, plan-card y elementos internos.
   ===================================================================== */
#app #page-planes.papel-tactico .plan-section h2,
#app #page-planes.papel-tactico .plan-section h3{color:var(--rc-accent-papel);}
#app #page-planes.papel-tactico .plan-card,
#app #page-planes.papel-tactico .plan-item,
#app #page-planes.papel-tactico .plan-week{
  background:linear-gradient(180deg,var(--rc-papel-panel-top),var(--rc-papel-panel-bottom));
  border:1px solid var(--rc-borde-papel);
  color:var(--rc-texto-secundario);
}
#app #page-planes.papel-tactico .plan-card__title,
#app #page-planes.papel-tactico .plan-card h4,
#app #page-planes.papel-tactico .plan-card strong{color:var(--rc-texto-principal);}
#app #page-planes.papel-tactico .plan-card__meta,
#app #page-planes.papel-tactico .plan-card__num,
#app #page-planes.papel-tactico .plan-card small{color:var(--rc-texto-muted-papel);}

/* =====================================================================
   BLOQUE 24 — RADAR: cards y chips de altas/alertas/oportunidades legibles
   ===================================================================== */
/* Headers de card: nombre del contacto en texto principal, no soft */
#app #page-radar.papel-tactico .signal-card .signal-head{color:var(--rc-texto-principal);}
#app #page-radar.papel-tactico .signal-card .signal-head h3{color:var(--rc-texto-principal);font-weight:800;}

/* Indicador de categoría: chips sobre Metal Arena (no blanco sobre verde) */
#app #page-radar.papel-tactico .indicador-up,
#app #page-radar.papel-tactico .indicador-down,
#app #page-radar.papel-tactico .indicador-same{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  background:var(--rc-metal-arena);
  border:1px solid var(--rc-metal-arena-borde);
  color:var(--rc-metal-arena-texto);
  font-weight:700;
}
#app #page-radar.papel-tactico .indicador-up{color:var(--rc-sem-verde);}
#app #page-radar.papel-tactico .indicador-down{color:var(--rc-sem-rojo);}

/* Diagnóstico MERCADO GENERAL (rojo): fondo rojo semántico sólido + texto
   blanco + peso 700. Corrige texto oscuro sobre rojo ilegible (Ronda 2). */
#app #page-radar.papel-tactico .plan-diag-badge--danger,
#app #page-planes.papel-tactico .plan-diag-badge--danger{
  background:var(--rc-sem-rojo);
  color:#ffffff;
  border:1px solid #7c221c;
  font-weight:700;
}

/* ======================================================================
   BLOQUE 25 — FICHAS: contraste interno sobre papel (Ronda 2)
   Texto principal #101820, operativo #1a1f1a, secundario #354039.
   Rojo/verde semánticos oscuros. Botones acción azul sólido.
   ===================================================================== */

/* Hero / título */
#app #page-fichas.papel-tactico .hero h2{color:var(--rc-texto-principal);}
#app #page-fichas.papel-tactico .hero p{color:var(--rc-texto-secundario-papel);}

/* Laboratorio de referencia (ref, NO filtro): label muted, valor azul */
#app #page-fichas.papel-tactico .fichas-lab-ref,
#app #page-fichas.papel-tactico .fichas-lab-ref__label{color:var(--rc-texto-muted-papel);}
#app #page-fichas.papel-tactico .fichas-lab-ref strong,
#app #page-fichas.papel-tactico #fic-lab-ref-name{color:var(--rc-accent-papel);font-weight:800;}

/* Resumen filtros y contador */
#app #page-fichas.papel-tactico .fichas-resumen-filtros{color:var(--rc-texto-secundario-papel);}
#app #page-fichas.papel-tactico .fichas-contador{color:var(--rc-texto-principal);font-weight:700;}

/* Tarjeta resumen */
#app #page-fichas.papel-tactico .ficha-summary-name{color:var(--rc-texto-principal);font-weight:800;}
#app #page-fichas.papel-tactico .ficha-summary-meta{color:var(--rc-texto-secundario-papel);}
#app #page-fichas.papel-tactico .ficha-summary-market-name{color:var(--rc-texto-secundario-papel);}

/* Estados visita: verde/rojo semánticos oscuros */
#app #page-fichas.papel-tactico .ficha-summary-visited{
  background:rgba(46,107,43,.16);
  color:var(--rc-sem-verde);
  border:1px solid rgba(46,107,43,.35);
  font-weight:700;
}
#app #page-fichas.papel-tactico .ficha-summary-pending{
  background:rgba(163,35,27,.14);
  color:var(--rc-sem-rojo);
  border:1px solid rgba(163,35,27,.35);
  font-weight:700;
}

/* Botón "Abrir ficha": azul sólido + texto blanco */
#app #page-fichas.papel-tactico .ficha-summary-actions .btn{
  background:linear-gradient(180deg,#0a75d4,#0968be);
  color:#ffffff;
  border:1px solid rgba(10,117,212,.85);
  font-weight:800;
  box-shadow:0 2px 6px rgba(10,117,212,.28);
}
#app #page-fichas.papel-tactico .ficha-summary-actions .btn:hover{
  background:linear-gradient(180deg,#0968be,#08589e);
  color:#ffffff;
  border-color:rgba(23,143,255,.55);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(10,117,212,.35);
}

/* Encabezado "Detalle Ficha" — verde oliva medio legible */
#app #page-fichas.papel-tactico .ficha-os__title.verde,
#app #page-fichas.papel-tactico .market-head--verde h4{
  color:var(--rc-verde-oliva-medio);
  font-weight:700;
}

/* Texto "Desaparecido": carbón/neutral, no rojo ni celeste.
   Cubre indicador, semaforo-text, semaforo-dot y leyenda. */
#app #page-fichas.papel-tactico .indicador-desaparecio,
#app #page-fichas.papel-tactico .semaforo-text.desaparecio,
#app #page-fichas.papel-tactico .semaforo-dot.desaparecio,
#app #page-fichas.papel-tactico .semaforo-legend .dot.desaparecio,
#app #page-fichas.papel-tactico .rapida-seccion-desaparecidos h5{
  color:var(--rc-texto-principal);
  background:var(--rc-estado-neutro);
  border-color:rgba(107,117,104,.55);
}
#app #page-fichas.papel-tactico .rapida-seccion-desaparecidos{border-top-color:rgba(107,117,104,.35);}

/* Links "Volver" del detalle: azules identificables */
#app #page-fichas.papel-tactico .fichas-detail-header a,
#app #page-fichas.papel-tactico .ficha-volver,
#app #page-fichas.papel-tactico .ficha-back-btn{
  color:var(--rc-accent-papel);
  font-weight:700;
}
#app #page-fichas.papel-tactico .fichas-detail-header a:hover,
#app #page-fichas.papel-tactico .ficha-volver:hover,
#app #page-fichas.papel-tactico .ficha-back-btn:hover{
  color:#08589e;
  text-decoration:underline;
}

/* Chips y badges: overflow seguro (no romper línea) */
#app #page-fichas.papel-tactico .ficha-tipo-comp,
#app #page-fichas.papel-tactico .fichas-chip{
  max-width:100%;
  overflow-wrap:break-word;
  white-space:normal;
}

/* Total/Suma: carbón peso 800 */
#app #page-fichas.papel-tactico .comparativa-total b,
#app #page-fichas.papel-tactico .comparativa-suma b{color:var(--rc-texto-principal);font-weight:800;}

/* ============================================================
   RONDA 3 — AGENDA PROGRAMADA + FIX CHIP DESAPARECIÓ
   Tokens: Papel Táctico + Metal Arena (sin !important).
   ============================================================ */

/* --- 3.1 Botones Agenda Programada (Plan + Agenda) ---
   RONDA 5 (R5f, 20/07/2026, orden de Juanjo — DEFINICION_AGENDA_OPERATIVA_R5.md
   §5 "REMATE VISUAL PENDIENTE"): revertido de Metal Arena claro (RONDA 4) a la
   gama OSCURA ACERO del resto del sistema. Receta = la misma fórmula de acero
   ya validada (radar_visual.css §5/§11 "Botones tácticos acero/verde
   petróleo"), copiada carácter por carácter y parametrizada en los tokens
   --rc-acero-* (definidos en :root, index.html) para gobierno de tokens. */
#app #page-plan.papel-tactico .agp-detail-actions .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-detail-actions .btn.agp-btn-destructive,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar,
#app #page-plan.papel-tactico .plan-pending-box .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-destructive,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar,
#app #page-agenda.papel-tactico .plan-pending-box .btn.agp-btn-normal{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:10px;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  border:1px solid var(--rc-acero-borde);
  border-top-color:var(--rc-acero-borde-top);
  border-bottom-color:var(--rc-acero-borde-bottom);
  transition:background .15s ease,color .15s ease,transform .08s ease,border-color .15s ease;
  line-height:1.1;
  /* Relieve normalizado (METODO_TRABAJO_VISUAL §Relieve): keyline + bisel
     plata arriba + sombra interna abajo + sombra exterior, gama neutra. */
  box-shadow:
    inset 0 2px var(--rc-acero-sombra-top),
    inset 0 -2px var(--rc-acero-sombra-bottom),
    0 6px 14px var(--rc-acero-sombra-ext);
}
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-normal,
#app #page-plan.papel-tactico .plan-pending-box .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .plan-pending-box .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar{
  background:
    linear-gradient(180deg,var(--rc-acero-relieve-1) 0%,var(--rc-acero-relieve-2) 22%,transparent 40%),
    linear-gradient(180deg,var(--rc-acero-bg-1),var(--rc-acero-bg-2));
  color:var(--rc-acero-texto);
}
#app #page-plan.papel-tactico .agp-detail-actions .btn.agp-btn-normal:hover,
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-normal:hover,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-normal:hover,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-normal:hover,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-normal:hover,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-normal:hover,
#app #page-plan.papel-tactico .plan-pending-box .btn.agp-btn-normal:hover,
#app #page-agenda.papel-tactico .plan-pending-box .btn.agp-btn-normal:hover,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar:hover,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-reagendar:hover,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar:hover,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-reagendar:hover{
  border-color:var(--rc-acero-borde-hover);color:var(--rc-acero-texto-hover);
  transform:translateY(-1px);
}
#app #page-plan.papel-tactico .agp-detail-actions .btn.agp-btn-destructive,
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-destructive{
  background:
    linear-gradient(180deg,var(--rc-acero-relieve-1) 0%,var(--rc-acero-relieve-2) 22%,transparent 40%),
    linear-gradient(180deg,var(--rc-acero-danger-1),var(--rc-acero-danger-2));
  color:var(--rc-acero-texto);
}
#app #page-plan.papel-tactico .agp-detail-actions .btn.agp-btn-destructive:hover,
#app #page-agenda.papel-tactico .agp-detail-actions .btn.agp-btn-destructive:hover{
  border-color:var(--rc-acero-borde-hover);color:var(--rc-acero-texto-hover);
  transform:translateY(-1px);
}
/* --- 3.1b RONDA 5 (R5f): Botón "Ver ficha" en tarjetas de visita — misma
   gama acero oscura que 3.1 (antes Metal Arena claro de RONDA 4). --- */
#app #page-plan.papel-tactico .agp-visita__actions .btn,
#app #page-agenda.papel-tactico .agp-visita__actions .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:28px;padding:5px 14px;font-size:.75rem;
  font-weight:700;letter-spacing:.02em;text-transform:none;
  border-radius:8px;cursor:pointer;line-height:1.1;
  background:
    linear-gradient(180deg,var(--rc-acero-relieve-1) 0%,var(--rc-acero-relieve-2) 22%,transparent 40%),
    linear-gradient(180deg,var(--rc-acero-bg-1),var(--rc-acero-bg-2));
  color:var(--rc-acero-texto);
  border:1px solid var(--rc-acero-borde);
  border-top-color:var(--rc-acero-borde-top);
  border-bottom-color:var(--rc-acero-borde-bottom);
  box-shadow:
    inset 0 2px var(--rc-acero-sombra-top),
    inset 0 -2px var(--rc-acero-sombra-bottom),
    0 2px 4px var(--rc-acero-sombra-ext);
  transition:background .15s ease,color .15s ease,transform .08s ease,border-color .15s ease;
}
#app #page-plan.papel-tactico .agp-visita__actions .btn:hover,
#app #page-agenda.papel-tactico .agp-visita__actions .btn:hover{
  border-color:var(--rc-acero-borde-hover);color:var(--rc-acero-texto-hover);
  transform:translateY(-1px);
}
#app #page-plan.papel-tactico .agp-visita__actions .btn:focus-visible,
#app #page-agenda.papel-tactico .agp-visita__actions .btn:focus-visible{
  outline:3px solid var(--rc-blue);outline-offset:2px;
}

/* --- 3.2 Pestañas de semana (Plan + Agenda) --- */
#app #page-plan.papel-tactico .agp-week-tabs,
#app #page-agenda.papel-tactico .agp-week-tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:8px;margin-bottom:12px;
  background:var(--rc-metal-arena-100);
  border-radius:10px;
}
#app #page-plan.papel-tactico .agp-week-tab,
#app #page-agenda.papel-tactico .agp-week-tab{
  flex:1 1 auto;min-width:120px;
  padding:9px 14px;border-radius:8px;
  background:var(--rc-metal-arena-200);color:var(--rc-texto-principal);
  font-size:.82rem;font-weight:700;cursor:pointer;
  border:1px solid var(--rc-metal-arena-300);
  transition:background .15s ease,color .15s ease;
}
#app #page-plan.papel-tactico .agp-week-tab:hover,
#app #page-agenda.papel-tactico .agp-week-tab:hover{
  background:var(--rc-metal-arena-300);
}
#app #page-plan.papel-tactico .agp-week-tab.active,
#app #page-agenda.papel-tactico .agp-week-tab.active{
  background:linear-gradient(180deg,var(--rc-accent-papel),var(--rc-azul-electrico-papel));
  color:#fff;border-color:transparent;
}

/* --- 3.3 Paneles de semana/día (Plan + Agenda) --- */
#app #page-plan.papel-tactico .agp-week-pane,
#app #page-plan.papel-tactico .agp-day-pane,
#app #page-agenda.papel-tactico .agp-week-pane,
#app #page-agenda.papel-tactico .agp-day-pane{
  display:none;
}
#app #page-plan.papel-tactico .agp-week-pane.on,
#app #page-plan.papel-tactico .agp-day-pane.on,
#app #page-agenda.papel-tactico .agp-week-pane.on,
#app #page-agenda.papel-tactico .agp-day-pane.on{
  display:block;
}
#app #page-plan.papel-tactico .agp-week-pane__top,
#app #page-plan.papel-tactico .agp-day-pane__head,
#app #page-agenda.papel-tactico .agp-week-pane__top,
#app #page-agenda.papel-tactico .agp-day-pane__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:10px;flex-wrap:wrap;
}

/* --- 3.4 Pestañas de día (Plan + Agenda) --- */
#app #page-plan.papel-tactico .agp-day-tabs,
#app #page-agenda.papel-tactico .agp-day-tabs{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:6px;margin-bottom:10px;
  background:var(--rc-metal-arena-50);
  border-radius:8px;
}
#app #page-plan.papel-tactico .agp-day-tab,
#app #page-agenda.papel-tactico .agp-day-tab{
  flex:0 1 auto;min-width:64px;
  padding:7px 10px;border-radius:6px;
  background:var(--rc-metal-arena-200);color:var(--rc-texto-principal);
  font-size:.78rem;font-weight:700;cursor:pointer;
  border:1px solid var(--rc-metal-arena-300);
  transition:background .15s ease,color .15s ease;
}
#app #page-plan.papel-tactico .agp-day-tab:hover,
#app #page-agenda.papel-tactico .agp-day-tab:hover{
  background:var(--rc-metal-arena-300);
}
#app #page-plan.papel-tactico .agp-day-tab.active,
#app #page-agenda.papel-tactico .agp-day-tab.active{
  background:var(--rc-accent-papel);color:#fff;border-color:transparent;
}

/* --- 3.5 Header del detalle (Plan + Agenda) --- */
#app #page-plan.papel-tactico .agp-detail-title,
#app #page-agenda.papel-tactico .agp-detail-title{
  color:var(--rc-texto-principal);font-weight:800;
  font-size:1.15rem;margin:0 0 4px;
}
#app #page-plan.papel-tactico .agp-detail-meta,
#app #page-agenda.papel-tactico .agp-detail-meta{
  color:var(--rc-texto-secundario-papel);font-size:.85rem;
  margin:0 0 10px;
}
#app #page-plan.papel-tactico .agp-detail-actions,
#app #page-agenda.papel-tactico .agp-detail-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}

/* --- 3.6 Grid compacta de visitas (Plan + Agenda) --- */
#app #page-plan.papel-tactico .agp-visitas-grid--compact,
#app #page-agenda.papel-tactico .agp-visitas-grid--compact{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
}
#app #page-plan.papel-tactico .agp-visita,
#app #page-agenda.papel-tactico .agp-visita{
  background:var(--rc-metal-arena-50);
  border:1px solid var(--rc-metal-arena-200);
  border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
}
#app #page-plan.papel-tactico .agp-visita-nombre,
#app #page-agenda.papel-tactico .agp-visita-nombre{
  color:var(--rc-texto-principal);font-weight:800;font-size:.88rem;
}
#app #page-plan.papel-tactico .agp-visita-line,
#app #page-agenda.papel-tactico .agp-visita-line{
  color:var(--rc-texto-secundario-papel);font-size:.78rem;line-height:1.4;
}
#app #page-plan.papel-tactico .agp-visita details,
#app #page-agenda.papel-tactico .agp-visita details{
  margin-top:4px;font-size:.76rem;color:var(--rc-texto-secundario-papel);
}
#app #page-plan.papel-tactico .agp-visita details summary,
#app #page-agenda.papel-tactico .agp-visita details summary{
  cursor:pointer;color:var(--rc-accent-papel);font-weight:700;
  padding:2px 0;
}
#app #page-plan.papel-tactico .agp-visita details[open] summary,
#app #page-agenda.papel-tactico .agp-visita details[open] summary{
  margin-bottom:4px;
}

/* --- 3.7 Ocultar contenedores vacíos (Plan + Agenda) --- */
#app #page-plan.papel-tactico .module-msg:empty,
#app #page-plan.papel-tactico .diagnostic-box:empty,
#app #page-plan.papel-tactico .agenda-msg:empty,
#app #page-agenda.papel-tactico .module-msg:empty,
#app #page-agenda.papel-tactico .diagnostic-box:empty,
#app #page-agenda.papel-tactico .agenda-msg:empty{
  display:none;
}

/* --- 3.8 Botón "Ver agenda programada" en Plan --- */
#app #page-plan.papel-tactico .plan-ver-agendaprog{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:10px;
  background:var(--rc-metal-arena-200);color:var(--rc-texto-principal);
  border:1px solid var(--rc-metal-arena-300);
  font-size:.82rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .08s ease;
}
#app #page-plan.papel-tactico .plan-ver-agendaprog:hover{
  background:var(--rc-metal-arena-300);color:#fff;transform:translateY(-1px);
}

/* --- 3.9 FIX chip "× Desapareció" en Fichas (columna Estado demasiado angosta) --- */
/* El grid base usa 110px fijos; el chip mide ~109px + 20px padding = 129px y se corta. */
#page-fichas .ficha-compare-grid{
  grid-template-columns:minmax(0,1fr) 88px 88px minmax(124px,max-content);
}
#page-fichas .ficha-compare-cell.estado{
  padding-left:8px;padding-right:6px;
}
/* Mejorar contraste del chip "Desapareció" sobre Metal Arena */
#page-fichas.papel-tactico .semaforo-text.desaparecio,
#page-fichas.papel-tactico .indicador-desaparecio{
  color:var(--rc-texto-principal);font-weight:700;
}
#page-fichas.papel-tactico .semaforo-dot.desaparecio{
  background:var(--rc-estado-neutro);color:var(--rc-estado-neutro);
}
#page-fichas.papel-tactico .rapida-seccion-desaparecidos h5{
  color:var(--rc-texto-principal);font-weight:800;
}

/* ============================================================
   RONDA 4 — ESTADOS FOCUS/DISABLED/SOMBRA botones Agenda + deep z
   ============================================================ */

/* RONDA 4 (19/07/2026): Relieve normalizado según METODO_TRABAJO_VISUAL.md
   §Relieve — keyline oscura 1px + bisel plata arriba + sombra interna
   abajo + sombra exterior neutra. Gama neutra, no teñida del fondo.
   Aplica a TODOS los botones agp-btn-* del detalle/week/day/pending. */
#app #page-agenda.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"],
#app #page-agenda.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"],
#app #page-agenda.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"],
#app #page-agenda.papel-tactico .plan-pending-box .btn[class*="agp-btn-"],
#app #page-plan.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"],
#app #page-plan.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"],
#app #page-plan.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"],
#app #page-plan.papel-tactico .plan-pending-box .btn[class*="agp-btn-"]{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 2px rgba(255,255,255,.30),
    inset 0 -2px rgba(0,0,0,.35),
    0 2px 5px rgba(40,46,38,.30);
}

/* focus-visible claro (accesibilidad) */
#app #page-agenda.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"]:focus-visible,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"]:focus-visible,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"]:focus-visible,
#app #page-plan.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"]:focus-visible,
#app #page-plan.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"]:focus-visible,
#app #page-plan.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"]:focus-visible{
  outline:3px solid var(--rc-azul-electrico-papel);
  outline-offset:2px;
}

/* disabled claramente distinguible */

/* --- RONDA 4: Altura/padding uniformes para botones Agenda (34px, padding coherente) --- */
#app #page-agenda.papel-tactico .agp-week-pane__top .btn.agp-btn-normal,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-week-pane__top .btn.agp-btn-normal,
#app #page-plan.papel-tactico .agp-day-pane__head .btn.agp-btn-normal{
  height:34px;min-height:34px;padding:0 14px;font-weight:700;
}
#app #page-agenda.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"]:disabled,
#app #page-agenda.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"]:disabled,
#app #page-agenda.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"]:disabled,
#app #page-plan.papel-tactico .agp-detail-actions .btn[class*="agp-btn-"]:disabled,
#app #page-plan.papel-tactico .agp-week-pane__top .btn[class*="agp-btn-"]:disabled,
#app #page-plan.papel-tactico .agp-day-pane__head .btn[class*="agp-btn-"]:disabled{
  opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.4);
}

/* ======================================================================
   ENFORCEMENT FINAL — panel de criterios de Planificación (Fable 20/07)
   Justificación registrada del uso de !important (regla del proyecto:
   solo con justificación): tras 4 rondas de 3 motores, el panel siguió
   camuflado/detrás por reglas en cascada dispersas entre index.html y
   este archivo. Esta regla, al FINAL del último archivo cargado, es la
   fuente de verdad terminal e inequívoca del panel: papel claro, texto
   oscuro, por encima de todo. Si un futuro cambio necesita tocar esto,
   editar ESTA regla, no agregar otra encima.
   ====================================================================== */
#page-planes .cb-dropdown.open{z-index:9990 !important;}
#page-planes .cb-dropdown .cb-panel{
  background:#fbf9f3 !important;
  opacity:1 !important;
  z-index:9991 !important;
  border:1px solid rgba(28,43,53,.45) !important;
}
#page-planes .cb-dropdown .cb-panel .cb-row span{color:#22301f !important;}
#page-planes .cb-dropdown .cb-panel .cb-row:hover{background:rgba(10,117,212,.08) !important;}

/* Panel SUELTO (mudado a body al abrir — ver toggleCheckboxDropdown en
   index.html, pasada final Fable 20/07). Vive fuera de todo contexto de
   apilamiento: estos son sus estilos completos y terminales. */
.cb-panel-suelto{display:block !important;position:fixed !important;min-width:160px;width:max-content;max-width:min(300px,92vw);max-height:240px;overflow-x:hidden;overflow-y:auto;background:#fbf9f3 !important;border:1px solid rgba(28,43,53,.45) !important;border-radius:10px;padding:6px;box-shadow:0 14px 34px rgba(20,30,40,.30);z-index:99999 !important;opacity:1 !important;}
.cb-panel-suelto .cb-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;min-height:30px;}
.cb-panel-suelto .cb-row:hover{background:rgba(10,117,212,.08) !important;}
.cb-panel-suelto .cb-row span{font-size:12.5px;color:#22301f !important;min-width:0;overflow-wrap:break-word;word-break:break-word;}
.cb-panel-suelto .cb-row input{accent-color:#0a75d4;}
.cb-panel-suelto .cb-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;margin-top:8px;border-top:1px solid rgba(124,132,120,.35);}
.cb-panel-suelto .cb-actions button{height:30px;padding:0 12px;font-size:12px;font-weight:700;border-radius:7px;border:none;cursor:pointer;}
.cb-panel-suelto .cb-actions .cb-apply{background:var(--rc-blue,#0a75d4);color:#fff;}
.cb-panel-suelto .cb-actions .cb-clear{background:#efeadf;color:#22301f;border:1px solid rgba(124,132,120,.45);}

/* ==================================================================
   PULIDO UI + SISTEMA DE ESTADOS — 21/07/2026 (orden de Juanjo)
   Bloque único y auditable de esta corrida. Cada regla scopeada a su
   pantalla. Fuente: EXPEDIENTE_PULIDO_UI.md + decisiones de Juanjo.
   ================================================================== */

/* --- A1 · Instituciones vinculadas: radio + nombre + zona en UNA fila ---
   Antes .availability-row (grid auto-fit) separaba el círculo del nombre. */
#page-agenda .inst-principal-row{display:flex;align-items:center;gap:10px;}
#page-agenda .inst-principal-row>span:first-child{flex:0 0 auto;}
#page-agenda .inst-principal-row>span:last-child{flex:1 1 auto;min-width:0;}

/* --- C6 · Fichas móvil: trimestres LADO A LADO (sin conmutador) ---
   El conmutador Actual/Anterior (.rapida-tabs) ocultaba un trimestre. Se
   muestran los dos a la vez; el zoom con dedos (viewport liberado en el
   <meta> de index.html) resuelve la lectura si queda chico. */
@media(max-width:768px){
  #page-fichas .rapida-tabs{display:none;}
  #page-fichas .rapida-paneles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  #page-fichas .rapida-panel{display:block;}
}

/* --- PULIDO-1 §5-6 · Fichas móvil: comparación deslizable + aplanado de
   recuadros anidados (Juanjo 21/07). Escritorio (>600px) sin cambios. --- */
@media(max-width:600px){
  /* §5 · La comparación (Foto actual / Foto anterior) se DESLIZA en horizontal:
     columnas anchas y alcanzables con el dedo; con zoom se recorre todo. Antes
     el grid 1fr 1fr las apretaba y recortaba la columna derecha. */
  #page-fichas .rapida-paneles{
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(250px,1fr);gap:14px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:8px;
  }
  #page-fichas .rapida-panel{scroll-snap-align:start;}
  /* §6 · Aplanar los recuadros internos: pierden borde, fondo, relieve y padding
     lateral (quedan como secciones sobre la crema de la tarjeta exterior, que es
     la única que conserva su marco). Texto oscuro sobre crema: contraste seguro. */
  #app #page-fichas.papel-tactico .ficha-card-wide .market-block,
  #app #page-fichas.papel-tactico .ficha-card-wide .rapida-panel,
  #app #page-fichas.papel-tactico .ficha-card-wide .comparativa-periodos,
  #app #page-fichas.papel-tactico .ficha-card-wide .resumen-comercial,
  #app #page-fichas.papel-tactico .ficha-card-wide .ficha-os{
    background:none;border:none;border-radius:0;box-shadow:none;
    padding-left:0;padding-right:0;overflow:visible;
  }
  #page-fichas .ficha-card-wide .market-head,
  #page-fichas .ficha-card-wide .market-body{padding-left:0;padding-right:0;}
  /* Los market-block apilados se separan por una línea sutil, no por un marco. */
  #app #page-fichas.papel-tactico .ficha-card-wide .market-block{
    border-bottom:1px solid rgba(124,132,120,.30);
    border-radius:0;padding-bottom:10px;margin-bottom:10px;
  }
}

/* --- B5 · "Generar opciones": pista permanente de qué falta --- */
#page-planes .plan-generar-hint{margin:6px 2px 0;font-size:.8rem;font-weight:700;color:var(--text-muted);}

/* --- B4 · Configurar ciclo INLINE en móvil (sin tarjeta flotante) +
   pasada responsive del circuito diario a ~390px (sin desbordes) --- */
@media(max-width:640px){
  #page-planes .plan-ciclo-head{flex-wrap:wrap;gap:8px;}
  #page-planes .plan-ciclo-editor{width:100%;flex-direction:column;align-items:stretch;box-shadow:none;margin:8px 0;}
  #page-planes .plan-ciclo-editor .plan-field{width:100%;}
  #page-planes .plan-ciclo-editor__actions{width:100%;display:flex;gap:8px;}
  #page-planes .plan-ciclo-editor__actions .btn{flex:1 1 auto;}
}
@media(max-width:430px){
  #page-agenda .inline-form{flex-wrap:wrap;gap:6px;}
  #page-agenda .inline-form .inp,#page-agenda .inline-form>.btn{flex:1 1 100%;}
  #page-agenda .detail-grid{grid-template-columns:1fr;}
}

/* --- E · Tokens del semáforo (el verde eléctrico NO existía como
   --rc-verde-electrico-*; se materializa acá, verde eléctrico FUERTE = Visitado) --- */
:root{
  --rc-sem-verde:#2fe36a;   --rc-sem-verde-hi:#8affbe;   --rc-sem-verde-lo:#12994a;   --rc-sem-verde-glow:rgba(47,227,106,.55);
  --rc-sem-amarillo:#ffc21e;--rc-sem-amarillo-hi:#ffe28a;--rc-sem-amarillo-lo:#c98a00;--rc-sem-amarillo-glow:rgba(255,194,30,.50);
  --rc-sem-rojo:#ff4d43;    --rc-sem-rojo-hi:#ffab9f;    --rc-sem-rojo-lo:#c11f16;    --rc-sem-rojo-glow:rgba(255,77,67,.55);
}

/* --- E · Semáforo redondo con relieve "que sale de la pantalla" (símil metal) --- */
.rc-sem{
  --c:var(--rc-sem-amarillo);--chi:var(--rc-sem-amarillo-hi);--clo:var(--rc-sem-amarillo-lo);--cglow:var(--rc-sem-amarillo-glow);
  width:30px;height:30px;border-radius:50%;padding:0;border:none;cursor:pointer;
  display:inline-block;vertical-align:middle;position:relative;flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%,var(--chi),var(--c) 46%,var(--clo) 100%);
  box-shadow:0 4px 9px rgba(0,0,0,.40),0 9px 20px var(--cglow),
    inset 0 2px 3px rgba(255,255,255,.65),inset 0 -4px 6px rgba(0,0,0,.42);
  transition:transform .12s ease,box-shadow .2s ease;
}
.rc-sem::after{content:"";position:absolute;left:22%;top:13%;width:34%;height:26%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);pointer-events:none;}
.rc-sem--verde{--c:var(--rc-sem-verde);--chi:var(--rc-sem-verde-hi);--clo:var(--rc-sem-verde-lo);--cglow:var(--rc-sem-verde-glow);}
.rc-sem--amarillo{--c:var(--rc-sem-amarillo);--chi:var(--rc-sem-amarillo-hi);--clo:var(--rc-sem-amarillo-lo);--cglow:var(--rc-sem-amarillo-glow);}
.rc-sem--rojo{--c:var(--rc-sem-rojo);--chi:var(--rc-sem-rojo-hi);--clo:var(--rc-sem-rojo-lo);--cglow:var(--rc-sem-rojo-glow);}
.rc-sem:not(.rc-sem--locked):hover{transform:translateY(-1px) scale(1.06);}
.rc-sem--locked{cursor:default;}
.rc-sem--sm{width:15px;height:15px;box-shadow:0 2px 4px rgba(0,0,0,.35),0 3px 8px var(--cglow),inset 0 1px 2px rgba(255,255,255,.6),inset 0 -2px 3px rgba(0,0,0,.4);}

/* --- A2 · Tablero del contacto: leyenda + tarjetas símil metal, texto NEGRO --- */
#page-agenda .rc-tab-leyenda{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px;
  font-size:.76rem;font-weight:700;color:#2a2118;
  background:linear-gradient(180deg,#f6f0e2,#e7ddc9);border:1px solid rgba(28,43,53,.28);
  border-radius:10px;padding:7px 11px;box-shadow:inset 0 1px rgba(255,255,255,.6);}
#page-agenda .rc-tab-card{
  background:linear-gradient(180deg,#f3ead8,#d7c7ad);
  border:1px solid rgba(255,255,255,.34);border-radius:14px;
  box-shadow:var(--rc-shadow-card);position:relative;overflow:hidden;padding:10px 12px;}
#page-agenda .rc-tab-card>*{position:relative;z-index:1;}
#page-agenda .rc-tab-card::before{content:"";position:absolute;inset:0;opacity:.20;pointer-events:none;
  background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),transparent 18%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(25,35,43,.08) 18px 19px);}
/* A2: títulos y valores en NEGRO (el papel-táctico los deja gris lavado). !important
   justificado: gana al override de tema .papel-tactico .detail-field label (orden de Juanjo). */
#page-agenda .rc-tab-card label{color:#101820 !important;font-weight:800;}
#page-agenda .rc-tab-card>div{color:#101820;margin-top:4px;}
#page-agenda .rc-estado-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
#page-agenda .rc-estado-label{font-weight:900;color:#101820;font-size:.98rem;}
#page-agenda .rc-estado-adj{color:#4a3f31;font-weight:700;font-size:.82rem;}
#page-agenda .rc-fallida{margin-top:7px;font-size:.78rem;font-weight:800;color:var(--rc-sem-rojo-lo);
  background:rgba(255,77,67,.10);border:1px solid rgba(193,31,22,.35);border-radius:7px;padding:4px 8px;display:inline-block;}
#page-agenda .rc-cruzado-leyenda{margin-top:6px;font-size:.74rem;color:#4a3f31;font-weight:700;}
#page-agenda .rc-cruzado-reset{margin-top:6px;font-size:.72rem;}
#page-agenda .rc-cruzado-reset a{color:var(--rc-blue-tag);cursor:pointer;text-decoration:underline;}
/* semáforo en el listado */
#page-agenda .rc-meta-sem{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* ======================================================================
   MODO MONJE MÓVIL (Fable 21/07 — orden directa de Juanjo):
   "En el celular, la utilidad es que se vea, no la decoración. Todo lo
   encapsulado en recuadro quita espacio." En ≤600px, los contenedores
   ESTRUCTURALES pierden marco, fondo, sombra y relleno lateral: quedan
   como secciones separadas por espacio, y el contenido usa el ancho
   completo. En escritorio no cambia nada. !important justificado: regla
   terminal de dispositivo que debe ganarle a toda la decoración previa.
   Las tarjetas-ítem (visitas, candidatos) solo reducen su relleno: son
   unidades de lectura, no encapsulado.
   ====================================================================== */
@media(max-width:600px){
  /* Planificación: secciones y bloques */
  #app #page-planes .plan-section,
  #app #page-planes .plan-block,
  #app #page-planes .plan-advanced,
  #app #page-planes .plan-ciclo-editor,
  #app #page-planes .diagnostic-box,
  #app #page-planes .plan-opciones,
  /* Fichas: tarjeta exterior y restos con marco */
  #app #page-fichas .ficha-card-wide,
  #app #page-fichas .comparativa-periodos,
  #app #page-fichas .resumen-comercial,
  /* Configuración */
  #app #page-config .cfg-card,
  /* Detalle de contacto: tablero y campos */
  #app .rc-tab-card,
  #app .detail-field{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #app #page-config .cfg-card::before{display:none !important;}
  /* Separación sutil entre secciones (reemplaza al marco) */
  #app #page-planes .plan-section,
  #app #page-config .cfg-card,
  #app .rc-tab-card{
    border-bottom:1px solid rgba(124,132,120,.28) !important;
    padding-bottom:10px !important;
    margin-bottom:10px !important;
  }
  /* Tarjetas-ítem: respiran, no encapsulan */
  #app .agp-visita,
  #app #page-planes .plan-opc-card,
  #app .plan-card{padding:6px 8px !important;}
}

/* MONJE 2 (Fable 21/07, ajuste fino de Juanjo): Fichas móvil — que la
   comparación ENTRE completa sin scroll horizontal: columnas que encogen
   (minmax(0,1fr)) + contenido compacto + página a sangre completa (el
   "borde invisible" era el relleno lateral de la página asomando al
   deslizar). El overflow-x queda solo como red por si algún contenido
   interno no pudiera encoger. */
@media(max-width:600px){
  #app #page-fichas{padding-left:6px !important;padding-right:6px !important;}
  #app #page-fichas .rapida-paneles{
    grid-auto-flow:row !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:6px !important;
    width:100% !important;
    margin-left:0 !important;margin-right:0 !important;
    overflow-x:visible !important;
  }
  #app #page-fichas .rapida-panel{
    min-width:0 !important;
    padding:4px !important;
    font-size:11.5px !important;
  }
  #app #page-fichas .rapida-panel *{
    overflow-wrap:break-word;
    word-break:break-word;
  }
  #app #page-fichas .rapida-panel h1,
  #app #page-fichas .rapida-panel h2,
  #app #page-fichas .rapida-panel h3,
  #app #page-fichas .rapida-panel h4{font-size:12px !important;}
  #app #page-fichas .market-block{padding:4px 0 !important;font-size:12px !important;}
}

/* TARJETAS DE AGENDA DE CONTACTOS como las de FICHAS (Fable 21/07, pedido
   de Juanjo: "quedó todo del mismo color" + letra y botones). Receta del
   bloque .ficha-card del papel táctico (degradé + biseles V4.6). CORRECCIÓN
   FABLE: el envoltorio real del listado es .plan-item (no .plan-card). */
#app #page-agenda.papel-tactico .plan-item{
  background:linear-gradient(180deg,#f1eee5,#e7e2d6);
  border:1px solid rgba(124,132,120,.35);
  box-shadow:
    0 6px 16px rgba(40,46,38,.12),
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -2px rgba(0,0,0,.08);
  color:#2f362f;
  border-radius:12px;
  padding:12px 14px;
}
@media (hover:hover){
/* FIX-CALLE-4 · G5 — scoped a hover real (ver comentario línea 545). */
#app #page-agenda.papel-tactico .plan-item:hover{
  background:linear-gradient(180deg,#e9e6dd,#ded9cd);
  border-color:rgba(124,132,120,.55);
}
}
#app #page-agenda.papel-tactico .plan-item.active{
  background:linear-gradient(180deg,#e9e6dd,#ded9cd);
  border-color:rgba(124,132,120,.55);
}
/* Letra: jerarquía como en fichas — título fuerte oscuro, metas suaves */
#app #page-agenda.papel-tactico .plan-item .plan-card__header{
  border-bottom:1px solid rgba(124,132,120,.28);
  padding-bottom:6px;margin-bottom:6px;
  color:#22301f;font-weight:800;font-size:.95rem;
}
#app #page-agenda.papel-tactico .plan-item .plan-card__num{color:#0a75d4;font-weight:800;}
#app #page-agenda.papel-tactico .plan-item .plan-card__meta{color:#5a6359;font-size:.8rem;}
#app #page-agenda.papel-tactico .plan-item .plan-card__meta strong{color:#2f362f;}
/* Botones: familia papel (como los de fichas), no la gama clara plana */
#app #page-agenda.papel-tactico .plan-item .plan-card__actions .btn{
  background:#efeadf;color:#22301f;border:1px solid rgba(124,132,120,.45);
  border-radius:7px;font-weight:700;
}
#app #page-agenda.papel-tactico .plan-item .plan-card__actions .btn:hover{
  background:#e7e0d1;border-color:#0a75d4;color:#0a75d4;
}

/* ======================================================================
   BOTÓN CELESTE VOLUMÉTRICO — familia única (Fable 21/07, pedido de
   Juanjo): la forma de "Limpiar"/"Agenda Instituciones" (redondeado,
   sombra, bisel con volumen) pero en celeste. Se aplica parejo a:
   "Abrir ficha" (Fichas), "Ver ficha / Ver contacto" (tarjetas de
   Agenda de Contactos) y la pestaña activa Agenda/Agenda programada.
   Este bloque va al final: es la palabra definitiva de esos botones.
   ====================================================================== */
#app #page-fichas.papel-tactico .ficha-summary-actions .btn,
#app #page-agenda.papel-tactico .plan-item .plan-card__actions .btn,
#app #page-agenda.papel-tactico .segmented.agenda-primary button.active{
  background:linear-gradient(180deg,#2ea6ff 0%,#0f82e6 55%,#0a6cc4 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-top-color:rgba(255,255,255,.5);
  border-bottom-color:rgba(0,0,0,.35);
  border-radius:10px;
  font-weight:800;
  letter-spacing:.03em;
  box-shadow:
    0 4px 10px rgba(10,108,196,.38),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 3px rgba(0,0,0,.28);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
#app #page-fichas.papel-tactico .ficha-summary-actions .btn:hover,
#app #page-agenda.papel-tactico .plan-item .plan-card__actions .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.07);
  box-shadow:
    0 6px 14px rgba(10,108,196,.45),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(0,0,0,.28);
}
#app #page-fichas.papel-tactico .ficha-summary-actions .btn:active,
#app #page-agenda.papel-tactico .plan-item .plan-card__actions .btn:active{
  transform:translateY(1px);
  box-shadow:
    0 2px 6px rgba(10,108,196,.3),
    inset 0 2px 4px rgba(0,0,0,.3);
}

/* AJUSTE FINO Fable 21/07 (pedido de Juanjo):
   1) Tarjetas de Agenda de Contactos: la franja del nombre gana FONDO
      propio (banda papel más profunda, a sangre hasta los bordes de la
      tarjeta) para que el encabezado "se pellizque" del cuerpo.
   2) Chip "Visitado" de Fichas: verde más OSCURO y legible (el claro
      sobre claro no se leía). */
/* FIX-CALLE-3 cont. §4: la franja del nombre asumía ser el PRIMER elemento (al
   tope de la tarjeta), pero la lista de Agenda pone "Seleccionar" antes. Su
   margin-top negativo (-12px) PISABA la casilla y sus esquinas redondeadas
   superiores la hacían parecer una SEGUNDA tarjeta. Ahora: separación arriba
   (no pisa a "Seleccionar") + esquinas CUADRADAS (se integra a la tarjeta única,
   no encapsula); sigue a sangre a los lados. */
#app #page-agenda.papel-tactico .plan-item .plan-card__header{
  background:linear-gradient(180deg,#e3ddcd,#d8d1be);
  /* FIX FABLE 24/07 (ronda 4): aire mínimo — la casilla toca la franja sin
     pisarse (4px seguía siendo mucho para el ojo de Juanjo). */
  margin:0 -14px 8px -14px;          /* a sangre a los lados; pegada arriba */
  padding:9px 14px 7px 14px;
  border-radius:0;                   /* sin redondeo propio: no parece otra tarjeta */
  border-bottom:1px solid rgba(124,132,120,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
/* FIX-CALLE-3 ronda3 §2: la casilla "Seleccionar" acompaña la separación compacta. */
#page-agenda .plan-item .agp-visita__check{margin-bottom:0;}
#app #page-fichas.papel-tactico .ficha-summary-visited{
  background:#2f6d33 !important;      /* verde oscuro sólido */
  color:#eaf6e6 !important;           /* texto claro encima: contraste real */
  border:1px solid rgba(0,0,0,.25) !important;
}

/* Fichas: la fila de acciones de filtros ocupa su PROPIA fila completa,
   alineada a la derecha — Limpiar filtros ya no se monta sobre el selector
   de obras sociales (Juanjo 21/07). Etiqueta corta: "Empresa: TPQ". */
#app #page-fichas.papel-tactico .fichas-filter-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  margin-top:6px;
}

/* ==================================================================
   LIMPIEZA L1 — CIERRE DE CICLO + RESUMEN CONGELADO (21/07/2026)
   Un ciclo cerrado es agenda histórica de solo lectura + panel de
   resumen congelado (familia visual símil metal, letras negras).
   ================================================================== */
.agp-cerrado-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;
  color:var(--rc-amber,#9d5c09);background:rgba(157,92,9,.12);border:1px solid rgba(157,92,9,.38);
  border-radius:8px;padding:4px 10px;}
.agp-resumen-ciclo{margin:12px 0 6px;padding:12px 14px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f3ead8,#d7c7ad);border:1px solid rgba(255,255,255,.34);
  box-shadow:var(--rc-shadow-card);}
.agp-resumen-titulo{margin:0 0 10px;font-size:.9rem;font-weight:900;color:#101820;
  text-transform:uppercase;letter-spacing:.03em;}
.agp-resumen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.agp-resumen-card{background:rgba(255,255,255,.5);border:1px solid rgba(28,43,53,.20);border-radius:10px;padding:9px 11px;}
.agp-resumen-lab{font-size:.72rem;font-weight:800;color:#3a3226;text-transform:uppercase;letter-spacing:.02em;}
.agp-resumen-val{font-size:1.35rem;font-weight:900;color:#101820;margin-top:2px;line-height:1.1;}
.agp-resumen-sub{font-size:.74rem;color:#4a3f31;margin-top:3px;line-height:1.35;}
.agp-resumen-sindatos{font-size:.85rem;font-weight:700;color:#8a7a5c;font-style:italic;}
@media(max-width:600px){ .agp-resumen-grid{grid-template-columns:1fr;} }

/* ==================================================================
   LIMPIEZA L2 — ZONA DE PELIGRO (Configuración), 22/07/2026
   Familia visual símil metal, letras negras. Dos niveles de peligro.
   ================================================================== */
#page-config .cfg-danger{margin-top:16px;background:linear-gradient(180deg,#f3ead8,#e0d3ba);
  border:2px solid var(--rc-rojo-papel,#8a2f27);border-radius:10px;padding:16px 18px;
  box-shadow:var(--rc-shadow-card);color:#1a1f1a;position:relative;overflow:hidden;}
#page-config .cfg-danger>h3{color:var(--rc-rojo-papel,#8a2f27);margin:0 0 6px;font-size:1rem;font-weight:900;}
#page-config .lp-group{margin-top:10px;padding:10px 12px;border-radius:8px;
  background:rgba(255,255,255,.45);border:1px solid rgba(28,43,53,.2);}
#page-config .lp-group.lp-prot{border-color:rgba(138,47,39,.42);background:rgba(211,59,50,.06);}
#page-config .lp-group-t{font-size:.8rem;font-weight:900;text-transform:uppercase;color:#3a3226;margin-bottom:6px;}
#page-config .lp-sub-t{font-size:.74rem;font-weight:800;color:#4a3f31;margin:8px 0 3px;}
#page-config .lp-chk{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem;color:#1a1f1a;cursor:pointer;}
#page-config .lp-chk input[type=checkbox]{width:auto;flex:none;}
#page-config .lp-chk .lp-lab{flex:1;min-width:0;}
#page-config .lp-chk .lp-cnt{font-size:.76rem;color:#5a6359;font-weight:700;white-space:nowrap;}
#page-config .lp-chk input:disabled ~ .lp-lab{opacity:.5;}
#page-config .lp-final{margin-top:12px;padding-top:10px;border-top:1px solid rgba(138,47,39,.3);}
#page-config .lp-final code{background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;font-size:.72rem;}

/* L3 — botones de exportación "Mi Agenda" */
#page-config .lp-export{margin:6px 0 8px;font-size:.82rem;color:#2a2118;font-weight:800;}
#page-config .lp-export .btn-compact{margin-left:6px;}
.agp-resumen-export{margin-top:10px;text-align:right;}

/* ==== E1-bis CONTRASTE FINAL (Juanjo 22/07): letras negras y bordes en
   Estadísticas sobre fondo arena. Al final del archivo para ganar la
   cascada a las reglas muted/soft anteriores. ==== */
#app #page-estadisticas .est-tabla th{color:#101820;font-weight:700}
#app #page-estadisticas .est-tabla td{color:#101820}
#app #page-estadisticas .est-nota-base{color:#101820}
#app #page-estadisticas .est-kpis > div,
#app #page-estadisticas .est-grafico-box,
#app #page-estadisticas .est-tabla-wrap{border:1px solid rgba(53,64,57,.45);border-radius:10px}

/* E1-bis: ejes, etiquetas y grilla del grafico comparativo en NEGRO/oscuro
   (pedido de Juanjo 22/07 — el gris no contrasta sobre arena). Las variables
   las lee Chart.js via getComputedStyle. */
:root{
  --rc-metal-arena-axis:#101820;
  --rc-metal-arena-grilla:rgba(53,64,57,.38);
}

/* FIX FABLE 23/07 — LOS MODALES INVISIBLES: abrirEditorVisitado y
   abrirEditorAusencia crean .modal-overlay/.modal-content, clases SIN CSS
   (el formulario caia como texto plano al fondo del body, invisible — el
   "toque visitado y nada" del primer dia de calle). Alias al sistema
   ui-modal existente. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10000;
  display:grid;place-items:center;padding:16px;animation:fade .15s;}
.modal-overlay .modal-content{background:var(--bg-panel-raised);
  border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;
  padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.5);color:var(--text-secondary);
  /* FIX FABLE 23/07 (calle): con 3+ filas de horarios los botones de abajo
     quedaban fuera de pantalla y el modal NO scrolleaba. */
  max-height:88vh;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* FIX FABLE 23/07 (calle): autocompletado PROPIO para los selectores del alta.
   El datalist nativo en el celu muestra una barrita de autocompletado inusable.
   Lista propia: mismas opciones, mismo comportamiento en PC y movil. */
.nc-auto-wrap{position:relative;display:block;}
/* FIX-CALLE-3 §6: flechita de desplegable en los autocompletados propios, para
   que "parezcan" un selector. Tocarla abre la lista completa; escribir filtra. */
.nc-auto-arrow{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  cursor:pointer;color:var(--text-muted,#8a97a3);font-size:11px;line-height:1;
  user-select:none;pointer-events:auto;z-index:3;padding:4px;}
.nc-auto-arrow:hover{color:var(--text-secondary,#dfe7ec);}
.nc-auto-list{position:absolute;left:0;right:0;top:100%;z-index:10002;
  background:var(--bg-panel-raised,#16242e);border:1px solid var(--line,rgba(255,255,255,.2));
  border-radius:8px;max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 12px 30px rgba(0,0,0,.45);}
.nc-auto-item{padding:9px 12px;cursor:pointer;font-size:.88rem;color:var(--text-secondary,#dfe7ec);}
.nc-auto-item:hover,.nc-auto-item:active{background:rgba(23,143,255,.18);}
.modal-overlay .modal-content h3{margin:0 0 12px;color:var(--stone-base);
  font-size:1rem;font-weight:800;letter-spacing:.02em;}
/* =====================================================================
   PASE CLARO MODALES (pre-FRONT-2)
   =====================================================================
   Modales OPERATIVOS a claro. NO toca el marco (M1 .ui-modal, M6 #pdf-modal),
   que sigue oscuro por decision de Juanjo. Solo AGREGA reglas al final del
   archivo; no modifica ni borra nada existente.

   Especificidad: se iguala o supera a las reglas oscuras heredadas para ganar
   por ORDEN DE APARICION (las oscuras viven mas arriba en este mismo archivo),
   sin recurrir a !important.
     M2: .modal-overlay .modal-content (espec 0,2,0) vence a .modal-content (0,1,0).
     M5: se replican los selectores con #id de radar_visual.css:650-654 y
         1299-1303 (espec 1,1,0) y se prevail por orden.
     M7: #agp-modo .agp-modo__caja (espec 1,1,0) prevail por orden.

   Paleta (valores literales pedidos):
     marfil  #FFF7EC  superficie del modal
     arena   #F3EFE5  estructura (header/footer) y botones internos
     carbon  #111111  texto y titulos
     #fff    fondo de inputs (.inp)
     #c9c2b2 borde de inputs y botones internos
     #efe9da hover de items de autocompletado (y feedback de botones)
   ===================================================================== */

/* M2: .modal-overlay / .modal-content (operativos de calle: Agenda) */
.modal-overlay .modal-content{
  background:#FFF7EC;
  color:#111111;
  border:1px solid #c9c2b2;
}
.modal-overlay .modal-content h3{
  color:#111111;
  border-bottom:1px solid #c9c2b2;
}
.modal-overlay .modal-content .button-row{
  border-top:1px solid #c9c2b2;
}
.modal-overlay .modal-content .inp,
.modal-overlay .modal-content select,
.modal-overlay .modal-content textarea{
  background:#fff;
  color:#111111;
  border:1px solid #c9c2b2;
}
.modal-overlay .modal-content .btn,
.modal-overlay .modal-content .btn.sec{
  background:#F3EFE5;
  color:#111111;
  border:1px solid #c9c2b2;
}
.modal-overlay .modal-content .btn:hover,
.modal-overlay .modal-content .btn.sec:hover{
  background:#efe9da;
  color:#111111;
}
/* Autocompletado propio del alta de contacto (vive dentro de .modal-content) */
.modal-overlay .modal-content .nc-auto-list{
  background:#fff;
  color:#111111;
  border:1px solid #c9c2b2;
}
.modal-overlay .modal-content .nc-auto-item{
  color:#111111;
}
.modal-overlay .modal-content .nc-auto-item:hover,
.modal-overlay .modal-content .nc-auto-item:active{
  background:#efe9da;
}

/* ======================================================================
   FIX-CALLE-4 · G4 — PARCHE MÓVIL: botones de modales de visita dignos.
   En ≤768px "Cancelar" (.btn sin .auto) se veía como texto plano sobre la
   marfil del modal y "Confirmar/Cargar/Guardar" (.btn.auto) quedaba chato,
   sin distinguirse del secundario. Parche mínimo: el primario toma el azul
   volumétrico del sistema (acción principal, patrón de #page-agenda), el
   secundario queda como outline claro sobre blanco. FRONT-2 consagra el
   sistema de modales único (hoy conviven 7 — AUDITORIA_GLM_UI.md §1.1). */
@media (max-width: 768px) {
  .modal-overlay .modal-content .button-row .btn {
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .88rem;
    flex: 1 1 auto;
  }
  .modal-overlay .modal-content .button-row .btn.auto {
    background: linear-gradient(180deg,#2ea6ff 0%,#0f82e6 55%,#0a6cc4 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 10px rgba(10,108,196,.30);
  }
  .modal-overlay .modal-content .button-row .btn:not(.auto) {
    background: #fff;
    color: #4a3f31;
    border: 1px solid #c9c2b2;
  }
}

/* M5: .modal-panel (operativos de Planificacion + Fichas)
   Se replican los selectores con #id de las reglas oscuras existentes
   (radar_visual.css:650-654 y 1299-1303) para igualar especificidad (1,1,0)
   y prevail por orden. */
#page-planes .modal-panel,
#plan-agendar-modal .modal-panel,
#plan-continuar-modal .modal-panel,
#plantillas-modal .modal-panel,
#page-fichas .modal-panel{
  background:#FFF7EC;
  color:#111111;
  border:1px solid #c9c2b2;
}
#page-planes .modal-panel h3,
#plan-agendar-modal .modal-panel h3,
#plan-continuar-modal .modal-panel h3,
#plantillas-modal .modal-panel h3,
#page-fichas .modal-panel h3{
  color:#111111;
  border-bottom:1px solid #c9c2b2;
}
/* Estructura arena: header/footer del panel (si los usa) */
#page-planes .modal-panel .modal-header,
#plan-agendar-modal .modal-panel .modal-header,
#plan-continuar-modal .modal-panel .modal-header,
#plantillas-modal .modal-panel .modal-header,
#page-fichas .modal-panel .modal-header,
#page-planes .modal-panel .modal-footer,
#plan-agendar-modal .modal-panel .modal-footer,
#plan-continuar-modal .modal-panel .modal-footer,
#plantillas-modal .modal-panel .modal-footer,
#page-fichas .modal-panel .modal-footer{
  background:#F3EFE5;
}
#page-planes .modal-panel .inp,
#plan-agendar-modal .modal-panel .inp,
#plan-continuar-modal .modal-panel .inp,
#plantillas-modal .modal-panel .inp,
#page-fichas .modal-panel .inp,
#page-planes .modal-panel select,
#plan-agendar-modal .modal-panel select,
#plan-continuar-modal .modal-panel select,
#plantillas-modal .modal-panel select,
#page-fichas .modal-panel select,
#page-planes .modal-panel textarea,
#plan-agendar-modal .modal-panel textarea,
#plan-continuar-modal .modal-panel textarea,
#plantillas-modal .modal-panel textarea,
#page-fichas .modal-panel textarea{
  background:#fff;
  color:#111111;
  border:1px solid #c9c2b2;
}
#page-planes .modal-panel .btn,
#plan-agendar-modal .modal-panel .btn,
#plan-continuar-modal .modal-panel .btn,
#plantillas-modal .modal-panel .btn,
#page-fichas .modal-panel .btn,
#page-planes .modal-panel .btn.sec,
#plan-agendar-modal .modal-panel .btn.sec,
#plan-continuar-modal .modal-panel .btn.sec,
#plantillas-modal .modal-panel .btn.sec,
#page-fichas .modal-panel .btn.sec{
  background:#F3EFE5;
  color:#111111;
  border:1px solid #c9c2b2;
}
#page-planes .modal-panel .btn:hover,
#plan-agendar-modal .modal-panel .btn:hover,
#plan-continuar-modal .modal-panel .btn:hover,
#plantillas-modal .modal-panel .btn:hover,
#page-fichas .modal-panel .btn:hover{
  background:#efe9da;
  color:#111111;
}

/* M7: #agp-modo / .agp-modo__caja (operativos de Agenda Programada) */
#agp-modo .agp-modo__caja{
  background:#FFF7EC;
  color:#111111;
  border:1px solid #c9c2b2;
}
#agp-modo .agp-modo__caja h4{
  color:#111111;
}
#agp-modo .agp-modo__caja p{
  color:#111111;
}
#agp-modo .agp-modo__caja .inp,
#agp-modo .agp-modo__caja select,
#agp-modo .agp-modo__caja textarea{
  background:#fff;
  color:#111111;
  border:1px solid #c9c2b2;
}
#agp-modo .agp-modo__acciones .btn,
#agp-modo .agp-modo__acciones .btn.sec{
  background:#F3EFE5;
  color:#111111;
  border:1px solid #c9c2b2;
}
#agp-modo .agp-modo__acciones .btn:hover{
  background:#efe9da;
  color:#111111;
}
/* ======================================================================
   FIX-CALLE-4 · G6 — PARCHE MÓVIL: cabecera de comparación de Fichas
   respirable. En ≤600px el .ficha-toolbar (vista-toggle + selector de
   período + badge de tipo) pasaba a display:block y los 3 hijos quedaban
   pegados entre sí y con el selector recortado a 190px. Parche: flex column
   con aire entre hijos + selector a ancho completo. FRONT-2d hará el
   rediseño definitivo de la cabecera.

   REMATE DEL G6: el ancho de ESCRITORIO del selector vivía en un `style`
   inline del <select> en index.html, y un inline le gana a cualquier regla
   de este archivo — por eso el width:100% de acá abajo nunca se aplicaba.
   Al sacar el inline hay que darle su ancho de escritorio acá, porque la
   regla base `.inp{width:100%}` lo estiraría dentro de la toolbar. */
#page-fichas .ficha-toolbar .ficha-periodo-sel select{
  width:auto;
  min-width:190px;
}
@media (max-width: 600px) {
  #page-fichas .ficha-toolbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  #page-fichas .ficha-toolbar .vista-toggle{align-self:flex-start;}
  #page-fichas .ficha-toolbar .ficha-periodo-sel{
    width:100%;
    flex-wrap:wrap;
  }
  #page-fichas .ficha-toolbar .ficha-periodo-sel select{
    width:100%;
    min-width:0;
  }
  #page-fichas .ficha-toolbar .ficha-tipo-comp{align-self:flex-start;}
  #page-fichas .comparativa-periodos{
    padding:10px 12px;
    margin-bottom:10px;
    line-height:1.4;
  }
}
/* ======================================================================
   FIX-CALLE-4 · G7 — PARCHE MÓVIL: gráfico de Estadísticas legible.
   Antes los 3 gráficos (est-mix-chart línea, est-com-chart barras,
   est-op-chart barras) usaban maintainAspectRatio:true con aspectRatio=2
   (default). En móvil (360px de ancho) la altura caía a ~180px y las
   etiquetas de meses/productos/DATASETS se pisaban. Cambio en JS:
   maintainAspectRatio:false en los 3 charts. Cambio en CSS: altura
   determinista del contenedor para que Chart.js la respete. */
.est-grafico-box{
  position:relative;
  height:300px;
}
@media (max-width: 600px){
  .est-grafico-box{height:320px;}
}

/* ======================================================================
   FIX-CALLE-4 (heredado de GLM-1) — TARJETAS QUE "PRENDEN" COMPLETAS AL
   TOCAR UN BOTÓN EN EL CELULAR. Confirmado por Juanjo en el celular real
   (en PC anda perfecto).

   No es :hover ni :active de CSS, y tampoco lo frena un
   event.stopPropagation() en JS: es el TAP HIGHLIGHT nativo, el resaltado
   que el navegador (sobre todo iOS Safari) le pinta al elemento clickeable
   ANCESTRO cuando tocás algo adentro suyo. En todo el proyecto no había
   ninguna declaración de -webkit-tap-highlight-color, así que se pintaba
   el color por defecto del sistema sobre la tarjeta entera.

   Cubre exactamente las mismas tarjetas que G5 tuvo que scopear a
   @media (hover:hover), incluidas sus variantes .papel-tactico. No toca
   ningún :hover / :active / .active: el feedback de presión del control
   tocado sigue viniendo del CSS propio del control. */
.cfg-card,
.plan-item,
.signal-card,
.ficha-summary,
.ficha-resumen-canonical.plan-item,
.agp-card,
.agp-visita,
#app .papel-tactico .cfg-card,
#app .papel-tactico .ficha-summary,
#app .papel-tactico .plan-item,
#app .papel-tactico .signal-card{
  -webkit-tap-highlight-color:transparent;
}

/* ======================================================================
   FIX-CALLE-4 · B9 (Juanjo 26/07, celular real) — EDICIÓN DE
   DISPONIBILIDAD EN MÓVIL. La fila de edición son 7 controles
   (institución + día + turno + hora desde + hora hasta + Guardar +
   Cancelar). `editarDisponibilidad()` la abre con display:flex inline, y en
   un ancho de celular esos 7 controles se iban de la pantalla: para llegar a
   Guardar/Cancelar había que hacer scroll horizontal. Se apila en vertical
   y cada control ocupa el ancho completo.

   Solo la fila de EDICIÓN (.availability-row--edit): la de lectura es un
   grid auto-fit que ya colapsa columnas y hace wrap sola. */
@media (max-width: 600px){
  .availability-row--edit{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .availability-row--edit .inp,
  .availability-row--edit select,
  .availability-row--edit input{
    width:100%;
    min-width:0;
  }
  .availability-row--edit .mini-action,
  .availability-row--edit button{
    width:100%;
  }
}

/* ======================================================================
   FIX-CALLE-4 (Opus-2b) · B9 EXTENDIDO A LA FILA DE LECTURA. El commit
   original de B9 trató solo la fila de EDICIÓN. La de lectura seguía con el
   grid base `repeat(auto-fit,minmax(110px,1fr))`: técnicamente hace wrap,
   pero con 6-7 celdas (institución+zona, día, turno, horario, frecuencia,
   Editar, Eliminar) el piso de 110px por columna fuerza un reacomodo feo en
   pantallas angostas — texto de institución partido, celdas sueltas
   estiradas, botones como píldoras apiladas sin agruparse.

   La pista la dio la propia app: las filas que ya pasaron por
   "Editar → Cancelar" se ven BIEN, porque `cancelarEdicionDisp()` les deja un
   `display:flex` inline y flexbox ENCOGE en vez de forzar columnas con piso
   mínimo. Acá se hace eso mismo desde el CSS, sin necesidad de pasar por
   editar/cancelar: flex con wrap, la institución (el texto largo) en su
   propio renglón y los dos botones juntos al final.

   Se excluye .inst-principal-row, que comparte la clase .availability-row
   pero es "radio + nombre de institución" y no tiene este problema. */
@media (max-width: 600px){
  .availability-row:not(.availability-row--edit):not(.inst-principal-row){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 10px;
  }
  .availability-row:not(.availability-row--edit):not(.inst-principal-row)>span{
    min-width:0;
  }
  .availability-row:not(.availability-row--edit):not(.inst-principal-row)>span:first-child{
    flex:1 1 100%;
    overflow-wrap:anywhere;
  }
  .availability-row:not(.availability-row--edit) .mini-action{
    flex:0 0 auto;
  }
  .availability-row:not(.availability-row--edit) .mini-action:first-of-type{
    margin-left:auto;
  }
}

/* ======================================================================
   FIX-CALLE-4 (Opus-3) · B5.NUEVO — LA SECCIÓN "VISITAS" EN MÓVIL. Mismo
   problema que tenía Disponibilidad, en la otra mitad del detalle de
   contacto: `.visit-row` comparte con `.availability-row` la regla base
   `display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))`
   (en index.html, sin media query) y nunca recibió tratamiento responsive.
   Con 6-8 celdas por visita (fecha, institución, turno+hora, estado,
   observaciones y hasta 3 botones: Realizada / Cancelar / Eliminar) el piso
   de 110px por columna fuerza el reacomodo feo que Juanjo capturó: el botón
   "Realizada" suelto arriba y "Cancelar"/"Eliminar" en su propia fila abajo.

   Mismo remedio que la fila de disponibilidad: flex con wrap (flexbox encoge
   en vez de forzar columnas con piso mínimo) y los botones agrupados al final.

   H2 (27/07) — POR QUÉ HACÍA FALTA MÁS QUE ESO. La primera versión no forzaba
   ningún span al 100%, y sin eso `flex-wrap` no garantiza nada: si en la línea
   entra UN botón, el navegador lo deja ahí y baja los otros dos. Ese era el
   síntoma exacto de la captura de Juanjo ("Realizada" solo arriba,
   "Cancelar"/"Eliminar" abajo). En `.availability-row` no pasa porque el primer
   span —la institución— va a `flex:1 1 100%` y de paso deja la línea de los
   botones limpia.

   Acá el span forzado es el de OBSERVACIONES, que es el 5º, el ÚLTIMO antes de
   los botones. Esa posición es la que importa, más que su largo: al ocupar todo
   el ancho garantiza que los tres botones arranquen SIEMPRE en un renglón nuevo
   y entero. Como suele venir vacío (`v.observaciones||''`), se le quita alto y
   padding cuando está vacío: en ese caso es un salto de línea invisible, y
   cuando tiene texto se lee a ancho completo, que es lo que uno quiere. No se
   eligió la fecha (1º) porque estirarla dejaría un renglón casi vacío arriba. */
@media (max-width: 600px){
  .visit-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 10px;
  }
  .visit-row>span{
    min-width:0;
    overflow-wrap:anywhere;
  }
  /* 5º span = observaciones: fuerza el corte antes de los botones. */
  .visit-row>span:nth-of-type(5){
    flex:1 1 100%;
  }
  /* Vacío no puede ocupar alto: sería un renglón en blanco. */
  .visit-row>span:nth-of-type(5):empty{
    margin:0;
    padding:0;
    height:0;
  }
  .visit-row .mini-action{
    flex:0 0 auto;
  }
  /* Con el renglón ya limpio, esto solo los alinea a la derecha. */
  .visit-row .mini-action:first-of-type{
    margin-left:auto;
  }
}

/* FIX-CALLE-4 (Opus-3) · F1 — selector de alcance del PDF, en la barra de
   acciones del detalle de Agenda Programada. Angosto: convive con los botones
   sin empujarlos a otra fila. */
.agp-pdf-alcance{display:inline-flex;align-items:center;}
.agp-pdf-alcance select{
  height:34px;
  width:auto;
  min-width:150px;
  max-width:210px;
  font-size:12.5px;
  padding:0 8px;
}
@media (max-width: 600px){
  .agp-pdf-alcance{width:100%;}
  .agp-pdf-alcance select{width:100%;max-width:none;}
}

/* FIX-CALLE-4 (Opus-4a) · H5 — color del renglón de cambio de categoría en
   PAPEL TÁCTICO. El color habla SOLO de la categoría: mejora verde, cae rojo,
   sin cambio en NEGRO (decisión de Juanjo 27/07). Se reusan los mismos tokens
   semánticos que ya usa .market-delta en esta misma pantalla — sin colores
   nuevos. El "sin cambio" pasa de --rc-metal-arena-texto-secundario al texto
   principal (#101820): es el negro pedido. */
#app #page-fichas.papel-tactico .market-cat-change{
  color:var(--rc-metal-arena-texto);
}
#app #page-fichas.papel-tactico .market-cat-change--sube{
  color:var(--rc-sem-verde);
  font-weight:700;
}
#app #page-fichas.papel-tactico .market-cat-change--baja{
  color:var(--rc-sem-rojo);
  font-weight:700;
}


/* =====================================================================
   FRONT-2 · tanda 1 (A) — FICHAS TÉCNICAS DETALLE, encabezado y barra de
   comparación con la cara de MAQUETA_FRONT2_BENDECIDA.png (contrato visual
   sellado por Juanjo el 23/07/2026).

   ALCANCE: solo esta pantalla. Todo scopeado a #page-fichas — las demás
   pantallas heredan los TOKENS de la paleta, nunca esta composición.

   CÓMO SE RESPETA LA LEY MÓVIL (innegociable en FRONT-2)
   En ≤600px manda el modo monje que cerraron H2/H4/H5 y las 2 rondas de
   Fable, recién validado en el celular de Juanjo y desplegado. La guía
   permite que "marfil, dorado y suavidad viajen al móvil como color y
   tipografía", pero un font-weight o un borde nuevo también CORREN el
   layout: medido con el banco de pruebas, una primera pasada que cambiaba
   pesos y agregaba bordes en reglas globales desplazaba los bloques del
   móvil hasta 120px. Así que el corte real es más estricto que "color sí,
   cajas no":
     · GLOBAL solo lo que no cambia ni un píxel de métrica: `color`,
       `background`, `border-color` (sin tocar el ancho), `box-shadow`.
     · ≥601px todo lo que sí la cambia: `font-size`, `font-weight`,
       `border-width`, `padding`, `border-radius` con relleno, `display`,
       `grid-*`, `flex-*`.
   Resultado verificado: en 390px los bloques quedan en la MISMA posición
   que antes de esta tanda (desplazamiento máximo 0px), con los colores
   nuevos aplicados.
   ===================================================================== */

/* --- 1. Superficie de la página: arena limpia -------------------------
   La maqueta muestra un fondo arena plano (muestreado #EDE9E2 → #F8F2E7),
   sin la trama verdosa del papel táctico. Se pinta sobre #page-fichas y no
   sobre .main-bg para no repintar Agenda / Planificación / Estadísticas,
   que conservan su fondo hasta que les toque su tanda. El 96% de opacidad
   deja el mapa táctico apenas insinuado, que es la intensidad "tenue" que
   la guía pide para pantallas densas. */
#app #page-fichas.papel-tactico{
  background:linear-gradient(180deg,rgba(243,239,229,.96),rgba(255,247,236,.96));
  color:var(--rc-carbon);
}
#app #page-fichas.papel-tactico .hero h2{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .hero p{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .hero .kicker{color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .hero .kicker:after{background:var(--rc-electrico);}

/* --- 2. Botón "← Volver a fichas": ghost claro ------------------------
   Era petróleo oscuro con texto celeste; la maqueta lo muestra claro con
   borde fino y texto oscuro. El sistema cerrado de botones es su propia
   tanda: acá solo se reviste el que ya vive en esta pantalla. */
#app #page-fichas.papel-tactico .ficha-back-btn{
  background:var(--rc-marfil);
  border-color:var(--rc-borde-fino);
  color:var(--rc-carbon);
  box-shadow:var(--rc-sombra-corta);
  text-shadow:none;
}
#app #page-fichas.papel-tactico .ficha-back-btn:hover{
  background:#fff;
  border-color:var(--rc-gris-suave);
  color:var(--rc-carbon);
}

/* --- 3. Encabezado del contacto --------------------------------------- */
#app #page-fichas.papel-tactico .ficha-header-fichas .ficha-label{color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .ficha-header-fichas .ficha-title{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .ficha-header-fichas .ficha-meta{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .ficha-header-market-name{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .ficha-header-cat-row .actual{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .ficha-header-cat-row .anterior{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .ficha-header-market{border-top-color:var(--rc-borde-tenue);}
#app #page-fichas.papel-tactico .ficha-summary-pending{
  color:var(--rc-tinta-media);
  background:var(--rc-gris-suave);
  border-color:var(--rc-borde-fino);
}

/* --- 4. Obras sociales: título azul + chips de caja -------------------
   La maqueta las dibuja como cajas de borde fino con el nombre en tinta
   media y el porcentaje en azul, no como pastillas oscuras. */
#app #page-fichas.papel-tactico .ficha-os__title{color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .ficha-os__chip{
  background:var(--rc-marfil);
  border-color:var(--rc-borde-fino);
  color:var(--rc-tinta-media);
  box-shadow:none;
}
#app #page-fichas.papel-tactico .ficha-os__chip b{color:var(--rc-electrico);}

/* --- 5. Badge de estado del dato: ÁMBAR -------------------------------
   Semántica sellada: dorado = estado del dato. Era azul-outline, que en la
   paleta nueva significa "acción" y competía con los tabs. Variante suave
   (fondo crema-ámbar + borde + tinta ámbar oscura), la misma que usa la
   maqueta en esta barra. */
#app #page-fichas.papel-tactico .ficha-tipo-comp--imp{
  color:var(--rc-ambar-tinta);
  border-color:var(--rc-ambar);
  background:var(--rc-ambar-suave);
}
#app #page-fichas.papel-tactico .ficha-tipo-comp--der{
  color:var(--rc-tinta-media);
  border-color:var(--rc-gris-suave);
  background:var(--rc-marfil);
}

/* --- 6. Tabs Foto del mercado / Comparación ---------------------------
   Control segmentado: riel marfil con borde, activo en azul PETRÓLEO con
   texto blanco. La maqueta muestra el activo en petróleo, NO en azul
   eléctrico; ver la nota de divergencia del informe. */
#app #page-fichas.papel-tactico .vista-toggle{
  background:var(--rc-marfil);
  /* El contorno va como inset box-shadow y no como `border`: un borde real
     suma 2px de alto y correría toda la pantalla en el celular. El borde de
     verdad se agrega abajo, en la regla ≥601px. */
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino),inset 0 1px 2px rgba(17,17,17,.04);
}
#app #page-fichas.papel-tactico .vista-toggle button{
  color:var(--rc-tinta-media);
  background:transparent;
  text-shadow:none;
}
#app #page-fichas.papel-tactico .vista-toggle button:hover{
  color:var(--rc-carbon);
  background:rgba(17,17,17,.04);
}
#app #page-fichas.papel-tactico .vista-toggle button.active{
  background:var(--rc-petroleo);
  color:#fff;
  box-shadow:0 1px 2px rgba(15,42,54,.35);
}
#app #page-fichas.papel-tactico .ficha-toolbar .ficha-periodo-sel{color:var(--rc-tinta-media);}

/* --- 7. Leyenda del semáforo -----------------------------------------
   Los puntos pasan a la paleta sellada (resultado = verde/rojo, aparición =
   azul, neutros = gris) y pierden el glow, que sobre fondo claro se leía
   como una mancha. El borde del punto va en la regla de escritorio: sumaría
   2px de alto y correría la leyenda en el celular. */
#app #page-fichas.papel-tactico .semaforo-legend{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .semaforo-legend .dot{box-shadow:none;}
#app #page-fichas.papel-tactico .semaforo-legend .dot.sube{
  background:var(--rc-verde);color:var(--rc-verde);
}
#app #page-fichas.papel-tactico .semaforo-legend .dot.baja{
  background:var(--rc-rojo);color:var(--rc-rojo);
}
#app #page-fichas.papel-tactico .semaforo-legend .dot.aparecio{
  background:var(--rc-electrico);color:var(--rc-electrico);
}
#app #page-fichas.papel-tactico .semaforo-legend .dot.mantiene,
#app #page-fichas.papel-tactico .semaforo-legend .dot.desaparecio{
  background:var(--rc-tinta-suave);color:var(--rc-tinta-suave);
}

/* --- 8. "Comparando X vs Y" ------------------------------------------
   Se conserva: la maqueta no lo muestra porque su select ya dice el par,
   pero acá es el texto que explica qué se compara. Deja de ser una barra
   con marco y pasa a encabezado liviano (regla de oro #7). */
#app #page-fichas.papel-tactico .comparativa-periodos{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .comparativa-periodos b{color:var(--rc-carbon);}

/* ---------------------------------------------------------------------
   SOLO ESCRITORIO (≥601px) — cajas, composición y tipografía.
   Nada de esto existe en ≤600px: el modo monje queda intacto.
   --------------------------------------------------------------------- */
@media (min-width:601px){
  /* 3 niveles de caja (regla de oro #7): la envolvente .ficha-card-wide
     deja de ser tarjeta y pasa a ser el lienzo. Antes eran 4 niveles:
     página → ficha-card-wide → market-block → rapida-panel. */
  #app #page-fichas.papel-tactico .ficha-card-wide{
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
  }
  #app #page-fichas.papel-tactico .ficha-header-fichas{
    background:var(--rc-marfil);
    border:1px solid var(--rc-borde-fino);
    border-radius:12px;
    box-shadow:var(--rc-sombra-corta);
    padding:18px 20px;
  }
  #app #page-fichas.papel-tactico .ficha-header-fichas .ficha-title{
    font-size:1.45rem;
    letter-spacing:.01em;
  }
  #app #page-fichas.papel-tactico .ficha-os{
    background:var(--rc-marfil);
    border:1px solid var(--rc-borde-fino);
    border-radius:12px;
    box-shadow:var(--rc-sombra-corta);
  }
  #app #page-fichas.papel-tactico .ficha-os__chip{
    border-radius:8px;
    padding:5px 10px;
    font-weight:600;
  }
  #app #page-fichas.papel-tactico .ficha-os__chip b{font-weight:800;}
  #app #page-fichas.papel-tactico .ficha-tipo-comp--imp{font-weight:800;}
  #app #page-fichas.papel-tactico .vista-toggle{border:1px solid var(--rc-borde-fino);}
  #app #page-fichas.papel-tactico .vista-toggle button{font-weight:800;}
  #app #page-fichas.papel-tactico .ficha-toolbar .ficha-periodo-sel{font-weight:700;}
  #app #page-fichas.papel-tactico .ficha-back-btn{font-weight:800;}
  #app #page-fichas.papel-tactico .comparativa-periodos{font-weight:600;}
  #app #page-fichas.papel-tactico .comparativa-periodos b{font-weight:800;}
  #app #page-fichas.papel-tactico .semaforo-legend{font-weight:700;}
  #app #page-fichas.papel-tactico .semaforo-legend .dot{
    border:1px solid rgba(17,17,17,.10);
  }
  /* La leyenda y la línea de comparación pierden el marco: son rótulos, no
     secciones. */
  #app #page-fichas.papel-tactico .semaforo-legend,
  #app #page-fichas.papel-tactico .comparativa-periodos{
    background:none;
    border:none;
    box-shadow:none;
    padding:2px 2px 0;
  }
  #app #page-fichas.papel-tactico .comparativa-periodos{margin-bottom:6px;}
}

/* --- Encabezado en dos columnas (≥901px) ------------------------------
   La maqueta pone las obras sociales al lado del contacto, no debajo. Se
   arma con grid sobre el contenedor que YA existe, sin tocar el markup que
   genera verFicha(): el encabezado toma la izquierda, las obras sociales la
   derecha, y todo lo que sigue cruza el ancho completo. Sin obras sociales
   la segunda columna mide 0 y el encabezado ocupa todo. Desde 901px para
   que en tablet no se aprieten. */
@media (min-width:901px){
  #app #page-fichas.papel-tactico .ficha-card-wide{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,auto);
    align-items:stretch;
    gap:14px;
  }
  #app #page-fichas.papel-tactico .ficha-card-wide>*{grid-column:1 / -1;}
  #app #page-fichas.papel-tactico .ficha-card-wide>.ficha-header-fichas{
    grid-column:1;margin-bottom:0;
  }
  #app #page-fichas.papel-tactico .ficha-card-wide>.ficha-os{
    grid-column:2;margin-bottom:0;max-width:620px;
  }
}


/* =====================================================================
   FRONT-2 · tanda 1 (B) — interior de la tarjeta de mercado: panel de foco,
   Foto actual / Foto anterior, tabla de comparación, delta chips y filas
   colapsables. Mismo criterio de la parte A:
     · GLOBAL solo color / background / border-color / box-shadow;
     · ≥601px todo lo que cambia métrica (pesos, padding, bordes nuevos).
   Los fondos y bordes de .market-block, .rapida-panel y .resumen-comercial
   van SIEMPRE en ≥601px por un motivo extra: el modo monje los aplana en
   ≤600px con esta misma especificidad, y este bloque va después en el
   archivo — una regla global les devolvería el marco al celular, que es
   exactamente lo que la ley móvil prohíbe.
   ===================================================================== */

/* --- 9. Cabecera de la tarjeta de mercado ----------------------------- */
#app #page-fichas.papel-tactico .market-title-row h4,
#app #page-fichas.papel-tactico .ficha-card-wide .market-title-row h4{
  color:var(--rc-carbon);
}
#app #page-fichas.papel-tactico .market-compare-line{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .market-compare-line .market-period-label,
#app #page-fichas.papel-tactico .market-period-label{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .market-compare-line .market-period-value,
#app #page-fichas.papel-tactico .market-period-value{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .market-compare-line .market-arrow,
#app #page-fichas.papel-tactico .market-arrow{color:var(--rc-tinta-suave);}
#app #page-fichas.papel-tactico .market-potencial-lab,
#app #page-fichas.papel-tactico .market-potencial{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .market-head-chevron{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .participacion-lab{color:var(--rc-tinta-media);}

/* Delta chip — los colores de resultado ya los selló H5 (mejora verde, cae
   rojo, sin cambio texto normal). Lo que cambia acá es de DÓNDE sale el
   color: de los tokens finales de la paleta en vez de --rc-sem-* / --status-*,
   que eran los intermedios. Mismo significado, prácticamente el mismo tono.
   El contorno va como inset box-shadow y no como border: un borde real
   sumaría 2px de alto a la fila del mercado en el celular. */
#app #page-fichas.papel-tactico .market-delta.sube{
  color:var(--rc-verde-tinta);
  background:var(--rc-verde-suave);
  box-shadow:inset 0 0 0 1px rgba(23,200,138,.35);
}
#app #page-fichas.papel-tactico .market-delta.baja{
  color:var(--rc-rojo-tinta);
  background:var(--rc-rojo-suave);
  box-shadow:inset 0 0 0 1px rgba(229,57,53,.30);
}
#app #page-fichas.papel-tactico .market-delta.mantiene{
  color:var(--rc-tinta-media);
  background:var(--rc-arena);
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino);
}

/* Renglón del cambio de categoría — H5 selló que su color habla SOLO de la
   categoría: mejora verde, cae rojo, sin cambio negro. Se respeta tal cual. */
#app #page-fichas.papel-tactico .market-cat-change{
  color:var(--rc-carbon);
  background:var(--rc-marfil);
  border-color:var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .market-cat-change--sube{color:var(--rc-verde-tinta);}
#app #page-fichas.papel-tactico .market-cat-change--baja{color:var(--rc-rojo-tinta);}

/* --- 10. Panel de foco (InsightPanel) --------------------------------
   Era un bloque de fondo oscuro con borde cyan a la izquierda; pasa a panel
   de lectura en marfil con una bombilla, como en la maqueta. El texto sigue
   saliendo de generarResumenComercial() sin un solo cambio: el ícono es un
   ::before de CSS, así que ninguna frase ni cifra se toca. */
#app #page-fichas.papel-tactico .resumen-comercial{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .resumen-comercial strong{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .resumen-comercial .resumen-mercado{color:var(--rc-carbon);}

/* --- 11. Foto actual / Foto anterior ---------------------------------
   Marfil por ser zona de "lectura larga" (injerto sellado de la mezcla A+C). */
#app #page-fichas.papel-tactico .rapida-panel h4{
  color:var(--rc-electrico);
  border-bottom-color:var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .rapida-fila{border-bottom-color:var(--rc-borde-tenue);}
#app #page-fichas.papel-tactico .rapida-nombre{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .rapida-lab{color:var(--rc-tinta-suave);}
#app #page-fichas.papel-tactico .rapida-pct{color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .rapida-cambio{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .rapida-rank{color:var(--rc-tinta-media);}
#app #page-fichas.papel-tactico .rapida-seccion-nuevos{border-top-color:var(--rc-borde-fino);}
#app #page-fichas.papel-tactico .rapida-seccion-nuevos h5{color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .rapida-seccion-desaparecidos{border-top-color:var(--rc-borde-fino);}
/* Los tabs Actual/Anterior solo existen en ≤600px, donde los dos paneles no
   entran lado a lado: se les da la cara del segmentado de arriba, con el
   contorno como inset shadow para no cambiarles el alto. */
#app #page-fichas.papel-tactico .rapida-tab{
  background:var(--rc-marfil);
  color:var(--rc-tinta-media);
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .rapida-tab.activo{
  background:var(--rc-petroleo);
  color:#fff;
  box-shadow:none;
}

/* --- 12. Tabla de comparación de productos ---------------------------
   El encabezado era una franja verde oliva con texto blanco; la maqueta lo
   quiere claro, con los rótulos en gris sobre marfil. El LAYOUT no se toca:
   las 4 columnas y su alineación las cerró H4, las remató Fable y están
   recién validadas en el celular. */
#app #page-fichas.papel-tactico .ficha-compare-grid{
  background:var(--rc-marfil);
  border-color:var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .ficha-compare-header .ficha-compare-cell{
  background:var(--rc-arena);
  color:var(--rc-tinta-media);
  border-bottom-color:var(--rc-borde-fino);
  text-shadow:none;
}
#app #page-fichas.papel-tactico .ficha-compare-cell{
  color:var(--rc-carbon);
  border-bottom-color:var(--rc-borde-tenue);
}
#app #page-fichas.papel-tactico .ficha-compare-cell.producto .prod-nombre{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .ficha-compare-cell.producto .prod-lab{color:var(--rc-tinta-suave);}
#app #page-fichas.papel-tactico .ficha-compare-cell.pct{color:var(--rc-carbon);}
#app #page-fichas.papel-tactico .ficha-compare-cell.pct.anterior{color:var(--rc-tinta-media);}

/* --- 13. Chips de estado por producto --------------------------------
   La columna Estado: la maqueta los dibuja como chips suaves del color del
   resultado con el punto al lado. Antes eran fondo oscuro rgba(0,0,0,.25)
   con texto saturado, que sobre marfil se leía como un parche. Los TEXTOS no
   se tocan: los sigue generando _fichaEstadoProductoHtml() con sus mismas
   frases y cifras, incluida la regla F6A de "Sin datos comparables" cuando
   la comparación es derivada. Contorno por inset shadow: sin métrica. */
#app #page-fichas.papel-tactico .semaforo-text{
  background:var(--rc-arena);
  color:var(--rc-tinta-media);
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .semaforo-text.sube{
  background:var(--rc-verde-suave);
  color:var(--rc-verde-tinta);
  box-shadow:inset 0 0 0 1px rgba(23,200,138,.35);
}
#app #page-fichas.papel-tactico .semaforo-text.baja{
  background:var(--rc-rojo-suave);
  color:var(--rc-rojo-tinta);
  box-shadow:inset 0 0 0 1px rgba(229,57,53,.30);
}
#app #page-fichas.papel-tactico .semaforo-text.aparecio{
  background:var(--rc-electrico-suave);
  color:#1565C0;
  box-shadow:inset 0 0 0 1px rgba(30,136,255,.30);
}
#app #page-fichas.papel-tactico .semaforo-text.mantiene{
  background:var(--rc-arena);
  color:var(--rc-tinta-media);
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino);
}
/* "Desapareció" quedó en carbón neutro por una decisión previa (ni rojo ni
   celeste: no es un resultado, es una ausencia). Se respeta, con el gris
   suave de la paleta nueva como fondo. */
#app #page-fichas.papel-tactico .semaforo-text.desaparecio{
  background:var(--rc-gris-suave);
  color:var(--rc-carbon);
  box-shadow:inset 0 0 0 1px var(--rc-borde-fino);
}
#app #page-fichas.papel-tactico .semaforo-text.sin-datos{
  background:var(--rc-marfil);
  color:var(--rc-tinta-suave);
  box-shadow:inset 0 0 0 1px var(--rc-gris-suave);
}
/* El punto pierde el glow, que sobre fondo claro se veía como una mancha. */
#app #page-fichas.papel-tactico .semaforo-dot{box-shadow:none;}
#app #page-fichas.papel-tactico .semaforo-dot.sube{background:var(--rc-verde);color:var(--rc-verde);}
#app #page-fichas.papel-tactico .semaforo-dot.baja{background:var(--rc-rojo);color:var(--rc-rojo);}
#app #page-fichas.papel-tactico .semaforo-dot.aparecio{background:var(--rc-electrico);color:var(--rc-electrico);}
#app #page-fichas.papel-tactico .semaforo-dot.mantiene{background:var(--rc-tinta-suave);color:var(--rc-tinta-suave);}

/* ---------------------------------------------------------------------
   SOLO ESCRITORIO (≥601px) — cajas, relieve, pesos y espaciado.
   --------------------------------------------------------------------- */
@media (min-width:601px){
  #app #page-fichas.papel-tactico .market-block{
    background:var(--rc-marfil);
    border:1px solid var(--rc-borde-fino);
    border-radius:12px;
    box-shadow:var(--rc-sombra-corta);
  }
  #app #page-fichas.papel-tactico .market-block:hover{
    background:var(--rc-marfil);
    border-color:var(--rc-gris-suave);
  }
  /* El mercado promovido por el filtro lateral se marca con el azul de
     acción: es "acá está lo que pediste". */
  #app #page-fichas.papel-tactico .market-block.selected{
    border-color:var(--rc-electrico);
    box-shadow:0 0 0 1px var(--rc-electrico),0 6px 18px rgba(30,136,255,.10);
  }
  #app #page-fichas.papel-tactico .market-block.selected .market-head{
    background:var(--rc-electrico-suave);
  }
  #app #page-fichas.papel-tactico .market-head:hover{background:rgba(17,17,17,.02);}

  /* La línea de comparación deja de ser una caja: una ronda anterior le puso
     superficie "Metal Arena" para que se leyera sobre el papel táctico, pero
     con la cara nueva la tarjeta YA es marfil sobre arena y esa caja interna
     suma un cuarto nivel que la maqueta no tiene. */
  #app #page-fichas.papel-tactico .market-compare-line{
    background:none;
    border:none;
    border-radius:0;
  }
  #app #page-fichas.papel-tactico .market-title-row h4,
  #app #page-fichas.papel-tactico .ficha-card-wide .market-title-row h4{font-weight:900;}
  #app #page-fichas.papel-tactico .market-period-value{font-weight:700;}
  #app #page-fichas.papel-tactico .market-potencial-lab,
  #app #page-fichas.papel-tactico .market-potencial{font-weight:600;}
  /* Cifras en la tipografía de la maqueta, con tabular-nums para que las
     columnas sigan cuadrando. En móvil se conserva el monospace, que es lo
     que les permite entrar en una línea tras el ajuste de H5/Fable. */
  #app #page-fichas.papel-tactico .market-period-value,
  #app #page-fichas.papel-tactico .market-delta,
  #app #page-fichas.papel-tactico .market-potencial-lab .market-potencial,
  #app #page-fichas.papel-tactico .ficha-compare-cell.pct{
    font-family:inherit;
    font-variant-numeric:tabular-nums;
  }
  #app #page-fichas.papel-tactico .market-delta{
    padding:3px 9px;
    border-radius:7px;
  }

  /* Panel de foco: marfil, borde ámbar tenue y la bombilla de la maqueta. */
  #app #page-fichas.papel-tactico .resumen-comercial{
    background:var(--rc-marfil);
    border:1px solid var(--rc-ambar-suave);
    border-radius:10px;
    padding:11px 14px 11px 38px;
    position:relative;
  }
  #app #page-fichas.papel-tactico .resumen-comercial strong{font-weight:800;}
  #app #page-fichas.papel-tactico .resumen-comercial:before{
    content:"\1F4A1";
    position:absolute;
    left:13px;
    top:10px;
    font-size:.95rem;
    line-height:1.2;
    filter:saturate(.85);
  }

  #app #page-fichas.papel-tactico .rapida-panel{
    background:var(--rc-marfil);
    border:1px solid var(--rc-borde-fino);
    border-radius:10px;
    box-shadow:var(--rc-sombra-corta);
  }
  #app #page-fichas.papel-tactico .rapida-panel h4{border-bottom-width:1px;}
  #app #page-fichas.papel-tactico .rapida-nombre{font-weight:700;}
  #app #page-fichas.papel-tactico .rapida-pct{font-weight:800;}
  #app #page-fichas.papel-tactico .rapida-lab{font-weight:500;}
  /* El ranking en caja, como en la maqueta. */
  #app #page-fichas.papel-tactico .rapida-rank{
    background:var(--rc-arena);
    border:1px solid var(--rc-borde-fino);
    border-radius:6px;
    text-align:center;
    font-size:.74rem;
    font-weight:800;
    padding:2px 0;
  }
  /* "Nuevos" / "Desaparecidos" no traen número: la caja vacía se vería como
     un hueco, así que ahí el rank no se dibuja. */
  #app #page-fichas.papel-tactico .rapida-seccion .rapida-rank{
    background:none;
    border:none;
  }

  #app #page-fichas.papel-tactico .ficha-compare-header .ficha-compare-cell{font-weight:800;}
  #app #page-fichas.papel-tactico .ficha-compare-cell.producto .prod-nombre{font-weight:800;}
  #app #page-fichas.papel-tactico .ficha-compare-cell.pct{font-weight:700;}
  #app #page-fichas.papel-tactico .ficha-compare-row:hover .ficha-compare-cell{
    background:rgba(17,17,17,.02);
  }
  #app #page-fichas.papel-tactico .semaforo-text{font-weight:800;}
}