/* ============================================================================
   UNICENTRO 360 — Sistema visual
   Co-marca: base AIMA + acento coral de Unicentro (#F64C4C, tomado de su CSS)
   Paleta de series validada con el validador de dataviz (light y dark, all-pairs)
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Superficies y tinta (light) --- */
  --plane:          #f4f4f1;
  --surface-1:      #fcfcfb;
  --surface-2:      #f0efec;
  --surface-3:      #e8e7e2;
  --ink-1:          #0b0b0b;
  --ink-2:          #52514e;
  --ink-3:          #898781;
  --grid:           #e1e0d9;
  --axis:           #c3c2b7;
  --hairline:       rgba(11, 11, 11, 0.10);
  --hairline-hard:  rgba(11, 11, 11, 0.16);

  /* --- Marca --- */
  --marca:          #F64C4C;   /* Unicentro */
  --marca-ink:      #c02f2f;   /* legible sobre superficie clara */
  --marca-wash:     rgba(246, 76, 76, 0.10);
  --aima:           #0b0b0b;

  /* --- Series (paleta validada) --- */
  --s1: #2a78d6;   /* azul     */
  --s2: #eb6834;   /* naranja  */
  --s3: #1baf7a;   /* aqua     */
  --s4: #eda100;   /* amarillo */
  --s5: #e87ba4;   /* magenta  */
  --s6: #008300;   /* verde    */
  --s7: #4a3aa7;   /* violeta  */

  /* --- Rampa secuencial azul (100 → 700) --- */
  --seq-1: #cde2fb; --seq-2: #b7d3f6; --seq-3: #9ec5f4; --seq-4: #86b6ef;
  --seq-5: #6da7ec; --seq-6: #5598e7; --seq-7: #3987e5; --seq-8: #2a78d6;
  --seq-9: #256abf; --seq-10:#1c5cab; --seq-11:#184f95; --seq-12:#104281;

  /* --- Estado (fijo, nunca tematizado) --- */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-ink: #006300;

  /* --- Métrica --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-1: 0 1px 2px rgba(11,11,11,.05), 0 1px 1px rgba(11,11,11,.04);
  --shadow-2: 0 4px 16px rgba(11,11,11,.08), 0 1px 3px rgba(11,11,11,.06);
  --shadow-3: 0 16px 48px rgba(11,11,11,.16), 0 4px 12px rgba(11,11,11,.10);

  --nav-w: 232px;
  --header-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:         #0d0d0d;
    --surface-1:     #1a1a19;
    --surface-2:     #232322;
    --surface-3:     #2c2c2a;
    --ink-1:         #ffffff;
    --ink-2:         #c3c2b7;
    --ink-3:         #898781;
    --grid:          #2c2c2a;
    --axis:          #383835;
    --hairline:      rgba(255,255,255,0.10);
    --hairline-hard: rgba(255,255,255,0.18);

    --marca:      #F64C4C;
    --marca-ink:  #ff7a7a;
    --marca-wash: rgba(246, 76, 76, 0.14);
    --aima:       #ffffff;

    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9;

    --good-ink: #0ca30c;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 16px rgba(0,0,0,.5);
    --shadow-3: 0 16px 48px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:         #0d0d0d;
  --surface-1:     #1a1a19;
  --surface-2:     #232322;
  --surface-3:     #2c2c2a;
  --ink-1:         #ffffff;
  --ink-2:         #c3c2b7;
  --ink-3:         #898781;
  --grid:          #2c2c2a;
  --axis:          #383835;
  --hairline:      rgba(255,255,255,0.10);
  --hairline-hard: rgba(255,255,255,0.18);

  --marca:      #F64C4C;
  --marca-ink:  #ff7a7a;
  --marca-wash: rgba(246, 76, 76, 0.14);
  --aima:       #ffffff;

  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9;

  --good-ink: #0ca30c;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--plane);
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }

/* =========================================================== BANDA DE DEMO */
.demo-band {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: 26px; display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  background: repeating-linear-gradient(135deg,
    var(--marca-wash) 0 12px, transparent 12px 24px), var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); text-transform: uppercase;
}
.demo-band b { color: var(--marca-ink); }

/* Modo captura: sin banda de demostración, para imágenes de producto. */
body[data-captura="true"] .demo-band { display: none; }
body[data-captura="true"] .app-header { top: 0; }
body[data-captura="true"] .app-nav { top: var(--header-h); }
body[data-captura="true"] .app-main { margin-top: var(--header-h); }

/* ================================================================= HEADER */
.app-header {
  position: fixed; top: 26px; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* Logo oficial: la version blanca se usa sobre fondo oscuro y viceversa. */
.brand-logo { height: 26px; width: auto; flex: none; display: block; }
:root[data-theme="dark"] .brand-logo,
:root:not([data-theme="light"]) .brand-logo { content: url("logo-unicentro-claro.svg"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo { content: url("logo-unicentro-oscuro.svg"); }
}
:root[data-theme="light"] .brand-logo { content: url("logo-unicentro-oscuro.svg"); }
.brand-sep { width: 1px; height: 22px; background: var(--hairline-hard); flex: none; }
.brand-txt { min-width: 0; }

/* ------------------------------------------------------ INDICADOR EN VIVO */
.vivo {
  display: inline-flex; align-items: center; gap: 7px; margin-left: var(--sp-4);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(12, 163, 12, .10); border: 1px solid rgba(12, 163, 12, .28);
  font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}
.vivo-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none;
  animation: latido 2s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) { .vivo-dot { animation: none; } }
.vivo-t { font-weight: 700; color: var(--good-ink); letter-spacing: .02em; }
.vivo-h { color: var(--ink-3); }
@media (max-width: 1100px) { .vivo-h { display: none; } }
@media (max-width: 860px) { .vivo { display: none; } }

/* Frescura por panel: cada tarjeta declara su propio ritmo de actualización. */
.frescura {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--ink-3); margin-left: var(--sp-2);
}
.frescura::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--good); flex: none;
}
.frescura--lento::before { background: var(--ink-3); }
.brand-txt h1 {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-txt p { font-size: 11px; color: var(--ink-3); }

.header-spacer { flex: 1; }
.header-tools { display: flex; align-items: center; gap: var(--sp-2); }

.hbtn {
  height: 32px; padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-1); transition: background .15s, color .15s;
  white-space: nowrap;
}
.hbtn:hover { background: var(--surface-2); color: var(--ink-1); }
.hbtn--accent { background: var(--marca); border-color: var(--marca); color: #fff; }
.hbtn--accent:hover { background: var(--marca); filter: brightness(1.07); color: #fff; }
.hbtn svg { width: 14px; height: 14px; flex: none; }

/* ==================================================================== NAV */
.app-nav {
  position: fixed; top: calc(26px + var(--header-h)); bottom: 0; left: 0; z-index: 40;
  width: var(--nav-w);
  padding: var(--sp-3);
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}
/* Compacto a propósito: en portátiles de poca altura el grupo "Asamblea" —el
   ítem que cierra la venta— no puede quedar por debajo del borde. */
.nav-group + .nav-group { margin-top: var(--sp-4); }
.nav-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 var(--sp-3) 6px;
}
.nav-item {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px var(--sp-3); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-align: left; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink-1); }
.nav-item[aria-current="true"] {
  background: var(--marca-wash); color: var(--marca-ink); font-weight: 650;
}
.nav-item .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .45;
}
.nav-item[aria-current="true"] .dot { opacity: 1; }
.nav-item .dept { font-size: 10px; color: var(--ink-3); display: block; font-weight: 400; }
.nav-item[aria-current="true"] .dept { color: var(--marca-ink); opacity: .75; }
.nav-item--star { color: var(--ink-1); font-weight: 650; }
.nav-item--star .dot { background: var(--marca); opacity: 1; }

