/* LA PANTALLA TIENDA CON ANALÍTICA (2-oct-2026). Calcada del boceto aprobado (briox-admin/boceto-tienda-analitica.html).
   Todo encerrado en #ta: no toca ni un estilo del resto del panel. Plan: docs/tandas-tienda-analitica.md */
#ta{
  color-scheme: light;
  --bg:#f2f2f2; --card:#fff; --linea:#e4e4e4; --tx:#141414; --tx2:#555; --tx3:#6e6e6e;
  --oro:#ffb500; --azul:#0071e3; --teal:#00a2b8; --rojo:#d70015; --rojo-f:#fdecee; --ambar:#b25000;
  --verde:#1a7f37; --cebra:#f6f6f6; --cab:#ececec;
  --azul-s:#cfe3fa; --azul-s2:#a9cdf4;   /* el ritmo del récord del mes, rayado: azul claro sólido, nunca azul con opacidad */
  --es:#2b2b2b; --pt:#7d7d7d; --fr:#bdbdbd;
  --r:16px; --r2:12px;
}
#ta *{box-sizing:border-box}
#ta{color:var(--tx);font-family:var(--f-app);font-size:14px;line-height:1.45}
#ta .pag{max-width:1240px;margin:0 auto;padding:22px 24px 80px}
/* 26-oct: Tienda ocupa TODA la pantalla (JB: «ocupa toda la pantalla, no te limites tanto!!»). El tope de 1.200 px es del marco
   común del panel (.pa-content, en index.html): aquí se quita solo mientras Tienda está abierta; las demás pestañas no cambian.
   Las gráficas miden su caja y se vuelven a dibujar al cambiar el ancho, así la letra sigue a 12 px y no crece con la pantalla. */
