/* Sistema visual del gestor de marketing — Design System v3, el mismo que
   comparten la Mini App del bot de cajas, la Mini App del bot de facturas y el
   escandallo: acento periwinkle, superficies de cristal con desenfoque,
   tipografía Inter/Outfit e iconos Material Symbols Outlined.

   Los tokens y los nombres de clase se mantienen idénticos a los del escandallo
   (.tarjeta, .boton, .chip, .campo, .aviso, .vacio, .barra, .nav…) a propósito:
   quien toque los dos proyectos no tiene que aprender dos vocabularios, y una
   mejora en uno se puede copiar y pegar en el otro.

   Los estados del checklist (al día / pendiente / atrasado) tienen su propia
   escala, ajena al acento. Y nunca van solo por color: cada estado lleva
   siempre su texto al lado ("Hecho hoy", "Atrasado 3d"), porque un semáforo sin
   texto no lo puede leer quien no distingue rojo y verde. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --fondo-superior: #eef1f9;
  --fondo: #f4f6fb;
  --superficie: #ffffff;
  --superficie-cristal: rgba(255, 255, 255, 0.78);
  --superficie-cristal-hover: rgba(255, 255, 255, 0.94);
  --superficie-2: #eef1f8;
  --texto: #171a21;
  --texto-2: #565c6b;
  --texto-3: #868c9a;
  --linea: rgba(23, 26, 45, 0.09);
  --linea-2: rgba(23, 26, 45, 0.18);

  --acento: #4a68d1;
  --acento-suave: #e8edfb;
  --acento-texto: #ffffff;
  --acento-degradado: linear-gradient(135deg, #5f80e0 0%, #3d5cc4 100%);

  --bien: #0e8f5c;
  --bien-fondo: #e3f7ee;
  --bien-texto: #ffffff;
  --ajustado: #8a5c07;
  --ajustado-fondo: #faf0da;
  --mal: #b23327;
  --mal-fondo: #fbe9e6;

  --sombra: 0 1px 2px rgba(23, 26, 45, 0.05), 0 10px 28px -6px rgba(23, 26, 45, 0.1);
  --sombra-md: 0 18px 40px -12px rgba(23, 26, 45, 0.18);
  --radio: 16px;
  --radio-chico: 10px;
  --cristal-blur: blur(18px);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo-superior: #191d24;
    --fondo: #121418;
    --superficie: #1b1f27;
    --superficie-cristal: rgba(255, 255, 255, 0.05);
    --superficie-cristal-hover: rgba(255, 255, 255, 0.09);
    --superficie-2: #1f242c;
    --texto: #e2e4e9;
    --texto-2: #bec2cb;
    --texto-3: #8b93a3;
    --linea: rgba(255, 255, 255, 0.08);
    --linea-2: rgba(255, 255, 255, 0.18);

    --acento: #79a1f2;
    --acento-suave: rgba(121, 161, 242, 0.14);
    --acento-texto: #00234f;
    --acento-degradado: linear-gradient(135deg, #8fb2f7 0%, #6187e8 100%);

    --bien: #34d399;
    --bien-fondo: rgba(16, 185, 129, 0.16);
    --bien-texto: #06231a;
    --ajustado: #f5b544;
    --ajustado-fondo: rgba(245, 181, 68, 0.14);
    --mal: #f87171;
    --mal-fondo: rgba(248, 113, 113, 0.14);

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -8px rgba(0, 0, 0, 0.55);
    --sombra-md: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
  }
}

/* Iconos Material Symbols (mismo set que las mini apps y el escandallo) */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--fondo);
  background: radial-gradient(circle at top, var(--fondo-superior) 0%, var(--fondo) 100%);
  color: var(--texto);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--acento);
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--linea-2);
  border-radius: 999px;
}

/* ---------- estructura ---------- */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--linea);
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 12px;
}

/* El desenfoque va en un pseudo-elemento y no directo en .barra: un
   backdrop-filter en un antepasado atrapa a cualquier descendiente con
   position:fixed y lo posiciona relativo a ESE antepasado en vez del viewport,
   que es donde vive el nav en móvil. Mismo motivo que en el escandallo. */