/* =================================================================== MAIN */
.app-main {
  margin: calc(26px + var(--header-h)) 0 0 var(--nav-w);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  max-width: 1560px;
}
.section { display: none; animation: fade .22s ease; }
.section[data-active="true"] { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sec-head { margin-bottom: var(--sp-5); }
.sec-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marca-ink); margin-bottom: 6px;
}
.sec-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.sec-head p { font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 76ch; }
.hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-3);
  padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--marca-wash); border: 1px solid rgba(246, 76, 76, .22);
  font-size: 11.5px; color: var(--ink-2);
}
.hint-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--marca); flex: none;
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hint-dot { animation: none; } }

/* ====================================== DIVISOR DE BLOQUE DENTRO DE SECCIÓN
   Una sección puede contener dos asuntos distintos (mercadeo y tráfico). El
   divisor los separa sin partirlos en dos entradas de navegación. */
.bloque {
  margin: var(--sp-6) 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--marca);
}
.grid + .bloque, .card + .bloque { margin-top: var(--sp-7); }
.bloque:first-of-type { margin-top: var(--sp-5); }
.bloque-t {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-1);
}
.bloque-d {
  font-size: 13px; color: var(--ink-2); margin-top: 5px; max-width: 82ch; line-height: 1.6;
}
.bloque-d b { color: var(--ink-1); }

