/* ====================================================================
   Social First Lab · Dashboard Dove Colombia
   Sistema visual

   Organizado en bloques:
     1. Variables            2. Base y tipografía
     3. Estructura           4. Barra lateral
     5. Cabecera             6. Tarjetas y rótulos
     7. Números grandes      8. Chips, badges y pastillas
     9. Trending Now        10. Vista de categoría
    11. Gráficos SVG        12. Tablas y formularios
    13. Paginador flotante  14. Responsive
    15. Territorios culturales
   ==================================================================== */

@import url('../fonts/fuentes.css');

/* ── 1. Variables ─────────────────────────────────────────────── */

:root {
  --paper:    #F5F0E6;   /* fondo general — crema */
  --paper2:   #FFFFFF;   /* tarjetas */
  --ink:      #16283F;   /* texto principal */
  --ink2:     #5B6B80;   /* texto secundario */
  --ink3:     #98A4B4;   /* texto terciario y rótulos */
  --line:     #E4DED2;   /* bordes */
  --line2:    #EFEAE0;

  --dove-navy: #0F4C8C;  /* estructura, títulos, links */
  --dove-blue: #2E7BB5;
  --dove-gold: #E3C388;  /* señal: emergentes, detonantes, badge NUEVO */

  --up:       #2D8653;   /* variación positiva */
  --dn:       #C0392B;   /* variación negativa */
  --neu:      #B2BCCB;

  /* Alias de la paleta anterior.
     El proyecto viene de Unilever Andina y usa --ul-* en un centenar de
     reglas. Se mapean acá en vez de renombrarlas una por una: el
     resultado visual es idéntico y no hay riesgo de dejar alguna
     suelta apuntando a un azul que ya no existe. */
  --ul-blue:  var(--dove-navy);
  --ul-navy:  var(--dove-navy);
  --ul-sky:   var(--dove-blue);

  /* Sobre crema las tarjetas blancas se despegan menos que sobre el
     azul: la sombra va un punto más opaca y con el tinte cálido del
     fondo, si no se ve gris sucia. */
  --shadow:    0 1px 2px rgba(60,45,20,.07), 0 6px 18px rgba(60,45,20,.10);
  --shadow-lg: 0 6px 16px rgba(60,45,20,.13), 0 30px 60px rgba(60,45,20,.17);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --barra-ancho: 250px;
  --radio:   14px;
  --radio-sm: 9px;

  /* Color de la marca que se está viendo. Cada vista lo pisa. */
  --marca: var(--ul-blue);
}


/* ── 2. Base y tipografía ─────────────────────────────────────── */

* { box-sizing: border-box; }

/* Los contenedores flex ignorarían el atributo hidden sin esto. */
[hidden] { display: none !important; }

html {
  /* El control de zoom de la cabecera cambia este tamaño. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* Títulos editoriales: siempre en serif. */
.editorial {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
  color: var(--ink);
}
.editorial-xl { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.editorial-lg { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.editorial-md { font-size: clamp(1.3rem, 1.9vw, 1.75rem); }

/* Rótulo de sección: mayúsculas, tracking amplio, color terciario. */
.rotulo {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 .85rem;
}

.bajada {
  color: var(--ink2);
  font-size: 1rem;
  max-width: 62ch;
  margin: .7rem 0 0;
}

/* Con qué frecuencia se refresca cada sección. Trending Now es always
   on, las categorías son semanales y los territorios mensuales: sin
   decirlo, el cliente lee todo como si fuera del mismo día. */
.cadencia {
  display: inline-block;
  margin: 1rem 0 0;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
}

.menor { font-size: .8rem; color: var(--ink3); }
.dato  { font-variant-numeric: tabular-nums; }


/* ── 3. Estructura ────────────────────────────────────────────── */

.layout { display: flex; min-height: 100vh; }

.contenido {
  flex: 1;
  min-width: 0;
  margin-left: var(--barra-ancho);
}

.vista {
  padding: 2rem clamp(1.25rem, 3vw, 3rem) 6rem;
  max-width: 1680px;
}

.seccion { margin-top: 2.75rem; }
.seccion:first-child { margin-top: 0; }


/* ── 4. Barra lateral ─────────────────────────────────────────── */

/* La barra es clara, como el dashboard de referencia de ulfoods.
   Se puede ocultar con la X y volver a mostrar con el botón de menú
   de la cabecera; la preferencia queda guardada en el navegador. */
.barra {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--barra-ancho);
  background: var(--paper2);
  border-right: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform .22s ease;
}

/* Oculta */
body.barra-oculta .barra { transform: translateX(-100%); }
body.barra-oculta .contenido { margin-left: 0; }
body.barra-oculta .bandeja { left: 0; }
.contenido { transition: margin-left .22s ease; }

.barra-tope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1.15rem 1rem 1.05rem 1.35rem;
  border-bottom: 1px solid var(--line2);
}
/* El logotipo de Dove es un lockup vertical (la palabra arriba, la
   paloma abajo), así que pide más alto que el logo apaisado que había
   antes. Va sin pastilla: es navy y dorado sobre fondo claro y se lee
   solo, tanto sobre el blanco de la barra como sobre el crema. */
.logo-dove { height: 56px; width: auto; display: block; }
.logo-dove-texto {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--dove-navy);
}