.barra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  pointer-events: none;
}

.barra__marca {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto);
  text-decoration: none;
}

.barra__marca span.punto {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--acento-degradado);
  display: inline-block;
}

.barra__hueco {
  flex: 1;
}

.barra__usuario {
  font-size: 12.5px;
  color: var(--texto-2);
  display: none;
}

@media (min-width: 560px) {
  .barra__usuario {
    display: block;
  }
}

.contenido {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px 96px;
}

/* Navegación abajo en móvil (el pulgar llega), dentro de la barra en escritorio. */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav a {
  flex: 1;
  text-align: center;
  padding: 10px 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-3);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: color 0.18s ease;
}

.nav a.activo {
  color: var(--acento);
  border-top-color: var(--acento);
}

.nav b {
  display: block;
  line-height: 1.3;
  margin-bottom: 1px;
  font-weight: inherit;
}

.nav b .material-symbols-outlined {
  font-size: 21px;
}

.nav__pastilla {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--mal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

@media (min-width: 760px) {
  .nav {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    padding-bottom: 0;
    gap: 2px;
  }
  .nav a {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-top: none;
    border-radius: 999px;
    font-size: 13px;
    margin-top: 0;
  }
  .nav a.activo {
    background: var(--acento-suave);
    color: var(--acento);
  }
  .nav b .material-symbols-outlined {
    font-size: 18px;
    margin-right: 5px;
  }
  .nav b {
    display: inline;
  }
  .contenido {
    padding-bottom: 48px;
  }
}

/* ---------- controles ---------- */

.campo {
  width: 100%;
  padding: 12px 14px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-chico);
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo:focus {
  border-color: var(--acento);
  outline: none;
  box-shadow: 0 0 0 3px var(--acento-suave);
}

textarea.campo {
  resize: vertical;
  min-height: 76px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: var(--acento-degradado);
  color: var(--acento-texto);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.18s ease;
}

.boton:visited {
  color: var(--acento-texto);
}

.boton:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
}

.boton:active:not(:disabled) {
  transform: scale(0.97);
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.boton--suave {
  background: var(--superficie-cristal);
  color: var(--texto);
  border-color: var(--linea-2);
  box-shadow: none;
}

.boton--suave:visited {
  color: var(--texto);
}

.boton--bien {
  background: var(--bien);
  color: var(--bien-texto);
}

.boton--mini {
  padding: 7px 12px;
  font-size: 13px;
}

.etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 6px;
}

.campo-grupo {
  margin-bottom: 12px;
}

/* ---------- bloques ---------- */

.tarjeta {
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
}

.tarjeta + .tarjeta {
  margin-top: 14px;
}

.aviso {
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.aviso::before {
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.3;
}

.aviso--error {
  background: var(--mal-fondo);
  color: var(--mal);
}
.aviso--error::before {
  content: "error";
}

.aviso--ok,
.aviso--success {
  background: var(--bien-fondo);
  color: var(--bien);
}
.aviso--ok::before,
.aviso--success::before {
  content: "check_circle";
}

.aviso--nota {
  background: var(--ajustado-fondo);
  color: var(--ajustado);
}
.aviso--nota::before {
  content: "info";
}

.vacio {
  text-align: center;
  padding: 52px 20px;
  color: var(--texto-2);
}

.vacio::before {
  font-family: "Material Symbols Outlined";
  content: "inbox";
  display: block;
  font-size: 38px;
  color: var(--texto-3);
  margin-bottom: 10px;
}

.vacio--busqueda::before {
  content: "search_off";
}

.vacio--hecho::before {
  content: "task_alt";
}

.vacio h3 {
  margin: 0 0 6px;
  color: var(--texto);
  font-size: 16px;
}

.vacio p {
  margin: 0;
  font-size: 14px;
}

/* ---------- cabeceras y secciones ---------- */

.titulo-pagina {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}

.subtitulo-pagina {
  margin: 0 0 18px;
  color: var(--texto-2);
  font-size: 14px;
}

.seccion {
  margin-top: 26px;
}

.seccion__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.seccion__titulo h2 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.seccion__titulo h2 .material-symbols-outlined {
  font-size: 19px;
  color: var(--acento);
}

.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--texto-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

.enlace-volver:hover {
  color: var(--acento);
}

.enlace-volver .material-symbols-outlined {
  font-size: 18px;
}

/* ---------- buscador y filtros ---------- */

.buscador {
  position: relative;
  margin-bottom: 12px;
}

.buscador .material-symbols-outlined {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--texto-3);
  pointer-events: none;
}

