/* Dashboard de líderes. Task 10: tokens (visual spec §3), tipografía, layout base.
   Task 11 agrega los componentes (§4) en la sección 7. Los componentes usan tokens, nunca hex. */

/* ==== 1. Poppins autoalojada (OFL, subconjunto latino) ============================================ */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins-700.woff2") format("woff2"); }

/* ==== 2. Tokens: color (§3.1 claro, §3.3 oscuro), forma y espacio (§3.5) ========================== */
:root {
  --bg: #F5F8FB;
  --surface: #FFFFFF;
  --surface-sunken: #E8EEF3;
  --border: #D7DEE5;
  --text: #0F1720;
  --text-muted: #52606D;
  --primary: #024468;
  --primary-hover: #013652;
  --on-primary: #FFFFFF;
  --focus: #0A5B89;
  --accent: #EAAA0A;
  --ok: #15803D;
  --ok-strong: #0F5C2C;
  --ok-bg: #E7F4EC;
  --warn-bg: #FCF5DF;
  --warn-text: #7A4F00;
  --warn-mark: #B7791F;
  --bad: #B42318;
  --bad-bg: #FDECEA;
  --cat-descarte: #6D4AA8;
  --cat-no-catalogado: #7C93A8;
  --cat-sin-motivo: #6B7280;
  --trama-claro: #C9D0D8;
  /* Dos tramas distintas (45° y -45°) para «Abandonada sin motivo» y «Perdida sin motivo»: nunca solo color */
  --trama-abandonada: repeating-linear-gradient(45deg, var(--cat-sin-motivo) 0 3px, var(--trama-claro) 3px 6px);
  --trama-perdida: repeating-linear-gradient(-45deg, var(--cat-sin-motivo) 0 3px, var(--trama-claro) 3px 6px);
  --trama-sin-fuente: repeating-linear-gradient(45deg, var(--cat-sin-motivo) 0 3px, var(--trama-claro) 3px 6px);
  /* Fuentes: las cuatro de «ads» en una familia de azules, «llamada» en pizarra; cada una con su tinta de texto */
  --fuente-ads1: #024468; --fuente-ads1-fg: #FFFFFF;
  --fuente-ads2: #0A5B89; --fuente-ads2-fg: #FFFFFF;
  --fuente-ads3: #5F9EBF; --fuente-ads3-fg: #0F1720;
  --fuente-ads4: #A9C6D8; --fuente-ads4-fg: #0F1720;
  --fuente-llamada: #334155; --fuente-llamada-fg: #FFFFFF;

  --r-chip: 6px; --r-btn: 10px; --r-card: 16px; --r-banner: 24px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 16px;
  --max-w: 1200px;
  --shadow-sm: 0 1px 2px rgba(2, 68, 104, .08);
  --tap: 44px;
  --h-topbar: 32px; /* barra superior móvil */
  --h-filtros: 45px; /* línea fija de filtros (44 + borde) */
  --h-nav: 57px; /* barra inferior (56 + borde) */
  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1620;
    --surface: #12222F;
    --surface-sunken: #1B2E3D;
    --border: #26394A;
    --text: #E8EEF3;
    --text-muted: #9FB0BF;
    --primary: #5AA9D6;
    --primary-hover: #7DBDE3;
    --on-primary: #0B1620;
    --focus: #5AA9D6;
    --ok: #5BD08A;
    --ok-strong: #5BD08A;
    --warn-text: #F2BD3D;
    --bad: #FF8A80;
    --ok-bg: rgba(91, 208, 138, .16);
    --warn-bg: rgba(242, 189, 61, .16);
    --bad-bg: rgba(255, 138, 128, .16);
    --cat-descarte: #B79CF0;
    --cat-no-catalogado: #7690A8;
    --cat-sin-motivo: #9AA6B2;
    --trama-claro: #26394A;
    --fuente-ads1: #7DBDE3; --fuente-ads1-fg: #0B1620;
    --fuente-ads2: #5AA9D6; --fuente-ads2-fg: #0B1620;
    --fuente-ads3: #3C86B0; --fuente-ads3-fg: #0B1620;
    --fuente-ads4: #285C7C; --fuente-ads4-fg: #E8EEF3;
    --fuente-llamada: #8FA2B5; --fuente-llamada-fg: #0B1620;
    --shadow-sm: none; /* sin sombra en oscuro: separa --border */
  }
}

@media (min-width: 700px) { :root { --gutter: 24px; } }