.barra-cerrar, .barra-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink2);
  cursor: pointer;
}
.barra-cerrar:hover, .barra-abrir:hover { background: var(--line2); color: var(--ink); }
.barra-abrir { background: var(--paper2); border: 1px solid var(--line); }

.ico { width: 17px; height: 17px; flex: none; }

.barra-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem .7rem 1.2rem;
}

.barra-grupo { margin-bottom: 1.1rem; }
.barra-grupo > p {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 .4rem .6rem;
}

.barra-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem .6rem;
  border-radius: var(--radio-sm);
  font-size: .875rem;
  color: var(--ink2);
  transition: background .14s, color .14s;
}
.barra-item:hover { background: var(--paper); color: var(--ink); }
.barra-item.activo {
  background: rgba(15,76,140,.10);
  color: var(--ul-blue);
  font-weight: 600;
}
.barra-item span { min-width: 0; }

/* Punto de color de cada marca. Sobre fondo claro se ve solo, pero el
   aro sutil le da peso al navy de Axe, que si no parece un hueco. */
.barra-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  margin: 0 4px;
  box-shadow: 0 0 0 2px rgba(60,45,20,.10);
}

.barra-pie {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line2);
}
.barra-pie-datos { flex: 1; min-width: 0; }
.barra-pie .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: var(--ul-blue);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.barra-pie .usuario {
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-pie .rol {
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--ink3);
}
.barra-pie a.salir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 50%;
  color: var(--ink3);
}
.barra-pie a.salir:hover { background: var(--paper); color: var(--dn); }

.barra-nota {
  margin: 0;
  padding: 0 1.35rem 1.1rem;
  font-size: .68rem;
  line-height: 1.45;
  color: var(--ink3);
}


/* ── 5. Cabecera ──────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245,240,230,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: .85rem clamp(1.25rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Sólo se ve cuando la barra está oculta. */
.barra-abrir { margin-right: -.4rem; }

.cabecera-titulo { flex: 1; min-width: 220px; }
.cabecera-titulo strong {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  display: block;
}
.cabecera-titulo span { font-size: .76rem; color: var(--ink3); }

.controles {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.control {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .5rem .3rem .75rem;
  font-size: .8rem;
  box-shadow: var(--shadow);
}
.control label {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 600;
}
.control select,
.control input[type="date"] {
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  padding: .15rem .1rem;
}
.control select:focus,
.control input:focus { outline: 2px solid var(--ul-sky); outline-offset: 2px; border-radius: 4px; }

.actualizado {
  font-size: .72rem;
  color: var(--ink3);
  white-space: nowrap;
}

/* Control de zoom */
.zoom { gap: 0; padding: .25rem .3rem; }
.zoom button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink2);
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  line-height: 1;
}
.zoom button:hover { background: var(--paper); color: var(--ink); }
.zoom .nivel {
  font-size: .72rem;
  color: var(--ink2);
  min-width: 3.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ── 6. Tarjetas y rótulos ────────────────────────────────────── */

.tarjeta {
  background: var(--paper2);
  border: 1px solid var(--line2);
  border-radius: var(--radio);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
}

.tarjeta-oscura {
  background: var(--ul-navy);
  color: #fff;
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--shadow-lg);
  padding: 2.4rem clamp(1.5rem, 3vw, 3rem);
}
.tarjeta-oscura .rotulo { color: rgba(255,255,255,.55); }
.tarjeta-oscura .editorial { color: #fff; }
.tarjeta-oscura p { color: rgba(255,255,255,.80); }

.grilla { display: grid; gap: 1.1rem; }
/* Misma razón que en .tabla-scroll: sin esto una tabla ancha adentro de
   una tarjeta estira la columna entera. */
.grilla > *, .comparador > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }


/* ── 7. Números grandes ───────────────────────────────────────── */

/* La métrica principal siempre muy por encima del resto. */
.num-grande {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: block;
}
.num-medio {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.num-pie {
  font-size: .78rem;
  color: var(--ink3);
  margin-top: .45rem;
}

/* Variaciones: siempre verde o rojo, con el signo a la vista. */
.var-up, .var-dn, .var-neu {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
}
.var-up  { color: var(--up); }
.var-dn  { color: var(--dn); }
.var-neu { color: var(--ink3); }
.var-up::before  { content: '▲'; font-size: .62em; }
.var-dn::before  { content: '▼'; font-size: .62em; }


/* ── 8. Chips, badges y pastillas de logo ─────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .27rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  padding: .3rem .68rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink2);
}
.chip b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Filtros clickeables */
.filtro {
  cursor: pointer;
  background: var(--paper2);
  transition: background .14s, border-color .14s, color .14s;
  font-family: var(--sans);
}
.filtro:hover { border-color: var(--ink3); }
.filtro.activo {
  background: var(--ul-navy);
  border-color: var(--ul-navy);
  color: #fff;
}
.filtro.activo b { color: #fff; }

/* Contenedor del logo de marca.
   Es EL MISMO para las seis: blanco, del mismo tamaño y con el mismo
   padding. Antes cada marca traía su propio fondo (blanco, amarillo
   Maizena, violeta Ego) y eso era lo que las hacía ver como parches
   pegados sobre la banda de color.
   El contenedor hace falta: los seis logos son de colores oscuros o
   metálicos y apoyados directamente sobre la banda de su marca se
   pierden — el negro de Axe sobre navy directamente desaparece. */
.pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 84px;
  padding: 0 .95rem;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60,45,20,.16);
  flex: none;
}
/* La caja es del mismo tamaño para las 6 marcas y el logo se ajusta
   adentro con object-fit. Así ninguna se ve más chica que otra al
   cambiar de marca, que es lo que pasaba cuando el ancho máximo
   recortaba a los logos apaisados antes de llegar al alto máximo. */
