/* @import DEBE ir antes que cualquier otra regla (incluido :root) — si no,
   el navegador la descarta en silencio y la tipografía cae al fallback sin
   avisar. Serif editorial para titulares grandes (banners, secciones de
   datos), contraste deliberado con la sans utilitaria del cuerpo. Variable,
   trae cursiva propia (se usa para textos de estado tipo "cargando..."). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');

:root {
  color-scheme: light;
  --surface-1:      #fffdfa;
  --surface-page:   #FDF4EB;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.10);
  /* Acento = color de marca principal (botones, links, foco, tabs activos,
     bordes en hover). Verde Krispy Kreme por defecto; el bloque
     [data-empresa="saona"] de más abajo lo cambia por el azul grisáceo de
     Saona. --acento-calido es el segundo tono de marca (naranja cálido /
     terracota) para realces puntuales: eyebrows, subrayados, chips,
     tendencias — el "acento del acento", no el color de acción principal. */
  --acento:         #0b6b3a;
  --acento-calido:  #e07b00;
  --series-aqua:    #1baf7a;
  --series-yellow:  #eda100;
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-critical:#d03b3b;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --surface-page:   #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.10);
    --acento:         #3ec37e;
    --acento-calido:  #f0973a;
    --series-aqua:    #199e70;
    --series-yellow:  #c98500;
    --status-good:    #0ca30c;
    --status-warning: #fab219;
    --status-critical:#d03b3b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --surface-page:   #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --border:         rgba(255,255,255,0.10);
  --acento:         #3ec37e;
  --acento-calido:  #f0973a;
  --series-aqua:    #199e70;
  --series-yellow:  #c98500;
}

/* Páginas dentro del hub SAONA (clima.js/informes.js/compartidos.js ponen
   este atributo cuando ?empresa=saona) reemplazan el acento verde de
   Krispy Kreme por los tonos de marca Saona (navy grisáceo + terracota) —
   como todo el resto de componentes (botones, tabs, tarjetas, paginación...)
   ya usa --acento/--acento-calido en vez de un color fijo, este único
   cambio los reskinea a todos sin tocar cada uno por separado. */
:root[data-empresa="saona"] {
  --acento: #7A99AC;
  --acento-calido: #B8562E;
}

* { box-sizing: border-box; }
/* Los navegadores NO heredan la fuente del body en botones/inputs/selects
   por defecto (Chrome, por ejemplo, les pone Arial de forma nativa) — sin
   esto, cualquier botón o campo de formulario se ve en una tipografía
   distinta al resto del texto de la página. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: 100%;
}
/* Varios componentes fijan su propio "display" (flex/inline-flex) en la
   misma clase que se oculta con el atributo [hidden] — sin esto, ese
   "display" gana el empate de especificidad y el elemento nunca desaparece
   aunque hidden=true (nos pasó con el check de 100% y la barra de scraping). */
[hidden] { display: none !important; }