/* ==== 3. Tipografía (§3.4): móvil / escritorio ==================================================== */
.t-kpi-hero  { font-size: 48px; line-height: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-kpi       { font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-statement { font-size: 24px; line-height: 30px; font-weight: 700; }
.t-title     { font-size: 16px; line-height: 22px; font-weight: 600; }
.t-body      { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-label     { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-nav       { font-size: 12px; line-height: 16px; font-weight: 500; } /* ≥ 12 px también en móvil */
.num        { text-align: right; font-variant-numeric: tabular-nums; }
.muted       { color: var(--text-muted); }

@media (min-width: 700px) {
  .t-kpi-hero  { font-size: 56px; line-height: 60px; }
  .t-kpi       { font-size: 32px; line-height: 36px; }
  .t-statement { font-size: 30px; line-height: 36px; }
  .t-title     { font-size: 18px; line-height: 24px; }
  .t-body      { font-size: 15px; line-height: 22px; }
  .t-nav       { font-size: 14px; line-height: 20px; }
}

/* ==== 4. Base ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Las barras fijas (filtros arriba, navegación abajo) no deben tapar lo enfocado al tabular (WCAG 2.4.11) */
@media (max-width: 699.98px) { html { scroll-padding-top: calc(var(--h-filtros) + var(--s-2)); scroll-padding-bottom: calc(var(--h-nav) + var(--s-2)); } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 14px; line-height: 20px; min-width: 320px; }
@media (min-width: 700px) { body { font-size: 15px; line-height: 22px; } }
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vista:focus { outline: none; }

/* ==== 5. Layout: barra superior, pestañas, navegación inferior (§4, §7) ========================== */
.contenedor { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) var(--s-8); }

/* Móvil: fila delgada (isotipo + frescura en texto) para que la línea fija de filtros quede a < 80 px del borde */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.topbar__in { max-width: var(--max-w); margin: 0 auto; padding: var(--s-1) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--h-topbar); }
.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--text); }
.brand--desk { display: none; min-height: var(--tap); }
.brand__txt { font-weight: 600; }
.logo--desk { display: block; }
.logo--desk img { display: block; height: 32px; width: auto; }
.logo--mov { display: block; }
@media (min-width: 700px) {
  .contenedor { padding-top: var(--s-4); }
  .topbar__in { padding: var(--s-2) var(--gutter); min-height: 56px; }
  .brand--desk { display: flex; }
  .brand--mov { display: none; }
  .brand__txt { padding-left: var(--s-3); border-left: 1px solid var(--border); }
}

/* Frescura: punto + texto siempre (nunca solo color) */
.fresco { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); text-align: right; }
.fresco__punto { flex: none; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--bad); }
.fresco-verde .fresco__punto { background: var(--ok); }
.fresco-ambar .fresco__punto { background: var(--warn-mark); }
.fresco-rojo  .fresco__punto { background: var(--bad); }

.tabs { display: none; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); gap: var(--s-2); }
.tab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4);
  color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--primary); font-weight: 600; border-bottom-color: var(--accent); }
@media (min-width: 700px) { .tabs { display: flex; } }

/* Globo de «Datos»: problemas que afectan publicadas. La cifra se ve; el texto para lectores de pantalla va aparte */
.globo { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-left: var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad);
  font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Navegación inferior: sticky dentro del documento (iframe: sin 100vh ni fixed). 5 elementos iguales, icono + texto de 12 px */
.bottomnav { position: sticky; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); }
.bottomnav__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px 1px; color: var(--text-muted); text-decoration: none; border-top: 3px solid transparent; }
.bottomnav__item[aria-current="page"] { color: var(--primary); font-weight: 600; border-top-color: var(--accent); }
.bottomnav__ico { position: relative; display: inline-flex; }
.bottomnav__ico .globo { position: absolute; top: -8px; left: 55%; margin: 0; }
.nav-ico { flex: none; }
.bottomnav__txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) { .bottomnav { display: none; } }

/* Sub-pestañas de «Datos»: Por corregir | Fuentes */
.subtabs { display: flex; gap: var(--s-2); }
.subtab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--surface); color: var(--text-muted);
  text-decoration: none; font-weight: 600; font-size: 14px; }
.subtab:hover { color: var(--text); }
.subtab[aria-current="page"] { border: 2px solid var(--primary); padding: 0 calc(var(--s-4) - 1px); color: var(--primary); }
@media (min-width: 700px) { .subtab { flex: none; min-width: 160px; } }

/* ==== 6. Filtros y chips (§4 «Chips de filtro») =================================================== */
/* Móvil: una línea fija (sticky, dentro del iframe) con el resumen; al tocarla se abre la hoja con los selects (<details>, sin JS) */
.filtros { position: sticky; top: 0; z-index: 10; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--border); }
.filtros__hoja > summary { list-style: none; }
.filtros__hoja > summary::-webkit-details-marker { display: none; }
.filtros__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap); cursor: pointer; }
.filtros__texto { min-width: 0; color: var(--text-muted); font-size: 14px; line-height: 18px; }
.filtros__texto b { color: var(--primary); font-weight: 600; }
.filtros__flecha { flex: none; color: var(--primary); transition: transform 150ms ease-out; }
.filtros__hoja[open] .filtros__flecha { transform: rotate(180deg); }
.filtros__campos { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1) 0 var(--s-3);
  max-height: calc(100dvh - var(--h-filtros) - var(--h-nav) - var(--s-4)); overflow-y: auto; } /* la hoja abierta nunca pasa del visor */