/* ================================================================= LAYOUT */
.grid { display: grid; gap: var(--sp-4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

/* ================================================================== CARDS */
.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  min-width: 0;
}
.card-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head-txt { flex: 1; min-width: 0; }
.card h3 { font-size: 13px; font-weight: 650; letter-spacing: -.005em; }
.card-corte {
  font-size: 11px; color: var(--ink-3); margin-top: 3px;
}
.card-note {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.card-note b { color: var(--ink-1); }

/* ================================================== DATO CLICABLE (data-x)
   Todo indicador y panel explica su propio dato en el asistente. La señal
   tiene que invitar sin competir con la lectura: la marca "?" aparece en
   hover, el borde se tiñe apenas. */
[data-x] { cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
[data-x]:hover { border-color: rgba(246, 76, 76, .45); box-shadow: var(--shadow-2); }
.card[data-x]:hover, .stat[data-x]:hover { background: var(--surface-1); }

.ex-mark {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; margin-left: 6px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-3);
  font-size: 9px; font-weight: 800; line-height: 1;
  vertical-align: middle; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
[data-x]:hover .ex-mark, [data-x]:focus-visible .ex-mark { opacity: 1; }
[data-x]:hover .ex-mark { background: var(--marca); color: #fff; }

/* --- Chip de origen del dato --- */
.origen {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; flex: none; white-space: nowrap;
}
.origen--real { background: rgba(12,163,12,.12); color: var(--good-ink); }
.origen--sim  { background: var(--marca-wash); color: var(--marca-ink); }

/* ============================================================ STAT TILES */
.stat {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.stat-k {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.stat-v {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  color: var(--ink-1);
}
.stat-v small { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.stat-d { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.stat-d > span { margin-right: 3px; }
.stat--accent .stat-v { color: var(--marca-ink); }
.delta-up   { color: var(--good-ink); font-weight: 650; }
.delta-down { color: var(--critical); font-weight: 650; }

/* Barra de progreso dentro del tile */
.meter { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 7px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--s1); }
.meter--accent i { background: var(--marca); }
.meter--good i { background: var(--good); }

/* ========================================================== ANÁLISIS 360 IA */
.sub-t {
  font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 var(--sp-3);
}
.ia-resumen {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--marca);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.ia-resumen-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ia-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  background: var(--marca); color: #fff; padding: 3px 8px; border-radius: 4px;
}
.ia-corte { font-size: 11.5px; color: var(--ink-3); }
.ia-resumen p { font-size: 15px; line-height: 1.6; color: var(--ink-1); max-width: 82ch; }
.ia-resumen b { font-weight: 700; }

.hall {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.hall--critical { border-left-color: var(--critical); }
.hall--warning  { border-left-color: var(--warning); }
.hall--serious  { border-left-color: var(--serious); }

.hall-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.hall-sev {
  font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.hall-sev--critical { background: rgba(208,59,59,.15); color: var(--critical); }
.hall-sev--warning  { background: rgba(250,178,25,.2); color: #8a5f00; }
.hall-sev--serious  { background: rgba(236,131,90,.18); color: var(--serious); }
:root[data-theme="dark"] .hall-sev--warning,
:root:not([data-theme="light"]) .hall-sev--warning { color: var(--warning); }

.hall-cruces { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.hall-cruces i {
  font-style: normal; color: var(--ink-2); background: var(--surface-2);
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hairline);
}
.hall-cruces b { color: var(--ink-3); font-weight: 600; }
.hall-imp { margin-left: auto; text-align: right; }
.hall-imp b {
  display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em;
  color: var(--marca-ink); font-variant-numeric: tabular-nums;
}
.hall-imp small { font-size: 10.5px; color: var(--ink-3); }

.hall h4 { font-size: 16px; font-weight: 700; letter-spacing: -.018em; margin-bottom: 6px; }
.hall-ev { font-size: 13px; color: var(--ink-2); line-height: 1.6; max-width: 88ch; }

.hall-plan {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--grid);
}
.hall-plan-t {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--marca-ink); margin-bottom: var(--sp-2);
}
.hall-plan ol { margin: 0; padding-left: 18px; }
.hall-plan li { font-size: 13px; color: var(--ink-1); line-height: 1.55; margin-bottom: 6px; max-width: 88ch; }
.hall-plan li::marker { color: var(--ink-3); font-weight: 700; }
.hall-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3); font-size: 11.5px; color: var(--ink-3);
}
.hall-meta b { color: var(--ink-1); font-weight: 650; }

.estr {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.estr-h {
  display: inline-block; font-size: 10px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
  background: var(--surface-3); padding: 3px 8px; border-radius: 4px; margin-bottom: var(--sp-3);
}
.estr h4 { font-size: 15px; font-weight: 700; letter-spacing: -.018em; margin-bottom: 7px; }
.estr p { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.nav-item--ia .dot { background: var(--marca); opacity: 1; }

/* ================================================================ ALERTAS */
.alerta {
  display: flex; gap: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r-md);
  text-align: left; width: 100%;
  transition: background .14s, transform .14s;
}
.alerta:hover { background: var(--surface-2); transform: translateX(2px); }
.alerta--critical { border-left-color: var(--critical); }
.alerta--warning  { border-left-color: var(--warning); }
.alerta--serious  { border-left-color: var(--serious); }
.alerta-icon {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
}
.alerta--critical .alerta-icon { background: var(--critical); }
.alerta--warning  .alerta-icon { background: var(--warning); color: #3a2a00; }
.alerta--serious  .alerta-icon { background: var(--serious); }
.alerta-body { flex: 1; min-width: 0; }
.alerta-body h4 { font-size: 13px; font-weight: 650; margin-bottom: 3px; }
.alerta-body p { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.alerta-cta {
  font-size: 11.5px; font-weight: 650; color: var(--marca-ink);
  margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 4px;
}

/* ============================================================== CONTROLES */
/* Regla: los controles viven DENTRO de su sección, nunca en una franja global */
.controles {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
}
.controles-label {
  font-size: 11px; font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em; margin-right: var(--sp-2);
}
.chip {
  height: 27px; padding: 0 var(--sp-3);
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 12px; font-weight: 550; color: var(--ink-2);
  background: var(--surface-1); transition: all .14s;
}
.chip:hover { border-color: var(--hairline-hard); color: var(--ink-1); }
.chip[aria-pressed="true"] {
  background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); font-weight: 650;
}

/* ================================================================ TABLAS */
.tabla-wrap { overflow-x: auto; margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); }
.tabla { font-size: 12.5px; min-width: 400px; }
/* Tablas de dos columnas: nunca deben empujar el valor fuera de vista. */
.tabla--par { min-width: 0; }
.tabla th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline);
  white-space: nowrap; position: sticky; top: 0; background: var(--surface-1);
}
.tabla th:first-child, .tabla td:first-child { padding-left: var(--sp-5); }
.tabla th:last-child,  .tabla td:last-child  { padding-right: var(--sp-5); }
.tabla td {
  padding: 9px var(--sp-3); border-bottom: 1px solid var(--grid); color: var(--ink-1);
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .id { font-weight: 600; white-space: nowrap; }
.tabla .sub { font-size: 11px; color: var(--ink-3); }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
.pill--critical { background: rgba(208,59,59,.14); color: var(--critical); }
.pill--warning  { background: rgba(250,178,25,.18); color: #8a5f00; }
.pill--neutral  { background: var(--surface-3); color: var(--ink-2); }
:root[data-theme="dark"] .pill--warning,
:root:not([data-theme="light"]) .pill--warning { color: var(--warning); }

/* ================================================================ LEYENDA */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leyenda i.line { height: 3px; border-radius: 2px; width: 14px; }

/* ================================================================== CHART */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--sans); }
.ax-label { font-size: 10.5px; fill: var(--ink-3); }
.ax-title { font-size: 10.5px; fill: var(--ink-3); font-weight: 600; }
.gridline { stroke: var(--grid); stroke-width: 1; }
.baseline { stroke: var(--axis); stroke-width: 1; }
.dlabel   { font-size: 11px; fill: var(--ink-1); font-weight: 650; }
.dlabel-sm{ font-size: 10.5px; fill: var(--ink-2); }
.hit { fill: transparent; cursor: pointer; }
.mark { transition: opacity .12s; }
.chart[data-dim="true"] .mark:not(.on) { opacity: .32; }

/* Tooltip */
.tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--hairline-hard);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: var(--sp-3); font-size: 12px; min-width: 148px; max-width: 260px;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tip[data-show="true"] { opacity: 1; transform: none; }
.tip-t { font-weight: 700; font-size: 12px; margin-bottom: 5px; }
.tip-r { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.tip-r i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tip-r span { color: var(--ink-2); }
.tip-r b { margin-left: auto; font-variant-numeric: tabular-nums; }
.tip-n { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 11px; }

/* ============================================================== HEAT GRID */
.heat { display: flex; flex-direction: column; gap: 3px; }
.heat-row { display: flex; align-items: center; gap: var(--sp-3); }
.heat-lab { width: 148px; flex: none; font-size: 11.5px; color: var(--ink-2); text-align: right; }
.heat-track {
  flex: 1; height: 26px; min-width: 0; border-radius: var(--r-sm);
  background: var(--surface-3); overflow: hidden;
}
.heat-bar { height: 100%; border-radius: var(--r-sm); }
.heat-val { width: 54px; flex: none; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ============================================================== ASAMBLEA */
.asamblea-hero {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6);
  position: relative; overflow: hidden;
}
.asamblea-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--marca);
}
.asamblea-hero .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--marca-ink);
}
.asamblea-hero h2 {
  font-size: 40px; font-weight: 750; letter-spacing: -.035em; margin: var(--sp-3) 0 var(--sp-2);
  line-height: 1.08;
}
.asamblea-hero .sub { font-size: 15px; color: var(--ink-2); }
.asamblea-frase {
  font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -.015em;
  color: var(--ink-1); max-width: 58ch; margin-top: var(--sp-5);
  padding-left: var(--sp-4); border-left: 3px solid var(--marca);
}

