/* ============================================================================
   Dashboard Ejecutivo Xtra — estilos del prototipo nuevo (rojo/verde institucional)
   Tokens y geometria tomados del handoff (README + Dashboard Ejecutivo Xtra.dc.html).
   Tipografias: Newsreader (display) + IBM Plex Sans (UI) + IBM Plex Mono (datos).
   Tokens (tipografia, color, espaciado) viven en tokens.css — este archivo SOLO
   consume var(--...). Ver docs/GUIA_ESTILOS.md.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-4); border-radius: 5px; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }

.noscript-alert {
  margin: var(--sp-10);
  padding: var(--sp-8) var(--sp-9);
  border: 1px solid var(--warn-bd);
  background: var(--warn-bg);
  border-radius: var(--r-card);
  color: var(--warn);
  font-size: var(--fs-ui);
}

.boot-state {
  padding: 80px var(--sp-10);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-ui);
  font-family: var(--font-mono);
  letter-spacing: var(--track-th);
}

.app-root { min-height: 100vh; min-height: 100dvh; background: var(--bg-app); }

/* ===================== TOP BAR ===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line-1);
}
.topbar__accent {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-orange) 45%, var(--brand-green) 100%);
}
.topbar__row {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}
.topbar__brand { display: flex; align-items: center; gap: var(--sp-7); min-width: 0; }
.topbar__logo { height: 32px; display: block; }
.topbar__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  white-space: nowrap;
  text-transform: uppercase;
}
.topbar__right { display: flex; align-items: center; gap: var(--sp-8); }
.topbar__cut {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-2);
  text-align: right;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.topbar__logout {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-2);
  padding: var(--sp-3) 11px;
  border: 1px solid var(--line-4);
  border-radius: var(--r-seg);
  background: var(--bg-surface);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.topbar__logout:hover { color: var(--neg); border-color: var(--neg-border-soft); background: var(--neg-soft); }

/* segmented control de periodo */
.segmented {
  display: flex;
  border: 1px solid var(--line-4);
  border-radius: var(--r-seg);
  overflow: hidden;
  font-size: var(--fs-caption);
  font-weight: 600;
}
.segmented__btn {
  padding: var(--sp-3) 13px;
  background: var(--bg-surface);
  color: var(--text-2);
  transition: background 0.14s ease, color 0.14s ease;
}
.segmented__btn + .segmented__btn { border-left: 1px solid var(--line-1); }
.segmented__btn.is-active { background: var(--navy); color: var(--bg-surface); }

/* Agrupa periodo (DTD/MTD/YTD) + interruptor Top 500: los dos filtros
   globales del reporte, separados por un hairline. En Inventario/Venta
   perdida el periodo no aplica y el interruptor se queda solo en el hueco. */
.topbar__controls { display: flex; align-items: center; gap: var(--sp-6); }
.topbar__ctrlsep { display: block; width: 1px; height: 22px; flex: none; background: var(--line-2); }

/* nav desktop */
.topnav { border-top: 1px solid var(--line-2); }
.topnav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-11);
  display: flex;
  gap: 30px;
}
.topnav__tab {
  padding: var(--sp-6) 0;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-2);
  box-shadow: inset 0 -3px 0 transparent;
  transition: color 0.14s ease, box-shadow 0.14s ease;
}
.topnav__tab.is-active {
  font-weight: 600;
  color: var(--text-1);
  box-shadow: inset 0 -3px 0 var(--brand-red);
}
/* "Hoy" = vista intradía en vivo: punto pulsante + acento verde, separada del
   bloque D-1 (Resumen/Ventas/Inventario/Materiales) por un hairline. Otra
   temporalidad y otra audiencia, misma navegación. */
.topnav__tab--live { display: flex; align-items: center; gap: 7px; }
.topnav__tab--live.is-active { box-shadow: inset 0 -3px 0 var(--brand-green); }
.topnav__livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  animation: livePulse 2.2s ease infinite;
}
.topnav__sep { width: 1px; align-self: stretch; margin: var(--sp-5) 0; background: var(--line-1); }

/* Banner "datos incompletos por ETL": aviso ambar full-bleed bajo la topbar.
   No aparece en "Hoy". Se limpia solo al recargar (sin polling). */
.etl-banner {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-bd);
}
.etl-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px var(--sp-11);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  color: var(--text-1);
  font-size: var(--fs-data);
  line-height: var(--lh-prose);
}
.etl-banner__icon { color: var(--warn); font-size: var(--fs-body); line-height: var(--lh-ui); flex: 0 0 auto; }
.etl-banner__text { min-width: 0; }
.app-root.is-mobile .etl-banner__inner { padding: var(--sp-5) var(--sp-7); font-size: var(--fs-caption); }

/* Banda de universo filtrado (Top 500): misma geometria que .etl-banner pero
   en navy — no es un problema, es un estado. Una de las tres señales
   redundantes de que se esta viendo un universo filtrado. */
.filter-strip { background: var(--navy); }
.filter-strip__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-11);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  color: var(--on-navy);
  font-size: var(--fs-data);
  line-height: var(--lh-ui);
}
.filter-strip__tag {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--track-kicker); text-transform: uppercase;
  font-weight: 600; flex: 0 0 auto;
  border: 1px solid var(--on-navy); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-5);
}
.filter-strip__text { min-width: 0; flex: 1 1 auto; }
/* Descuadre del control de hoy: ambar sobre navy, con fondo propio para que
   el contraste no sufra (mismo formula que .nd-chip). */
.filter-strip__warn {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-ui);
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn-bd); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-5);
}
.filter-strip__off {
  flex: 0 0 auto; font-size: var(--fs-caption); font-weight: 600;
  color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px;
}
.app-root.is-mobile .filter-strip__inner { padding: var(--sp-5) var(--sp-7); font-size: var(--fs-caption); }

/* Nota de temporalidad (Inventario y Venta perdida): azul informativo, no
   ambar — el ambar ya significa "algo va mal" en este reporte. Despegada de
   la barra, dentro del contenido: es una nota, no una alerta. */
.temp-note {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  background: var(--build-soft);
  border: 1px solid var(--build);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-9);
  color: var(--text-1);
  font-size: var(--fs-data);
  line-height: var(--lh-prose);
}
.temp-note__tag {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--track-kicker); text-transform: uppercase;
  font-weight: 600; color: var(--build); flex: 0 0 auto;
  line-height: var(--lh-prose); white-space: nowrap;
}
.temp-note__text { min-width: 0; }
.app-root.is-mobile .temp-note { padding: var(--sp-5) var(--sp-7); font-size: var(--fs-caption); }

/* Chip "TOP 500" pegado al titulo del area: redundante a proposito (una
   captura de pantalla suelta no muestra el interruptor). */
.area-head__uni {
  display: inline-flex; align-items: center; margin-left: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--track-kicker); text-transform: uppercase; font-weight: 600;
  color: var(--on-navy); background: var(--navy);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-5);
  vertical-align: middle;
}

/* Estado "no disponible por fuente financiera" (fuente=1 / CAR): candado ambar
   en tarjetas, tablas y modales. Reutiliza los tokens ambar/warn existentes;
   solo se agregan estas piezas nuevas. */
.nd-lock { display: inline-flex; align-items: center; color: var(--warn); }
.nd-lock svg { width: 11px; height: 11px; }
.kpi__val--nd { color: var(--text-3); font-weight: 500; }
.nd-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-ui);
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn-bd); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4);
}
.nd-dash { color: var(--text-3); cursor: default; }
/* Selector combinado para ganar especificidad sobre .ledger-row__val (16px/bold/
   text-1): el "no disponible" del modal va gris claro y sin negrita, como el
   prototipo; el candado conserva el ambar. */
.ledger-row__val.ledger-row__val--nd {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-caption); font-weight: 400; color: var(--text-3);
}
/* Nota con candado del puente de variacion (modal de tienda) cuando el
   Top 500 lo apaga entero: mismo lenguaje ambar que el resto de "no disponible". */
.t500-locked-note {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  color: var(--text-2); font-size: var(--fs-data); line-height: var(--lh-prose);
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-radius: var(--r-card); padding: var(--sp-6) var(--sp-8);
}
.t500-locked-note .nd-lock { margin-top: var(--sp-1); }

/* ===================== MAIN ===================== */
.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--sp-11) 48px;
}
.area-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.area-head__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-wide);
  color: var(--text-3);
  text-transform: uppercase;
}
.area-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title-1);
  letter-spacing: var(--track-title);
  margin: var(--sp-2) 0 0;
  line-height: var(--lh-title);
}
.area-head__period {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-2);
}