@font-face {
  font-family: "Gelica";
  src: url("../assets/fonts/Gelica-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../assets/fonts/BrandonGrotesque-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Brandon Printed";
  src: url("../assets/fonts/BrandonPrinted-One.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

body {
  margin: 0;
  font-family: "Brandon Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface-page);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: "Gelica", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h2 {
  font-family: "Brandon Grotesque", system-ui, sans-serif;
  font-weight: 600;
}
h3 {
  font-family: "Brandon Printed", system-ui, sans-serif;
  font-weight: 400;
}

/* Foco visible consistente en toda la web — antes dependía del estilo por
   defecto del navegador (poco visible sobre --surface-1 en modo oscuro). */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

.app { max-width: 1560px; margin: 0 auto; padding: 24px 20px 60px; }

.layout { display: grid; grid-template-columns: 1fr 420px; gap: 20px; align-items: start; }
.main-col { min-width: 0; }
.side-col { position: sticky; top: 20px; min-width: 0; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { position: static; }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-icon { font-size: 36px; }
.brand h1 { margin: 0; font-size: 20px; }
.subtitle { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }

/* flex-wrap: sin esto, una página con botones propios en la topbar (ej.
   "Exportar Excel" en Reseñas) obligaba a toda la fila (grupo de botones +
   volver/inicio/menú) a caber en una sola línea sin encoger -- en móvil
   eso empujaba la página entera a scroll horizontal. Con wrap, el grupo de
   botones de la página cae a su propia línea cuando no cabe. */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Grupos de botones de acción dentro del topbar (Actualizar / Importar+Exportar
   / etc.) — cada .topbar-group junta botones relacionados, con un separador
   vertical sutil entre grupos para que se lean como bloques distintos. */
.topbar-groups { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar-group { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--border); }
.topbar-group:first-child { padding-left: 0; border-left: none; }

.ultima-importacion-txt { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Menú hamburguesa — agrupa Inicio/usuario/tema/Salir en un desplegable
   superpuesto, igual en todas las páginas, para no llenar el topbar de
   botones sueltos de cuenta/navegación. */
.hamburger-wrap { position: relative; }
.hamburger-btn { font-size: 16px; padding: 8px 12px; line-height: 1; }
.hamburger-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.hamburger-menu[hidden] { display: none; }
.hamburger-menu .topbar-user { padding: 6px 10px; }
.hamburger-menu .btn { width: 100%; text-align: left; justify-content: flex-start; }
.hamburger-menu-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }

/* Fila resaltada momentáneamente al llegar por un enlace directo (p.ej.
   desde "Ver respuestas" del módulo de Test), para que el ojo la encuentre
   sin tener que buscarla entre el resto de la tabla. */
.fila-destacada { animation: fila-destacada-flash 3s ease-out; }
@keyframes fila-destacada-flash {
  0%, 40% { background: color-mix(in srgb, var(--acento) 22%, transparent); }
  100% { background: transparent; }
}

/* Notificación de "hay respuestas nuevas de Test" junto al menú hamburguesa
   — mismo patrón visual que .checklist-popover, pero con el globo rojo de
   conteo típico de una campanita de notificaciones. */
.notif-badge-wrap { position: relative; }
.notif-badge-btn { position: relative; font-size: 16px; padding: 8px 12px; line-height: 1; }
.notif-badge-count {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--status-critical); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.notif-tests-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; width: 260px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.notif-tests-panel[hidden] { display: none; }
.notif-tests-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.notif-tests-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-tests-lista a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; font-size: 13px; color: var(--text-primary); text-decoration: none;
}
.notif-tests-lista a:hover { background: var(--surface-page); }
.notif-tests-n {
  flex-shrink: 0; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical);
  font-size: 11px; font-weight: 700; text-align: center;
}

/* Indicador de lotes de IA en curso (ver topbar-menu.js) -- mismo icono +
   globo + panel que las campanitas de notificaciones, junto al resto de
   botones del topbar. */
#lotes-progreso-lista li { padding: 6px 8px; font-size: 12.5px; color: var(--text-primary); }
#lotes-progreso-lista li + li { border-top: 1px solid var(--border); }

/* Campanita genérica de avisos (ver topbar-menu.js) -- reutiliza
   .notif-badge-btn/.notif-badge-count/.notif-tests-panel/.notif-tests-lista
   (mismo look que la de "respuestas nuevas de Test"), solo cambia cómo se ve
   cada fila: mensaje + fecha en dos líneas en vez de título + contador. */
.notif-aviso-item { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.notif-aviso-item span:first-child { font-size: 12.5px; line-height: 1.35; }
.notif-aviso-fecha { font-size: 11px; color: var(--text-secondary); }
.notif-aviso-no-vista { background: color-mix(in srgb, var(--acento) 10%, transparent); }

/* Indicador de "quién está en línea" (solo visible para el usuario admin
   "saul", ver topbar-menu.js) — mismo patrón visual que .notif-badge. */
.en-linea-badge-wrap { position: relative; }
.en-linea-badge-btn { position: relative; font-size: 14px; padding: 8px 12px; line-height: 1; display: flex; align-items: center; gap: 4px; }
.en-linea-badge-count { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.en-linea-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; width: 220px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.en-linea-panel[hidden] { display: none; }
.en-linea-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.en-linea-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.en-linea-lista li { font-size: 13px; color: var(--text-primary); padding: 4px 8px; }

/* Historial de accesos (solo "saul", ver topbar-menu.js) -- overlay simple
   propio (no depende de .cobertura-table/.table-scroll, que son locales de
   páginas concretas), porque este widget se carga en TODAS las páginas. */
.historial-accesos-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
}
.historial-accesos-overlay[hidden] { display: none; }
.historial-accesos-modal {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; width: 100%; max-width: 720px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.historial-accesos-cabecera { display: flex; align-items: center; justify-content: space-between; }
.historial-accesos-cabecera h3 { margin: 0; font-size: 16px; }
.historial-accesos-modal h4 { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
.historial-accesos-modal .table-scroll { overflow-x: auto; }
.historial-accesos-modal table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.historial-accesos-modal th, .historial-accesos-modal td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.historial-accesos-modal th { color: var(--text-secondary); font-weight: 600; }

/* Popover de checklist genérico (elegir tiendas, columnas, etc.) — mismo
   patrón visual en toda la web para no reinventar la interacción cada vez. */
.checklist-wrap { position: relative; display: inline-block; }
.checklist-popover {
  display: none; position: fixed; top: 0; left: 0; z-index: 500;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; width: 220px; max-height: min(75vh, 420px); overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.checklist-popover.visible { display: block; }
/* El botón "Guardar" es el último hijo de cada popover. Con la lista de
   opciones más larga (KK + Saona), el contenido pasa de max-height y el
   popover scrollea -- sin esto, "Guardar" quedaba fuera del área visible y
   parecía que no funcionaba (no se llegaba a él). Pegado abajo del scroll,
   siempre está a la vista y clicable, conservando su estilo verde. La
   cabecera hace lo mismo arriba. */
.checklist-popover > .btn-primary {
  position: sticky; bottom: 0;
}
.checklist-popover-actions {
  position: sticky; top: -10px; background: var(--surface-1); z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding-top: 10px; padding-bottom: 8px; margin-top: -10px;
  border-bottom: 1px solid var(--border);
}
.checklist-popover-actions button { font-size: 11px; background: none; border: none; color: var(--acento); cursor: pointer; padding: 0; }
.checklist-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.checklist-row label { flex: 1; cursor: pointer; }
.topbar-user { font-size: 12px; color: var(--text-secondary); }

.topbar-store {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.topbar-store select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 160px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topbar-store select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--surface-1)); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--acento); color: #fff; border-color: var(--acento);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--acento) 35%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--acento) 88%, black);
  border-color: color-mix(in srgb, var(--acento) 88%, black);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 45%, transparent);
}
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--acento) 8%, transparent); }