.pastilla {
  width: 152px;
  height: 56px;
  min-width: 0;
  padding: .5rem .9rem;
}
.pastilla img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pastilla-sm { width: 108px; height: 42px; padding: .38rem .6rem; border-radius: 9px; }

/* Franja de categoría.
   Las categorías de Dove no tienen logo propio, así que en las tarjetas
   de la portada el ancla visual es una franja del color de la categoría.
   Repite el color de su cabecera, que es lo que hace que la tarjeta y la
   ficha se lean como la misma cosa. */
.franja-categoria {
  width: 6px;
  height: 42px;
  border-radius: 3px;
  flex: none;
  background: var(--marca);
}


/* ── 9. Trending Now ──────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: 1.2rem;
  font-size: .82rem;
  color: var(--ink2);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-meta b { font-variant-numeric: tabular-nums; color: var(--ink); }

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: flex-end;
  margin-bottom: 1.6rem;
}
.filtros-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.filtros-titulo {
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 700;
  margin-right: .2rem;
}

/* Filtro desplegable. Reemplaza a las filas de chips: una tendencia se
   elige de a una, no se van tildando, así que un <select> dice lo
   mismo en una línea en vez de en tres. */
.filtro-select { display: flex; flex-direction: column; gap: .25rem; }
.filtro-select label {
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 700;
}
.filtro-select select {
  appearance: none;
  min-width: 11rem;
  padding: .42rem 2rem .42rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper2);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 15px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .84rem;
  cursor: pointer;
}
.filtro-select select:focus {
  outline: 2px solid var(--dove-blue);
  outline-offset: 1px;
}

.grilla-tendencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.15rem;
}

.trend {
  background: var(--paper2);
  border: 1px solid var(--line2);
  border-radius: var(--radio);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: relative;
  transition: box-shadow .18s, transform .18s;
}
.trend:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.trend-tope {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}
.trend-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--line);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.trend-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  flex: 1;
  justify-content: flex-end;
}

.trend h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
}
.trend p.desc {
  margin: 0;
  font-size: .85rem;
  color: var(--ink2);
  line-height: 1.5;
}

.trend-metricas {
  display: flex;
  gap: 1.6rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
.trend-metricas div { flex: 1; }
.trend-metricas .rotulo { margin-bottom: .2rem; font-size: .6rem; }
.trend-metricas .valor {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* La oportunidad de marca es la parte estratégica del servicio:
   por eso tiene su propio bloque y no es una línea más. */
.oportunidad {
  background: linear-gradient(180deg, rgba(15,76,140,.06), rgba(15,76,140,.02));
  border-left: 3px solid var(--ul-blue);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: .8rem .95rem;
}
.oportunidad .rotulo { color: var(--ul-blue); margin-bottom: .35rem; font-size: .6rem; }
.oportunidad p { margin: 0; font-size: .83rem; color: var(--ink); line-height: 1.5; }
.oportunidad .marcas {
  margin-top: .5rem;
  font-size: .72rem;
  color: var(--ink2);
}

.trend-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  font-size: .76rem;
  color: var(--ink3);
  margin-top: auto;
}
.trend-pie a {
  color: var(--ul-blue);
  font-weight: 600;
  white-space: nowrap;
}
.trend-pie a:hover { text-decoration: underline; }

.trend-hashtags {
  font-size: .76rem;
  color: var(--ul-blue);
  word-break: break-word;
}

.semanas-activa {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--up);
  background: rgba(45,134,83,.09);
  padding: .2rem .5rem;
  border-radius: 999px;
}

/* Botón que abre el detalle. Se ve como un enlace, pero es un botón
   porque no navega a ningún lado: abre una capa encima. */
.enlace-detalle {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ul-blue);
  cursor: pointer;
  white-space: nowrap;
}
.enlace-detalle:hover { text-decoration: underline; }

/* Detalle de una tendencia */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(22,40,63,.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1.25rem;
  overflow-y: auto;
}
.modal-caja {
  position: relative;
  width: min(780px, 100%);
  background: var(--paper2);
  border-radius: var(--radio);
  box-shadow: var(--shadow-lg);
  padding: 2rem clamp(1.4rem, 3vw, 2.4rem) 2.2rem;
}
.modal-cerrar {
  position: absolute;
  top: .9rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.modal-cerrar:hover { background: var(--line2); color: var(--ink); }

/* Fila de métricas del detalle */
.metricas-caja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--line2);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.metricas-caja > div {
  padding: .9rem 1.1rem;
  border-right: 1px solid var(--line2);
}
.metricas-caja > div:last-child { border-right: 0; }
.metricas-caja .rotulo { margin-bottom: .3rem; font-size: .6rem; }
.metricas-caja .valor {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}