.filtros__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); align-items: center; }
select.chip { padding-right: 32px; text-overflow: ellipsis; }
.chip { min-width: 0; min-height: var(--tap); padding: 0 var(--s-3); font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-chip); cursor: pointer; }
.chip--activo { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* Un filtro distinto de su valor por defecto se distingue (el periodo siempre tiene valor: su chip aparece abajo si no es el mes actual) */
select.chip:not([name="periodo"]):not(:has(option[value=""]:checked)) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--primary); font-weight: 600; }

/* «vs. periodo anterior»: todo el rótulo es el objetivo (≥ 44 px); la caja se dibuja de 24 px y el input real la cubre */
.comparar { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-2);
  color: var(--text-muted); cursor: pointer; }
.comparar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.comparar__caja { flex: none; position: relative; width: 24px; height: 24px; border: 2px solid var(--text-muted); border-radius: var(--r-chip);
  background: var(--surface); }
.comparar input:checked + .comparar__caja { background: var(--primary); border-color: var(--primary); }
.comparar input:checked + .comparar__caja::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.comparar input:focus-visible + .comparar__caja { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Ficha: «‹ Asesores» a la izquierda de la línea de resumen en móvil; arriba de los filtros en escritorio */
.filtros--ficha { display: flex; align-items: flex-start; gap: var(--s-2); }
.filtros--ficha .filtros__hoja { flex: 1 1 0; min-width: 0; }
#filtros-volver { flex: none; }
.filtros--ficha .volver { white-space: nowrap; }

/* Filtros activos como chips con × (enlaces que quitan solo ese parámetro) */
.chips-activos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.chip-activo { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-pill);
  border: 1px solid var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--primary);
  font-size: 14px; font-weight: 600; text-decoration: none; }
a.chip-activo:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.chip-activo--fijo { border-color: var(--border); background: var(--surface); color: var(--text-muted); }
.chip-activo__x { font-size: 18px; line-height: 1; }

@media (min-width: 700px) {
  /* Escritorio: alineados a la izquierda bajo las pestañas, compactos; «vs. periodo anterior» pegado al periodo */
  .filtros { position: static; margin: 0 0 var(--s-3); padding: 0; background: none; border: 0; }
  .filtros--ficha { flex-direction: column; align-items: flex-start; gap: 0; }
  .filtros--ficha .filtros__hoja { flex: none; }
  .filtros__campos { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: 0; max-height: none; overflow: visible; }
  .filtros__fila { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .filtros__fila:first-child { gap: var(--s-1); }
}
/* Con ::details-content la hoja se ve siempre en escritorio y la línea de resumen sobra; sin soporte queda como en móvil */
@supports selector(::details-content) {
  @media (min-width: 700px) {
    .filtros__hoja::details-content { content-visibility: visible; }
    .filtros__barra { display: none; }
  }
}

/* ==== 7. Componentes de las vistas (§4): se arman solo con los tokens ============================ */
:root { --on-mark: #0F1720; } /* tinta sobre --warn-mark (relleno ámbar): igual en claro y oscuro */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.solo-desk { display: none; }
.izq { text-align: left; }
.vista { display: flex; flex-direction: column; gap: var(--s-3); }
ul, ol { list-style: none; margin: 0; padding: 0; }
b { font-weight: 600; }

/* Tarjeta de panel y su cabecera */
.tarjeta-panel { background: var(--surface); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.tarjeta-panel__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-4); }
.vacio { padding: var(--s-6); align-items: flex-start; }
.boton { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-btn);
  background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; }
.boton:hover { background: var(--primary-hover); color: var(--on-primary); }

/* Botón «Continuar con Google»: ancho completo, borde y logo, en claro y oscuro */
.boton-google { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; min-height: var(--tap);
  padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--surface);
  color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton-google:hover { background: var(--bg); color: inherit; }
.boton-google__logo { flex: none; }
.entrada-google { display: block; max-width: 20rem; margin-inline: auto; }

/* Chips de estado (icono + palabra), chips neutros, variación */
.chip-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.chip-estado--ok, .celda--ok { background: var(--ok-bg); color: var(--ok-strong); }
.chip-estado--rev, .celda--rev { background: var(--warn-bg); color: var(--warn-text); }
.chip-estado--bad, .celda--bad { background: var(--bad-bg); color: var(--bad); }
.chip-estado--vacio, .celda--vacio { background: var(--surface-sunken); color: var(--text-muted); }
.chip-neutro { display: inline-block; padding: 3px 8px; border-radius: var(--r-chip); background: var(--surface-sunken);
  color: var(--text); font-size: 12px; line-height: 16px; }
.mejorar { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.delta { font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--text-muted); }
.delta--bueno { color: var(--ok); }
.delta--malo { color: var(--bad); }
.delta__ctx { display: none; }
.dato--rev { color: var(--warn-text); font-weight: 600; }
.dato--bad { color: var(--bad); font-weight: 600; }