/* Tarjetas tipo "módulo" — mismo patrón visual en Inicio y en Informes
   ("Selecciona un informe"), para que ambas pantallas de selección se lean
   como parte de la misma app. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.home-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.home-card:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.home-card .home-icon { font-size: 36px; }
.home-card .home-icon-img { height: 34px; width: auto; align-self: flex-start; }
.home-card h2 { margin: 0; font-size: 17px; }
.home-card p { margin: 0; color: var(--text-secondary); font-size: 13px; flex-grow: 1; }
.home-card .home-tag {
  align-self: flex-start;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-page);
  color: var(--text-muted);
}
.home-card.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-good .stat-value { color: var(--status-good); }

.stat-value-row { display: flex; align-items: center; gap: 8px; }

.rating-progress-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 800px) { .rating-progress-row { grid-template-columns: 1fr; } }

.rating-true-tile .stat-value { color: var(--series-yellow); }
.rating-need-hint { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.rating-need-hint b { color: var(--text-primary); }

.rating-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.rating-progress-labels span:nth-child(2) { color: var(--text-primary); font-weight: 600; }

.rating-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
  margin-top: 4px;
}
.rating-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--series-yellow);
  border-radius: 999px;
  transition: width .3s ease;
}
.rating-progress-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.rating-trend-up { color: var(--status-good); }
.rating-trend-down { color: var(--status-critical); }

.store-ranking-month {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.store-ranking-month input[type="month"] {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 13px;
}

/* Botón ⓘ genérico para explicar un título sin ensuciar la pantalla con el
   texto siempre visible — hover en desktop, tap en móvil (la clase "open" la
   pone JS al hacer clic/tap, ya que touch no dispara :hover de forma fiable). */