/* Bloque de metodología con las 4 fases */
.metodologia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fase-def {
  border-top: 3px solid var(--linea, var(--neu));
  padding-top: .9rem;
}
.fase-def h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.fase-def p { margin: 0; font-size: .82rem; color: var(--ink2); line-height: 1.5; }


/* ── 10. Vista de marca ───────────────────────────────────────── */

/* El color del texto viene calculado según la luminancia del color de
   la marca, no escrito a mano (ver estilo_marca en data.php). */
.marca-cabecera {
  background: var(--marca);
  color: var(--banda-ink, #fff);
  border-radius: var(--radio);
  padding: 1.6rem clamp(1.25rem, 2.5vw, 2.2rem);
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.marca-cabecera .titulo { flex: 1; min-width: 200px; }
.marca-cabecera h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.marca-cabecera h1 { color: var(--banda-ink, #fff); }
.marca-cabecera .contexto {
  margin-top: .45rem;
  font-size: .84rem;
  color: var(--banda-ink2, rgba(255,255,255,.82));
}
.marca-cabecera .principal { text-align: right; }
.marca-cabecera .principal .num-grande { color: var(--banda-ink, #fff); }
.marca-cabecera .principal .rotulo {
  color: var(--banda-ink2, rgba(255,255,255,.62));
  margin-bottom: .3rem;
}

/* Sub-pestañas */
.pestanas {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--line);
  margin: 1.8rem 0 1.6rem;
  overflow-x: auto;
}
.pestana {
  padding: .6rem .95rem;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
}
.pestana:hover { color: var(--ink); }
.pestana.activa {
  color: var(--marca);
  border-bottom-color: var(--marca);
  font-weight: 600;
}

.lista-plataformas { display: flex; flex-direction: column; gap: .7rem; }
.plataforma-fila {
  display: grid;
  grid-template-columns: 1.6rem 8rem 1fr auto auto;
  align-items: center;
  gap: .8rem;
  font-size: .84rem;
}
.plataforma-barra {
  height: 7px;
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.plataforma-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
}

/* Nube de palabras */
.nube { line-height: 2.1; text-align: center; }
/* nowrap para que un término de dos palabras no se parta al medio. */
.nube span {
  display: inline-block;
  margin: 0 .38rem;
  cursor: default;
  font-weight: 600;
  white-space: nowrap;
}
.nube .s-positivo { color: var(--up); }
.nube .s-neutro   { color: var(--ink3); }
.nube .s-negativo { color: var(--dn); }

/* Publicaciones destacadas */
.post {
  border: 1px solid var(--line2);
  border-radius: var(--radio-sm);
  padding: 1rem 1.1rem;
  background: var(--paper2);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.post-tope {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  color: var(--ink3);
}
.post-tope .autor { font-weight: 600; color: var(--ink); }
.post p { margin: 0; font-size: .88rem; line-height: 1.5; }
.post-metricas {
  display: flex;
  gap: 1.1rem;
  font-size: .76rem;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

/* Voces destacadas */
.voz {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line2);
  font-size: .85rem;
}
.voz:last-child { border-bottom: 0; }
.voz .puesto {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.voz .usuario { font-weight: 600; }
.voz .meta { font-size: .74rem; color: var(--ink3); }

/* Insight principal sobre el color de la marca */
.insight-principal {
  background: var(--marca);
  color: #fff;
  border-radius: var(--radio);
  padding: 1.8rem clamp(1.3rem, 2.5vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.insight-principal .rotulo { color: rgba(255,255,255,.6); }
.insight-principal h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
}
.insight-principal p { margin: 0; color: rgba(255,255,255,.85); font-size: .93rem; }

.lista-recomendaciones { margin: 0; padding: 0; list-style: none; }
.lista-recomendaciones li {
  display: flex;
  gap: .65rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line2);
  font-size: .89rem;
}
.lista-recomendaciones li:last-child { border-bottom: 0; }
.lista-recomendaciones li::before {
  content: '→';
  color: var(--marca);
  font-weight: 700;
  flex: none;
}


/* ── 11. Gráficos SVG ─────────────────────────────────────────── */

/* Los gráficos se dibujan a mano, sin librerías. */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eje       { stroke: var(--line); stroke-width: 1; }
.grafico .rejilla   { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 3 4; }
.grafico .etiqueta  { font-family: var(--sans); font-size: 10px; fill: var(--ink3); }
.grafico .punto     { fill: var(--paper2); stroke: var(--marca); stroke-width: 2; }
.grafico .punto:hover { r: 5; }
.grafico .linea     { fill: none; stroke: var(--marca); stroke-width: 2.5;
                      stroke-linejoin: round; stroke-linecap: round; }
.grafico .area      { fill: var(--marca); opacity: .11; }

.donut-centro {
  font-family: var(--serif);
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}
.donut-centro-pie {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--ink3);
  text-anchor: middle;
  letter-spacing: .12em;
}

.leyenda { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1rem; font-size: .8rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink2); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.barras-apiladas { display: flex; flex-direction: column; gap: .55rem; }
/* Tres columnas: etiqueta, barra y valor. Con dos, el valor caía al
   renglón de abajo y cada fila ocupaba el doble de alto. */
.barra-apilada {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr 3.6rem;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  padding: .18rem 0;
}
.barra-apilada .pista {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
}
.barra-apilada .pista i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity .14s;
}
.barra-apilada .pista i:hover { opacity: .78; }

/* La matriz lleva la cantidad de menciones escrita adentro, así que
   necesita un poco más de alto que una barra apilada normal. */
.matriz-sentiment .pista { height: 30px; }

/* Cuando el largo representa el volumen, los segmentos van adentro de
   esta caja, que es la que se achica según la fila. */
.pista-volumen {
  display: flex;
  height: 100%;
  min-width: 2px;
  border-radius: 6px;
  overflow: hidden;
}

/* Share of Voice: igual que las apiladas pero con el % a la derecha. */
.barras-sov .barra-apilada { grid-template-columns: 7rem 1fr 3.5rem; }


/* ── 12. Tablas y formularios ─────────────────────────────────── */

/* Las tablas anchas scrollean dentro de su propia caja, para que la
   página nunca se desplace de costado.
   El min-width:0 es imprescindible: sin él, un hijo de grid o de flex
   se niega a achicarse por debajo del ancho de su contenido y termina
   estirando toda la columna. */
.tabla-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }

table.datos { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.datos th {
  text-align: left;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 700;
  padding: 0 .8rem .6rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.datos td {
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line2);
}
table.datos td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.datos th.num { text-align: right; }
table.datos tr:last-child td { border-bottom: 0; }

.campo { margin-bottom: 1rem; }
.campo label {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 700;
  margin-bottom: .35rem;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radio-sm);
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink);
  background: var(--paper2);
}
.campo textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--ul-sky);
  box-shadow: 0 0 0 3px rgba(46,123,181,.20);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--ul-blue);
  color: #fff;
  border: 0;
  border-radius: var(--radio-sm);
  padding: .62rem 1.15rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.boton:hover { background: var(--ul-navy); }
.boton-2 { background: var(--paper2); color: var(--ink); border: 1px solid var(--line); }
.boton-2:hover { background: var(--paper); color: var(--ink); }

.aviso {
  border-radius: var(--radio-sm);
  padding: .8rem 1rem;
  font-size: .87rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
}
.aviso-error { background: rgba(192,57,43,.07); border-color: var(--dn); color: #8c2c22; }
.aviso-ok    { background: rgba(45,134,83,.08); border-color: var(--up); color: #1e5c39; }
.aviso-info  { background: rgba(15,76,140,.07); border-color: var(--ul-blue); color: var(--dove-navy); }

.vacio {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--ink3);
  font-size: .92rem;
}


/* ── 12b. Comparador ──────────────────────────────────────────── */

.comparador { display: grid; grid-template-columns: 230px 1fr; gap: 1.4rem; align-items: start; }

.panel-filtros { position: sticky; top: 5.5rem; }
.filtro-marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--line2);
  font-size: .88rem;
  cursor: pointer;
}
.filtro-marca:last-child { border-bottom: 0; }
.filtro-marca input { accent-color: var(--ul-blue); width: 15px; height: 15px; cursor: pointer; }
.filtro-marca i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Bandeja de comparación: aparece al tildar dos o más marcas. */
.bandeja {
  position: fixed;
  left: var(--barra-ancho);
  right: 0;
  bottom: 0;
  z-index: 34;
  background: var(--paper2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(60,45,20,.13);
  padding: 1rem clamp(1.25rem, 3vw, 3rem);
  max-height: 46vh;
  overflow-y: auto;
}
.bandeja-tarjetas { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .3rem; }
.bandeja-tarjeta {
  flex: 0 0 236px;
  border: 1px solid var(--line2);
  border-top: 3px solid var(--marca, var(--ul-blue));
  border-radius: var(--radio-sm);
  padding: .9rem 1rem;
}
.bandeja-tarjeta .fila {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .8rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--line2);
}
.bandeja-tarjeta .fila:last-child { border-bottom: 0; }
.bandeja-tarjeta .fila b { font-variant-numeric: tabular-nums; }