/* Banner de estado (radio 24) */
.banner { border-radius: var(--r-banner); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.banner--ok { background: var(--ok-bg); } .banner--rev { background: var(--warn-bg); }
.banner--bad { background: var(--bad-bg); } .banner--vacio { background: var(--surface-sunken); }
.banner--neutro { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.banner__texto { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.banner__etiqueta { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.banner--ok .banner__etiqueta { color: var(--ok-strong); } .banner--rev .banner__etiqueta { color: var(--warn-text); }
.banner--bad .banner__etiqueta { color: var(--bad); } .banner--vacio .banner__etiqueta { color: var(--text-muted); }
.banner--neutro .banner__etiqueta { color: var(--primary); }
.banner__ctx { color: var(--text-muted); }
.banner__hero { display: flex; flex-direction: column; gap: var(--s-2); }
.banner__cifra { display: none; align-items: baseline; gap: var(--s-2); }
.banner__de { font-size: 18px; }
.banner__pie { display: flex; justify-content: space-between; gap: var(--s-2); }
.banner__asesores { display: none; }

/* Barras de avance con marca de ritmo */
.barra { position: relative; height: 8px; border-radius: 4px; background: var(--surface-sunken); }
.banner .barra { background: color-mix(in srgb, var(--primary) 14%, transparent); margin-top: var(--s-1); }
.barra__relleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--primary); }
.barra__ritmo { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--accent); }

/* Resumen: columna única (banner > Arriendos | Ventas > lo que más pesa > indicadores > embudo y tira) */
@media (max-width: 699.98px) { .resumen .banner { padding: var(--s-4); gap: var(--s-2); } }
.resumen { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
/* Calidad: lista principal y, a su lado en escritorio, cierres sin motivo por asesor */
.calidad-cols, .calidad-cols__principal, .calidad-cols__lateral { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.resumen__detalle { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }

/* Arriendos | Ventas compacto: cada tarjeta es un enlace a Equipos filtrado por negocio */
.neg-mini__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.neg-mini__tarjeta { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-3); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; }
.neg-mini__tarjeta:hover { color: var(--text); background: var(--surface-sunken); }
.neg-mini__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-1) var(--s-2); }
.neg-mini__cifra { display: flex; align-items: baseline; gap: var(--s-1); }
.neg-mini__cifra .t-kpi { text-align: left; }
.neg-mini__nota { margin-top: 0; }

/* Embudo y tira: <details> plegables en móvil. En escritorio (::details-content) el cuerpo se ve siempre y el resumen es solo el título */
.plegable { padding: 0; gap: 0; }
.plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap);
  padding: 0 var(--s-4); cursor: pointer; list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 150ms ease-out; }
.plegable[open] > summary::after { transform: rotate(-135deg); }
.plegable__cuerpo { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-1) var(--s-4) var(--s-4); }

/* Indicadores: filas en móvil, tarjetas en escritorio */
.kpis { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.kpi { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px;
  padding: 0 var(--s-4); border-bottom: 1px solid var(--surface-sunken); }
.kpi:last-child { border-bottom: 0; }
.kpi__nombre { color: var(--text-muted); }
.kpi__der { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 10px; }
.kpi__valor { font-size: 18px; line-height: 24px; font-weight: 600; min-width: 56px; }

/* Lo que más pesa hoy */
.pesa__fila { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; color: var(--text);
  text-decoration: none; border-top: 1px solid var(--surface-sunken); }
.pesa__fila:hover { background: var(--surface-sunken); color: var(--text); }
.pesa__n { flex: none; min-width: 36px; height: 32px; padding: 0 4px; border-radius: var(--r-btn); font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.pesa__n--bad { background: var(--bad-bg); color: var(--bad); } .pesa__n--rev { background: var(--warn-bg); color: var(--warn-text); }
.pesa__texto { flex: 1; min-width: 0; }
.pesa__flecha { color: var(--text-muted); font-size: 18px; }
.todas > summary, .mas-equipos > summary, .orden-movil > summary { display: flex; align-items: center; min-height: var(--tap);
  cursor: pointer; color: var(--primary); font-weight: 600; font-size: 13px; }
.mas-equipos > summary { justify-content: center; }
.alertas { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-2); }
.alertas li { padding-left: var(--s-4); position: relative; }
.alertas li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-mark); }