.info-tip-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }
.info-tip-btn {
  background: none;
  border: none;
  cursor: help;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.info-tip-btn:hover { color: var(--acento); }
.info-tip-box {
  display: none;
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-primary);
  width: max-content;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  z-index: 20;
  text-align: left;
  line-height: 1.5;
  font-weight: 400;
}
.info-tip-wrap:hover .info-tip-box,
.info-tip-wrap:focus-within .info-tip-box,
.info-tip-wrap.open .info-tip-box { display: block; }
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  align-items: flex-end;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.filter-group { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.filter-group select, .filter-group input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-group select:focus, .filter-group input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.filter-search { flex: 1 1 220px; }
.filter-search input { width: 100%; }

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 800px) { .charts-row { grid-template-columns: 1fr; } }

.chart-card, .keywords-card, .reviews-card, .staff-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.chart-card h2, .keywords-card h2, .reviews-card h2, .staff-card h2 { margin: 0 0 12px; font-size: 15px; }

/* .staff-table nunca envuelve sus celdas (white-space: nowrap, para que
   los números de la tabla no se lean en varias líneas) -- en una pantalla
   estrecha eso la hace más ancha que la tarjeta que la contiene. Sin este
   overflow, esa anchura se filtraba fuera de la tarjeta y empujaba la
   página entera a scroll horizontal; con él, es la tarjeta la que gana su
   propia barra de scroll, sin afectar al resto de la página. */
.staff-card { overflow-x: auto; }

.keywords-list { display: flex; flex-wrap: wrap; gap: 8px; }
.keyword-chip {
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.keyword-chip b { color: var(--text-primary); }

.staff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.staff-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.staff-table td { padding: 7px 10px; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
.staff-table th:not(:first-child), .staff-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#staff-current-table th:nth-child(2), #staff-current-table td:nth-child(2),
#staff-former-table th:nth-child(2), #staff-former-table td:nth-child(2) {
  text-align: left;
  font-variant-numeric: normal;
  color: var(--text-muted);
  font-size: 12px;
}
.staff-table tr:last-child td { border-bottom: none; }
.staff-table tbody tr { cursor: pointer; }
.staff-table tbody tr:hover { background: var(--surface-page); }
.staff-table tbody tr.active { background: color-mix(in srgb, var(--acento) 16%, transparent); }

/* margin-top: antes -6px -- pegaba el texto de ayuda justo debajo del
   campo, como si fuera parte de la misma caja en vez de una nota aparte
   (queja del usuario 07/09, viendo el editor de Test: se veía "metido"
   en el contenedor del campo de arriba). Un poco de aire sin separarlo
   tanto que deje de leerse como la explicación de ESE campo en concreto. */
.staff-hint { margin: 4px 0 12px; font-size: 12px; color: var(--text-muted); }

/* Tabla de datos genérica (no interactiva, a diferencia de .staff-table) —
   usada para los desgloses debajo de gráficos (evolución por tienda,
   distribución de estrellas...). Mismo estilo de cabecera/bordes que
   .staff-table para que no desentone con el resto de la página. */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.data-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
.data-table th:not(:first-child), .data-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }

/* Envoltorio <details> plegable para esas tablas — mismo patrón que
   .auditoria-details en Entrevista de Salida. */
.chart-table-details { margin-top: 10px; }
.chart-table-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 0;
}
.chart-table-details summary:hover { color: var(--text-primary); }
.chart-table-details[open] summary { margin-bottom: 4px; }

.staff-active-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
#staff-active-name { white-space: nowrap; }
.btn-clear-staff {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}

.staff-toggle-former { width: 100%; margin-top: 12px; font-size: 13px; }
.staff-table-former { margin-top: 10px; }

.store-ranking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.store-ranking-header h2 { margin: 0; }
.btn-upload { font-size: 12px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 4px; }