/* ===================== CARDS / GRID ===================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-9) 22px;
}
.card--pad-lg { padding: 22px var(--sp-10); }
.card-title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  margin-bottom: var(--sp-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
}
.card-link {
  font-size: var(--fs-label);
  color: var(--pos);
  font-weight: 600;
}
.stack { display: flex; flex-direction: column; }

.grid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.grid-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.grid-read {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-7);
  margin-bottom: 26px;
}
.grid-mat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}

/* ===================== RESUMEN: hero ===================== */
.hero-venta {
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-10) 26px;
  cursor: pointer;
  transition: background 0.14s ease;
  display: block;
  width: 100%;
}
.hero-venta:hover { background: var(--bg-hover); }
.hero-venta__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
}
.hero-venta__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  text-transform: uppercase;
}
.hero-venta__hint { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.hero-venta__num {
  font-size: var(--fs-display-xl);
  font-weight: 600;
  letter-spacing: var(--track-num);
  line-height: var(--lh-num);
  margin-top: var(--sp-4);
  color: var(--text-1);
}
.hero-venta__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  font-size: var(--fs-ui);
}
.hero-venta__meta .muted { color: var(--text-2); }
.hero-venta__meta b { color: var(--text-1); }
.hero-venta__updated {
  margin-top: var(--sp-5);
  font-size: var(--fs-label);
  color: var(--text-3);
  letter-spacing: var(--track-title);
}

.hero-ppto {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-9) 22px;
  display: flex;
  align-items: center;
  gap: var(--sp-9);
}
.ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ring__inner {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring__pct { font-size: var(--fs-num-sm); font-weight: 700; line-height: var(--lh-num); }
.ring__cap { font-size: var(--fs-nano); color: var(--text-3); letter-spacing: var(--track-th); }
.hero-ppto__copy .lbl { font-size: var(--fs-caption); color: var(--text-2); font-weight: 500; }
.hero-ppto__copy .meta { font-size: var(--fs-ui); font-weight: 600; margin-top: 3px; }
.hero-ppto__copy .gap { font-size: var(--fs-caption); margin-top: var(--sp-2); }

/* La tarjeta de ppto es un boton (abre su modal) solo en DTD; fuera de ahi sigue
   siendo el div de siempre y estas reglas no aplican. */
.hero-ppto--btn {
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.hero-ppto--btn:hover { background: var(--bg-hover); }
.hero-ppto__hint {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: var(--fs-label);
  color: var(--text-3);
  white-space: nowrap;
}

/* ===================== KPI strip ===================== */
.kpi-strip {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.kpi {
  text-align: left;
  background: var(--bg-surface);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: var(--sp-7) 18px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.kpi:hover { background: var(--bg-hover); }
.kpi__top { display: flex; justify-content: space-between; align-items: center; }
.kpi__label { font-size: var(--fs-label); color: var(--text-2); }
.kpi__hint { font-size: var(--fs-label); color: var(--text-3); }
.kpi__val { font-size: var(--fs-num); font-weight: 600; margin-top: 3px; color: var(--text-1); }
.kpi__sub { font-size: var(--fs-label); font-weight: 600; margin-top: var(--sp-1); }

/* ===================== Barras y filas de modulos ===================== */
.bar-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-data);
  margin-bottom: 5px;
}
.bar-row__name { font-weight: 500; }
.bar-track {
  height: 6px;
  background: var(--pill-neutral-bg);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }

.dir-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-7);
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-data);
}
.dir-row__name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-row__part { color: var(--text-3); font-size: var(--fs-caption); white-space: nowrap; }
.dir-row__var { font-weight: 600; min-width: 68px; text-align: right; white-space: nowrap; }
.dirlist { display: flex; flex-direction: column; }
.dirlist .dir-row:last-child { border-bottom: none; padding-bottom: 0; }
.dirlist .movers__lbl ~ .movers__lbl { margin-top: var(--sp-7); }

.read-item .lbl { font-size: var(--fs-label); color: var(--text-2); }
.read-item .val {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-ui);
  font-weight: 600;
  margin-top: var(--sp-1);
}
.big-num { font-size: var(--fs-title-2); font-weight: 600; }
.inv-cover { display: flex; align-items: baseline; gap: var(--sp-4); }
.inv-cover .unit { font-size: var(--fs-caption); color: var(--text-2); }

/* ===================== VENTAS / chips ===================== */
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--sp-7); }
.chip {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-4);
  background: var(--bg-surface);
  color: var(--text-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.chip.is-active { background: var(--navy); color: var(--bg-surface); border-color: var(--navy); }

.subselect { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-7); padding-left: var(--sp-1); align-items: center; }
.subselect__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  margin-right: var(--sp-2);
  text-transform: uppercase;
}
.chip--sm {
  padding: 5px 13px;
  font-size: var(--fs-caption);
  font-weight: 500;
}

.note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: var(--r-seg);
  padding: var(--sp-5) var(--sp-7);
  font-size: var(--fs-caption);
  color: var(--warn);
  margin-bottom: var(--sp-7);
}

/* insights strip */
.insights {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.insight {
  padding: var(--sp-7) 18px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.insight__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
}
.insight__value { font-size: var(--fs-num-sm); font-weight: 600; margin-top: var(--sp-2); color: var(--text-1); }
.insight__sub { font-size: var(--fs-label); font-weight: 600; margin-top: 1px; }

/* ===================== Tablas ===================== */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead tr { background: var(--bg-hover); }
.tbl th {
  padding: var(--sp-6) var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-th);
  color: var(--text-mono);
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-1);
  white-space: nowrap;
  background: var(--bg-hover);
}
.tbl td {
  padding: 11px var(--sp-8);
  font-size: var(--fs-data);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover td { background: var(--bg-hover) !important; }
.tbl .col-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* badge "estimado" (provenance) */
.est-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: 4px;
  padding: 0 var(--sp-2);
  margin-left: 5px;
  vertical-align: middle;
  line-height: var(--lh-prose);
  font-weight: 600;
}
.est-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warn);
  margin-left: var(--sp-2);
  vertical-align: middle;
  opacity: 0.7;
}

/* aviso de sanidad del snapshot: anomalia de la FUENTE en ese valor (tooltip) */
.warn-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: var(--lh-num);
  margin-left: var(--sp-3);
  vertical-align: middle;
  cursor: help;
}
/* variante informativa (venta no explicada dentro de lo normal): gris, discreta */
.warn-dot--info {
  background: var(--bg-hover);
  border-color: var(--line-4);
  color: var(--text-3);
  font-style: italic;
}

/* ===================== INVENTARIO: barras agotados ===================== */
.inv-bars { display: flex; flex-direction: column; gap: var(--sp-7); }
.inv-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--sp-7);
  align-items: center;
}
.inv-bar-row__name { font-size: var(--fs-data); font-weight: 500; }
.inv-bar-track {
  height: 8px;
  background: var(--pill-neutral-bg);
  border-radius: 4px;
  overflow: hidden;
}
.inv-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.inv-bar-row__val { font-size: var(--fs-caption); text-align: right; min-width: 120px; }
.inv-bar-row__val .dim { color: var(--text-3); }

/* ===================== MATERIALES ===================== */
.mat-total-num { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-num); margin-top: var(--sp-3); }
.stacked-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: var(--sp-8); }
.stacked-bar--sm { height: 9px; background: var(--track-bg); border-radius: 5px; margin-top: 0; }
.stacked-seg-con { background: var(--navy); }
.stacked-seg-sin { background: var(--neg); }
.mat-legend { display: flex; gap: var(--sp-9); margin-top: var(--sp-5); font-size: var(--fs-caption); }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--sp-3); vertical-align: middle; }
.swatch--con { background: var(--navy); }
.swatch--sin { background: var(--neg); }
.mat-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9) var(--sp-10);
  height: 100%;
  align-content: space-between;
}
.mat-metric .lbl { font-size: var(--fs-caption); color: var(--text-2); }
.mat-metric .val { font-size: var(--fs-num-lg); font-weight: 600; margin-top: var(--sp-2); letter-spacing: var(--track-num); }