/* ── 13. Paginador flotante ───────────────────────────────────── */

.paginador {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: 1.5rem;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: .2rem;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: .32rem .38rem;
}
.paginador a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--ink2);
  font-size: 1rem;
}
.paginador a:hover { background: var(--paper); color: var(--ink); }
.paginador .actual {
  font-size: .82rem;
  font-weight: 600;
  padding: 0 .65rem;
  color: var(--ink);
  white-space: nowrap;
}


/* ── 14. Responsive ───────────────────────────────────────────── */

/* Notebook: se aprieta un poco la grilla. */
@media (max-width: 1280px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metodologia { grid-template-columns: repeat(2, 1fr); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  :root { --barra-ancho: 0px; }
  .barra {
    position: static;
    width: 100%;
    inset: auto;
    flex-direction: column;
  }
  .barra-nav { max-height: none; }
  .layout { flex-direction: column; }
  .contenido { margin-left: 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .metodologia { grid-template-columns: 1fr; }
  .marca-cabecera .principal { text-align: left; }
  .plataforma-fila { grid-template-columns: 1.5rem 6rem 1fr auto; }

  /* El panel de filtros del comparador pasa arriba del contenido. */
  .comparador { grid-template-columns: 1fr; }
  .panel-filtros { position: static; }
  .bandeja { left: 0; }
  .barra-apilada { grid-template-columns: 5.5rem 1fr; }
  .barras-sov .barra-apilada { grid-template-columns: 5.5rem 1fr 3.2rem; }
}

/* En pantalla de teléfono un término largo de la nube no entra a tamaño
   completo, y como no se puede partir al medio, se achica el máximo.
   El !important es para ganarle al tamaño que calcula nube_palabras(). */
@media (max-width: 480px) {
  .nube span { font-size: 1.05rem !important; }
}

@media print {
  .barra, .cabecera .controles, .paginador { display: none; }
  .contenido { margin-left: 0; }
  body { background: #fff; }
}


/* ── 15. Territorios culturales ───────────────────────────────── */

/* Los territorios NO llevan color propio: se dibujan todos en navy.
   Con seis colores de categoría ya hay bastante paleta en juego; sumar
   cinco más convierte el dashboard en un arcoíris. */
.territorio { --marca: var(--dove-navy); }

/* Las pestañas son enlaces y no botones: cada territorio tiene su URL
   y se puede compartir. Por lo demás se ven igual que las de la ficha
   de categoría. */
.pestanas-territorio .pestana { text-decoration: none; }
.pestanas-territorio .pestana.activa {
  color: var(--dove-navy);
  border-bottom-color: var(--dove-navy);
}

.territorio-cabecera { margin-bottom: 2rem; }


/* --- Badges de estado ---
   El dorado va SIEMPRE como relleno con texto navy encima, nunca como
   color de texto: sobre el crema del fondo no se lee. */
.badge-estado {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-linea_base  { background: transparent;      color: var(--ink2);  border-color: var(--ink2); }
.badge-nuevo       { background: var(--dove-gold); color: var(--dove-navy); }
.badge-crece       { background: var(--up);        color: #fff; }
.badge-se_apaga    { background: var(--dn);        color: #fff; }
.badge-se_mantiene { background: transparent;      color: var(--ink3); border-color: var(--ink3); }

.leyenda-estados {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}


/* --- Top 5 en barras ---
   Antes eran cinco tarjetas con ocho datos cada una y no se leía
   ninguno. Ahora la barra muestra sólo lo que se entiende de un
   vistazo — puesto, nombre, volumen, variación y estado — y todo el
   detalle vive del otro lado del click, en el deep dive. */
.barras-tematicas {
  display: flex;
  flex-direction: column;
  margin-top: 1.4rem;
}

.barra-tematica {
  display: grid;
  grid-template-columns: 1.6rem minmax(9rem, 15rem) 1fr auto 4.4rem 6.6rem 1rem;
  align-items: center;
  gap: .9rem;
  padding: .8rem .6rem;
  border-radius: var(--radio-sm);
  border-bottom: 1px solid var(--line2);
  transition: background .14s;
}
.barra-tematica:last-child { border-bottom: 0; }
.barra-tematica:hover { background: var(--paper); }
.barra-tematica:hover .ir { opacity: 1; transform: translateX(2px); }

.barra-tematica .puesto {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--line);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.barra-tematica .nombre {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.25;
  color: var(--ink);
}
.barra-tematica .pista {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: var(--line2);
  overflow: hidden;
}
.barra-tematica .pista i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--dove-navy);
}
.barra-tematica .cifra {
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}
.barra-tematica .variacion {
  text-align: right;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barra-tematica .badge-estado { justify-self: start; }
.barra-tematica .ir {
  color: var(--dove-navy);
  font-weight: 700;
  opacity: .35;
  transition: opacity .14s, transform .14s;
}


/* --- Deep dive de una temática --- */

.volver {
  display: inline-block;
  margin-bottom: 1.3rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--dove-navy);
}
.volver:hover { text-decoration: underline; }

.tema-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.tema-cabecera h2 { max-width: 26ch; }

/* El detonante es el porqué del número: dorado de relleno tenue, con
   el texto en navy, que sí se lee sobre el crema. */
.detonante-bloque {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink2);
  background: rgba(227,195,136,.22);
  border-left: 4px solid var(--dove-gold);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: .95rem 1.15rem;
  max-width: 88ch;
}
.detonante-bloque strong { color: var(--ink); }


.salieron-del-top {
  margin: 1.1rem 0 0;
  font-size: .8rem;
  color: var(--ink3);
  line-height: 1.5;
}
.salieron-del-top strong { color: var(--ink2); }


/* --- Radar de emergentes ---
   Misma anatomía que una fila de Voces destacadas. El % de crecimiento
   va en dorado de relleno, no de texto. */
.emergente {
  display: grid;
  border-radius: var(--radio-sm);
  transition: background .14s;
  grid-template-columns: 1.9rem 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line2);
}
.emergente:last-child { border-bottom: 0; }
.emergente:hover { background: var(--paper); }
.emergente .puesto {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--line);
  font-variant-numeric: tabular-nums;
}
.emergente .usuario { font-weight: 600; font-size: .92rem; }
.emergente .meta { font-size: .76rem; color: var(--ink3); }
.emergente-var {
  background: var(--dove-gold);
  color: var(--dove-navy);
  font-weight: 700;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}


/* --- Detonantes sobre la curva --- */
.grafico-territorio .detonante-guia {
  stroke: var(--dove-gold);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.grafico-territorio .detonante-punto {
  fill: var(--dove-gold);
  stroke: var(--dove-navy);
  stroke-width: 1.5;
}
.grafico-territorio .detonante-texto {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--dove-navy);
}


/* --- Hallazgos del período ---
   El bloque editorial que escribe el analista. Borde izquierdo dorado:
   es lo último de la vista y tiene que leerse como una conclusión, no
   como otra tarjeta más. */
.hallazgos {
  background: var(--paper2);
  border: 1px solid var(--line2);
  border-left: 4px solid var(--dove-gold);
  border-radius: 0 var(--radio) var(--radio) 0;
  box-shadow: var(--shadow);
  padding: 1.6rem clamp(1.3rem, 2.4vw, 2rem);
}
.hallazgos h3 { margin-bottom: 1rem; }
.hallazgos p {
  margin: 0 0 .9rem;
  max-width: 84ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink2);
}
.hallazgos p:last-child { margin-bottom: 0; }
.hallazgos strong { color: var(--ink); }