.buscador .campo {
  padding-left: 42px;
}

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--linea-2);
  background: var(--superficie-cristal);
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.chip:hover {
  border-color: var(--acento);
  color: var(--texto);
}

.chip--activo {
  background: var(--acento-degradado);
  border-color: transparent;
  color: var(--acento-texto);
  box-shadow: var(--sombra);
}

.chip--activo:hover {
  border-color: transparent;
  color: var(--acento-texto);
}

/* ---------- cifras de cabecera ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.cifra {
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 13px 15px;
}

.cifra__valor {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.cifra__nombre {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: 3px;
}

/* ---------- rejilla de locales ---------- */

.grilla-locales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.tarjeta-local {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s ease;
}

.tarjeta-local:hover {
  transform: translateY(-2px);
  border-color: var(--linea-2);
  box-shadow: var(--sombra-md);
}

.tarjeta-local:active {
  transform: scale(0.99);
  background: var(--superficie-cristal-hover);
}

.tarjeta-local__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tarjeta-local__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tarjeta-local__meta {
  font-size: 11.5px;
  color: var(--texto-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.tarjeta-local__pct {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.tarjeta-local__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-2);
  padding-top: 9px;
  border-top: 1px dotted var(--linea);
  margin-top: auto;
}

/* ---------- barra de progreso ---------- */

.progreso {
  width: 100%;
  height: 5px;
  background: var(--linea);
  border-radius: 999px;
  overflow: hidden;
}

.progreso__relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--acento-degradado);
  transition: width 0.3s var(--ease);
}

.progreso__relleno--bien {
  background: var(--bien);
}
.progreso__relleno--ajustado {
  background: var(--ajustado);
}
.progreso__relleno--mal {
  background: var(--mal);
}

/* ---------- estados del checklist ---------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.estado::before {
  font-family: "Material Symbols Outlined";
  font-size: 14px;
}

.estado--good {
  background: var(--bien-fondo);
  color: var(--bien);
}
.estado--good::before {
  content: "check_circle";
}

.estado--warn {
  background: var(--ajustado-fondo);
  color: var(--ajustado);
}
.estado--warn::before {
  content: "schedule";
}

.estado--crit {
  background: var(--mal-fondo);
  color: var(--mal);
}
.estado--crit::before {
  content: "priority_high";
}

.m-bien {
  color: var(--bien);
}
.m-ajustado {
  color: var(--ajustado);
}
.m-mal {
  color: var(--mal);
}

/* ---------- listas de ítems ---------- */

.lista {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: border-color 0.18s ease, box-shadow 0.18s var(--ease);
}

.item:hover {
  border-color: var(--linea-2);
  box-shadow: var(--sombra-md);
}

.item__cuerpo {
  flex: 1;
  min-width: 0;
}

.item__titulo {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}

.item__detalle {
  font-size: 12.5px;
  color: var(--texto-2);
  margin-top: 3px;
  line-height: 1.45;
}

.item__nota {
  font-size: 12px;
  color: var(--texto-2);
  margin-top: 7px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
  border-left: 2px solid var(--acento);
}

.item__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.item__acciones {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.marca-agente {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--acento);
  background: var(--acento-suave);
  padding: 2px 8px;
  border-radius: 999px;
}

.marca-agente::before {
  font-family: "Material Symbols Outlined";
  content: "smart_toy";
  font-size: 13px;
}