.topstore-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: var(--sp-7);
  align-items: center;
}
.topstore-row__name { min-width: 0; }
.topstore-row__name .n { font-size: var(--fs-data); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topstore-row__name .f { font-size: var(--fs-label); color: var(--text-3); }
.topstore-track { height: 7px; background: var(--pill-neutral-bg); border-radius: 4px; overflow: hidden; }
.topstore-fill { height: 100%; background: var(--navy); border-radius: 4px; transition: width 0.3s ease; }
.topstore-row__val { font-size: var(--fs-caption); font-weight: 600; text-align: right; min-width: 74px; }

.matdetail-row {
  display: grid;
  grid-template-columns: 170px 1fr 92px;
  gap: var(--sp-6);
  align-items: center;
  font-size: var(--fs-caption);
}
.matdetail-row__name { min-width: 0; }
.matdetail-row__name .n { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matdetail-row__name .f { display: block; font-size: var(--fs-label); color: var(--text-3); }
.matdetail-row .per { font-weight: 600; text-align: right; }

/* Barra bicolor dentro de una fila (con stock navy + sin stock rojo), sobre
   pista neutra; el ancho total es proporcional a la venta perdida de la fila. */
.stacked-bar--row { height: 8px; margin-top: 0; background: var(--track-bg); }

/* Venta perdida por formato: columnas verticales anchas (con stock abajo, sin
   stock arriba) para alternar el ritmo visual de las barras horizontales. */
.vbars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  align-items: end;
  padding-top: var(--sp-4);
}
.vbar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); cursor: default; }
.vbar__val { font-size: var(--fs-data); font-weight: 600; }
.vbar__track {
  width: 100%;
  max-width: 88px;
  height: 150px;
  background: var(--track-bg);
  border-radius: var(--r-seg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vbar__seg { flex: none; width: 100%; }
.vbar__seg--con { background: var(--navy); }
.vbar__seg--sin { background: var(--neg); }
.vbar__name { font-size: var(--fs-caption); font-weight: 500; text-align: center; }

.mat-legend__hint { color: var(--text-3); }

/* Complementos de las tarjetas de Materiales. */
.mat-oos { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--text-2); }
.mat-metric__sub { margin-top: var(--sp-2); font-size: var(--fs-label); color: var(--text-3); }

/* ===================== MODAL ===================== */
/* Con un modal abierto, el fondo no scrollea (solo el modal). */
body.has-modal { overflow: hidden; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9);
  animation: overlayIn 0.16s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-app);
  width: min(720px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--r-modal);
  box-shadow: var(--shadow-modal);
  animation: modalIn 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
/* El mismo modal repintado (datos nuevos) no repite su animación de entrada. */
.overlay.is-still, .modal.is-still { animation: none; }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: 26px 30px 0;
}
.modal__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  color: var(--text-3);
  text-transform: uppercase;
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title-2);
  margin: 7px 0 0;
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
}
.modal__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-num);
  transition: background 0.14s ease;
}
.modal__close:hover { background: var(--pill-neutral-bg); }
.modal__body { padding: 18px 30px 30px; }

.modal-hero {
  display: flex;
  align-items: baseline;
  gap: var(--sp-7);
  flex-wrap: wrap;
  padding-bottom: var(--sp-9);
  border-bottom: 1px solid var(--line-2);
}
.modal-hero__num { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-num); line-height: var(--lh-num); }
.delta-pill { font-size: var(--fs-data); font-weight: 600; padding: var(--sp-2) 11px; border-radius: var(--r-pill); }
.modal-hero__cmp { font-size: var(--fs-data); color: var(--text-2); }
.modal-hero__cmp b { color: var(--text-1); }

/* Bloque "por qué el margen se desvió" (Fase 1): entre el hero y la gráfica del
   modal de margen. Solo aparece cuando el backend detecta la causa concreta. */
.mrsn {
  margin-top: 18px;
  padding: var(--sp-7) var(--sp-8);
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: 10px;
}
.mrsn__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: var(--sp-5);
}
.mrsn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mrsn__item { padding-left: 11px; border-left: 3px solid var(--warn-bd); }
.mrsn__item--asiento { border-left-color: var(--warn); }
.mrsn__item--nota { border-left-color: var(--line-4); }
.mrsn-toggle { display: block; margin-top: var(--sp-5); font-size: var(--fs-label); font-weight: 600; color: var(--warn); text-align: left; cursor: pointer; }
.mrsn-toggle.is-open { color: var(--text-2); }
.mrsn__list + .mrsn-toggle { margin-top: 11px; }
#mrsnMore { margin-top: 11px; }
.mrsn__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: 3px; }
.mrsn__tag { font-size: var(--fs-caption); font-weight: 700; color: var(--text-1); }
.mrsn__date { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; color: var(--text-3); margin-left: var(--sp-3); }
.mrsn__impact {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.mrsn__detail { font-size: var(--fs-data); line-height: var(--lh-prose); color: var(--text-2); }
.mrsn__foot { margin-top: var(--sp-6); font-size: var(--fs-label); color: var(--text-3); }

/* Motivos v2: resumen + tablas (materiales / asientos) al expandir. */
.mrsn__summary { font-size: var(--fs-data); line-height: var(--lh-prose); color: var(--text-2); }
.mrsn__summary b { color: var(--text-1); }
.mrsn__note { font-size: var(--fs-caption); line-height: var(--lh-prose); color: var(--text-2); padding-left: 11px; border-left: 3px solid var(--line-4); }
.mrsn-tables { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 15px; }
.mrsub__lbl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-th); text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 7px; }
.mrsub__lbl span { color: var(--text-3); font-weight: 400; }
.mrt-wrap { overflow-x: auto; border: 1px solid var(--warn-bd); border-radius: 9px; background: var(--bg-surface); }
table.mrt { border-collapse: collapse; width: 100%; min-width: 480px; font-size: var(--fs-caption); }
table.mrt thead th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-th); text-transform: uppercase; color: var(--text-mono); text-align: left; font-weight: 500; padding: var(--sp-4) 11px; background: var(--warn-bg); border-bottom: 1px solid var(--warn-bd); white-space: nowrap; }
table.mrt thead th.mrt__num { text-align: right; }
table.mrt thead th[title] { text-decoration: underline dotted var(--line-4); text-underline-offset: 2px; cursor: help; }
table.mrt tbody td { padding: 9px 11px; border-top: 1px solid var(--line-2); vertical-align: top; }
table.mrt tbody tr:hover { background: var(--warn-bg); }
.mrt__prod { font-weight: 600; color: var(--text-1); line-height: var(--lh-ui); }
.mrt__sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.mrt__nowrap { white-space: nowrap; color: var(--ink-soft); }
.mrt__num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-amber { color: var(--warn); font-weight: 600; }
.mr-amber[title] { cursor: help; }
/* móvil: cada fila como tarjeta */
.mrcards { display: flex; flex-direction: column; gap: 9px; }
.mrcard { border: 1px solid var(--warn-bd); border-radius: 9px; background: var(--bg-surface); padding: var(--sp-5) var(--sp-6); }
.mrcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
.mrcard__ttl { font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-ui); }
.mrcard__sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); margin-top: 1px; }
.mrcard__imp { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600; color: var(--warn); white-space: nowrap; flex: none; }
.mrcard__meta { font-size: var(--fs-label); color: var(--text-3); margin: var(--sp-3) 0 var(--sp-1); }
.mrcard__kv { display: flex; justify-content: space-between; gap: var(--sp-6); font-size: var(--fs-caption); color: var(--text-2); padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--line-2); }
.mrcard__kv b { font-family: var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.chart-box { padding: 22px 0 var(--sp-3); }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-xlabels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-right: 54px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.chart-legend { display: flex; gap: 18px; margin-top: var(--sp-7); font-size: var(--fs-label); color: var(--text-2); }
.legend-line { display: inline-block; width: 16px; height: 3px; background: var(--text-1); vertical-align: middle; margin-right: var(--sp-3); border-radius: 2px; }
.legend-dash { display: inline-block; width: 16px; height: 0; border-top: 2px dashed var(--muted-ref); vertical-align: middle; margin-right: var(--sp-3); }
.trend-empty {
  padding: 26px 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-3);
  letter-spacing: var(--track-th);
}

.modal-explain {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  line-height: var(--lh-narrative);
  color: var(--ink-soft);
  margin: 22px 0 0;
  max-width: 62ch;
}
.modal-disclaimer { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--sp-8); line-height: var(--lh-prose); }

/* modal de entidad (estado de resultados) */
.entity-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-2);
}
.entity-hero__lbl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); color: var(--text-3); text-transform: uppercase; }
.entity-hero__row { display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-3); }
.entity-hero__num { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-num); line-height: var(--lh-num); }
.ppto-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.ppto-head__lbl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-kicker); color: var(--text-3); text-transform: uppercase; }
.ppto-head__val { font-size: var(--fs-body); font-weight: 700; }
.ppto-track { height: 8px; background: var(--pill-neutral-bg); border-radius: 5px; overflow: hidden; }
.ppto-fill { height: 100%; border-radius: 5px; }
.ppto-gap { font-size: var(--fs-label); margin-top: var(--sp-3); }

.ledger-group {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  color: var(--text-3);
  text-transform: uppercase;
  padding: 18px 0 var(--sp-3);
}
.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
}
.ledger-row__label { font-size: var(--fs-ui); color: var(--ink-soft); }
.ledger-row__right { display: flex; align-items: baseline; gap: var(--sp-7); }
.ledger-row__ref { font-size: var(--fs-caption); }
.ledger-row__val { font-size: var(--fs-prose); font-weight: 600; color: var(--text-1); min-width: 84px; text-align: right; }
.modal-narrative {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  line-height: var(--lh-narrative);
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto;
  padding: 18px var(--sp-4);
  max-width: 58ch;
}