/* Embudo y tira de publicadas por día */
.embudo { display: flex; flex-direction: column; gap: var(--s-1); }
.embudo__fila { display: grid; grid-template-columns: 132px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 36px; }
.embudo__etapa { display: flex; flex-direction: column; }
.embudo__nombre { font-size: 12px; line-height: 14px; color: var(--text-muted); }
.embudo__pista { height: 10px; border-radius: 5px; background: var(--surface-sunken); }
.embudo__relleno { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 70%, transparent); }
.embudo__fila--critica .embudo__relleno { background: var(--bad); }
.embudo__fila--critica b { color: var(--bad); }
.embudo__n { font-weight: 600; }
.embudo__nota--critica { color: var(--bad); font-weight: 500; }
.tira { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--s-1); }
.dia { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.dia__n { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-chip); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: var(--surface-sunken); color: var(--text-muted); }
.dia--bajo .dia__n { background: color-mix(in srgb, var(--primary) 25%, var(--surface)); color: var(--text); }
.dia--alto .dia__n { background: var(--primary); color: var(--on-primary); }
.dia--bloque .dia__n, .leyenda__muestra.dia--bloque { background: var(--warn-mark); color: var(--on-mark); border: 2px solid var(--warn-text); }
.dia__fecha { display: none; color: var(--text-muted); }
.leyenda, .leyenda-tira { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.leyenda li { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.leyenda__muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.leyenda__ritmo { display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }

/* Equipos: negocios, ciudades, mapa de calor */
.negocios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.negocio { padding: var(--s-3); gap: var(--s-2); }
.negocio__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0;
  border-top: 1px solid var(--surface-sunken); padding-top: var(--s-3); }
.datos dd { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; text-align: left; }
.dos-col { display: flex; flex-direction: column; gap: var(--s-3); }
.ciudades { display: flex; flex-direction: column; gap: var(--s-4); }
.ciudad { display: flex; flex-direction: column; gap: 6px; }
.ciudad__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ciudad__cifra { display: inline-flex; align-items: center; gap: var(--s-2); }
.mapa { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.mapa th { font-weight: 500; color: var(--text-muted); text-align: center; }
.mapa tbody th { text-align: left; color: var(--text); width: 88px; }
.celda { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border-radius: var(--r-btn);
  text-decoration: none; text-align: center; padding: var(--s-1); }
.celda b { font-size: 18px; line-height: 24px; font-weight: 700; }
.celda:hover { filter: brightness(.96); }
a.celda--ok:hover { color: var(--ok-strong); } a.celda--rev:hover { color: var(--warn-text); } a.celda--bad:hover { color: var(--bad); }

/* Tabla (≥700) ↔ tarjetas (móvil): el mismo contenido, el CSS muestra una u otra */
.tabla { display: none; overflow-x: auto; }
.tabla table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 10px 8px; text-align: left; font-weight: 400; vertical-align: middle; }
.tabla thead th { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla tbody tr { border-top: 1px solid var(--surface-sunken); }
.tabla tbody tr:hover { background: var(--bg); }
.tabla th:first-child, .tabla td:first-child { padding-left: var(--s-5); }
.tabla th:last-child, .tabla td:last-child { padding-right: var(--s-5); }
.tabla tbody th { font-weight: 600; }
.celda-enlace, .asesor-enlace { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); color: var(--text);
  text-decoration: none; }
.th-orden { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-1); min-width: var(--tap); min-height: var(--tap);
  padding: 0 var(--s-1); color: var(--text-muted); text-decoration: none; }
th.izq .th-orden { justify-content: flex-start; }
.th-orden--activa { color: var(--primary); font-weight: 600; }
.tarjetas, .tarjetas ul { display: flex; flex-direction: column; gap: 10px; }
.tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; }
.tarjeta:hover { color: var(--text); }
.tarjeta__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }
.tarjeta__nombre { display: flex; flex-direction: column; min-width: 0; }
.tarjeta__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.tarjeta__cifras > span { display: flex; flex-direction: column; }
.tarjeta__cifras b { font-size: 20px; line-height: 26px; font-weight: 700; text-align: left; }
.tarjeta__mejorar { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.mas-equipos[open] > summary { margin-bottom: 10px; }
.orden-movil ul { padding-bottom: var(--s-2); }
.orden-movil li a { display: flex; align-items: center; min-height: var(--tap); }
.pie-tabla { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--surface-sunken); }

/* Segmentos del grupo de asesores: rejilla 2x2 en móvil (sin scroll horizontal), 4 en escritorio */
.segmentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.segmento { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap); padding: 6px 12px;
  border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 13px; line-height: 16px; }
.segmento__etiqueta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.segmento--ok .segmento__etiqueta { color: var(--ok-strong); } .segmento--rev .segmento__etiqueta { color: var(--warn-text); }
.segmento--bad .segmento__etiqueta { color: var(--bad); }
.segmento--activo { border: 2px solid var(--primary); padding: 5px 11px; }
.segmento .segmento__n { font-size: 14px; line-height: 20px; }

/* Asesores: grupos, motivo, homónimos, explicación de reglas */
.clasifica > summary, .grupo > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; }
.clasifica > summary { color: var(--primary); font-weight: 600; font-size: 13px; }
.clasifica__reglas { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1) 0 var(--s-2); }
.clasifica__reglas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.grupo__cab h2 { display: inline-flex; align-items: center; gap: var(--s-2); }
.grupo--bad .grupo__cab h2 { color: var(--bad); } .grupo--rev .grupo__cab h2 { color: var(--warn-text); } .grupo--ok .grupo__cab h2 { color: var(--ok-strong); }
.grupo > summary { padding: 0; list-style: none; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 16px; }
.grupo[open] > summary::after { content: "▴"; }
.grupo__cab { display: flex; align-items: center; min-height: var(--tap); }
.grupo:not([open]) > .grupo__cab { margin: 0; }
.grupo[open] > summary { margin-bottom: var(--s-2); }
.asesor__nombre, .asesor__equipo { display: block; white-space: nowrap; }
.asesor__equipo--homonimo { color: var(--text); font-weight: 600; }
.nowrap { white-space: nowrap; }
.motivo { display: block; color: var(--text); }
.marca-bloque { display: inline-flex; align-items: center; padding: 0 var(--s-2); border-radius: var(--r-chip); background: var(--warn-bg);
  color: var(--warn-text); font-weight: 600; }