.nivel {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- kanban de tareas ---------- */

.kanban {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 820px) {
  .kanban {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.columna__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 9px;
  padding: 0 2px;
}

.columna__cuenta {
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.tarjeta-tarea {
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 13px 14px;
  margin-bottom: 9px;
}

.tarjeta-tarea__titulo {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.tarjeta-tarea__desc {
  font-size: 12.5px;
  color: var(--texto-2);
  margin-top: 5px;
  line-height: 1.45;
}

.tarjeta-tarea__pie {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dotted var(--linea);
}

.prioridad {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.prioridad--critica {
  background: var(--mal-fondo);
  color: var(--mal);
}
.prioridad--alta {
  background: var(--ajustado-fondo);
  color: var(--ajustado);
}
.prioridad--media {
  background: var(--acento-suave);
  color: var(--acento);
}
.prioridad--oportunidad,
.prioridad--baja {
  background: var(--superficie-2);
  color: var(--texto-2);
}

/* ---------- login ---------- */

.entrar {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.entrar__caja {
  width: 100%;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.entrar__logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 16px;
  background: var(--acento-degradado);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-md);
}

.entrar__logo .material-symbols-outlined {
  font-size: 28px;
  color: var(--acento-texto);
}

.entrar__titulo {
  text-align: center;
  margin: 0 0 6px;
}

.entrar__titulo h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.entrar__titulo p {
  margin: 5px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

/* ---------- tablas y utilidades ---------- */

.tabla-scroll {
  overflow-x: auto;
}

.fuente {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fuente__rating {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  flex-shrink: 0;
}

.historial {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial li {
  font-size: 12.5px;
  color: var(--texto-2);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}

.historial li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linea-2);
}

.historial time {
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.crece {
  flex: 1;
  min-width: 160px;
}

details > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 14px;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] > summary .material-symbols-outlined {
  transform: rotate(180deg);
}

/* ---------- tablas (mismo trato que en el escandallo) ---------- */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabla th,
.tabla td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-3);
  position: sticky;
  top: 0;
  background: var(--superficie);
}

/* Las cifras alineadas a la derecha y con cifras de ancho fijo: así los miles
   caen unos debajo de otros y la columna se puede comparar de un vistazo. */
.tabla .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla tbody tr:hover td {
  background: var(--superficie-cristal-hover);
}

/* ---------- variación porcentual ---------- */

.var {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.var--sube {
  color: var(--bien);
}
.var--baja {
  color: var(--mal);
}
/* "Sin dato" no es lo mismo que "0%", y no debe verse igual. */
.var--nd {
  color: var(--texto-3);
  font-weight: 500;
}

/* ---------- evolución mensual (barras, no tartas) ----------
   Barras horizontales y no un gráfico de sectores: aquí lo que se compara son
   meses entre sí, que es una serie, y una tarta solo sabe contar partes de un
   total. Además se leen igual de bien en el móvil, que es donde se mira esto. */

.evolucion {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.evolucion__fila {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.evolucion__mes {
  color: var(--texto-2);
  font-weight: 600;
  text-transform: capitalize;
}

.evolucion__pista {
  background: var(--linea);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
}

.evolucion__barra {
  height: 100%;
  border-radius: 999px;
  background: var(--acento-degradado);
  min-width: 2px;
}

.evolucion__valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.evolucion__nota {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--texto-3);
  margin-top: -3px;
}

@media (max-width: 560px) {
  .evolucion__fila {
    grid-template-columns: 48px 1fr;
  }
  .evolucion__valor {
    grid-column: 2;
    text-align: left;
    margin-top: -2px;
  }
}

/* ---------- propuestas de mejora ----------
   Una propuesta no es una tarjeta de tarea: lo que la hace aprobable es el
   MOTIVO, no el título. Por eso el motivo va destacado con su franja de acento
   y el título encima, y no al revés. Quien decide tiene que poder darle la razón
   o quitársela mirando la cifra. */

.propuesta {
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 15px 16px;
}

.propuesta__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.propuesta__local {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-3);
  text-decoration: none;
}

.propuesta__local:hover {
  color: var(--acento);
}

.propuesta__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.propuesta__motivo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--acento-suave);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.propuesta__motivo .material-symbols-outlined {
  font-size: 18px;
  color: var(--acento);
  flex-shrink: 0;
}

.propuesta__que {
  font-size: 13px;
  color: var(--texto-2);
  line-height: 1.5;
  margin: 0 0 10px;
}

.propuesta__metrica {
  font-size: 12.5px;
  color: var(--texto-2);
  padding: 8px 10px;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
  margin-bottom: 12px;
}

.propuesta__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 11px;
  border-top: 1px dotted var(--linea);
}

/* ---------- diagnóstico de un local ---------- */

.diagnostico {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.hallazgo {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--superficie-cristal);
}

.hallazgo::before {
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.2;
}

.hallazgo--alta {
  border-color: var(--mal);
  background: var(--mal-fondo);
}
.hallazgo--alta::before {
  content: "priority_high";
  color: var(--mal);
}

.hallazgo--media::before {
  content: "info";
  color: var(--ajustado);
}

.hallazgo--buena {
  border-color: var(--bien);
  background: var(--bien-fondo);
}
.hallazgo--buena::before {
  content: "trending_up";
  color: var(--bien);
}

.hallazgo--informativa::before {
  content: "public";
  color: var(--texto-3);
}

.hallazgo--dato::before {
  content: "help";
  color: var(--texto-3);
}

.hallazgo__titulo {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
}

.hallazgo__detalle {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 3px;
  color: var(--texto-2);
}

.hallazgo--alta .hallazgo__detalle,
.hallazgo--buena .hallazgo__detalle {
  color: inherit;
  opacity: 0.92;
}

/* Comparativa del local contra su ciudad */
.contra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.contra__lado {
  text-align: center;
}

.contra__valor {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.contra__nombre {
  font-size: 11.5px;
  color: var(--texto-3);
  font-weight: 600;
  margin-top: 2px;
}

.contra__vs {
  font-size: 11px;
  color: var(--texto-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* La tarjeta del local lleva una franja lateral con su señal. Es lo único que
   distingue de un vistazo, en una rejilla de 40, cuáles piden atención. El color
   nunca va solo: debajo va siempre la frase ("3,4 puntos peor que su ciudad"). */
.tarjeta-local--mal {
  border-left: 3px solid var(--mal);
}

.tarjeta-local--bien {
  border-left: 3px solid var(--bien);
}

.tarjeta-local--nd {
  border-left: 3px solid var(--linea-2);
}

/* ---------- bandeja agrupada por local ----------
   Cada local es un bloque plegable. Los que tienen algo urgente vienen abiertos
   y el resto cerrados: con 25 locales afectados, abrirlo todo es la misma lista
   plana de antes, solo que con más scroll. */

.grupos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grupo {
  background: var(--superficie-cristal);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.grupo--mal {
  border-left: 3px solid var(--mal);
}
.grupo--bien {
  border-left: 3px solid var(--bien);
}
.grupo--nd {
  border-left: 3px solid var(--linea-2);
}

.grupo__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.grupo__cabecera::-webkit-details-marker {
  display: none;
}

.grupo__cabecera:hover {
  background: var(--superficie-cristal-hover);
}

.grupo__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.grupo__meta {
  font-size: 12px;
  color: var(--texto-3);
  margin-top: 3px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.grupo__señales {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.grupo__flecha {
  color: var(--texto-3);
  transition: transform 0.2s var(--ease);
}

.grupo[open] .grupo__flecha {
  transform: rotate(180deg);
}

.grupo__cuerpo {
  padding: 0 16px 16px;
  border-top: 1px solid var(--linea);
  padding-top: 14px;
}

.grupo__diagnostico {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grupo__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dotted var(--linea);
}

/* Una acción dentro de un grupo. Ya no repite el motivo —está arriba, una vez
   para todo el local—, así que es mucho más ligera que la tarjeta suelta. */

.accion {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}

.accion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.accion__titulo {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}

.accion__que {
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.5;
  margin: 6px 0 0;
}

.accion__metrica {
  font-size: 12px;
  color: var(--texto-3);
  margin-top: 7px;
}

.accion__pie {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}