/* ===================== MOBILE BOTTOM NAV ===================== */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--bottomnav-h);
  background: var(--bg-surface);
  border-top: 1px solid var(--line-1);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--sp-3) 0 var(--sp-4);
}
/* Con la barra a la vista, lo que flota al pie (Mía) se apoya encima de ella. */
body:has(.app-root.is-mobile .bottomnav) { --float-inset-bottom: var(--bottomnav-h); }
.bottomnav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-3);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.bottomnav__btn.is-active { color: var(--navy); }
/* "Hoy" en móvil: punto live pulsante sobre el ícono (visible siempre, es el
   indicador principal en pantallas chicas) + separador reforzado + activo en
   verde, espejo de la nav de escritorio. */
.bottomnav__btn--live { position: relative; padding-right: var(--sp-7); }
.bottomnav__btn--live::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--line-4);
}
.bottomnav__btn--live.is-active { color: var(--pos); }
.bottomnav__ico { position: relative; display: flex; }
.bottomnav__livedot {
  position: absolute;
  top: -2px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  animation: livePulse 2.2s ease infinite;
}

/* color util para signos */
.c-pos { color: var(--pos); }
.c-neg { color: var(--neg); }
.c-neutral { color: var(--text-2); }

/* ===================== RESPONSIVE (modo movil por ancho de contenedor) ===================== */
.app-root.is-mobile .topbar__row { padding: var(--sp-5) var(--sp-7); }
.app-root.is-mobile .topbar__logo { height: 26px; }
.app-root.is-mobile .topbar__kicker,
.app-root.is-mobile .topbar__cut,
.app-root.is-mobile .topnav { display: none; }
.app-root.is-mobile .main { padding: 18px var(--sp-7) 96px; }
.app-root.is-mobile .area-head__title { font-size: var(--fs-num-lg); }
.app-root.is-mobile .hero-venta__num { font-size: var(--fs-display); }
.app-root.is-mobile .grid-hero { grid-template-columns: 1fr; }
.app-root.is-mobile .entity-hero { grid-template-columns: 1fr; }
.app-root.is-mobile .tbl { min-width: 680px; }
.app-root:not(.is-mobile) .bottomnav { display: none; }

/* ===================== G1: controles de tabla ===================== */
.tbl-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.tbl-controls__cols { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tbl-controls__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  margin-right: var(--sp-1);
  text-transform: uppercase;
}
.colchip {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--bg-surface);
  color: var(--text-3);
  font-size: var(--fs-label);
  font-weight: 600;
  transition: all 0.14s ease;
  text-decoration: line-through;
  opacity: 0.55;
}
.colchip.is-on {
  color: var(--navy);
  border-color: var(--navy);
  text-decoration: none;
  opacity: 1;
}
.tbl-controls__right { display: flex; align-items: center; gap: var(--sp-4); }
.tbl-search {
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line-4);
  border-radius: var(--r-seg);
  background: var(--bg-surface);
  color: var(--text-1);
  min-width: 190px;
}
.tbl-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--ring-focus); }
.tbl-csv {
  font-size: var(--fs-label);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line-4);
  border-radius: var(--r-seg);
  background: var(--bg-surface);
  color: var(--ink-soft);
  white-space: nowrap;
}
.tbl-csv:hover { background: var(--bg-hover); }
.tbl .th-sort { cursor: pointer; user-select: none; }
.tbl .th-sort:hover { color: var(--text-1); background: var(--bg-hover); }
.tbl-empty {
  padding: 22px var(--sp-8);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-caption);
}

/* ===================== G3: comparativos ===================== */
.grid-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.cmp-card { padding: 18px var(--sp-9); }
.cmp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.cmp-card__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  font-weight: 400;
}
.cmp-card__sub { font-size: var(--fs-label); color: var(--text-2); margin-top: var(--sp-2); }
.cmp-legend { display: flex; gap: var(--sp-6); font-size: var(--fs-micro); color: var(--text-2); font-weight: 600; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cmp-sw { display: inline-block; border-radius: 2px; flex: 0 0 auto; }
.cmp-sw--cy { width: 14px; height: 7px; background: var(--pos); }
.cmp-sw--ly { width: 14px; height: 10px; background: var(--ly-bar); }
.cmp-sw--bud { width: 3px; height: 12px; background: var(--neg); }
.cmp-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.cmp-row { display: grid; grid-template-columns: 96px 1fr 152px; gap: var(--sp-6); align-items: center; }
.cmp-row__name { font-size: var(--fs-caption); font-weight: 600; color: var(--text-1); }
.cmp-track {
  position: relative;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--track-bg);
  overflow: visible;
}
.cmp-ly {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  background: var(--ly-bar);
  border-radius: var(--r-pill);
}
.cmp-cy {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--pos) 18%, transparent);
}
.cmp-budget {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 27px;
  background: var(--neg);
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neg) 16%, transparent);
  pointer-events: none;
}
.cmp-row__val { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.cmp-row__amt { font-size: var(--fs-caption); font-weight: 700; color: var(--text-1); }
.cmp-row__deltas { display: inline-flex; gap: 5px; align-items: center; font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
.cmp-sep { color: var(--line-4); font-weight: 400; }

/* ===================== G3/G4: lectura rapida de tiendas ===================== */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
.movers__col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.movers__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.mover {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--bg-surface);
  text-align: left;
  transition: all 0.14s ease;
}
.mover:hover { border-color: var(--line-4); background: var(--bg-hover); transform: translateY(-1px); }
.mover--static { cursor: default; }
.mover--static:hover { border-color: var(--line-2); background: var(--bg-surface); transform: none; }
.mover__name { display: flex; flex-direction: column; font-size: var(--fs-caption); font-weight: 600; color: var(--text-1); min-width: 0; overflow: hidden; }
.mover__nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover__fmt { font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover__var { font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.movers__hint { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--sp-6); }
.movers__empty { font-size: var(--fs-caption); color: var(--text-3); padding: var(--sp-4) var(--sp-5); }

/* Mini distribucion de venta por formato (barra apilada 100%) */
.fmtmix { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line-2); }
.fmtmix__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.fmtmix__bar {
  display: flex;
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--track-bg);
}
.fmtmix__seg { display: block; height: 100%; min-width: 2px; }
.fmtmix__seg + .fmtmix__seg { border-left: 1px solid var(--bg-surface); }
.fmtmix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--text-2);
}
.fmtmix__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fmtmix__item b { color: var(--text-1); font-weight: 600; }
.fmtmix__dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* Tarjeta unida Inventario + Venta perdida */
.invperd { display: flex; flex-direction: column; gap: var(--sp-7); }
.invperd__block + .invperd__block { border-top: 1px solid var(--line-2); padding-top: var(--sp-7); }
.invperd__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.invperd__lbl { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-kicker); color: var(--text-2); font-weight: 600; text-transform: uppercase; }
.invperd .big-num { font-size: var(--fs-num-lg); }
.invperd .card-link { font-family: var(--font-sans); }

/* ===================== G4: puente precio-volumen (modal) ===================== */
.modal-section { margin-top: 0; padding-top: var(--sp-9); border-top: 1px solid var(--line-2); }
.modal-section__title { font-family: var(--font-display); font-size: var(--fs-num-sm); font-weight: 600; color: var(--text-1); letter-spacing: var(--track-title); }
/* cabecera de seccion con toggle a la derecha (tendencia venta/margen) */
.sec-headrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.segmented--sm .segmented__btn { padding: 5px var(--sp-6); font-size: var(--fs-label); }
.app-root.is-mobile .sec-headrow { align-items: flex-start; }
.modal-section__sub { font-size: var(--fs-caption); color: var(--text-2); margin-top: 3px; line-height: var(--lh-prose); }
.drivers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin: var(--sp-8) 0; }
.drivers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.driver {
  padding: var(--sp-7) var(--sp-8);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-hover) 100%);
}
.driver__lbl { font-size: var(--fs-caption); font-weight: 700; color: var(--text-1); }
.driver__imp { font-size: var(--fs-num); font-weight: 700; letter-spacing: var(--track-num); margin-top: var(--sp-3); }
.driver__meta { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-2); margin-top: var(--sp-2); }
.lost {
  margin-top: var(--sp-7);
  padding: var(--sp-7) var(--sp-8);
  border: 1px solid var(--warn-bd);
  background: var(--warn-bg);
  border-radius: var(--r-card);
}
.lost__head { font-size: var(--fs-caption); font-weight: 700; color: var(--warn); margin-bottom: var(--sp-5); }
.lost__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.lost__k { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-2); }
.lost__v { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text-1); margin-top: 3px; }

/* ===================== responsive de lo nuevo ===================== */
.app-root.is-mobile .grid-compare { grid-template-columns: 1fr; }
.app-root.is-mobile .cmp-row { grid-template-columns: 1fr; gap: 5px; }
.app-root.is-mobile .cmp-row__val { flex-direction: row; align-items: baseline; justify-content: space-between; }
.app-root.is-mobile .drivers { grid-template-columns: 1fr; }
.app-root.is-mobile .movers { grid-template-columns: 1fr; }
.app-root.is-mobile .lost__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
.app-root.is-mobile .tbl-controls { flex-direction: column; align-items: stretch; }
.app-root.is-mobile .tbl-search { min-width: 0; width: 100%; }