.pa-content:has(> [data-view="tienda"]:not([hidden])){max-width:none}
@media (min-width:1600px){ .pa-content:has(> [data-view="tienda"]:not([hidden])){padding-left:clamp(22px,2vw,44px);padding-right:clamp(22px,2vw,44px)} }   /* el margen del móvil (14 px) no se toca */
#ta button:not(:where(.rc-dp button)){font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}   /* el selector de periodo trae su aspecto: recorrido.css */
#ta .num{font-variant-numeric:tabular-nums}
#ta .cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
#ta .cab h1{font-size:30px;font-weight:800;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
#ta .cab h1 svg{width:28px;height:28px}
#ta .pildoras{display:inline-flex;background:#e7e7e7;border-radius:999px;padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}   /* en el móvil se desliza de lado en vez de salirse de la pantalla (3-nov: 145 px fuera) */
#ta .pildoras button{padding:6px 13px;border-radius:999px;font-weight:600;font-size:13px;color:var(--tx2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
#ta .pildoras button.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08)}
#ta .pildoras .p{width:8px;height:8px;border-radius:50%}
#ta .filtros{position:relative;z-index:30;container-type:inline-size;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 18px}
@container (min-width:621px){ #ta .rc-dp-panel{left:0;right:auto;transform-origin:top left} }   /* el botón va a la izquierda: el desplegable nace hacia la derecha */
/* en el móvil el selector abre una hoja fija desde abajo (recorrido.css): mientras está abierta, los filtros suben por encima de la barra de
   abajo del panel (z-index 9000), porque su capa (30) encerraba la hoja debajo de ella (2-nov-2026) */
#ta .filtros:has(.rc-dp.abierto){z-index:9600}
#ta .fecha{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linea);border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px}
#ta .fecha svg{width:16px;height:16px;color:var(--azul)}
#ta .ahora{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}
#ta .ahora.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}   /* las cuatro de arriba; antes iba escrito en la página y pisaba el móvil (2-nov) */
#ta .losa{background:var(--card);border:1px solid var(--linea);border-radius:var(--r2);padding:12px 14px;display:flex;align-items:center;gap:12px}
#ta .losa .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#f1f1f1;flex-shrink:0}
#ta .losa .ic svg{width:19px;height:19px}
#ta .losa b{font-size:22px;font-weight:800;line-height:1}
#ta .losa span{display:block;font-size:12.5px;color:var(--tx2);font-weight:500}
#ta .vivo{width:8px;height:8px;border-radius:50%;background:var(--verde);display:inline-block;margin-left:6px;vertical-align:middle}
#ta .sw{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-weight:700;font-size:12.5px;color:var(--verde)}
#ta .sw i{width:40px;height:24px;border-radius:999px;background:var(--verde);position:relative;display:inline-block}
#ta .sw i:after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
#ta .sec{margin-top:30px}
#ta .sec-cab{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
#ta .sec-cab h2{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;margin:0}
#ta .sec-cab .cuadro{width:32px;height:32px;border-radius:9px;background:#141414;color:#fff;display:grid;place-items:center;flex-shrink:0}
#ta .sec-cab .cuadro svg{width:18px;height:18px}
#ta .sec-cab small{color:var(--tx3);font-size:13px;font-weight:500}
#ta .card{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px}
#ta .dos{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:1700px){ #ta .dos{grid-template-columns:minmax(0,1fr) minmax(400px,560px)} }   /* 26-oct: «Lo que está pasando» se lee a su ancho; la gráfica se queda el resto (va DESPUÉS de la regla de arriba: si no, no manda) */
#ta .rot{font-size:13px;color:var(--tx2);font-weight:600;display:flex;align-items:center;gap:8px}
#ta .rot svg{width:16px;height:16px;color:var(--tx3)}
#ta .heroe{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:6px 0 4px}
#ta .vs{font-weight:600;font-size:14px}
#ta .vs.sube{color:var(--verde)}
#ta .vs.baja{color:var(--rojo)}
#ta .vs.nada{color:var(--tx3)}
#ta .barra{display:flex;height:12px;border-radius:999px;overflow:hidden;margin:14px 0 8px;background:#eee}
#ta .leyenda{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--tx2)}
#ta .leyenda b{color:var(--tx);font-weight:700}
#ta .p{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
#ta .graf{margin-top:16px}
#ta .graf svg{width:100%;height:auto;display:block;overflow:visible}
#ta .graf text{font-family:var(--f-app)}
/* la media por día de la semana, bajo la gráfica de días (5-oct). La mejor, en azul (= importante) */
#ta .semana{margin-top:20px}
#ta .semana .tit-av{margin-bottom:10px;gap:12px;flex-wrap:wrap}
#ta .sd-fila{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
#ta .sd{background:var(--cebra);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
#ta .sd span{font-size:12.5px;font-weight:600;color:var(--tx2)}
#ta .sd b{font-size:17px;font-weight:700;white-space:nowrap}
#ta .sd i{display:block;height:4px;border-radius:2px;background:#c4c4c4;margin:2px 0}
#ta .sd small{font-size:12px;color:var(--tx2);white-space:nowrap}
#ta .sd.top b{color:var(--azul)}
#ta .sd.top i{background:var(--azul)}
#ta .sd.nada b,#ta .sd.nada small{color:var(--tx3)}
#ta .aviso{border-radius:var(--r2);padding:12px 14px;display:flex;gap:12px;background:#f7f7f7;margin-bottom:10px}
#ta .aviso .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#fff}
#ta .aviso .ic svg{width:18px;height:18px}
#ta .aviso b{font-weight:700;font-size:14px;display:block}
#ta .aviso span{font-size:12.5px;color:var(--tx2)}
#ta .aviso.rojo{background:var(--rojo);color:#fff}
#ta .aviso.rojo span{color:#ffe3e6}
#ta .aviso.rojo .ic{background:rgba(255,255,255,.18);color:#fff}
#ta .aviso.ambar .ic{color:var(--ambar)}
#ta .aviso.ok .ic{color:var(--verde)}
#ta .tit-av{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#ta .tit-av b{font-size:15px}
#ta .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
/* El récord del mes (JB, 20-oct-2026): la barra hacia el siguiente récord, el ritmo rayado y los mejores meses. */
#ta .rc{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:18px 32px;margin-top:14px}
#ta .rc-logro{display:flex;align-items:flex-start;gap:8px;font-weight:600;font-size:14px;line-height:1.45;color:var(--verde);margin-top:4px}
#ta .rc-logro svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
#ta .rc-pista{position:relative;height:12px;border-radius:999px;background:#eee;margin:38px 0 12px}
#ta .rc-hecho{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--azul)}
#ta .rc-hecho.todo{background:var(--verde)}
#ta .rc-ritmo{position:absolute;top:0;bottom:0;border-radius:0 999px 999px 0;background:repeating-linear-gradient(135deg,var(--azul-s) 0 5px,var(--azul-s2) 5px 10px)}
#ta .rc-marca{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;border-radius:2px;background:#141414}
#ta .rc-marca.pasada{background:var(--verde)}
#ta .rc-marca span{position:absolute;bottom:calc(100% + 5px);font-size:13px;font-weight:700;white-space:nowrap;color:var(--tx)}
#ta .rc-marca.izq span{left:0}
#ta .rc-marca.der span{right:0}
#ta .rc-sig{font-size:14px;font-weight:600;color:var(--tx);line-height:1.5}
#ta .rc-sig b{color:var(--azul)}
#ta .rc-txt{font-size:13.5px;color:var(--tx2);line-height:1.5;margin-top:6px}
#ta .rc-txt b{color:var(--tx)}
#ta .rc-fila{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--cebra);border-radius:var(--r2);padding:9px 12px;margin-top:8px}
#ta .rc-n{font-weight:700;color:var(--tx3);font-size:14px}
#ta .rc-m{font-weight:600;font-size:14px;min-width:0}
#ta .rc-m small{display:block;font-size:12.5px;font-weight:500;color:var(--tx2);white-space:nowrap}
#ta .rc-fila b{font-size:17px;font-weight:700;white-space:nowrap}
#ta .rc-fila.hoy b{color:var(--azul)}
#ta .rc-fila.vieja b,#ta .rc-fila.vieja .rc-m{color:var(--tx2)}
#ta .rc-sep{font-size:12.5px;font-weight:600;color:var(--tx3);margin:16px 2px 0}
#ta .rc-dia{font-size:13px;color:var(--tx2);margin:14px 2px 0;line-height:1.5}
#ta .rc-dia b{color:var(--tx)}
#ta .rc-nw{white-space:nowrap}
#ta #ta-rcHeroe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:12px}   /* la losa al lado de la cifra o, si no cabe, debajo y sin sangría */
#ta .rc-nuevo{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--verde);color:#fff;font-size:14px;font-weight:800;letter-spacing:0}
#ta .rc-nuevo svg{width:16px;height:16px}
#ta .kpi{background:var(--card);border:1px solid #d9d9d9;border-radius:var(--r2);padding:16px;display:flex;gap:12px;align-items:flex-start}
#ta .kpi .ic{width:38px;height:38px;border-radius:10px;background:var(--azul);color:#fff;display:grid;place-items:center;flex-shrink:0}
#ta .kpi .ic svg{width:19px;height:19px}
#ta .kpi .v{font-size:26px;font-weight:800;line-height:1.1}
#ta .kpi .v em{font-style:normal;font-size:.8em;font-weight:700}
#ta .kpi .d{font-size:12.5px;color:var(--tx2);margin-top:2px}
#ta .semaforo{display:flex;align-items:center;gap:14px;border-radius:var(--r2);padding:12px 16px;background:#e9f6ec;margin-bottom:14px}
#ta .semaforo .bola{width:14px;height:14px;border-radius:50%;background:var(--verde);flex-shrink:0}
#ta .semaforo b{font-size:15px}
#ta .semaforo span{color:var(--tx2);font-size:13px}
#ta .semaforo.mal{background:var(--rojo);color:#fff}
#ta .semaforo.mal span{color:#ffe3e6}
#ta .semaforo.mal .bola{background:#fff}
/* Falta 1 compra: inconveniente, no alarma (6-oct-2026). Superficie neutra y el rojo solo en el punto. */
#ta .semaforo.leve{background:#efefef}
#ta .semaforo.leve .bola{background:var(--rojo)}
#ta table{width:100%;border-collapse:separate;border-spacing:0}
#ta th{background:var(--cab);font-weight:700;font-size:13px;text-align:left;padding:10px 10px;white-space:nowrap}
#ta th:first-child{border-radius:10px 0 0 10px}
#ta th:last-child{border-radius:0 10px 10px 0}
#ta td{padding:11px 10px;font-size:13.5px;vertical-align:middle}
#ta tbody tr:nth-child(even) td{background:var(--cebra)}
#ta tbody tr:hover td{background:#eef4fd}
#ta .der{text-align:right}
#ta td.der, #ta th.der{text-align:right}
#ta td.der{white-space:nowrap}
#ta .grupo td{background:#fff!important;font-weight:700;font-size:12.5px;color:var(--tx3);padding-top:18px;text-transform:none}
#ta .camp{font-weight:600;display:flex;align-items:center;gap:8px}
#ta .band{width:18px;height:12px;border-radius:2px;flex-shrink:0}
#ta .chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600;background:#ececec;color:var(--tx2);white-space:nowrap}
#ta .chip.verde{background:var(--verde);color:#fff}
#ta .chip.rojo{background:var(--rojo);color:#fff}
#ta .chip.ambar{background:#f5a524;color:#141414}
#ta .prob{color:var(--tx3)}
#ta .tc th{background:#dfe6ee;color:#141414}
#ta .tc td{padding:13px 9px}
#ta .tc .nombre{font-weight:700;font-size:14px;line-height:1.3}
#ta .tc .fechas{font-size:12.5px;color:var(--tx3);margin-top:2px}
#ta .tc .inv{font-size:17px;font-weight:700}
#ta .tc .ven{font-size:19px;font-weight:800;color:var(--azul);line-height:1.15}
#ta .tc .ven.cero{color:var(--rojo)}
#ta .tc .sub{font-size:12.5px;color:var(--tx2);margin-top:2px;white-space:nowrap}
#ta .tc .trajo{font-size:15px;font-weight:700;white-space:nowrap}
#ta .tc .trajo span{font-size:12.5px;font-weight:500;color:var(--tx2)}
#ta .rend{min-width:175px}
#ta .rend-num{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
#ta .rend-num b{font-size:19px;font-weight:800}
#ta .rend-num small{font-size:12.5px;color:var(--tx2);white-space:nowrap}
#ta .rend-pista{position:relative;height:12px;border-radius:999px;background:#ececec;margin-top:6px;display:flex;overflow:visible}
#ta .rend-pista .seg{height:100%}
#ta .rend-pista .seg.seguro{background:var(--azul);border-radius:999px 0 0 999px}
#ta .rend-pista .seg.prob{background:#9cc8f4}
#ta .rend-pista .uno{position:absolute;top:-4px;bottom:-4px;width:2px;background:#141414;border-radius:1px}
#ta .leyenda-tc{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--tx2);margin:2px 2px 12px;align-items:center}
#ta .leyenda-tc i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
#ta .cl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
#ta .cl-t{border:2px solid;border-radius:var(--r2);padding:14px 16px;background:#fff}
#ta .cl-t b{font-size:15px;display:block}
#ta .cl-n{font-size:26px;font-weight:800;line-height:1.15;margin:4px 0 2px}
#ta .cl-t .cl-d{font-size:13px;color:var(--tx2)}
#ta .ojo{width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;color:var(--tx2);background:#f1f1f1}
#ta .ojo:hover{background:#e6e6e6;color:var(--tx)}
#ta .antiguas summary{cursor:pointer;list-style:none;padding:12px;border-radius:10px;background:#f4f4f4;font-weight:600;font-size:13.5px;margin-top:10px;display:flex;align-items:center;gap:8px}
#ta .antiguas summary::-webkit-details-marker{display:none}
#ta .antiguas summary:after{content:"Ver";margin-left:auto;color:var(--azul);font-weight:700}
#ta .antiguas[open] summary:after{content:"Ocultar"}
#ta .suave{color:var(--tx3);font-size:12.5px}
#ta .camps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#ta .cc{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:16px}
#ta .cc h3{margin:0 0 2px;font-size:15px;display:flex;gap:8px;align-items:center}
#ta .cc .gasto{font-size:13px;color:var(--tx2);margin-bottom:12px}
#ta .metro{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:relative;margin:6px 0 12px}
#ta .metro:before{content:"";position:absolute;left:8%;right:8%;top:15px;height:3px;background:#e2e2e2}
#ta .est{position:relative;text-align:center}
#ta .est i{display:block;width:30px;height:30px;border-radius:50%;margin:0 auto 6px;background:#141414;color:#fff;font-style:normal;font-weight:700;font-size:12px;line-height:30px}
#ta .est b{display:block;font-size:17px;font-weight:800}
#ta .est span{font-size:11.5px;color:var(--tx2);display:block;line-height:1.25}
#ta .tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#ta .tres div{background:#f6f6f6;border-radius:10px;padding:8px 10px}
#ta .tres small{display:block;font-size:11.5px;color:var(--tx2);font-weight:600}
#ta .tres b{font-size:17px}
#ta .embudo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#ta .emb h3{font-size:15px;margin:0 0 10px;display:flex;gap:8px;align-items:center}
#ta .puerta-emb{font-size:13px;color:var(--tx2);margin:-4px 0 12px;line-height:1.4}
#ta .puerta-emb b{color:var(--tx);font-weight:700}
#ta .puerta-emb span{color:var(--tx3)}
#ta .paso{display:grid;grid-template-columns:118px minmax(0,1fr) 52px;gap:8px;align-items:center;margin:7px 0;font-size:12.5px}
#ta .paso .pista{height:20px;background:#efefef;border-radius:6px;overflow:hidden}
#ta .paso .lleno{height:100%;border-radius:6px}
#ta .paso .n{font-weight:700;text-align:right}
#ta .paso .caida{grid-column:2/4;font-size:11.5px;color:var(--tx3);margin-top:-5px}
#ta .paso .caida.fuerte{color:var(--rojo);font-weight:700}
#ta .consejo{border-radius:var(--r2);background:#141414;color:#fff;padding:14px 16px;margin-top:14px;display:flex;gap:12px}
#ta .consejo svg{width:20px;height:20px;flex-shrink:0;color:var(--oro);margin-top:2px}
#ta .consejo b{color:var(--oro)}
#ta .consejo u{text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
#ta .mpais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#ta .mp{background:#fff;border:1px solid #d9d9d9;border-radius:var(--r2);padding:16px}
#ta .mp h4{margin:0 0 8px;font-size:14px;display:flex;gap:8px;align-items:center}
#ta .mp .fila{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
#ta .mp .fila b{font-size:15px}
#ta .mbarra{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#ececec;margin:4px 0 12px}
#ta .mbarra i{display:block;height:100%}
#ta .mtres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#ta .mc b{display:block;font-size:24px;font-weight:800;line-height:1.1}
#ta .mc span{font-size:12.5px;color:var(--tx2)}
#ta .mpan{margin-top:12px;padding-top:10px;border-top:1px solid #e2e2e2;font-size:13px;color:var(--tx2)}
#ta .mpan b{color:var(--azul);font-size:17px;margin-right:4px}
#ta-mapa{height:330px;border-radius:var(--r2);overflow:hidden;background:#eaeaea}
#ta .mapa-y-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
#ta .mapa-y-lista .zonas-caja{display:none}
/* ¿Meta ve las compras? (20-oct-2026): las compras de ayer en UNA barra partida en dos, cada parte con su cifra y su porqué. */
#ta .mv-tit{font-weight:700;font-size:14px;margin:0 2px 8px}
#ta .mv-barra{display:flex;height:16px;border-radius:999px;overflow:hidden;background:#ececec;margin:0 0 14px}
#ta .mv-barra i{display:block;height:100%}
#ta .mv-fila{display:grid;grid-template-columns:12px 44px minmax(0,1fr);gap:10px;align-items:center;padding:8px 2px}
#ta .mv-fila + .mv-fila{border-top:1px solid var(--linea, #ececec)}
#ta .mv-fila .p{width:12px;height:12px;border-radius:50%}
#ta .mv-fila > b.num{font-size:22px;font-weight:800;text-align:right}
#ta .mv-fila div b{display:block;font-size:14px}
#ta .mv-fila div span{display:block;font-size:12.5px;color:var(--tx2);margin-top:1px}
#ta .mv-para{margin:12px 2px 0;padding-top:10px;border-top:1px solid var(--linea, #ececec)}
#ta-mapaCaja.grande{position:fixed;inset:12px;z-index:60;overflow:auto;box-shadow:0 0 0 100vmax rgba(20,20,20,.55)}
#ta-mapaCaja.grande .mapa-y-lista{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
#ta-mapaCaja.grande .zonas-caja{display:block}
#ta-mapaCaja.grande #ta-mapa{height:calc(100vh - 170px)}
#ta .zona{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;cursor:pointer}
#ta .zona:nth-child(even){background:var(--cebra)}
#ta .zona:hover{background:#eef4fd}
#ta .zona .pu{color:var(--tx3);font-weight:700}
#ta .zona b{font-size:13.5px}
#ta .zona small{display:block;color:var(--tx3);font-size:12px}
@media (max-width:1100px){
#ta .mapa-y-lista{grid-template-columns:minmax(0,1fr)}
}
#ta .map-ctl{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
#ta .btn-capa{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#f1f1f1;font-weight:600;font-size:13px}
#ta .btn-capa.on{background:#141414;color:#fff}
#ta .btn-capa .p{margin:0}
#ta .maplibregl-popup-content{font-family:var(--f-app);border-radius:10px;padding:10px 12px;font-size:13px}
#ta .abajo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#ta .fila-act{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 10px;border-radius:10px}
#ta .fila-act:nth-child(even){background:var(--cebra)}
#ta .fila-act b{font-size:13.5px}
#ta .fila-act span{font-size:12px;color:var(--tx3)}
#ta td.nw{white-space:nowrap}
#ta .rank{display:grid;grid-template-columns:22px minmax(0,1fr) 80px;gap:8px;align-items:center;font-size:13px;padding:6px 0}
#ta .rank .pu{color:var(--tx3);font-weight:700}
#ta .rank .bar{height:8px;border-radius:999px;background:var(--azul)}
@media (max-width:1100px){
#ta .dos, #ta .abajo, #ta .embudo, #ta .mpais, #ta .rc{grid-template-columns:minmax(0,1fr)}
#ta .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
#ta .ahora, #ta .ahora.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
#ta .camps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  #ta .sd-fila{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  #ta .sd{padding:10px}
#ta .pag{padding:16px}
#ta .kpis{grid-template-columns:minmax(0,1fr)}
#ta .tabla-scroll{overflow-x:auto}
}
/* 14-oct: el traspaso de la app vieja. La cifra a la izquierda y su curva a la derecha; «quién falta», en tarjetas.
   La usan también «Permiso de correos» y «La app del móvil». 26-oct: las dos tarjetas, al alto de la más alta (las
   hermanas de una fila van al mismo alto; con `start` la de la cifra se quedaba corta junto a la gráfica). */
#ta .tras{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:stretch}
#ta .tras .mtres{margin-top:4px}
#ta .tr-lista{display:flex;flex-direction:column;gap:8px;margin-top:12px}
#ta .tr-cli{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 150px;gap:12px;align-items:center;background:#fff;border:1px solid #d9d9d9;border-radius:var(--r2);padding:12px 14px}
#ta .tr-quien b{display:block;font-size:14.5px}
#ta .tr-quien span, #ta .tr-dato span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx3)}
#ta .tr-dato b{display:block;font-size:15px}
#ta .tr-est{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#ta .tr-tel{display:inline-flex;align-items:center;gap:6px;color:var(--azul);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
#ta .tr-tel svg{width:14px;height:14px}
@media (max-width:1100px){
#ta .tras{grid-template-columns:minmax(0,1fr)}
#ta .tr-cli{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#ta .tr-est{text-align:left;align-items:flex-start}
}
#ta-globo{position:fixed;pointer-events:none;background:#141414;color:#fff;border-radius:10px;padding:8px 11px;font-size:13px;line-height:1.4;opacity:0;transition:opacity .12s ease-out;z-index:9000;max-width:280px;font-family:var(--f-app)}
#ta-globo.on{opacity:1}
#ta-globo b{color:#ffb500}
/* 14-oct: el reparto por origen dentro del globo (app vieja · anuncio · sin anuncio · Business). El globo cuelga del <body>,
   fuera de #ta: lleva sus propios colores, los mismos de la pantalla. */
#ta-globo{--oro:#ffb500;--azul:#0071e3;--teal:#00a2b8;--pt:#7d7d7d}
#ta-globo:has(.ta-gr){max-width:380px}
#ta-globo .ta-gr{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 10px;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.16)}
#ta-globo .ta-gr i{width:9px;height:9px;border-radius:50%}
#ta-globo .ta-gr span,#ta-globo .ta-gr em{white-space:nowrap}
#ta-globo .ta-gr em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
#ta-globo .ta-gr em+em{color:#c4c4c4;font-weight:500}
#ta .ta-cargando{padding:40px;text-align:center;color:var(--tx3);font-weight:600}

/* En el panel la columna es algo más estrecha que en el boceto: la tabla nunca se sale de su tarjeta. */
#ta .tabla-scroll{overflow-x:auto}
#ta .tc .nombre{font-size:13.5px}
#ta .rend{min-width:160px}
#ta th{text-transform:none;letter-spacing:0}
#ta table{table-layout:auto}
/* En el panel los svg sueltos van en bloque: las banderas tienen que ir en la línea del texto. */
#ta svg.band{display:inline-block;width:18px;height:12px;vertical-align:-2px;margin-right:4px}
#ta .pildoras svg.band{margin-right:5px}
/* La cifra que va DENTRO de su <b> (la de «personas viendo ahora» lleva el punto verde al lado) no hereda el estilo de la
   etiqueta gris de 12,5 px de `.losa span`: es cifra, va a 22 px y en negro (JB, 13-oct-2026: «se ve muy mal»). */
#ta .losa b span{display:inline;font-size:inherit;font-weight:inherit;color:inherit}
#ta .losa span span{display:inline}
#ta .sec-cab{align-items:center}

/* «Lo que trae cada campaña» = el libro del panel (13-oct-2026, JB vía el Dashboard 24). Una tarjeta por campaña con la info
   en columnas (kiosco de autoservicio); se abre DEBAJO, una cada vez. Cuando su caja es estrecha, la tarjeta se apila. */
#ta-campanas{container-type:inline-size}
#ta .cl{--cl-cols:62px minmax(150px,1.5fr) 92px 136px minmax(78px,.8fr) minmax(74px,.7fr) minmax(88px,.8fr) minmax(96px,.9fr) minmax(156px,1.3fr) 18px}
#ta .cl-cab,#ta .cl-camp{display:flex;align-items:center;gap:10px}
#ta .cl-cab{padding:0 15px 8px;font-size:13px;font-weight:700;color:var(--tx2)}
#ta .cl-cab .cl-g,#ta .cl-fila{flex:1;min-width:0;display:grid;grid-template-columns:var(--cl-cols);gap:10px;align-items:center}
#ta .cl-cab span{white-space:nowrap}
#ta .cl-cab .cl-hueco{width:34px;flex-shrink:0}
#ta .cl-lista{display:flex;flex-direction:column;gap:8px}
#ta .cl-camp{flex-wrap:wrap;background:var(--card);border:1px solid var(--linea);border-radius:var(--r2);padding:12px 14px}
#ta .cl-camp.abierta{border-color:#141414}
@media (hover:hover){#ta .cl-camp:not(.abierta):hover{border-color:#c9c9c9}}
#ta .cl-fila{text-align:left;padding:2px 0;border-radius:8px}
#ta .cl-fila:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
#ta .cl-camp .ojo{flex-shrink:0}
#ta .cl-pais{display:flex;align-items:center}
#ta .cl-pais svg.band{margin-right:3px}
#ta .cl-nom{font-weight:700;font-size:14px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
#ta .cl-bm{display:none}
#ta .cl-cuando{font-size:13px;color:var(--tx2);display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:nowrap}
#ta .cl-v{display:block;font-size:16px;font-weight:700;white-space:nowrap;line-height:1.2}
#ta .cl-v small{display:block;font-size:12px;font-weight:500;color:var(--tx2)}
#ta .cl-com .cl-v{color:var(--azul);font-size:17px;font-weight:800}
#ta .cl-roas .rend{display:block;min-width:0}
#ta .cl-flecha svg{width:18px;height:18px;display:block;color:var(--tx3);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
#ta .cl-camp.abierta .cl-flecha svg{transform:rotate(180deg)}
#ta .cl-det{flex-basis:100%;border-top:1px solid var(--linea);margin-top:12px;padding-top:16px;min-width:0}
#ta .cl-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#ta .cl-cifra{background:var(--cebra);border-radius:var(--r2);padding:12px 14px;display:flex;gap:12px;align-items:flex-start;min-width:0}
#ta .cl-cifra .ic{width:36px;height:36px;border-radius:10px;background:#141414;color:#fff;display:grid;place-items:center;flex-shrink:0}
#ta .cl-cifra .ic svg{width:18px;height:18px}
#ta .cl-cifra b{display:block;font-size:22px;font-weight:800;line-height:1.1}
#ta .cl-cifra em{display:block;font-style:normal;font-size:12.5px;font-weight:600;margin-top:3px}
#ta .cl-cifra span:not(.ic){display:block;font-size:12.5px;color:var(--tx2);font-weight:500;margin-top:3px}
#ta .cl-cifra.vacia .ic{background:#d6d6d6}
#ta .cl-cifra.vacia b{color:var(--tx3);font-size:15px;font-weight:700}
#ta .cl-tit{font-size:15px;font-weight:700;margin:20px 0 8px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
#ta .cl-tit small{font-size:12.5px;color:var(--tx3);font-weight:500}
#ta .cl-curva svg{width:100%;height:auto;display:block;overflow:visible;max-height:260px}
#ta .cl-curva text{font-family:var(--f-app)}
#ta .cl-corta{display:none}
/* El panel tiene `tbody td{white-space:nowrap}` para sus tablas: aquí los nombres y motivos largos parten línea (13-oct, 122 clientes reales desbordaban 72 px). */
#ta .cl-det tbody td{white-space:normal;overflow-wrap:anywhere}
#ta .cl-det tbody td.der,#ta .cl-det tbody td.nw{white-space:nowrap;overflow-wrap:normal}
#ta .cl-botones tbody td:first-child{white-space:normal;overflow-wrap:anywhere}
#ta .cl-mas{margin:10px 0 0;padding:10px 16px;border-radius:999px;background:var(--cebra);font-weight:600;font-size:13.5px;color:var(--azul)}
#ta .cl-term{margin-top:10px;width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r2);background:var(--cebra);text-align:left}
#ta .cl-term b{font-size:14px;font-weight:700;white-space:nowrap}
#ta .cl-term span{flex:1;font-size:13px;color:var(--tx2);min-width:0}
#ta .cl-term svg{width:18px;height:18px;flex-shrink:0;color:var(--tx3);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
#ta .cl-term[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){#ta .cl-mas:hover,#ta .cl-term:hover{background:#e9e9e9}}
#ta .cl-huella{font-size:12.5px;color:var(--tx2);margin:12px 0 0;line-height:1.5}
@container (max-width:1060px){
  #ta .cl-cab{display:none}
  #ta .cl-fila{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"nom nom nom flecha" "obj cuando cuando cuando" "inv meta cli com" "roas roas roas roas";row-gap:12px;align-items:start}
  #ta .cl-pais{display:none}
  #ta .cl-bm{display:inline}
  #ta .cl-nom{grid-area:nom;font-size:15px} #ta .cl-obj{grid-area:obj} #ta .cl-cuando{grid-area:cuando;flex-direction:row;align-items:center;gap:8px}
  #ta .cl-inv{grid-area:inv} #ta .cl-meta{grid-area:meta} #ta .cl-cli{grid-area:cli} #ta .cl-com{grid-area:com}
  #ta .cl-roas{grid-area:roas} #ta .cl-flecha{grid-area:flecha;justify-self:end}
  #ta .cl-fila .der{text-align:left}
  #ta .cl-fila [data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:600;color:var(--tx3);margin-bottom:2px;white-space:nowrap}
  #ta .cl-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ta .cl-camp{align-items:flex-start}
}
@container (max-width:520px){
  #ta .cl-fila{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"nom flecha" "obj obj" "cuando cuando" "inv meta" "cli com" "roas roas"}
  #ta .cl-cifras{grid-template-columns:minmax(0,1fr)}
  #ta .cl-det .cl-opc{display:none}
  #ta .cl-botones th:nth-child(2),#ta .cl-botones td:nth-child(2){display:none}
  #ta .cl-det .cl-larga{display:none} #ta .cl-det .cl-corta{display:inline}
}
@media (prefers-reduced-motion:reduce){#ta .cl-flecha svg,#ta .cl-term svg{transition:none}}
/* Cupones: lo que regalaron y lo que trajeron (JB, 15-oct-2026). Tres cifras arriba, a lo ancho; en estrecho, una debajo de otra. */
#ta .cu-heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
#ta .cu-heroes > div{background:var(--cebra);border-radius:var(--r2);padding:12px 14px;min-width:0}
#ta .cu-heroes b{display:block;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
#ta .cu-heroes span{display:block;font-size:13px;color:var(--tx2);margin-top:4px}
@media (max-width:700px){ #ta .cu-heroes{grid-template-columns:1fr} }
#ta .cu-nota{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Lo que vende la web (20-oct-2026): la cifra que importa arriba; cada botón con lo que pone y dónde está. */
#ta .bw-heroe{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 2px 14px}
#ta .bw-heroe b{font-size:28px;font-weight:800;color:var(--azul)}
#ta .bw-heroe span{font-size:13.5px;color:var(--tx2)}
#ta .cl-botones .camp > div b{display:block;font-size:14px}
#ta .cl-botones .camp > div .suave{font-size:12.5px;margin-top:1px}

/* ── LO QUE HICIMOS (26-oct-2026), debajo de la línea de ventas y con su misma escala de tiempo. Barras en gris sólido (nunca
   color con opacidad), el punto negro marca cuándo empezó; lo invertido en Meta, en el azul de «Anuncio de Meta». Al pasar
   el ratón, su franja se enciende sobre las ventas y su raya se oscurece. ── */
#ta .bt-it{cursor:default}
#ta .bt-barra{fill:#ececec;transition:fill .12s ease-out}
#ta .bt-meta{fill:var(--azul)}
#ta .bt-sombra{fill:#e6f0fc;opacity:0;transition:opacity .12s ease-out}
#ta .bt-sombra.bt-on{opacity:1}
#ta .bt-guia{stroke:#c4c4c4;stroke-width:1;stroke-dasharray:3 4;transition:stroke .12s ease-out}
#ta .bt-guia.bt-solo{stroke:transparent}
#ta .bt-guia.bt-on{stroke:#141414}
@media (hover:hover){ #ta .bt-it:hover .bt-barra{fill:#dcdcdc} #ta .bt-dia:hover .bt-meta{fill:#005bb8} }
#ta .bt-antes{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--tx2)}
#ta .bt-antes > b{font-weight:600;color:var(--tx2);margin-right:2px}
#ta .bt-chip{display:inline-flex;align-items:baseline;gap:6px;background:#f1f1f1;border-radius:999px;padding:4px 11px;color:var(--tx);font-weight:600;white-space:nowrap}
#ta .bt-chip small{color:var(--tx3);font-weight:500;font-size:12px}
#ta .bt-nada{margin-top:10px;font-size:12.5px;color:var(--tx3)}
@media (prefers-reduced-motion:reduce){ #ta .bt-barra, #ta .bt-sombra, #ta .bt-guia{transition:none} }

/* CÓMO MOVERSE POR TIENDA (3-nov-2026; publicado el 4-nov). JB: «tengo que bajar mucho para abajo para encontrar lo que quiero» y,
   al ver las dos formas, «creo que barra lateral pero con mejores nombres y mejor separada». */
#ta .ta-lado{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
#ta .ta-indice{position:sticky;top:calc(var(--ta-arriba,var(--topbar-h,0px)) + 12px);background:#f5f5f5;border-radius:var(--r);padding:8px;max-height:calc(100dvh - var(--ta-arriba,var(--topbar-h,0px)) - 24px);overflow:auto}
#ta .ta-hojas > .sec{scroll-margin-top:calc(var(--ta-arriba,var(--topbar-h,0px)) + 16px)}
/* en el panel, #content lleva overflow:auto sin desplazarse y eso despega lo «sticky» (ver el app-shell de Canon en style.css):
   solo con el índice de Tienda se le quita */
#content:has(#ta .ta-lado){overflow:visible}
/* en el móvil, barra-movil.css le pone overflow-x:auto a .pa-content y la tira de arriba se iba con la página; «clip» recorta igual
   lo que sobre de ancho sin crear una caja que se desplaza, así que lo sticky sigue pegado */
@media (max-width:640px){ #paPanel .pa-content:has(#ta .ta-lado){overflow-x:clip} }
/* Por zonas a todo lo ancho: el mapa arriba y debajo «Por comunidad» y «Por provincia» (la lista de al lado solo en «Ampliar») */
#ta .ta-zonas-abierta #ta-mapa{height:440px}
#ta-mapaCaja.grande .ta-regiones{display:none}
@media (max-width:900px){ #ta .ta-zonas-abierta #ta-mapa{height:330px} }
#ta .ta-regiones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px 36px;margin-top:22px}
#ta .ta-rcol[hidden]{display:none}
#ta .ta-rtit{font-size:17px;font-weight:800;margin:0 2px 8px;white-space:nowrap}
#ta .ta-rtit small{font-size:13px;font-weight:600;color:var(--tx3)}
#ta .ta-rg{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:6px 10px;align-items:center;width:100%;padding:9px 12px;border-radius:var(--r2);text-align:left;cursor:pointer;color:inherit;background:transparent}
#ta .ta-rg:nth-child(even){background:var(--cebra)}
@media (hover:hover){ #ta .ta-rg:hover{background:#eef4fd} }
#ta .ta-rg .pu{color:var(--tx3);font-weight:700;font-size:14px}
#ta .ta-rg .nm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 8px;min-width:0}
#ta .ta-rg .nm b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ta .ta-rg .nm .band{width:18px;height:12px;border-radius:2px}
#ta .ta-rg .barra{display:block;grid-column:1 / -1;height:12px;border-radius:6px;background:#ececec;overflow:hidden}
#ta .ta-rg .barra i{display:block;height:100%;border-radius:6px;background:var(--oro)}
#ta .ta-rg .cf{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
#ta .ta-rg .cf b{font-size:16px;font-weight:800;white-space:nowrap}
#ta .ta-rg .cf small{font-size:12.5px;color:var(--tx3);font-weight:600;white-space:nowrap}
#ta .ta-rg .cf small.cmb{color:var(--tx);font-weight:800;font-size:13px}   /* «▲ 46 %» con su «frente a» debajo */
#ta .ta-rmas{margin:8px 0 0 12px;padding:7px 12px;border-radius:999px;background:#ececec;font-weight:700;font-size:13.5px;color:var(--tx);cursor:pointer}
@media (hover:hover){ #ta .ta-rmas:hover{background:#e2e2e2} }
/* el índice: cada grupo en su tarjeta blanca con su nombre e icono fuera, encima, y aire entre grupos */
#ta .ta-igrupo + .ta-igrupo{margin-top:16px}
#ta .ta-indice small{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--tx2);margin:2px 8px 6px;white-space:nowrap}
#ta .ta-indice small svg{width:15px;height:15px;flex:0 0 auto;color:var(--tx)}
#ta .ta-itarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r2);padding:4px}
#ta .ta-indice a{display:block;padding:7px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-decoration:none}
/* en la página, cada grupo abre con su cabecera de capítulo: lo de un grupo no se mezcla con el de al lado */
#ta .ta-capitulo{display:flex;align-items:center;gap:11px;margin:64px 0 0;padding-top:26px;border-top:1px solid #dcdcdc;font-size:32px;font-weight:800;letter-spacing:-.01em;scroll-margin-top:calc(var(--ta-arriba,var(--topbar-h,0px)) + 16px)}
#ta .ta-capitulo.primero{margin-top:4px;padding-top:0;border-top:0}
#ta .ta-capitulo[hidden]{display:none}
#ta .ta-capitulo svg{width:30px;height:30px;flex:0 0 auto}
#ta .ta-capitulo + .sec{margin-top:20px}
#ta .ta-indice a.on{background:var(--tx);color:#fff;font-weight:700;cursor:default}
@media (hover:hover){ #ta .ta-indice a:not(.on):hover{background:#e9e9e9} }
/* en el móvil el índice se tumba: una tira que se desliza de lado y se queda arriba al bajar */
@media (max-width:900px){ #ta .ta-lado{grid-template-columns:minmax(0,1fr);gap:14px}
  #ta .ta-indice{top:var(--ta-arriba,var(--topbar-h,0px));z-index:25;display:flex;gap:4px;overflow-x:auto;max-height:none;padding:6px;scrollbar-width:none}
  #ta .ta-indice small{display:none} #ta .ta-indice a{flex:0 0 auto}
  #ta .ta-igrupo{display:flex;flex:0 0 auto} #ta .ta-igrupo + .ta-igrupo{margin:0 0 0 6px}
  #ta .ta-itarjeta{display:flex;gap:2px;padding:2px}
  #ta .ta-capitulo{margin-top:44px;padding-top:20px;font-size:27px}
  #ta .ta-rg .nm b{white-space:normal;line-height:1.2}   /* un nombre largo baja de línea, no se corta */
  #ta .ta-capitulo, #ta .ta-hojas > .sec{scroll-margin-top:calc(var(--ta-arriba,var(--topbar-h,0px)) + 64px)} }   /* que la tira de arriba no tape el título al saltar */
/* la comunidad abierta: losa oscura, como lo marcado en el índice; «Ver todas» la cierra */
#ta .ta-rg.on, #ta .ta-rg.on:nth-child(even){background:var(--tx);color:#fff}
@media (hover:hover){ #ta .ta-rg.on:hover{background:#2c2c2c} }
#ta .ta-rg.on .pu, #ta .ta-rg.on .cf small{color:#c9c9c9}
#ta .ta-rg.on .cf small.cmb{color:#fff}
#ta .ta-rg.on .barra{background:#3d3d3d}
#ta .ta-rtit{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
#ta .ta-rcerrar{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#ececec;font-size:13px;font-weight:700;color:var(--tx);cursor:pointer}
#ta .ta-rcerrar svg{width:13px;height:13px}
@media (hover:hover){ #ta .ta-rcerrar:hover{background:#e2e2e2} }
/* «Por comunidad · Por punto»: baja de rango frente a «Compran · Se registran» (pista gris y la elegida en blanco) */
#ta .ta-vercomo{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:#f1f1f1}
#ta .ta-vercomo button{padding:6px 12px;border-radius:8px;font-weight:600;font-size:13px;color:var(--tx2);white-space:nowrap;cursor:pointer}
#ta .ta-vercomo .ct{display:none}
/* en estrecho, «Comunidad · Punto · Sube o baja» y el botón de ampliar caben en una fila */
@media (max-width:600px){ #ta .ta-vercomo .lg{display:none} #ta .ta-vercomo .ct{display:inline} }
#ta .ta-vercomo button.on{background:#fff;color:var(--tx);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:default}
@media (hover:hover){ #ta .ta-vercomo button:not(.on):hover{color:var(--tx)} }
/* en el móvil, «Por comunidad · Por punto» y «Ampliar» comparten la segunda línea */
@media (max-width:600px){ #ta .ta-vercomo button{padding:6px 10px} #ta #ta-ampliar{padding:8px 12px} }
@media (max-width:400px){ #ta #ta-ampliarT{display:none} }
/* la leyenda del frío y caliente, abajo a la izquierda del mapa (solo «Por comunidad») */
#ta .ta-leyenda{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#fff;font-size:12.5px;font-weight:700;color:var(--tx2);pointer-events:none}
#ta .ta-leyenda[hidden]{display:none}
#ta .ta-leyenda i{display:block;width:120px;height:10px;border-radius:5px}
/* En estrecho, los créditos del mapa ocupan todo el pie: la leyenda sube arriba a la izquierda (el + y − van a la derecha). */
@media (max-width:600px){#ta .ta-leyenda{bottom:auto;top:10px}#ta .ta-leyenda i{width:80px}}
/* 6-nov (JB, «tiene que ser el mismo diseño, el diseño del como vamos»): «Esta semana», seis tarjetas con la pieza de «Cómo vamos»
   (.card + .rot + .heroe + .vs), tres por fila: cada una lleva su comparación escrita y a seis por fila el héroe no cabe. */
#ta .ta-sem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#ta .sec > .ta-sem{margin-top:14px}   /* debajo de la tarjeta de «Cómo vamos» (13-nov-2026), con el aire de la fila que había */
#ta .ta-sem .card{display:flex;flex-direction:column;min-width:0}
#ta .ta-sem .heroe{white-space:nowrap}
#ta .ta-sem .card.vacia .heroe{color:var(--tx3)}
#ta .ta-sem-det{font-size:13px;color:var(--tx2);margin-top:4px}
#ta .ta-sem-l{position:relative;height:44px;margin:auto 6px 6px}
#ta .ta-sem .card > .vs, #ta .ta-sem-det{margin-bottom:20px}
#ta .ta-sem .card > .vs + .ta-sem-det{margin-top:-16px}
#ta .ta-sem-l svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#ta .ta-sem-l i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;border:2px solid var(--azul);box-sizing:border-box}
#ta .ta-sem-l i::after{content:'';position:absolute;inset:-9px}
#ta .ta-sem-l i.ya{background:var(--azul)}
@media (max-width:1100px){ #ta .ta-sem{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ #ta .ta-sem{grid-template-columns:minmax(0,1fr)} }
/* 6-nov (JB, «eso todo es demasiado»): «Lo que hicimos» nace plegado en una línea; el detalle, tras «Ver detalle». */
#ta .bt-plegado{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px;padding-top:14px;border-top:1px solid #ececec;font-size:13px;color:var(--tx2)}
#ta .bt-plegado .bt-pl-t{font-weight:700;color:var(--tx);margin-right:4px}
#ta .bt-plegado b{color:var(--tx);font-weight:700}
#ta .bt-plegado > i{font-style:normal;color:var(--tx3)}
#ta .bt-ver{margin-left:auto;padding:6px 13px;border-radius:999px;background:#f1f1f1;font-weight:600;font-size:13px;color:var(--tx);white-space:nowrap;cursor:pointer}
@media (hover:hover){ #ta .bt-ver:hover{background:#e8e8e8} }
#ta .bt-recoger{display:flex;justify-content:flex-end;margin-top:10px}