.grupo-celda { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tarjeta__motivo { display: block; }
.accion-ficha { display: flex; flex-direction: column; gap: var(--s-1); }
.nota-bloque { padding: var(--s-2) 0 0; }

/* Pérdidas y Fuentes: marcas de color (el nombre siempre va escrito al lado), barras, mapa categoría × etapa */
.marca { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.pista { display: block; height: 10px; border-radius: 5px; background: var(--surface-sunken); overflow: hidden; }
.pista--fina { height: 6px; border-radius: 3px; }
.pista__relleno { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.marca-cat--comercial { background: var(--bad); }
.marca-cat--descarte { background: var(--cat-descarte); }
.marca-cat--sin-respuesta { background: var(--text-muted); }
.marca-cat--abandonada { background: var(--trama-abandonada); }
.marca-cat--perdida-sin-motivo { background: var(--trama-perdida); }
.marca-cat--no-catalogado { background: var(--cat-no-catalogado); border: 2px dashed var(--text-muted); }
.marca-cat--otra { background: var(--cat-sin-motivo); }
.fuente--ads1 { background: var(--fuente-ads1); color: var(--fuente-ads1-fg); }
.fuente--ads2 { background: var(--fuente-ads2); color: var(--fuente-ads2-fg); }
.fuente--ads3 { background: var(--fuente-ads3); color: var(--fuente-ads3-fg); }
.fuente--ads4 { background: var(--fuente-ads4); color: var(--fuente-ads4-fg); }
.fuente--llamada { background: var(--fuente-llamada); color: var(--fuente-llamada-fg); }
.fuente--sin { background: var(--trama-sin-fuente); color: var(--text); }
.dato--ok { color: var(--ok-strong); font-weight: 600; }
.dato--vacio { color: var(--text-muted); }
.kpi__nota { display: none; }

.categorias { display: flex; flex-direction: column; }
.categoria { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: 10px 0;
  border-top: 1px solid var(--surface-sunken); }
.categoria__nombre { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; font-weight: 500; }
.categoria__total { font-size: 20px; line-height: 26px; font-weight: 700; }
.categoria__quien { grid-column: 1 / -1; justify-self: start; }
.filas-barra { display: flex; flex-direction: column; gap: 10px; }
.fila-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "p p"; gap: 4px 12px;
  align-items: center; font-size: 13px; }
.fila-barra__nombre { grid-area: n; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fila-barra__titulo { display: inline-flex; align-items: center; gap: var(--s-2); }
.fila-barra a.fila-barra__titulo { min-height: var(--tap); color: var(--text); text-decoration: none; font-weight: 500; }
.fila-barra a.fila-barra__titulo:hover { color: var(--primary); text-decoration: underline; }
.fila-barra .pista { grid-area: p; }
.fila-barra > b { grid-area: v; }
.fila-barra--corte .pista__relleno { background: color-mix(in srgb, var(--text) 70%, transparent); }
.fila-barra--corte .pista__relleno--bad { background: var(--bad); }
.cortes { display: flex; flex-direction: column; gap: var(--s-3); }
.tabla-scroll { overflow-x: auto; }
.mapa-etapas { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.mapa-etapas th { font-weight: 500; color: var(--text-muted); text-align: center; }
.mapa-etapas tbody th { text-align: left; color: var(--text); width: 150px; }
.celda-n { height: var(--tap); text-align: center; border-radius: var(--r-chip); font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--primary) var(--i, 0%), var(--bg)); color: var(--text); }

.fuente-nombre { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 600; }
.tarjeta__cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.semanas { display: flex; flex-direction: column; gap: var(--s-4); }
.semana__cab { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 13px; margin-bottom: 6px; }
.apilada { display: flex; gap: 2px; height: 30px; border-radius: var(--r-chip); overflow: hidden; }
.tramo.fuente--sin > span[aria-hidden] { background: var(--surface); color: var(--text); padding: 0 6px; border-radius: var(--r-chip); }
.tramo { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 12px; font-weight: 600; }
.participacion { display: flex; flex-direction: column; gap: var(--s-3); }
.part { display: flex; flex-direction: column; gap: 5px; }
.part__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: 13px; }
.part__fila { display: flex; align-items: center; gap: var(--s-2); }
.part__fila .pista { flex: 1; min-width: 0; }
.part__rotulo { flex: none; width: 64px; }
.pista__relleno--leads { background: color-mix(in srgb, var(--text) 35%, transparent); }
.tiempos-movil { display: flex; flex-direction: column; }
.tiempo-fila { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center;
  min-height: var(--tap); padding: 6px 0; border-top: 1px solid var(--surface-sunken); font-size: 13px; }
.tiempo-fila > span { display: flex; flex-direction: column; align-items: flex-end; }

/* Calidad del dato: conteos, pestañas de problema, enlaces a GHL */
.pista__relleno--bad { background: var(--bad); }
.enlace-ghl { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-2); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap; }
.enlace-ghl:hover { text-decoration: underline; }
.conteos { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.conteo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre n" "afecta n"; gap: 2px var(--s-3);
  align-items: center; min-height: 56px; padding: 8px var(--s-4); border-bottom: 1px solid var(--surface-sunken); }