/* ===================== ajustes UI 2026-07-02 ===================== */
/* Barra de nivel (dims): segmented control, mismo lenguaje que el periodo. */
.dimbar { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); flex-wrap: wrap; }
.dimbar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  text-transform: uppercase;
}
.segmented--dims { flex-wrap: wrap; width: max-content; max-width: 100%; }
.app-root.is-mobile .segmented--dims { width: 100%; }
.app-root.is-mobile .segmented--dims .segmented__btn { flex: 1 1 auto; text-align: center; padding: var(--sp-3) var(--sp-4); }

/* Flecha de fila clicable (sustituye a los banners "toca…"). */
.rowlink { font-size: var(--fs-label); color: var(--text-3); margin-left: 3px; }
tr.clickable:hover .rowlink, .mover:hover .rowlink { color: var(--pos); }

/* Consideraciones al pie de la tabla (antes banner superior). */
.tbl-foot { font-size: var(--fs-label); color: var(--text-3); margin: var(--sp-4) var(--sp-1) 0; line-height: var(--lh-prose); }

/* Dropdown compacto de columnas. */
.coldrop { position: relative; }
.coldrop__btn {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--line-4);
  border-radius: var(--r-seg);
  padding: var(--sp-3) 11px;
  background: var(--bg-surface);
}
.coldrop__btn.is-open { border-color: var(--navy); color: var(--navy); }
.coldrop__caret { font-size: var(--fs-nano); }
.coldrop__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-6);
  max-width: 430px;
  min-width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-1) 12%, transparent);
}

/* Expandible: top 10 materiales con mayor venta perdida (Resumen). */
.topmat-toggle {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pos);
  text-align: left;
}
.topmat-toggle.is-open { color: var(--text-2); }
.topmat { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.topmat__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 64px 52px 48px;
  gap: var(--sp-4);
  align-items: center;
  font-size: var(--fs-label);
}
.topmat__row--head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-th);
  color: var(--text-mono);
  text-transform: uppercase;
}
.topmat__rank { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.topmat__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.topmat__track { display: flex; height: 5px; background: var(--track-bg); border-radius: 3px; overflow: hidden; }
.topmat__fill { height: 100%; background: var(--brand-red); }
.topmat__fill--con { background: var(--muted-ref); }
.topmat__val { font-family: var(--font-mono); font-size: var(--fs-micro); text-align: right; font-weight: 600; }
.topmat__st { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); text-align: right; }
.topmat__foot { font-size: var(--fs-micro); color: var(--text-3); margin-top: var(--sp-3); line-height: var(--lh-ui); }


/* ===================== modal de cumplimiento de presupuesto ===================== */
/* Grafica de barras divergentes sobre la base de la meta (no hay serie LY). */
.legend-sw {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: var(--sp-3);
}
.legend-sw--good { background: var(--pos); }
.legend-sw--bad { background: var(--neg); }
.legend-sw--none { background: var(--muted-ref); }   /* desvio $0 (en la meta) */

/* Brechas acumuladas: reutiliza las tarjetas .driver de "¿Por que cambio la
   venta?" bajo su propio titulo de seccion (consistencia entre modales). */
.ppto-brechas { margin-top: var(--sp-8); }
.ppto-brechas .drivers { margin: var(--sp-6) 0 0; }

/* Vista "Metas": toggle Cumplimiento/Metas en la fila del titulo de la seccion. */
.ppto-sec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.ppto-toggle { flex: none; }
.ppto-toggle .segmented__btn { padding: 5px var(--sp-6); font-size: var(--fs-label); }
/* Pastilla del % en la tarjeta "Vendido" (verde = avance de venta). */
.ppto-pill {
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600;
  color: var(--pos); background: var(--pos-soft); padding: var(--sp-1) 7px; border-radius: 6px;
  margin-left: 5px; vertical-align: 2px;
}
/* Linea de brecha repartida (flecha direccional + cifra en pastilla). */
.brecha-line {
  display: flex; align-items: baseline; gap: var(--sp-4); margin: 18px 0 var(--sp-3);
  font-size: var(--fs-ui); line-height: var(--lh-prose); color: var(--text-2);
}
.brecha-line b { font-variant-numeric: tabular-nums; }
.brecha-line--n { color: var(--text-3); }
.brecha-arrow {
  font-family: var(--font-mono); font-size: var(--fs-prose); font-weight: 700;
  line-height: var(--lh-num); flex: none; transform: translateY(1px);
}
.brecha-pill {
  font-variant-numeric: tabular-nums; font-size: var(--fs-ui); font-weight: 600;
  padding: 1px var(--sp-4); border-radius: 6px; white-space: nowrap;
}

/* ===================== modal de tienda v2 (cascada + vs formato + salud) ===================== */
/* Tabla "¿Como esta frente a su formato?" */
.cmpfmt { border: 1px solid var(--line-1); border-radius: var(--r-card); overflow: hidden; margin-top: var(--sp-7); background: var(--bg-surface); }
.cmpfmt__head, .cmpfmt__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 72px 72px minmax(0, 1.5fr);
  gap: var(--sp-5);
  align-items: center;
  padding: 9px var(--sp-7);
}
.cmpfmt__head {
  background: var(--bg-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-th);
  color: var(--text-mono);
  text-transform: uppercase;
}
.cmpfmt__row { border-top: 1px solid var(--line-2); font-size: var(--fs-caption); }
.cmpfmt__m { font-weight: 600; }
.cmpfmt__m small { display: block; font-weight: 400; font-size: var(--fs-micro); color: var(--text-3); }
.cmpfmt__v { font-family: var(--font-mono); font-size: var(--fs-caption); text-align: right; font-weight: 600; }
.cmpfmt__f { font-family: var(--font-mono); font-size: var(--fs-caption); text-align: right; color: var(--text-2); }
.pctile { display: flex; align-items: center; gap: var(--sp-4); }
.pctile__track { position: relative; flex: 1; height: 6px; background: var(--track-bg); border-radius: 3px; }
.pctile__mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: var(--line-4); }
.pctile__dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid var(--bg-surface);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text-1) 28%, transparent);
}
.pctile__n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-2); width: 32px; text-align: right; }
.app-root.is-mobile .cmpfmt__head, .app-root.is-mobile .cmpfmt__row { grid-template-columns: minmax(0, 1fr) 60px 60px minmax(0, 1.1fr); gap: 7px; padding: 9px var(--sp-5); }

/* Barra "Salud comercial" (tabla Ventas > Tienda) */
.idx { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); }
.idx__track { width: 96px; height: 7px; background: var(--track-bg); border-radius: 4px; overflow: hidden; }
.idx__fill { display: block; height: 100%; border-radius: 4px; }
.app-root.is-mobile .idx__track { width: 64px; }

/* ===================== HOY (intradía) ===================== */
/* Tag de frescura: fecha/hora de la última actualización de la fuente. */
.area-head__live { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }

/* Estados del tag con el stream. Son variantes: .live-pill vive en components.css y
   lo comparte HIT 360. */
.live-pill--retraso { color: var(--warn); background: var(--warn-bg); }
.live-pill--retraso .live-pill__dot { background: var(--progress); }
.live-pill--detenido { color: var(--neg); background: var(--neg-soft); }
.live-pill--detenido .live-pill__dot { background: var(--neg); animation: none; }
.live-pill--quieto { color: var(--text-2); background: var(--pill-neutral-bg); }
.live-pill--quieto .live-pill__dot { background: var(--text-3); animation: none; }
.hoy-fresh-note { max-width: 420px; text-align: right; font-size: var(--fs-label); line-height: var(--lh-prose); color: var(--warn); }
.app-root.is-mobile .hoy-fresh-note { text-align: left; }

/* Avisos bajo el encabezado (tiendas sin venta, fuente con problemas). */
.hoy-alert {
  display: flex; align-items: center; gap: var(--sp-6);
  background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-8); margin-bottom: var(--sp-5);
  color: var(--warn); font-size: var(--fs-data); line-height: var(--lh-prose);
}
.hoy-alert svg { width: 16px; height: 16px; flex: none; }
.hoy-alert__txt { flex: 1 1 auto; min-width: 0; }
.hoy-alert b { font-weight: 600; }
.hoy-alert__link { flex: none; font-size: var(--fs-caption); font-weight: 600; color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }
.hoy-alert--neg { background: var(--neg-soft); border-color: var(--neg-border-soft); color: var(--neg); }
/* SAP aún calculando (ly/autopagoEstimate.pending): no es una falla, nota gris sin ámbar. */
.hoy-alert--info { background: var(--pill-neutral-bg); border-color: var(--line-1); color: var(--text-2); }
.hoy-alert--sm { font-size: var(--fs-caption); padding: var(--sp-4) var(--sp-6); margin: 0; }
.app-root.is-mobile .hoy-alert { align-items: flex-start; font-size: var(--fs-caption); padding: var(--sp-4) var(--sp-6); }