@media (max-width: 900px) {
  /* La barra se parte en dos filas: arriba el nombre, abajo la métrica.
     Apretando siete columnas en un celular no se lee nada. */
  .barra-tematica {
    grid-template-columns: 1.6rem 1fr auto;
    grid-template-areas:
      "puesto nombre  ir"
      ".      pista   pista"
      ".      cifra   badge";
    row-gap: .5rem;
  }
  .barra-tematica .puesto    { grid-area: puesto; }
  .barra-tematica .nombre    { grid-area: nombre; }
  .barra-tematica .pista     { grid-area: pista; }
  .barra-tematica .cifra     { grid-area: cifra; }
  .barra-tematica .variacion { display: none; }
  .barra-tematica .badge-estado { grid-area: badge; justify-self: end; }
  .barra-tematica .ir        { grid-area: ir; }
}

@media (max-width: 720px) {
  .leyenda-estados { display: none; }
}


/* ── 16. Squad de influencers ─────────────────────────────────── */

/* La grilla no declara cuántas columnas tiene: se llena con las
   creadoras que haya. Sumar una en el panel no descuadra nada, sea
   número par o impar. */
.grilla-squad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.15rem;
}

.creadora {
  background: var(--paper2);
  border: 1px solid var(--line2);
  border-radius: var(--radio);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.35rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.creadora-tope {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: .85rem;
}

.creadora-foto {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
/* Sin foto cargada va el círculo con las iniciales. Al principio son
   todas así, así que este es el caso normal y tiene que verse bien
   resuelto, no como un hueco. */
.creadora-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}

.creadora-quien { min-width: 0; }
.creadora-quien strong {
  display: block;
  font-size: .98rem;
  line-height: 1.2;
}
/* La línea de usuario, plataforma y seguidores se parte en dos
   renglones si hace falta. Cortarla con puntos suspensivos escondía
   justamente los seguidores, que es el dato que va al final.

   Reserva SIEMPRE el alto de dos renglones, aunque entre en uno: si no,
   una tarjeta con handle corto tendría el encabezado más bajo que su
   vecina y los números grandes de la fila quedarían a distinta altura,
   que es justo lo que la grilla de métricas está evitando más abajo. */
.creadora-quien .menor {
  display: block;
  margin-top: .1rem;
  line-height: 1.35;
  min-height: 2.7em;
}
.creadora-tope { align-items: start; }
.creadora-tope .badge-bloque { margin-top: .15rem; }

/* Los badges se apilan en vez de ponerse uno al lado del otro: con
   nombres largos, dos badges en línea empujan el handle a tres
   renglones y desalinean la tarjeta contra sus vecinas. */
.creadora-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex: none;
}