.conteo:last-child { border-bottom: 0; }
.conteo__nombre { grid-area: nombre; color: var(--text-muted); line-height: 1.3; }
.conteo__n { grid-area: n; font-size: 22px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.conteo__afecta { grid-area: afecta; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.conteo__afecta--bad { color: var(--bad); } .conteo__afecta--rev { color: var(--warn-text); } .conteo__afecta--vacio { color: var(--text-muted); }
.conteo--sin-enlace { background: var(--bg); border: 1px dashed var(--text-muted); }
.conteo--sin-enlace .conteo__n { color: var(--cat-sin-motivo); }
.conteo--sin-enlace .conteo__afecta { font-weight: 400; color: var(--text-muted); }
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--s-1); }
.pestana { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-btn);
  border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.pestana--bad { color: var(--bad); } .pestana--rev { color: var(--warn-text); }
.pestana--activa { border: 2px solid var(--primary); padding: 0 13px; }
.tarjeta__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.tarjeta .chip-estado { align-self: flex-start; }
.vacio-lista { padding: var(--s-2) 0; }
.bloque__n { display: flex; align-items: baseline; gap: var(--s-2); }

/* Ficha del asesor */
.volver { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--tap); padding-right: var(--s-2);
  font-weight: 600; text-decoration: none; }
.ficha-cab__etq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ficha-cab .chip-estado { background: var(--surface); }
.ficha-cifras { display: flex; gap: var(--s-6); margin: 0; }
.ficha-cifras dd { margin: 0; font-size: 28px; line-height: 32px; font-weight: 700; text-align: left; }
.ficha-cifras dd .muted { font-size: 16px; font-weight: 400; }
.comparacion { display: flex; flex-direction: column; }
.comparacion__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre juicio" "barra barra" "valor valor";
  gap: 6px var(--s-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--surface-sunken); font-size: 13px; }