#store-ranking-list tr { cursor: default; }
#store-ranking-list tr:hover { background: transparent; }
.transacciones-input {
  width: 68px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#store-ranking-table { table-layout: fixed; }
#store-ranking-table th, #store-ranking-table td { padding: 6px 6px; }
#store-ranking-table th:first-child, #store-ranking-table td:first-child { width: 30%; }
.store-ranking-wrap { overflow-x: auto; }

.reviews-header { display: flex; justify-content: space-between; align-items: baseline; }
.reviews-count { color: var(--text-muted); font-size: 13px; }

.reviews-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.review-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.review-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-author { font-weight: 600; }
.review-meta { color: var(--text-muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.review-stars { color: var(--series-yellow); }
.review-text { color: var(--text-secondary); font-size: 14px; line-height: 1.45; }

.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.en-vivo-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 6px;
  background: color-mix(in srgb, var(--status-good) 16%, transparent);
  color: var(--status-good);
  white-space: nowrap;
}
.badge-positivo { background: color-mix(in srgb, var(--status-good) 18%, transparent); color: var(--status-good); }
.badge-neutral  { background: color-mix(in srgb, var(--status-warning) 22%, transparent); color: #9a6b00; }
.badge-negativo { background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pagination button {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s ease, background-color .15s ease;
}
.pagination button:not([disabled]):hover { border-color: var(--acento); }
.pagination button[disabled] { opacity: .4; cursor: default; }
.pagination button.active { background: var(--acento); color: #fff; border-color: var(--acento); }

/* ============================================================
   Lavado de cara 2026 — capa de componentes por encima del resto
   del archivo. Todo lo de arriba sigue funcionando igual (mismas
   variables, ahora con valores de marca real en vez de un azul
   genérico); lo de aquí abajo son piezas nuevas para dar carácter
   editorial a titulares, cabeceras y tarjetas de KPI.
   ============================================================ */

/* Radio y sombra un punto más generosos que antes en las superficies
   "tarjeta" — el mismo valor en todas para que se lean como una sola
   familia de componente. Sombra en dos capas (una difusa de ambiente + una
   fina de contacto) para dar profundidad sin que se vea "pesada"; el borde
   sigue llevando la definición en modo oscuro, donde las sombras casi no se
   ven sobre fondo negro. */
.chart-card, .keywords-card, .reviews-card, .staff-card,
.filters-row, .stat-tile, .home-card {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 6px 18px rgba(17,17,17,0.05);
}

/* Etiqueta pequeña en mayúsculas con tracking — el "eyebrow" editorial que
   antecede a un titular grande (mismo tratamiento que .stat-label, pero
   como utilidad independiente para usarla fuera de los KPI). */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--acento-calido);
  margin: 0 0 8px;
}
.hero-banner .eyebrow { color: color-mix(in srgb, var(--acento-calido) 55%, #fff); }

/* Titular grande en serif — para portadas de módulo y cabeceras de
   sección, nunca para el wordmark de marca (.brand h1 sigue en Gelica). */
.display-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Banner de cabecera con el color de marca a toda anchura — sustituye al
   típico "topbar blanco + h1 pequeño" por un bloque con presencia, al
   estilo de los dashboards de referencia. Degradado sutil hacia un tono
   más oscuro del mismo --acento para dar profundidad sin depender de
   fotografía (no hay banco de fotos por tienda todavía). */
.hero-banner {
  background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 74%, black));
  color: #fff;
  border-radius: 22px;
  padding: 30px 34px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 25%, transparent);
}
.hero-banner h1 {
  margin: 0 0 4px;
  font-size: 30px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-banner p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14px; }

/* Icono envuelto en una insignia circular — el mismo emoji de siempre,
   pero con el peso visual de un ícono de producto en vez de "texto suelto
   con un emoji al lado". */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 12%, var(--surface-1));
  color: var(--acento);
  font-size: 22px;
  flex-shrink: 0;
}
.icon-badge img { height: 24px; width: auto; }

/* Paleta de las tarjetas de la home -- cada módulo con su propio color en
   vez de que todo salga verde/gris; los tonos se eligen para que lean bien
   tanto en tema claro como oscuro (saturación media, ni pastel ni neón). */