.lamina {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-4);
}
.lamina-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--marca-wash); color: var(--marca-ink);
  font-size: 11px; font-weight: 750; margin-right: var(--sp-3);
}
.lamina-head { display: flex; align-items: center; margin-bottom: var(--sp-2); }
.lamina-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -.022em; }
.lamina > p.intro { font-size: 13.5px; color: var(--ink-2); max-width: 78ch; margin-bottom: var(--sp-5); }

/* Desviaciones explicadas */
.desv { border-top: 1px solid var(--grid); padding: var(--sp-4) 0; }
.desv:last-child { padding-bottom: 0; }
.desv-top { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.desv-top h4 { font-size: 13px; font-weight: 650; flex: 1; min-width: 180px; }
.desv-nums { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.desv-pct { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.desv p { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.6; max-width: 82ch; }

/* Obras */
.obra {
  display: flex; gap: var(--sp-4); padding: var(--sp-4) 0;
  border-top: 1px solid var(--grid);
}
.obra:first-of-type { border-top: none; }
.obra-inv {
  width: 96px; flex: none; font-size: 15px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.obra-inv small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.obra-body h4 { font-size: 13px; font-weight: 650; }
.obra-body p { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; }
.obra-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--good-ink); margin-left: var(--sp-2);
}

/* Votación */
.votacion {
  background: var(--marca-wash); border: 1px solid rgba(246,76,76,.25);
  border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-4);
}
.votacion-cuota {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-5);
}
.cuota-de, .cuota-a { display: flex; flex-direction: column; }
.cuota-de span, .cuota-a span { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cuota-de b { font-size: 24px; font-weight: 600; color: var(--ink-3); letter-spacing: -.025em; text-decoration: line-through; }
.cuota-a b { font-size: 34px; font-weight: 750; color: var(--marca-ink); letter-spacing: -.03em; }
.cuota-arrow { font-size: 22px; color: var(--ink-3); align-self: center; }
.cuota-pct {
  align-self: center; padding: 5px 12px; border-radius: 999px;
  background: var(--marca); color: #fff; font-size: 13px; font-weight: 700;
}
.votacion ol { margin: 0; padding-left: 20px; }
.votacion li { font-size: 13.5px; line-height: 1.65; color: var(--ink-1); margin-bottom: var(--sp-3); max-width: 80ch; }
.votacion li:last-child { margin-bottom: 0; }

/* ===================================================== MODO PRESENTACIÓN */
body[data-present="true"] .demo-band,
body[data-present="true"] .app-header,
body[data-present="true"] .app-nav,
body[data-present="true"] .fab { display: none; }
body[data-present="true"] .app-main { margin: 0; padding: 0; max-width: none; }
body[data-present="true"] { background: var(--surface-1); }

.present-shell { display: none; }
body[data-present="true"] .present-shell {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 70; background: var(--surface-1);
}
.present-slide {
  flex: 1; overflow-y: auto;
  padding: clamp(28px, 5vh, 64px) clamp(24px, 6vw, 96px);
  display: flex; flex-direction: column;
  /* "safe" evita el corte clásico de flex-center: si la lámina es más alta que
     la ventana, se alinea arriba y se puede desplazar en vez de perder contenido. */
  justify-content: safe center;
}
/* flex: none — sin esto el hijo se encoge para caber y recorta su contenido
   en vez de generar scroll en el contenedor. */
.present-slide > * { flex: none; max-width: 1280px; width: 100%; margin-inline: auto; }
.present-slide .lamina, .present-slide .asamblea-hero, .present-slide .votacion {
  border: none; padding: 0; margin: 0; background: none;
}
/* Sin padding, la barra de acento del hero caería sobre el texto. */
.present-slide .asamblea-hero::before { display: none; }
/* Proyectando no hay nada que "preguntar": la lámina es el mensaje. */
body[data-present="true"] [data-x] { cursor: default; }
body[data-present="true"] .ex-mark { display: none; }
.present-slide .lamina-head h3 { font-size: clamp(24px, 3.4vw, 40px); }
.present-slide .lamina > p.intro { font-size: clamp(14px, 1.5vw, 18px); }
.present-slide .asamblea-hero h2 { font-size: clamp(34px, 6vw, 76px); }
.present-slide .asamblea-frase { font-size: clamp(17px, 2.2vw, 27px); }
.present-slide .stat-v { font-size: clamp(28px, 3.6vw, 46px); }

.present-bar {
  height: 56px; flex: none; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5); border-top: 1px solid var(--hairline); background: var(--surface-2);
}
.present-dots { display: flex; gap: 6px; flex: 1; }
.present-dots i {
  width: 26px; height: 4px; border-radius: 2px; background: var(--surface-3);
  cursor: pointer; transition: background .15s;
}
.present-dots i[data-on="true"] { background: var(--marca); }
.present-count { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ==================================================== ASISTENTE FLOTANTE */
.fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 55;
  height: 44px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--ink-1); color: var(--surface-1);
  border-radius: 999px; box-shadow: var(--shadow-3);
  font-size: 13px; font-weight: 650;
  transition: transform .16s;
}
.fab:hover { transform: translateY(-2px); }
.fab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--marca); flex: none; }

.chat {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 80;
  width: min(408px, calc(100vw - 32px));
  max-height: min(660px, calc(100vh - 48px));
  display: none; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--hairline-hard);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden;
}
.chat[data-open="true"] { display: flex; }
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--hairline); flex: none;
}
.chat-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--ink-1); color: var(--surface-1);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.chat-head-txt { flex: 1; min-width: 0; }
.chat-head-txt h4 { font-size: 13px; font-weight: 700; }
.chat-head-txt p { font-size: 10.5px; color: var(--ink-3); }
.chat-close { width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--ink-3); font-size: 17px; }
.chat-close:hover { background: var(--surface-2); color: var(--ink-1); }