.comparacion__nombre { grid-area: nombre; line-height: 1.3; }
.comparacion__barra { grid-area: barra; position: relative; overflow: visible; }
.comparacion__barra .pista__relleno { border-radius: 5px; }
.comparacion__valor { grid-area: valor; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.comparacion__juicio { grid-area: juicio; justify-self: end; }
.marca-mediana { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); }
.marca-mediana--leyenda { position: static; display: inline-block; width: 3px; height: 12px; margin: 0; }
.comparacion__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--surface-sunken); }
.leyenda-mediana { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.chip-neutro--bad { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.tarjeta__cifras--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meta-linea { display: inline-block; width: 14px; border-top: 2px dashed var(--accent); }
.meses { position: relative; display: flex; gap: var(--s-3); height: 190px; }
.mes { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mes__pista { position: relative; flex: 1; width: 100%; }
.mes__pista::before { content: ""; position: absolute; left: -6px; right: -6px; bottom: var(--meta); border-top: 2px dashed var(--accent); }
.mes__barra { position: absolute; left: 0; right: 0; bottom: 0; min-height: 3px; border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--primary) 55%, var(--surface)); }
.mes__barra--meta { background: var(--primary); }
.mes--actual .mes__barra { background: var(--surface); border: 2px solid var(--primary); border-bottom: 0; }

/* ---- Escritorio: un solo breakpoint ---- */
@media (min-width: 700px) {
  .vista { gap: var(--s-5); }
  .solo-desk, .delta__ctx { display: inline; }
  .tarjeta-panel { padding: var(--s-5); }
  .banner { padding: var(--s-5) 28px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-10); }
  .banner__texto { flex: 1 1 340px; }
  .banner__hero { flex: 1 1 240px; min-width: 0; }
  .banner__cifra { display: flex; flex-wrap: wrap; }
  .banner__cifra .t-label { flex-basis: 100%; }
  .banner__asesores { display: block; }
  .banner .barra, .barra--grande { height: 10px; border-radius: 5px; }
  .resumen { gap: var(--s-4); }
  .calidad-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s-5); align-items: start; }
  .resumen__detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
  .neg-mini__lista { gap: var(--s-4); }
  .neg-mini__tarjeta { padding: var(--s-4) var(--s-5); }
  .plegable__cuerpo { padding: var(--s-1) var(--s-5) var(--s-5); }
  .plegable > summary { padding: 0 var(--s-5); }
  .kpis { background: none; box-shadow: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); border: 0; padding: var(--s-4);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .kpi__der { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kpi__valor { font-size: 26px; line-height: 32px; font-weight: 700; text-align: left; }
  .pesa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
  .pesa__fila { min-height: 56px; }
  .pesa__fila:hover { background: none; }
  .embudo { gap: 0; }
  .embudo__fila { grid-template-columns: 230px minmax(0, 1fr) 44px; min-height: 28px; }
  .embudo__etapa { flex-direction: row; align-items: baseline; gap: var(--s-2); }
  .resumen__detalle .tira { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
  .tira { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
  .dia__fecha { display: block; }
  .negocios { gap: var(--s-5); }
  .negocio { padding: 22px; gap: 14px; }
  .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .datos dd { font-size: 20px; }
  .dos-col { flex-direction: row; align-items: stretch; }
  .dos-col > * { flex: 1 1 0; }
  .mapa tbody th { width: 110px; }
  .tabla { display: block; }
  .tarjetas { display: none; }
  .tarjeta-panel--tabla { padding: 0; overflow: hidden; }
  .tarjeta-panel--tabla > .tarjeta-panel__cab { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--surface-sunken); }
  .orden-movil { display: none; }
  .grupo__cab { padding: var(--s-1) var(--s-5); }
  .grupo[open] > summary { margin-bottom: 0; }
  .grupo--bad, .grupo--rev, .grupo--ok { border-top: 0; }
  .tabla th.asesor, .tabla td.asesor { min-width: 190px; }
  .nota-bloque { padding: var(--s-2) var(--s-5) 0; }
  .accion-ficha { flex-direction: row; align-items: baseline; gap: var(--s-4); }
  .segmentos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .segmento { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: var(--s-3) var(--s-4);
    border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-card); font-weight: 500; }
  .segmento--activo { border: 0; padding: var(--s-3) var(--s-4); box-shadow: inset 0 0 0 2px var(--primary); }
  .segmento .segmento__n { font-size: 28px; line-height: 32px; color: var(--text); }
  .segmento--bad .segmento__n { color: var(--bad); }
  .kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi__nota { display: block; }
  /* Resumen: tres indicadores en una fila baja (nombre a la izquierda, cifra a la derecha) */
  .kpis--3 .kpi { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 var(--s-5); min-height: 56px; gap: var(--s-3); }
  .kpis--3 .kpi__der { flex-direction: row-reverse; align-items: baseline; gap: 10px; }
  .kpis--3 .kpi__valor { font-size: 22px; line-height: 28px; text-align: right; }
  .kpis--3 .kpi__nota { display: none; }
  .categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); }
  .categoria { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3);
    border: 1px solid var(--surface-sunken); border-radius: var(--r-card); }
  .categoria__total { font-size: 28px; line-height: 32px; }
  .fila-barra { grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) 40px; grid-template-areas: "n p v"; gap: 12px; }
  .fila-barra--corte { grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) 40px; }
  .cortes { flex-direction: row; flex-wrap: wrap; gap: var(--s-5); }
  .cortes > * { flex: 1 1 300px; }
  .tarjeta-panel--tabla > .nota-tiempos { padding: var(--s-3) var(--s-5) 0; }
  .conteos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); background: none; box-shadow: none; }
  .conteo { grid-template-columns: 1fr; grid-template-areas: "nombre" "n" "afecta"; align-content: start; justify-items: start; gap: 6px;
    min-height: 0; padding: var(--s-4); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); border-bottom: 0; }
  .conteo__nombre { min-height: 34px; font-size: 13px; }
  .conteo__n { font-size: 30px; line-height: 36px; text-align: left; }
  .conteo--sin-enlace { background: var(--bg); box-shadow: none; border: 1px dashed var(--text-muted); }
  .ficha-cab { justify-content: space-between; align-items: flex-start; }
  .ficha-cab .banner__texto { flex: 1 1 480px; }
  .ficha-cifras { flex: none; gap: 28px; }
  .ficha-cifras dd { font-size: 40px; line-height: 44px; }
  .comparacion__fila { grid-template-columns: 132px minmax(0, 1fr) 120px 100px; grid-template-areas: "nombre barra valor juicio"; gap: 14px; min-height: 52px; padding: 0; }
  .comparacion__valor { flex-direction: column; align-items: flex-end; gap: 0; }
  .comparacion__juicio { justify-self: stretch; display: flex; justify-content: center; }
  .meses { height: 210px; }
}
@media (max-width: 699px) {
  .tarjeta-panel--tabla { background: none; box-shadow: none; padding: 0; }
  .tarjeta-panel--tabla > .tarjeta-panel__cab { padding: 0; }
  .pie-tabla { border: 0; padding: 0; }
}

/* Con ::details-content el embudo y la tira se ven siempre en escritorio: el <summary> se oculta del todo (sale del orden de tabulación
   y del árbol de accesibilidad) y el título es un <h2> real dentro del cuerpo. Sin soporte, el <summary> sigue funcionando en todos los anchos. */
.plegable__titulo { display: none; }
@supports selector(::details-content) {
  @media (min-width: 700px) {
    .plegable::details-content { content-visibility: visible; }
    .plegable > summary { display: none; }
    .plegable__titulo { display: block; }
    .plegable__cuerpo { padding-top: var(--s-4); }
  }
}

/* ==== 8. Movimiento y accesibilidad (§7) ========================================================== */
.vista.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.vista.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }
button:active, .chip:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  button:active, .chip:active { transform: none; }
}
.topbar .boton-google { width: auto; padding: 0 var(--s-3); font-size: 13px; }