/* Héroe: venta real grande, % con la comparable y la cuenta a la vista. */
.hoy-hero { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: var(--sp-10) 26px; }
.hoy-hero__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-4); }
.hoy-hero__num { margin-top: 0; }
.hoy-hero__line { font-size: var(--fs-data); color: var(--text-2); margin-top: var(--sp-3); }
.hoy-hero__line b { font-weight: 600; }
.hoy-hero__empty { font-size: var(--fs-num-lg); font-weight: 600; letter-spacing: var(--track-num); color: var(--text-1); margin-top: var(--sp-4); }

/* Píldora «% vs año pasado» con su explicación (hover, foco o toque). */
.hoy-tipwrap { position: relative; display: inline-flex; outline: none; cursor: help; }
.hoy-pill { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.hoy-pill--calc { color: var(--text-2); background: var(--pill-neutral-bg); }
.hoy-info { width: 13px; height: 13px; flex: none; }
.hoy-tipwrap:focus-visible .hoy-pill { box-shadow: 0 0 0 3px var(--ring-focus); }
.hoy-tip {
  position: absolute; top: calc(100% + var(--sp-4)); left: 0; z-index: 20;
  display: none; flex-direction: column; gap: var(--sp-5);
  width: 380px; max-width: calc(100vw - var(--sp-12));
  background: var(--navy); color: var(--on-navy);
  border-radius: 10px; padding: var(--sp-8) 18px; box-shadow: var(--shadow-pop);
  font-size: var(--fs-data); font-weight: 400; line-height: var(--lh-prose); text-align: left; white-space: normal;
}
.hoy-tipwrap:hover .hoy-tip, .hoy-tipwrap:focus .hoy-tip, .hoy-tipwrap:focus-within .hoy-tip { display: flex; }
.hoy-tip__ttl { font-size: var(--fs-ui); font-weight: 600; }
.hoy-tip__calc {
  font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.8;
  background: color-mix(in srgb, var(--on-navy) 8%, transparent); border-radius: 6px; padding: var(--sp-5) var(--sp-6);
}
.hoy-tip__txt--dim { color: color-mix(in srgb, var(--on-navy) 72%, transparent); }
.hoy-tip b { font-weight: 600; }

/* La cuenta: registrada + autopago estimado (≈, punteado) = comparable vs año pasado. */
.hoy-bridge { display: flex; align-items: stretch; gap: var(--sp-4); }
.hoy-bridge__item { flex: 1 1 0; min-width: 0; border: 1px solid var(--line-2); background: var(--bg-hover); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); }
.hoy-bridge__item:only-child { flex: 0 1 auto; }  /* calculando: solo la registrada, sin estirarla */
.hoy-bridge__item--est { border-style: dashed; border-color: var(--line-4); background: var(--bg-surface); }
.hoy-bridge__lbl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-th); color: var(--text-3); text-transform: uppercase; }
.hoy-bridge__val { font-size: var(--fs-prose); font-weight: 500; color: var(--text-1); margin-top: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-bridge__item--est .hoy-bridge__val { color: var(--text-2); }
.hoy-bridge__item--comp .hoy-bridge__val { font-weight: 600; }
.hoy-bridge__sub { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--sp-1); }
.hoy-bridge__op { flex: none; align-self: center; min-width: 14px; text-align: center; font-size: var(--fs-num-sm); color: var(--text-3); }
/* Móvil: la misma cuenta como lista. */
.hoy-blist { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-3); border-top: 1px solid var(--line-2); padding-top: var(--sp-5); font-size: var(--fs-data); }
.hoy-blist__l { color: var(--text-2); }
.hoy-blist__v { text-align: right; color: var(--text-1); }
.hoy-blist .is-est { color: var(--text-2); }
.hoy-blist .is-strong { color: var(--text-1); font-weight: 600; }

/* Meta del día (stream): avance, marcador del ritmo LY y cierre estimado. */
.hoy-meta { display: flex; flex-direction: column; gap: var(--sp-7); }
.hoy-meta .card-title { margin-bottom: 0; }
.hoy-meta .hoy-meta-num { margin: 0; }
.hoy-meta__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-caption); color: var(--text-2); margin-bottom: var(--sp-4); }
.hoy-meta__row b { font-weight: 600; }
.hoy-meta__foot { display: flex; align-items: center; gap: var(--sp-5); border-top: 1px solid var(--line-2); padding-top: var(--sp-9); font-size: var(--fs-ui); color: var(--text-2); }
.hoy-meta__foot b { color: var(--text-1); font-weight: 600; }
.hoy-meta__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; }
.hoy-meta__ttl { justify-content: flex-start; gap: var(--sp-3); }
.hoy-meta__ly { text-align: right; margin-left: auto; }  /* si baja de línea, sigue pegado a la derecha */
.hoy-meta__ly-lbl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-kicker); color: var(--text-3); }
.hoy-meta__ly-val { font-size: var(--fs-num-sm); font-weight: 600; color: var(--text-2); margin-top: var(--sp-4); font-variant-numeric: tabular-nums; }
.hoy-meta__row--strong { color: var(--text-1); }
/* Móvil: el año pasado en una sola fila bajo la meta (etiqueta a la izquierda, cifra a la derecha). */
.app-root.is-mobile .hoy-meta__ly { width: 100%; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
.app-root.is-mobile .hoy-meta__ly-val { margin-top: 0; }
.hoy-meta .hoy-pace-legend { font-size: var(--fs-caption); }
.hoy-meta .hoy-pace-legend b { color: var(--text-1); font-weight: 600; }
/* Tarjeta (no el modal): relleno del héroe y los tres bloques repartidos en la altura que él marca. */
.card.hoy-meta { justify-content: space-between; gap: var(--sp-8); padding: var(--sp-10) 26px; }
.card.hoy-meta .hoy-meta__row { font-size: var(--fs-data); margin-bottom: var(--sp-6); }
.card.hoy-meta .hoy-track, .card.hoy-meta .hoy-fill { height: 12px; border-radius: 6px; }
.card.hoy-meta .hoy-pace { height: 22px; }
.card.hoy-meta .hoy-pace-legend { font-size: var(--fs-data); margin-top: var(--sp-6); }
.app-root.is-mobile .card.hoy-meta { padding: 18px var(--sp-8); }
/* ⓘ junto al título de la meta: abre el tooltip oscuro «Cómo leer esta tarjeta». */
.hoy-ibtn { display: inline-flex; align-items: center; color: var(--text-3); cursor: help; }
.hoy-tipwrap--meta .hoy-tip { left: 50%; transform: translateX(-50%); font-family: var(--font-sans); letter-spacing: normal; text-transform: none; width: 360px; }
.hoy-tip__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.hoy-tip__sw { display: flex; justify-content: center; padding-top: var(--sp-3); }
.hoy-tip__foot { border-top: 1px solid color-mix(in srgb, var(--on-navy) 15%, transparent); padding-top: var(--sp-4); }
.hoy-tip .hoy-tip__txt--dim b { color: var(--on-navy); }
.hoy-sw-barra { width: 18px; height: 8px; border-radius: var(--r-pill); background: var(--brand-green); }
.hoy-sw-marca { width: 2px; height: 14px; background: var(--on-navy); margin-top: calc(-1 * var(--sp-2)); }
.hoy-sw-cierre { width: 9px; height: 9px; border: 2px solid var(--pos-on-dark); border-radius: 50%; }
.hoy-hollow { display: inline-block; flex: none; width: 10px; height: 10px; border: 2px solid var(--pos); border-radius: 50%; }
.hoy-muted { color: var(--text-3); }

/* Barra de meta del día con marcador del ritmo LY (qué % de su día llevaba
   la misma entidad a esta hora el año pasado). */
.hoy-meta-num { font-size: var(--fs-num-lg); font-weight: 600; letter-spacing: var(--track-title); margin: var(--sp-1) 0 var(--sp-6); }
.hoy-track { position: relative; height: 10px; background: var(--pill-neutral-bg); border-radius: 5px; }
.hoy-track--sm { height: 8px; }
.hoy-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; transition: width 0.3s ease; }
.hoy-pace {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 18px;
  background: var(--navy);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--ring-focus);
}
.hoy-pace-legend { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-micro); color: var(--text-2); margin-top: var(--sp-4); }
.hoy-pace-legend .sw { width: 3px; height: 11px; background: var(--navy); border-radius: 2px; flex: 0 0 auto; }
.hoy-modal-cmp { font-size: var(--fs-data); color: var(--text-2); margin-top: var(--sp-4); }
.hoy-modal-cmp b { color: var(--text-1); }