.chat-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.msg { max-width: 92%; font-size: 13px; line-height: 1.6; }
.msg--bot {
  align-self: flex-start; background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4); border-radius: 4px 14px 14px 14px; color: var(--ink-1);
}
.msg--user {
  align-self: flex-end; background: var(--ink-1); color: var(--surface-1);
  padding: var(--sp-3) var(--sp-4); border-radius: 14px 4px 14px 14px; font-weight: 500;
}
.msg--bot b { font-weight: 700; }
.chat-sug { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }
.sug {
  text-align: left; padding: 9px var(--sp-3);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); background: var(--surface-1);
  transition: all .14s; line-height: 1.45;
}
.sug:hover { border-color: var(--marca); color: var(--ink-1); background: var(--marca-wash); }
.chat-foot {
  flex: none; padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--hairline); background: var(--surface-2);
  font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.45;
}
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ============================================================== RESPONSIVE */
@media (max-width: 1240px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  :root { --nav-w: 0px; }
  .app-nav {
    transform: translateX(-100%); transition: transform .22s;
    width: 232px; box-shadow: var(--shadow-3);
  }
  .app-nav[data-open="true"] { transform: none; }
  .app-main { margin-left: 0; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .nav-toggle { display: inline-flex !important; }
}
@media (max-width: 720px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .sec-head h2 { font-size: 21px; }
  .asamblea-hero { padding: var(--sp-5) var(--sp-4); }
  .asamblea-hero h2 { font-size: 27px; }
  .lamina { padding: var(--sp-5) var(--sp-4); }
  .card { padding: var(--sp-4); }
  .tabla-wrap { margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-4) * -1); }
  .tabla th:first-child, .tabla td:first-child { padding-left: var(--sp-4); }
  .heat-lab { width: 96px; font-size: 10.5px; }
  .hbtn span { display: none; }
}
.nav-toggle { display: none; }