.icon-badge[data-c="gold"]   { background: color-mix(in srgb, #c9960c 16%, var(--surface-1)); color: #c9960c; }
.icon-badge[data-c="teal"]   { background: color-mix(in srgb, #0e8a86 16%, var(--surface-1)); color: #0e8a86; }
.icon-badge[data-c="blue"]   { background: color-mix(in srgb, #1d6fb8 16%, var(--surface-1)); color: #1d6fb8; }
.icon-badge[data-c="violet"] { background: color-mix(in srgb, #7b4fb0 16%, var(--surface-1)); color: #7b4fb0; }
.icon-badge[data-c="indigo"] { background: color-mix(in srgb, #4a5fc1 16%, var(--surface-1)); color: #4a5fc1; }
.icon-badge[data-c="orange"] { background: color-mix(in srgb, #e0641e 16%, var(--surface-1)); color: #e0641e; }
.icon-badge[data-c="rose"]   { background: color-mix(in srgb, #c23a72 16%, var(--surface-1)); color: #c23a72; }
.icon-badge[data-c="slate"]  { background: color-mix(in srgb, #3d5a80 16%, var(--surface-1)); color: #3d5a80; }
.icon-badge[data-c="cyan"]   { background: color-mix(in srgb, #0aa3a3 16%, var(--surface-1)); color: #0aa3a3; }
.icon-badge[data-c="green"]  { background: color-mix(in srgb, var(--status-good) 16%, var(--surface-1)); color: var(--status-good); }
.icon-badge[data-c="amber"]  { background: color-mix(in srgb, #b5760f 16%, var(--surface-1)); color: #b5760f; }
.icon-badge[data-c="crimson"] { background: color-mix(in srgb, #b8264a 16%, var(--surface-1)); color: #b8264a; }

/* Iconos SVG que sustituyen a los emojis sueltos del texto (ver
   js/icons.js) -- inline-flex + vertical-align para que se alineen con la
   línea de texto igual que hacía el emoji, en vez de colgar más abajo como
   suelen hacer los SVG inline por defecto. */
.icono-svg { display: inline-flex; vertical-align: -0.125em; line-height: 1; }
.icono-svg svg { display: block; }

/* Control segmentado tipo "pill" (rangos de fecha, alternar vistas) —
   pieza nueva reutilizable, mismo lenguaje visual que .pagination pero
   para grupos de opciones mutuamente excluyentes que no son páginas. */
.segmented {
  display: inline-flex;
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.segmented button:hover { color: var(--text-primary); }
.segmented button.active { background: var(--acento); color: #fff; }

/* Indicador de tendencia (KPI sube/baja) con flecha — para usar junto a un
   .stat-value grande, al estilo "-3.5" en rojo de los paneles de KPIs. */
.kpi-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.kpi-delta.up::before { content: "▲"; font-size: 9px; }
.kpi-delta.down::before { content: "▼"; font-size: 9px; }
.kpi-delta.up { color: var(--status-good); }
.kpi-delta.down { color: var(--status-critical); }

/* ============================================================
   Pulido UX transversal (2026-07) — refinamientos que aplican a
   TODAS las páginas por estar en la hoja compartida. No tocan la
   identidad de color (siguen usando --acento / --surface-*): solo
   suben el acabado (scrollbars, selección, foco, controles nativos,
   respeto por "reducir movimiento", legibilidad del texto).
   ============================================================ */

/* Antialiasing y kerning un punto mejores en todo el cuerpo de texto. */
body { -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Reserva el hueco de la barra de scroll para que la página no "salte"
   unos píxeles cuando aparece/desaparece el scroll (p.ej. al abrir un
   desplegable que alarga el contenido). */
html { scrollbar-gutter: stable; }

/* Todos los controles nativos (checkbox, radio, slider, progress) pasan a
   usar el verde/navy de marca en vez del azul por defecto del navegador —
   consistencia inmediata en toda la web con un solo valor. */
:root { accent-color: var(--acento); }

/* Selección de texto con un tinte de marca en vez del azul del sistema. */
::selection { background: color-mix(in srgb, var(--acento) 24%, transparent); }

/* Barras de scroll finas y temáticas (Chrome/Edge/Safari + Firefox), en vez
   de las anchas grises del sistema — encaja con el resto del acabado. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 70%, transparent); background-clip: content-box; }

/* Enlaces dentro de texto de contenido (no botones ni tarjetas): color de
   marca, subrayado sutil que se refuerza en hover. Se limita a zonas de
   prosa para no pisar la navegación ni los enlaces ya estilizados. */
.reviews-card a:not(.btn), .review-text a, .blog-post .contenido a, .comentarios-lista a,
.staff-hint a, .info-tip-box a {
  color: var(--acento);
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color .15s ease;
}
.reviews-card a:not(.btn):hover, .review-text a:hover, .blog-post .contenido a:hover,
.comentarios-lista a:hover, .staff-hint a:hover { text-decoration-color: var(--acento); }

/* Texto de estado "cargando…" con un latido suave, para que se note que la
   app está trabajando y no congelada. */
.cargando, [data-cargando] {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-style: italic;
  animation: cargando-latido 1.4s ease-in-out infinite;
}
@keyframes cargando-latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Respeta la preferencia del sistema de "reducir movimiento": desactiva
   transiciones y animaciones (mareos, distracción, accesibilidad). */
/* Reproductor de vídeo de un boletín/blog (ver activarVideosBoletin en
   boletin-builder.js y blog.js). Contenedor 16:9 responsive con el truco
   clásico del padding-bottom. Empieza como "facade" -- solo miniatura +
   botón de play propios, sin nada de YouTube -- y al hacer clic se convierte
   en el iframe real (evita que YouTube pinte su portada de marca encima). */
.boletin-video-embed {
  position: relative; width: 100%; max-width: 100%; padding-bottom: 56.25%;
  height: 0; margin: 12px auto; border-radius: 8px; overflow: hidden; background: #000;
}
.boletin-video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.boletin-video-facade { cursor: pointer; }
.boletin-video-facade img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.boletin-video-facade .boletin-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; background: rgba(0, 0, 0, 0.65); border-radius: 50%;
}
.boletin-video-facade .boletin-video-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.boletin-video-facade:hover .boletin-video-play { background: rgba(0, 0, 0, 0.8); }

/* Asistente "David" (chat con IA) -- botón flotante + panel, ver
   topbar-menu.js. Mismo z-index alto que el resto de overlays flotantes de
   este archivo (menús, paneles de notificación). */
.david-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--acento); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.david-fab:hover { filter: brightness(1.08); }
.david-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 200;
  width: 340px; max-width: calc(100vw - 32px);
  height: 460px; max-height: calc(100vh - 120px);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.david-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--acento); color: #fff; font-weight: 600;
}
.david-head-acciones { display: flex; align-items: center; gap: 10px; }
.david-head .david-vaciar, .david-head .david-cerrar { background: none; border: none; color: #fff; font-size: 15px; cursor: pointer; opacity: 0.85; }
.david-head .david-vaciar:hover, .david-head .david-cerrar:hover { opacity: 1; }
.david-mensajes { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.david-msg { max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.david-msg-david { align-self: flex-start; background: var(--surface-page); color: var(--text-primary); border: 1px solid var(--border); }
.david-msg-user { align-self: flex-end; background: var(--acento); color: #fff; }
.david-msg-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.david-msg-pensando { color: var(--text-secondary); font-style: italic; }
.david-msg-pensando .david-dot { animation: david-pensando-parpadeo 1.4s infinite both; }
.david-msg-pensando .david-dot:nth-child(2) { animation-delay: .2s; }
.david-msg-pensando .david-dot:nth-child(3) { animation-delay: .4s; }
@keyframes david-pensando-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.david-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.david-form textarea {
  flex: 1; resize: none; max-height: 110px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-page); color: var(--text-primary);
  font-family: inherit; font-size: 13.5px;
}
.david-form button {
  border: none; border-radius: 8px; background: var(--acento); color: #fff;
  width: 38px; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.david-form button:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 520px) {
  .david-panel { right: 10px; left: 10px; width: auto; bottom: 78px; }
  .david-fab { right: 14px; bottom: 14px; }
}

/* Respeta la preferencia del sistema de "reducir movimiento": desactiva
   transiciones y animaciones (mareos, distracción, accesibilidad). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}