/* Franja de KPI de dos líneas (vs año pasado ≈ · vs ayer) y notas al pie. */
.hoy-kpis { margin-bottom: var(--sp-4); }
.app-root.is-mobile .hoy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4 tarjetas: 2x2, no 3+1 */
.hoy-kpi__sub2 { font-size: var(--fs-label); color: var(--text-2); margin-top: var(--sp-1); }
.hoy-kpi__na { color: var(--text-3); font-weight: 400; }
.hoy-note { font-size: var(--fs-label); color: var(--text-3); line-height: var(--lh-prose); margin: 0 var(--sp-1) var(--sp-7); }
.hoy-pulse .hoy-note, .hoy-hero .hoy-note { margin: 0; }

/* Curva del día + pulso. */
.hoy-row2 { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--sp-7); margin: var(--sp-5) 0 26px; }
.hoy-row2 > .card { min-width: 0; }
.hoy-row2 > .card:only-child { grid-column: 1 / -1; }
.hoy-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.hoy-card-head .card-title { margin-bottom: 0; }
.hoy-card-head__aside { font-size: var(--fs-caption); color: var(--text-2); }
.hoy-card-head__aside b { color: var(--text-1); font-weight: 600; }
.hoy-legend { flex-wrap: wrap; row-gap: var(--sp-3); }
.legend-line--pos { background: var(--pos); }
.legend-dash--ly { border-top-color: color-mix(in srgb, var(--navy) 55%, transparent); }
.legend-dash--ayer { width: 14px; border-top-color: var(--progress); }  /* ámbar: se lee sobre las barras verdes del pulso */
.legend-sw--ap { background: color-mix(in srgb, var(--progress) 45%, transparent); }
.legend-hollow { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--pos); border-radius: 50%; vertical-align: middle; margin-right: var(--sp-3); }
.legend-bar { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--pos); vertical-align: middle; margin-right: var(--sp-3); }
.legend-solid--ly { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--navy); vertical-align: middle; margin-right: var(--sp-3); }
.tip-sw--ap { background: var(--progress); }
.tip-sw--ayer { background: var(--progress); }
.hoy-pulse { display: flex; flex-direction: column; gap: var(--sp-5); }
.hoy-pulse .card-title { margin-bottom: 0; }
.hoy-pulse .chart-box { padding: var(--sp-2) 0 0; }
.hoy-pulse .chart-legend { margin-top: 0; }
.hoy-pulse__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.hoy-pulse__num { font-size: var(--fs-num-lg); font-weight: 600; letter-spacing: var(--track-num); }
.hoy-pulse__d { font-size: var(--fs-data); font-weight: 600; cursor: help; }
.hoy-pulse__d2 { font-size: var(--fs-data); color: var(--text-2); }
@media (max-width: 1080px) { .hoy-row2 { grid-template-columns: 1fr; } }

/* Tabla por tienda. */
.hoy-cell-fmt { font-size: var(--fs-label); font-weight: 400; color: var(--text-3); }
.hoy-cell-sub { font-size: var(--fs-label); color: var(--text-3); margin-left: var(--sp-3); }
.hoy-idle { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--neg); font-weight: 600; }
.hoy-idle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neg); flex: none; }

/* Móvil: lista compacta de tiendas. */
.hoy-mlist { padding: var(--sp-2) var(--sp-8) var(--sp-4); margin-bottom: var(--sp-7); }
.hoy-mlist__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) 0; font-size: var(--fs-caption); color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.hoy-mlist__kicker { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-kicker); color: var(--text-3); text-transform: uppercase; }
.hoy-mlist__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); width: 100%; min-height: 44px; padding: var(--sp-5) 0; text-align: left; border-bottom: 1px solid var(--line-2); }
.hoy-mlist__l, .hoy-mlist__r { display: flex; flex-direction: column; min-width: 0; }
.hoy-mlist__r { flex: none; align-items: flex-end; }
.hoy-mlist__name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.hoy-mlist__sub { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--sp-1); }
.hoy-mlist__sub.is-idle { color: var(--neg); }
.hoy-mlist__val { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.hoy-mlist__pct { font-size: var(--fs-caption); font-weight: 600; }
.hoy-mlist__more { display: block; width: 100%; padding: var(--sp-6) 0 var(--sp-2); text-align: center; font-size: var(--fs-data); font-weight: 600; color: var(--navy); }
.hoy-mlist__empty { padding: var(--sp-8) 0; font-size: var(--fs-caption); color: var(--text-3); }

/* Modal de tienda (stream): más ancho, como el diseño, para la cuenta y los 4 KPI. */
.modal--hoy { width: min(880px, 100%); }
.hoy-mhead { display: flex; align-items: center; gap: var(--sp-5); flex: none; }
.hoy-mcard {
  display: flex; flex-direction: column; gap: var(--sp-8);
  background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-card);
  padding: 18px var(--sp-9); margin-bottom: var(--sp-7);
}
.hoy-mcard .hoy-hero__row { margin-top: 0; }
.hoy-mcard__note { font-size: var(--fs-caption); color: var(--text-2); }
.hoy-mcard__note b { font-weight: 600; }
.hoy-hour-cur { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* Tarjetas informativas de "Hoy": sin cursor ni hover (nada que abrir). */
.hero-venta--static { cursor: default; }
.hero-venta--static:hover { background: var(--bg-surface); }
.kpi--static { cursor: default; }
.kpi--static:hover { background: var(--bg-surface); }
.app-root.is-mobile .area-head__live { align-items: flex-start; }
.app-root.is-mobile .modal-hourly .tbl { min-width: 560px; }
.app-root.is-mobile .hoy-hero { padding: 18px var(--sp-8); gap: var(--sp-6); }
.app-root.is-mobile .hoy-hero__row { gap: var(--sp-4) var(--sp-5); }
.app-root.is-mobile .hoy-row2 { grid-template-columns: 1fr; margin-top: 0; }
.app-root.is-mobile .hoy-mcard { padding: var(--sp-7); }
.app-root.is-mobile .hoy-mhead .live-pill { display: none; }
.app-root.is-mobile .hoy-tip { width: 320px; }

/* ===================== LOGIN ===================== */
/* Pantalla de acceso split-screen (prototipo 2026-07-06): panel de marca navy
   con glow institucional rojo->verde, headline serif y chips de las areas +
   panel de formulario sobre bg-app. SOLO 2 tipografias: Newsreader (headline/
   titulo) + IBM Plex Sans (todo lo demas; rotulos en mayusculas con tracking).
   Colores/las geometrias mapeados a los tokens del design system. */
.login-body { min-height: 100vh; min-height: 100dvh; background: var(--navy); }
.login-shell {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  width: 100%;
  min-height: 100vh;
}
.login-shell--single { grid-template-columns: minmax(0, 1fr); background: var(--bg-app); }

/* ---- panel de marca ---- */
.login-brand {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(36px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.login-brand__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--brand-red) 30%, transparent), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--brand-green) 28%, transparent), transparent 55%);
}
.login-brand__bars {
  position: absolute;
  right: 44px;
  bottom: 44px;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  height: 200px;
  opacity: 0.10;
}
.login-brand__bars span { width: 26px; background: var(--bg-surface); border-radius: 5px; }
.login-brand__block, .login-brand__chips { position: relative; }
.login-brand__logo { height: 52px; display: block; }
.login-brand__eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--brand-orange);
  margin-bottom: var(--sp-8);
}
.login-brand__headline {
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--on-navy);
  letter-spacing: var(--track-title);
  margin: 0;
}
.login-brand__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-narrative);
  color: color-mix(in srgb, var(--on-navy) 62%, transparent);
  margin: var(--sp-9) 0 0;
  max-width: 410px;
}
.login-brand__chips { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.login-chip {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  color: color-mix(in srgb, var(--on-navy) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--bg-surface) 18%, transparent);
  border-radius: var(--r-pill);
  padding: 7px 15px;
}
/* Chip "HOY" con el mismo punto live de la nav: seccion en vivo. */
.login-chip--live { display: inline-flex; align-items: center; gap: 7px; }
.login-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  animation: livePulse 2.2s ease infinite;
}

/* ---- panel de marca HIT del login ----
   Fondo y glow propios para que el cian del logo destaque sobre el rojo institucional. */
.login-body--hit { background: var(--hit-deep); }
.login-brand--hit {
  background: linear-gradient(160deg, var(--hit-deep) 0%, var(--hit-deep-2) 100%);
}
.login-brand--hit .login-brand__glow {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--hit-cyan) 26%, transparent), transparent 58%),
    radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--hit-lime) 20%, transparent), transparent 55%),
    radial-gradient(70% 60% at 85% 8%, color-mix(in srgb, var(--hit-red) 14%, transparent), transparent 60%);
}
.login-brand--hit .login-brand__bars span { background: var(--hit-cyan); }
.login-brand--hit .login-brand__bars { opacity: 0.14; }
.login-brand--hit .login-brand__eyebrow { color: var(--hit-cyan); }
/* El logo es un PNG de 1365px: a esta altura entra muy por encima de 1x y se ve nitido. */
.login-brand__logo--hit { height: clamp(78px, 9vw, 116px); width: auto; }
.login-brand--hit .login-chip {
  border-color: color-mix(in srgb, var(--hit-cyan) 34%, transparent);
  color: color-mix(in srgb, var(--on-navy) 86%, transparent);
}
.login-brand--hit .login-chip__dot { background: var(--hit-cyan); }