/* ================================================================= PRINT */
@media print {
  :root { --plane: #fff; --surface-1: #fff; --surface-2: #fafafa; }
  .demo-band { position: static; }
  .app-header, .app-nav, .fab, .chat, .controles, .present-bar { display: none !important; }
  .app-main { margin: 0; padding: 0; max-width: none; }
  .section { display: none !important; }
  .section[data-active="true"] { display: block !important; }
  .lamina, .card, .asamblea-hero, .votacion {
    break-inside: avoid; page-break-inside: avoid;
    box-shadow: none; border: 1px solid #ddd;
  }
  .lamina { page-break-after: always; }
  body { background: #fff; }
}

/* ============================================================================
   PORTAL DE VITRINISMO — componentes propios
   Extienden el sistema de Unicentro 360 sin tocar sus tokens: mismo acento
   coral, mismas superficies, mismo ritmo de espaciado.
   ========================================================================== */

.pill--good { background: rgba(12,163,12,.13); color: var(--good-ink); }
.stat--rojo .stat-v { color: var(--critical); }
.no-print { }

/* ------------------------------------------------------------- gravedad */
.grav {
  font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; flex: none;
}
.grav--critical { background: rgba(208,59,59,.15); color: var(--critical); }
.grav--serious  { background: rgba(236,131,90,.18); color: var(--serious); }
.grav--warning  { background: rgba(250,178,25,.2);  color: #8a5f00; }
:root[data-theme="dark"] .grav--warning,
:root:not([data-theme="light"]) .grav--warning { color: var(--warning); }

/* Etiqueta permanente: ninguna marca real aparece incumpliendo un estándar. */
.ficticia {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-3);
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; white-space: nowrap;
}
.rol {
  font-size: 10.5px; color: var(--ink-2); background: var(--surface-2);
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline);
  white-space: nowrap;
}
.reinc {
  display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 999px;
  background: rgba(208,59,59,.14); color: var(--critical); font-weight: 750;
}

/* -------------------------------------------------------------- el reloj */
.rlj {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rlj--ok   { background: rgba(12,163,12,.12);  color: var(--good-ink); }
.rlj--pv   { background: rgba(250,178,25,.2);  color: #8a5f00; }
.rlj--venc { background: rgba(208,59,59,.15);  color: var(--critical); }
.rlj--sin  { background: var(--surface-3);     color: var(--ink-2); }
.rlj--fin  { background: var(--surface-2);     color: var(--ink-3); }
:root[data-theme="dark"] .rlj--pv,
:root:not([data-theme="light"]) .rlj--pv { color: var(--warning); }

.rlj-box {
  min-width: 288px; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--hairline); border-left: 3px solid var(--ink-3);
  border-radius: var(--r-lg); background: var(--surface-1);
}
.rlj-box--ok   { border-left-color: var(--good); }
.rlj-box--pv   { border-left-color: var(--warning); }
.rlj-box--venc { border-left-color: var(--critical); }
.rlj-box--fin  { border-left-color: var(--ink-3); }
.rlj-k {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.rlj-v {
  font-size: 25px; font-weight: 750; letter-spacing: -.03em; margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}
.rlj-box--venc .rlj-v { color: var(--critical); }
.rlj-box--pv   .rlj-v { color: #8a5f00; }
:root[data-theme="dark"] .rlj-box--pv .rlj-v,
:root:not([data-theme="light"]) .rlj-box--pv .rlj-v { color: var(--warning); }
.rlj-s { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }
.rlj-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rlj-bar i { display: block; height: 100%; background: var(--ink-3); }
.rlj-box--ok   .rlj-bar i { background: var(--good); }
.rlj-box--pv   .rlj-bar i { background: var(--warning); }
.rlj-box--venc .rlj-bar i { background: var(--critical); }

/* ------------------------------------------------------ cabecera del caso */
.caso-hd {
  display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap;
  padding: var(--sp-5); background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.caso-hd-l { flex: 1; min-width: 260px; }
.caso-loc { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.caso-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.caso-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.acciones-nota { font-size: 11.5px; color: var(--ink-3); }

.btn {
  height: 36px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--hairline-hard); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 650; color: var(--ink-1);
  background: var(--surface-1); transition: background .15s, filter .15s;
}
.btn:hover { background: var(--surface-2); }
.btn--accent { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn--accent:hover { filter: brightness(1.07); background: var(--marca); }
.btn--ghost { background: transparent; }
.btn--full { width: 100%; margin-top: var(--sp-3); }

.sel {
  height: 32px; padding: 0 var(--sp-3);
  border: 1px solid var(--hairline-hard); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink-1); font-size: 12.5px;
}
.sel--full { width: 100%; height: auto; min-height: 34px; padding: 7px var(--sp-3); }
textarea.sel { resize: vertical; line-height: 1.5; font-family: inherit; }

/* ------------------------------------------------------------ cita del manual */
.regla {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--marca);
}
.regla-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: 11px; color: var(--ink-2); margin-bottom: 6px;
}
.regla-h b { color: var(--ink-1); }
.regla-plazo { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.regla h5 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.regla p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 88ch; }

/* -------------------------------------------------------------- fotografías */
.foto {
  margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2);
}
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.foto-meta {
  padding: 7px var(--sp-3); font-size: 10.5px; color: var(--ink-3);
  border-top: 1px solid var(--hairline); background: var(--surface-1); line-height: 1.45;
}
.foto-meta b { color: var(--ink-2); font-weight: 650; }
.foto-meta span { display: block; color: var(--ink-3); }
.foto-adv { font-size: 9.5px; opacity: .75; }
.foto-meta .foto-res {   /* gana al display:block de .foto-meta span */
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.foto-res--ok { background: rgba(12,163,12,.14); color: var(--good-ink); }
.foto-res--no { background: rgba(208,59,59,.14); color: var(--critical); }

/* La vitrina de una escena de Iris: la imagen manda, el rótulo va debajo. */
.vitfoto { margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.vitfoto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.vitfoto figcaption {
  padding: 6px var(--sp-3); font-size: 10px; color: var(--ink-3);
  background: var(--surface-2); border-top: 1px solid var(--hairline);
}

.par { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.par-k {
  font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
@media (max-width: 720px) { .par { grid-template-columns: minmax(0, 1fr); } }

.vacio {
  padding: var(--sp-5); text-align: center; font-size: 12.5px; color: var(--ink-3);
  background: var(--surface-2); border: 1px dashed var(--hairline-hard);
  border-radius: var(--r-md);
}
.vacio--s { padding: var(--sp-4); font-size: 11.5px; }
td.vacio { border: none; background: none; }

/* ------------------------------------------------------------ línea de tiempo */
.linea { position: relative; padding-left: var(--sp-5); }
.linea::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--grid);
}
.linea-i { position: relative; padding: 0 0 var(--sp-4) var(--sp-4); }
.linea-dot {
  position: absolute; left: calc(var(--sp-5) * -1 + 1px); top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--axis);
}
.linea-i--clave .linea-dot { background: var(--marca); border-color: var(--marca); }
.linea-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: 12.5px;
}
.linea-h b { font-weight: 650; }
.linea-h time { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.linea-b p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 4px; max-width: 92ch; }

/* --------------------------------------------------------------- el celular */
.movil {
  width: 340px; max-width: 100%; margin: 0 auto;
  background: var(--surface-3); border: 1px solid var(--hairline-hard);
  border-radius: 26px; padding: 9px; box-shadow: var(--shadow-3);
}
.movil--ancho { width: 420px; }
.movil-top { display: flex; justify-content: center; padding: 3px 0 8px; }
.movil-top span { width: 66px; height: 4px; border-radius: 3px; background: var(--axis); }
.movil-pantalla {
  background: var(--surface-1); border-radius: 18px; padding: var(--sp-4);
  max-height: 78vh; overflow-y: auto;
}
.mv-head { margin-bottom: var(--sp-4); }
.mv-h1 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.mv-h2 { font-size: 11.5px; color: var(--ink-3); }
.mv-lab {
  display: block; font-size: 10px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: var(--sp-4) 0 5px;
}
.mv-regla {
  margin-top: 6px; padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
}
.mv-regla b { color: var(--marca-ink); }
.mv-regla span { display: block; margin-top: 4px; }
.mv-foto {
  margin: 5px 0 0; border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2);
}
.mv-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.mv-foto figcaption {
  padding: 6px var(--sp-3); font-size: 10px; color: var(--ink-3); line-height: 1.45;
  border-top: 1px solid var(--hairline); background: var(--surface-1);
}
.mv-foto figcaption span { display: block; color: var(--ink-2); }
.mv-pie {
  margin-top: var(--sp-3); font-size: 10.5px; color: var(--ink-3);
  text-align: center; line-height: 1.5;
}

/* ------------------------------------------------------- el buzón del local */
.mkt-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.mkt-h1 { font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
.mkt-h2 { font-size: 11.5px; color: var(--ink-3); }
.mkt-sec {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: var(--sp-5) 0 var(--sp-3);
}
.mkt-hall {
  padding: var(--sp-4); border: 1px solid var(--hairline);
  border-radius: var(--r-md); margin-bottom: var(--sp-3);
}
.mkt-hall-h { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
.mkt-hall-h b { flex: 1; min-width: 0; font-weight: 650; }
.mkt-ubic { font-size: 11px; color: var(--ink-3); margin: 2px 0 6px; }
.mkt-hall p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: var(--sp-3); }
.mkt-norma { margin-top: var(--sp-3); }
.mkt-norma summary {
  font-size: 11.5px; font-weight: 650; color: var(--marca-ink); cursor: pointer;
}
.mkt-norma p { font-size: 11.5px; margin-top: 6px; }
.mkt-ok {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: rgba(12,163,12,.10); font-size: 11.5px; color: var(--ink-2);
}
.mkt-ok b { display: block; color: var(--good-ink); margin-bottom: 2px; }
.mkt-pie {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.55;
}
.msg-t { display: block; font-size: 10px; opacity: .6; margin-top: 4px; }

.acuse {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--marca-wash); border: 1px solid rgba(246,76,76,.28);
}
.acuse h4 { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.acuse p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

.cuenta {
  padding: var(--sp-4); border-radius: var(--r-md); text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.cuenta--pv   { background: rgba(250,178,25,.12); border-color: rgba(250,178,25,.35); }
.cuenta--venc { background: rgba(208,59,59,.10);  border-color: rgba(208,59,59,.35); }
.cuenta-k {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.cuenta-v {
  font-size: 31px; font-weight: 750; letter-spacing: -.035em; margin: 5px 0 9px;
  font-variant-numeric: tabular-nums;
}
.cuenta-v small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-right: 5px; }
.cuenta--venc .cuenta-v { color: var(--critical); }
.cuenta-s { font-size: 11px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* -------------------------------------------------------------- expediente */
.exp {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-4);
  max-width: 1000px;
}
.exp-h {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--marca);
}
.exp-h-t { flex: 1; min-width: 0; }
.exp-h-t h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.exp-h-t p { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.exp-h-r { text-align: right; }
.exp-h-r b { display: block; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.exp-h-r span { font-size: 10.5px; color: var(--ink-3); }
.exp-s { margin-bottom: var(--sp-6); }
.exp-s h4 {
  font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--marca-ink); margin-bottom: var(--sp-3);
  padding-bottom: 5px; border-bottom: 1px solid var(--hairline);
}
.exp-hall { padding: var(--sp-4) 0; border-bottom: 1px solid var(--grid); }
.exp-hall:last-child { border-bottom: none; }
.exp-hall-h { display: flex; align-items: center; gap: var(--sp-2); font-size: 13.5px; margin-bottom: 7px; }
.exp-hall-h b { font-weight: 700; }
.exp-hall p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 5px; max-width: 92ch; }
.exp-hall p b { color: var(--ink-1); }
.exp-hall .par { margin-top: var(--sp-3); }
.exp-n { font-size: 11.5px; color: var(--ink-3); margin-top: var(--sp-3); line-height: 1.55; }
.exp-f {
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-2);
}
.exp-f-d { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }

/* ------------------------------------------------------------ las brechas */
.brecha {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-3); border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.brecha--critical { border-left-color: var(--critical); }
.brecha--serious  { border-left-color: var(--serious); }
.brecha--warning  { border-left-color: var(--warning); }
.brecha-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.brecha-h b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.brecha-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.brecha-col { padding-left: var(--sp-4); border-left: 2px solid var(--grid); }
.brecha-col--ok { border-left-color: var(--marca); }
.brecha-k {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 5px;
}
.brecha-col--ok .brecha-k { color: var(--marca-ink); }
.brecha-col p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 860px) { .brecha-c { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- misceláneos */
.tabla--click tbody tr { cursor: pointer; }
.tach { color: var(--ink-3); text-decoration: line-through; }
.ok-ink { color: var(--good-ink); font-weight: 800; }
.pend { color: var(--ink-3); }

/* Aviso de acción: confirma que el clic movió algo de verdad. */
.aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  z-index: 95; max-width: min(560px, calc(100vw - 32px));
  padding: var(--sp-3) var(--sp-5); border-radius: 999px;
  background: var(--ink-1); color: var(--plane);
  font-size: 12.5px; font-weight: 550; box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  text-align: center;
}
.aviso[data-on="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================================== PRINT
   Al imprimir solo importa el expediente: es el documento que va a descargos. */
@media print {
  .demo-band, .app-header, .app-nav, .aviso, .controles, .no-print,
  .acciones, .hint { display: none !important; }
  .app-main { margin: 0; padding: 0; max-width: none; }
  .exp { border: none; padding: 0; margin: 0; max-width: none; }
  .exp-s { break-inside: avoid; page-break-inside: avoid; }
  .exp-hall { break-inside: avoid; page-break-inside: avoid; }
  /* En papel las fotos van pequeñas: el expediente es un documento, no un álbum. */
  .foto img { max-height: 150px; object-position: center; }
  .movil { box-shadow: none; }
}

/* Subsanado y esperando la visita de verificación: la demora ya no es del
   local, es de la ciudadela. Por eso no se pinta ni de rojo ni de verde. */
.rlj--ver { background: rgba(42,120,214,.13); color: var(--s1); }
.rlj-box--ver { border-left-color: var(--s1); }
.rlj-box--ver .rlj-bar i { background: var(--s1); }
.cuenta--ver { background: rgba(42,120,214,.10); border-color: rgba(42,120,214,.32); }

/* El buzón y su explicación, lado a lado: el celular solo dejaba media
   pantalla vacía en portátil. */
.marca-2 {
  display: grid; grid-template-columns: 452px minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}
.marca-2 .movil { margin: 0; }
@media (max-width: 1100px) {
  .marca-2 { grid-template-columns: minmax(0, 1fr); }
  .marca-2 .movil { margin: 0 auto; }
}

/* La bitácora tiene cuatro columnas y en un celular no cabe. Desplaza dentro
   de su caja en vez de empujar la página entera. */
.exp-scroll { overflow-x: auto; }
.exp-scroll .tabla { min-width: 560px; }
@media (max-width: 720px) {
  .exp { padding: var(--sp-4); }
  .exp-h { flex-wrap: wrap; gap: var(--sp-3); }
  .exp-h-r { text-align: left; }
}
@media print { .exp-scroll { overflow: visible; } .exp-scroll .tabla { min-width: 0; } }

/* ============================================================================
   IRIS — el manual contra la vitrina
   ========================================================================== */

/* Veredictos y tipos de prueba comparten forma: son la misma clase de etiqueta. */
.ver {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.ver--critical { background: rgba(208,59,59,.14); color: var(--critical); }
.ver--serious  { background: rgba(236,131,90,.18); color: var(--serious); }
.ver--good     { background: rgba(12,163,12,.13);  color: var(--good-ink); }
.ver--neutral  { background: var(--surface-3);     color: var(--ink-2); }

.pill--ia {
  background: rgba(74,58,167,.13); color: var(--s7); font-weight: 650;
}
:root[data-theme="dark"] .pill--ia,
:root:not([data-theme="light"]) .pill--ia { color: #a79dff; }

/* --------------------------------------------------------------- la escena */
.iris-caso {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.iris-img { position: sticky; top: calc(26px + var(--header-h) + var(--sp-4)); }
.iris-img-pie {
  margin-top: var(--sp-2); font-size: 11px; color: var(--ink-3); line-height: 1.5;
}
.iris-img-pie b { color: var(--ink-1); font-weight: 650; }
.iris-img-pie span { display: block; }
.iris-img-pie .ficticia { display: inline-block; }  /* no hereda el block de arriba */

.iris-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--grid);
}
.mono {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.iris-conf {
  display: flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 10.5px; color: var(--ink-3);
}
.iris-conf b { color: var(--ink-1); font-size: 12px; font-variant-numeric: tabular-nums; }
.conf-bar { width: 62px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.conf-bar i { display: block; height: 100%; background: var(--good); }
.conf-bar i[data-conf="media"] { background: var(--warning); }
.conf-bar i[data-conf="baja"]  { background: var(--critical); }

/* --------------------------------------- manual a la izquierda, Iris a la derecha */
.iris-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.iris-col { padding-left: var(--sp-4); border-left: 2px solid var(--grid); }
.iris-col--ia { border-left-color: var(--s7); }
.iris-k {
  font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.iris-col--ia .iris-k { color: var(--s7); }
:root[data-theme="dark"] .iris-col--ia .iris-k,
:root:not([data-theme="light"]) .iris-col--ia .iris-k { color: #a79dff; }
.iris-num {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 12.5px; font-weight: 650; margin-bottom: 5px;
}
.iris-norma { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; font-style: italic; }
.iris-col p { font-size: 12.5px; color: var(--ink-1); line-height: 1.6; }

/* Los tres límites del análisis por imagen, cada uno con su voz. */
.iris-nota {
  margin-top: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-sm); font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-2); border-left: 2px solid var(--ink-3);
}
.iris-nota b { color: var(--ink-1); }
.iris-nota--est   { border-left-color: var(--s4); }
.iris-nota--falta { border-left-color: var(--serious); }
.iris-nota--abst  { border-left-color: var(--critical); background: rgba(208,59,59,.07); }

/* ------------------------------------------- el cruce con el dato del portal */
.iris-dato {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md);
}
.iris-dato-r { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.iris-q { font-size: 12.5px; color: var(--ink-2); flex: 1; min-width: 220px; }
.iris-a {
  font-size: 12.5px; font-weight: 700; color: var(--ink-1);
  background: var(--surface-1); border: 1px solid var(--hairline-hard);
  padding: 4px 10px; border-radius: var(--r-sm);
}
.iris-vuelco {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--ink-2); line-height: 1.55;
}
.iris-vuelco b { color: var(--marca-ink); }

.iris-fallo {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-left: 3px solid var(--marca); background: var(--marca-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-1);
}

.iris-acc {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--grid);
}
.iris-acc-n { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; flex: 1; min-width: 200px; }

@media (max-width: 1240px) {
  .iris-caso { grid-template-columns: minmax(0, 1fr); }
  .iris-img { position: static; max-width: 420px; }
}
@media (max-width: 860px) {
  .iris-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------- el recorrido, paso a paso */
.mv-paso {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--ink-1);
  margin: var(--sp-5) 0 var(--sp-2);
}
.mv-paso i {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  background: var(--marca); color: #fff; font-size: 9.5px; font-weight: 800;
}
.mv-ayuda { margin-top: 7px; font-size: 10.5px; color: var(--ink-3); line-height: 1.5; }

/* La galería reemplaza al desplegable de numerales: se escoge lo que se ve,
   no la norma. El numeral es la conclusión. */
.mv-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mv-mini {
  padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface-2); transition: border-color .14s, transform .14s;
}
.mv-mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mv-mini:hover { border-color: var(--marca); transform: translateY(-1px); }

.mv-otra {
  width: 100%; margin-top: 6px; padding: 6px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); font-size: 11.5px; color: var(--ink-2);
}
.mv-otra:hover { background: var(--surface-2); color: var(--ink-1); }

.mv-cargando {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); font-size: 11.5px; color: var(--ink-2); line-height: 1.45;
}