/* Badge de estado. Mismos tres estados y mismos umbrales que las
   categorías en The Headlines: sale de bloque_por_variacion(). */
.badge-bloque {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* La alerta no es un estado más: la enciende el analista a mano y su
   trabajo es cortar la lectura. Por eso va en ámbar, el color que el
   dashboard reserva para señal, y no compite con el verde/rojo. */
.badge-alerta   { background: #C8791E; color: #fff; }
.badge-creciendo { background: var(--up);   color: #fff; }
.badge-en_baja   { background: var(--dn);   color: #fff; }
.badge-sostenido { background: transparent; color: var(--ink3); border-color: var(--ink3); }
/* No es un estado: es la ausencia de comparación. Por eso va en navy y
   no en el verde/rojo/gris de los otros tres. */
.badge-primer_periodo {
  background: rgba(15,76,140,.10);
  color: var(--dove-navy);
  border-color: rgba(15,76,140,.28);
}


/* Franja de alerta del encabezado. Sólo aparece si hay alguna alerta
   encendida: una franja permanente deja de llamar la atención. */
.franja-alerta {
  margin: 0 0 1.2rem;
  padding: .7rem 1rem;
  border-radius: var(--radio-sm);
  border-left: 4px solid #C8791E;
  background: rgba(200,121,30,.10);
  color: var(--ink2);
  font-size: .87rem;
}
.franja-alerta strong { color: #C8791E; }


/* Contexto de la conversación.
   Es un insight escrito por el analista, no un cálculo, así que se lee
   como texto y no como métrica. */
.creadora-contexto {
  border-top: 1px solid var(--line2);
  padding-top: .95rem;
}
.creadora-contexto .rotulo { margin-bottom: .55rem; }

.contexto-titular {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.contexto-titular strong {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--up);
}
/* Con alerta, el número pasa a ámbar. El color lo enciende el campo
   `alerta`, que se carga a mano: no se deduce del porcentaje. */
.creadora-contexto.con-alerta .contexto-titular strong { color: #C8791E; }

.contexto-titular span {
  font-size: .82rem;
  color: var(--ink2);
  flex: 1;
  min-width: 12ch;
}

.contexto-lectura {
  margin: .8rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line2);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink2);
}

.contexto-link {
  display: inline-block;
  margin-top: .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dove-navy);
}
.contexto-link:hover { text-decoration: underline; }

/* Cada métrica son TRES filas de alto fijo: rótulo, número y
   variación. La fila de variación existe siempre, aunque su contenido
   sea un guion: si apareciera sólo cuando hay período anterior, los
   números grandes de dos tarjetas vecinas quedarían a distinta altura
   y la grilla se vería desprolija. */
.creadora-metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
.creadora-metrica {
  display: grid;
  grid-template-rows: 1rem 1.55rem 1.1rem;
  align-content: start;
}
.creadora-metrica .rotulo {
  margin: 0;
  font-size: .58rem;
  align-self: center;
}
.creadora-metrica .valor {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  /* Cifras de ancho fijo: sin esto un 1 ocupa menos que un 8 y los
     números bailan de tarjeta en tarjeta. */
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.creadora-metrica .var {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* Sin período anterior no hay variación que mostrar. Un guion apagado
   dice «no hay dato»; un 0% diría «no se movió», que es otra cosa. */
.sin-dato { color: var(--ink3); }

/* Barra de sentiment tripartita. */
.creadora-sentiment {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  margin-bottom: -.6rem;
}
.creadora-sentiment i { display: block; height: 100%; }

/* Leyenda del sentiment.
   Cada etiqueta arranca donde arranca su tramo de color: el ancho de
   cada bloque es el porcentaje que representa. Así se lee de un
   vistazo qué parte de la barra es cuál, sin tener que emparejar
   colores mentalmente.

   Los tramos angostos no se corren de lugar: se les achica la fuente
   (lo hace el PHP, según el porcentaje) y se les deja un mínimo para
   que dos etiquetas nunca se pisen. */
.creadora-leyenda {
  display: flex;
  margin: 0;
  gap: .25rem;
}
.creadora-leyenda .tramo {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 2.5rem;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.creadora-leyenda .tramo-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.creadora-leyenda .tramo-etiqueta {
  font-size: .62rem;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El bloque Con Dove.
   Es lo que decide una renovación de contrato, así que tiene
   tratamiento propio: fondo crema y borde izquierdo dorado, la misma
   señal que usan los detonantes en territorios. */
.creadora-dove {
  background: rgba(227,195,136,.16);
  border-left: 4px solid var(--dove-gold);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: .85rem 1rem;
}
.creadora-dove .rotulo { margin-bottom: .6rem; }

.creadora-dove-datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin-bottom: .75rem;
}
.creadora-dove-datos .valor {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.creadora-dove-datos .menor { display: block; line-height: 1.3; }

.creadora-indice {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid rgba(227,195,136,.55);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.creadora-indice strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.creadora-indice span { font-size: .78rem; color: var(--ink2); }

.creadora-temas { display: flex; flex-wrap: wrap; gap: .35rem; }
.creadora-temas .chip { font-size: .72rem; }


/* --- Tabla ordenable ---
   El encabezado avisa que se puede clickear y muestra hacia dónde
   está ordenando. */
.tabla-ordenable th[data-orden] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tabla-ordenable th[data-orden]:hover { color: var(--dove-navy); }
.tabla-ordenable th[data-orden]::after {
  content: '↕';
  margin-left: .35rem;
  opacity: .3;
  font-size: .8em;
}
.tabla-ordenable th[data-orden].asc::after  { content: '↑'; opacity: 1; color: var(--dove-navy); }
.tabla-ordenable th[data-orden].desc::after { content: '↓'; opacity: 1; color: var(--dove-navy); }


@media (max-width: 720px) {
  .grilla-squad { grid-template-columns: 1fr; }
}