/* ---- panel de formulario ---- */
.login-formwrap {
  background: var(--bg-app);
  padding: clamp(40px, 5vw, 56px) clamp(var(--sp-11), 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-formwrap--single { min-height: 100vh; }
.login-form { width: 100%; max-width: 380px; margin: 0 auto; }
.login-form__kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--text-3);
}
.login-form__title {
  font-size: var(--fs-title-1);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-title);
  margin: var(--sp-3) 0 0;
}
.login-form__intro {
  margin: var(--sp-7) 0 0;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}
.login-field { margin-top: 22px; }
.login-field:first-of-type { margin-top: 34px; }
.login-field__label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  color: var(--text-mono);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
}
.login-control {
  display: flex;
  align-items: center;
  height: 52px;
  border: 1px solid var(--line-4);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 0 var(--sp-8);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-control:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
.login-control input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-1);
}
.login-control input::placeholder { color: var(--text-3); }
/* Se suprime el ojo nativo de Edge para no duplicarlo con el propio. */
.login-control input::-ms-reveal,
.login-control input::-ms-clear { display: none; }
.login-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}
.login-toggle:hover { color: var(--text-1); }
.login-toggle[hidden] { display: none; }

.login-error {
  margin-top: 18px;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-data);
  line-height: var(--lh-ui);
  color: var(--neg);
  background: var(--neg-soft);
  border: 1px solid var(--neg-border-soft);
  border-radius: var(--r-seg);
}
.login-error--success {
  color: var(--pos);
  background: var(--pos-soft);
  border-color: var(--line-4);
}

.login-submit {
  width: 100%;
  margin-top: 30px;
  height: 54px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--bg-surface);
  background: var(--navy);
  border-radius: 10px;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
}
.login-submit:hover { background: var(--navy-deep); }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { opacity: 0.65; cursor: default; transform: none; }

/* Login con Microsoft (Entra ID): solo aparece si el servidor lo inyecta (__ENTRA_BOTON__). */
.login-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 18px 0;
  font-size: var(--fs-label);
  color: var(--text-3);
}
.login-sep::before,
.login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.login-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  width: 100%;
  height: 54px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.login-sso:hover { border-color: var(--navy); }
/* Prod (solo Microsoft): el botón es la acción principal; sin campos de contraseña. */
/* Sin campos encima, el botón necesita su propio aire: bajo el título y bajo el aviso de error. */
.login-sso--principal {
  margin-top: var(--sp-10);
  color: var(--bg-surface);
  background: var(--navy);
  border-color: var(--navy);
}
.login-error + .login-sso--principal { margin-top: var(--sp-9); }
.login-sso--principal:hover { opacity: 0.92; }
.login-help {
  margin: var(--sp-7) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-prose);
  color: var(--text-3);
}

/* Login híbrido: enlace de «¿Olvidaste tu contraseña?» y texto de las páginas de restablecer / 403. */
.login-olvido {
  display: block;
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-data);
  color: var(--text-2);
  text-decoration: underline;
}
.login-olvido:hover { color: var(--navy); }
.login-help--texto { margin: 0 0 var(--sp-7); font-size: var(--fs-data); color: var(--text-2); }
.login-sep span { text-align: center; }
.login-rule { height: 1px; background: var(--line-2); margin: 30px 0 18px; }
.login-foot {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  text-align: center;
}

/* movil: una sola columna; la marca se compacta (sin sub ni barras) */
@media (max-width: 880px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: auto; padding: 36px var(--sp-11) 40px; gap: var(--sp-11); }
  .login-brand__bars { display: none; }
  .login-brand__headline { font-size: var(--fs-title-1); }
  .login-brand__sub { display: none; }
  .login-formwrap { min-height: 60vh; }
}

/* ---- móvil: login de una pantalla. D (azul continuo) solo con Microsoft; E (tarjeta) si hay usuario y
   contraseña. Marca y acceso son un grupo centrado y el pie queda abajo. Ver docs/LOGIN_MOVIL.md ---- */
.login-pie { width: 100%; max-width: 380px; margin: 0 auto; }
@media (max-width: 880px) {
  .login-shell--movil {
    position: relative; overflow: hidden; box-sizing: border-box;
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    padding: 36px var(--sp-9) calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--navy);
  }
  .login-body--hit .login-shell--movil { background: var(--hit-deep); }
  .login-shell--movil .login-formwrap { display: contents; }
  .login-shell--movil .login-brand {
    position: static; overflow: visible; background: none; min-height: 0; padding: 0; gap: 26px;
    width: 100%; max-width: 440px; margin: auto auto 0;
  }
  .login-shell--movil .login-brand__bars { display: flex; right: var(--sp-10); bottom: 74px; height: 140px; gap: 9px; }
  .login-shell--movil .login-brand__bars span { width: 17px; }
  .login-shell--movil .login-brand__sub, .login-shell--movil .login-brand__chips { display: none; }
  .login-shell--movil .login-brand__headline { font-size: var(--fs-title-1); }
  .login-shell--movil .login-form {
    position: relative; max-width: 440px; margin: var(--sp-10) auto 0;
    background: var(--bg-app); border-radius: 20px; padding: 22px var(--sp-9) var(--sp-9);
  }
  .login-shell--movil .login-pie { position: relative; max-width: 440px; margin: auto auto 0; padding-top: 22px; }
  .login-shell--movil .login-rule { display: none; }
  .login-shell--movil .login-foot { color: color-mix(in srgb, var(--on-navy) 45%, transparent); }
  /* D: sin campos (solo Microsoft) el acceso va directo sobre el azul, sin tarjeta */
  .login-shell--movil:not(:has(.login-field)) .login-brand__headline { font-size: clamp(34px, 9.6vw, 38px); }
  .login-shell--movil:not(:has(.login-field)) .login-form { background: none; padding: 0; margin-top: 30px; }
  .login-shell--movil:not(:has(.login-field)) .login-form__title { display: none; }
  .login-shell--movil:not(:has(.login-field)) .login-form__kicker { color: color-mix(in srgb, var(--on-navy) 55%, transparent); }
  .login-shell--movil:not(:has(.login-field)) .login-sso--principal { background: var(--bg-surface); border-color: var(--bg-surface); color: var(--navy); }
  .login-shell--movil:not(:has(.login-field)) .login-help { color: color-mix(in srgb, var(--on-navy) 55%, transparent); }
}
/* pantallas bajas (celulares compactos): marca más chica para que el acceso gane lugar */
@media (max-width: 880px) and (max-height: 700px) {
  .login-shell--movil { padding-top: 22px; }
  .login-shell--movil .login-brand { gap: var(--sp-7); }
  .login-shell--movil .login-brand__logo { height: 38px; }
  .login-shell--movil .login-brand__eyebrow { margin-bottom: var(--sp-3); }
  .login-shell--movil .login-brand__headline, .login-shell--movil:not(:has(.login-field)) .login-brand__headline { font-size: clamp(26px, 7.5vw, 28px); }
  .login-shell--movil .login-form { margin-top: var(--sp-8); padding: 18px 18px var(--sp-8); }
  .login-shell--movil .login-field { margin-top: var(--sp-7); }
  .login-shell--movil .login-field:first-of-type { margin-top: var(--sp-9); }
  .login-shell--movil .login-submit { margin-top: var(--sp-9); height: 50px; }
  .login-shell--movil .login-pie { padding-top: var(--sp-7); }
}

/* ---- variante "activar" (HIT 360): mismo layout, piezas propias de esa pantalla ----
   Lista de reglas de contraseña, pasos de bienvenida, hint y estado de carga: no existen
   en el login normal. Ver frontend/hit360_activar.html + assets/js/hit360_activar.js. */
.login-pass { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.login-pass span { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-3); font-size: var(--fs-caption); }
.login-pass span.is-ok { color: var(--pos); }

.login-steps { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.login-step { display: flex; align-items: flex-start; gap: var(--sp-4); }
.login-step__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--track-bg);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.login-step p { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-caption); line-height: var(--lh-prose); }

.login-hint { margin-top: var(--sp-5); color: var(--text-3); font-size: var(--fs-caption); line-height: var(--lh-prose); }

.login-loading { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--track-th); text-transform: uppercase; }
.login-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-4);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: loginSpin 0.7s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }

.login-noscript { margin: 0; padding: var(--sp-10); color: var(--on-navy); text-align: center; }

/* ===================== Avisos de actualizacion (toast) ===================== */