/* La propuesta de Iris */
.mv-iris {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border-left: 3px solid var(--s7);
}
.mv-iris-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mv-iris-h .iris-conf { margin-left: auto; }
.mv-num {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 15px; font-weight: 750; letter-spacing: -.02em;
}
.mv-plazo {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-3);
  background: var(--surface-1); border: 1px solid var(--hairline);
  padding: 2px 7px; border-radius: 999px;
}
.mv-tit { font-size: 12.5px; font-weight: 650; color: var(--ink-1); margin: 3px 0 6px; }
.mv-ve { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.mv-iris .iris-nota { font-size: 11px; padding: var(--sp-2) var(--sp-3); }

.mv-cambiar { margin-top: var(--sp-3); }
.mv-cambiar summary {
  font-size: 11.5px; font-weight: 650; color: var(--marca-ink); cursor: pointer;
}
.mv-cambiar .sel { margin-top: 6px; }

.mv-cierra {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-1); border: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.5;
}

/* La marca es el camino de vuelta a la portada, como en el Portal de
   Convocatorias: no se disfraza de botón, se comporta como el logo de un sitio. */
a.brand { text-decoration: none; color: inherit; transition: opacity .15s; }
a.brand:hover { opacity: .72; }
.enlace { color: var(--marca-ink); font-weight: 650; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* ------------------------------------------------ portal de remodelaciones */
/* De qué lado está la espera. Es el dato incómodo, así que se ve. */
.lado {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
.lado--unicentro { background: rgba(208,59,59,.13); color: var(--critical); }
.lado--marca     { background: rgba(42,120,214,.13); color: var(--s1); }
.obs { color: var(--critical); font-weight: 650; font-size: 11px; }

.req-lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.req-lista li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 8px 0; border-bottom: 1px solid var(--grid);
  font-size: 12.5px; color: var(--ink-1); line-height: 1.45;
}
.req-lista li:last-child { border-bottom: none; }
.req-n {
  flex: none; font-size: 10px; font-weight: 700; color: var(--ink-3);
  background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
}


/* ============================================================ MODO MARCA
   Un local que llega desde el Portal del Cliente. Solo ve su caso, su
   trámite o el formulario de radicado: sin navegación ni portada, y sin el
   marco de «lo que ve el local» que es para Unicentro. */
body[data-modo="marca"] .app-nav,
body[data-modo="marca"] .nav-toggle { display: none !important; }
body[data-modo="marca"] .app-main { margin-left: 0; max-width: 760px; margin-inline: auto; }
body[data-modo="marca"] .brand { cursor: default; }
body[data-modo="marca"][data-vista="marca"] #vista > .sec-head,
body[data-modo="marca"][data-vista="solicitud"] #vista > .sec-head,
body[data-modo="marca"] .marca-2 > :not(.movil),
body[data-modo="marca"] #vista a[href^="/"],
body[data-modo="marca"] #vista [data-ir]:not([data-ir="marca"]):not([data-ir="tramite"]):not([data-ir="solicitud"]) { display: none !important; }
body[data-modo="marca"] .marca-2 { grid-template-columns: minmax(0, 1fr); }
body[data-modo="marca"] .movil {
  width: 100%; max-width: 560px; margin: 0 auto; padding: 0;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
body[data-modo="marca"] .movil-top { display: none; }
body[data-modo="marca"] .movil-pantalla { max-height: none; border-radius: var(--r-lg); border: 1px solid var(--hairline); }
a.hbtn { text-decoration: none; }