/* Segura Comercial · sistema visual v4 con la dirección v3 aprobada por Cristopher el 8-nov-2026 (docs/27 §9 y §10,
   docs/21 §2.8, docs/28). Un solo archivo: tokens, base, tipografía, componentes (public/js/ui.js), cascarón y escritorio.
   Reglas vigentes (mandan sobre docs/21 §2.1–2.2): página gris muy claro (#EFEFEF) con secciones como BLOQUES blancos
   redondeados; escala de app de gestión (cuerpo 12.5–13 px, secundario 11 px, títulos de sección 13 px, cifra principal
   26 px como máximo); cabecera oscura para lo protagonista; listas como filas blancas en píldora; estados como texto de
   color con punto (nunca bloques tintados ni rayas laterales de color); isla oscura para las alertas en vivo.
   TODO lo visual sale de los tokens de abajo: cambiar el aspecto = cambiar valores, no pantallas.
   Nada de estilos en línea: la CSP los bloquea; los anchos de barras llegan por data-w (core.anchos). */

/* =============================================================== 1. tokens */
:root{
  color-scheme:light;
  --blanco:#fff;
  /* lienzo y bloques (§9: fondo #EFEFEF, bloques blancos redondeados, sin sombras fuertes) */
  --fondo-pagina:#efefef; --bloque-fondo:#fff; --bloque-radio:20px; --bloque-borde:transparent; --bloque-pad:14px; --bloque-gap:10px;
  --bloque-sombra:0 1px 2px rgba(20,20,20,.035); --pildora-radio:16px; --gris-suave:#f7f7f5; --ico-gris:#f2f2f0;
  /* cabecera oscura y mosaicos (IMG_0346), isla de alertas (IMG_0354), día de la tira (IMG_0356) */
  --cab-oscura:#262626; --cab-mosaico:#333332; --cab-accion:#3a3a39; --cab-texto:#fff; --cab-sec:#b4b4b2;
  --isla:#121212; --isla-ok:#3ddc84; --isla-ok-texto:#0b2e18; --dia:#d9762b;
  /* estados: texto de color con punto (§9) */
  --est-ok:#1f8a4c; --est-bad:#c2412d; --est-warn:#a35f0c; --est-act:#141414; --est-neutro:#6b6b69;
  /* escala de gestión (§9) */
  --fs-titulo:20px; --fs-saludo:18px; --fs-cuerpo:13px; --fs-fila:13px; --fs-sec:11px; --fs-meta:11px; --fs-sec-t:13px;
  --fs-cifra:26px; --fs-cifra-2:18px; --fs-dato:15px; --fs-btn:12.5px; --fs-chip:11px; --fs-campo:16px;
  /* FX2 (auditoría 1, P1-5; docs/29 §9.1.5): piso de 11 px para TODO texto, contadores incluidos. Abreviar, no achicar. */
  --fs-min:11px;
  --texto:#141414; --sec:#636361; --meta:#686866; --ter:#8c8c8a; --deshab:#a3a3a1;
  --linea:#efefed; --borde:#e3e3e1; --borde-panel:#eaeaea;
  --gris-buscar:#f2f2f0; --gris-nav:#fff; --gris-barra:#ededeb; --activo-lateral:#efefef;
  --accion:#141414; --accion-hover:#2b2b2b; --marca:#d43033;
  --ok:var(--est-ok); --ok-t:#eaf5ee; --ok-flecha:#1f8a4c;
  --warn:var(--est-warn); --warn-t:#fbf1e1;
  --bad:var(--est-bad); --bad-t:#fbeaea;
  --s-teal:#14b8a6; --s-teal-t:#d3f3ef; --s-coral:#f25c54; --s-coral-t:#fde1df; --s-violeta:#6d5bd0; --s-violeta-t:#e6e2f7; --s-ambar:#f59e0b; --s-ambar-t:#fdefd2;
  --sombra-tarjeta:var(--bloque-sombra);
  --sombra-flotante:0 2px 6px rgba(20,20,20,.06),0 12px 30px rgba(20,20,20,.12);
  --r-tarjeta:var(--bloque-radio); --r-panel:var(--bloque-radio); --r-hoja:24px; --r-campo:12px;
  --nav-h:64px; --barra-h:60px; --lado:232px; --max:1180px;
  /* pulido de márgenes (docs/43): rejilla de página de escritorio. Margen lateral por ancho (1024 / 1280 / 1440 / 1920,
     ver §7) y tope de 1680 px solo para pantallas de 2560; el teléfono no hereda topes al escritorio */
  --pagina-margen:14px; --pagina-max:1680px; --lectura:72ch;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,1,.36,1);
  /* territorios del mapa (apagados; el rojo de marca queda para zona roja) */
  --t0:#3f6fb5;--t1:#c27a1a;--t2:#2f8a63;--t3:#7b4fb5;--t4:#7a8a22;--t5:#2a8597;--t6:#b0413e;--t7:#6b6b69;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",system-ui,sans-serif;
}

/* =============================================================== 2. base */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--fondo-pagina);color:var(--texto);font-size:var(--fs-cuerpo);line-height:1.45;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* pulido de márgenes (docs/43): una palabra que no cabe en su línea (correo, código, dirección sin espacios) se parte en
   vez de salirse de su caja. Se hereda a todo; solo actúa cuando la palabra entera no cabe */
body{overflow-wrap:break-word}
body{overscroll-behavior-y:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,video,canvas{max-width:100%}
input,select,textarea{min-width:0;max-width:100%}
:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:8px}
h1[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--sec)}
.small{font-size:12px}
.carga{display:grid;place-items:center;min-height:60vh;color:var(--sec);font-size:var(--fs-cuerpo)}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.r{stroke-width:1.9}
.skip-link{position:fixed;top:-100px;left:16px;z-index:3000;padding:9px 14px;background:var(--accion);color:#fff;border-radius:999px;font-size:12.5px}
.skip-link:focus{top:10px}

/* =============================================================== 3. tipografía */
.t-titulo,.cab h1{font-size:var(--fs-titulo);font-weight:700;letter-spacing:-.025em;line-height:1.18}
.t-seccion,.sec-t{font-size:var(--fs-sec-t);font-weight:650;letter-spacing:-.01em;line-height:1.3}
.eyebrow{font-size:var(--fs-sec);font-weight:500;color:var(--sec);margin:0 0 3px}
.eyebrow a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--borde)}
.nota{font-size:var(--fs-sec);color:var(--meta);line-height:1.5;margin:8px 0 0}
.fg{font-size:12.5px;font-weight:600;color:var(--texto);margin:14px 0 6px}
.sub{font-size:12px;color:var(--sec);margin:2px 0 10px}
.largo{white-space:pre-line;font-size:var(--fs-cuerpo);line-height:1.6}
.corto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.txt-rojo{color:var(--bad)}.txt-amb{color:var(--warn)}

/* =============================================================== 4. cascarón */
.shell{min-height:100dvh}
.side{display:none}
.main{width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--safe-t) + 8px) 14px calc(var(--nav-h) + var(--safe-b) + 36px)}
.main:has(.barra-accion){padding-bottom:calc(var(--nav-h) + var(--barra-h) + var(--safe-b) + 44px)}
/* barra superior del teléfono: logo + íconos sueltos */
.mtop{display:flex;align-items:center;gap:4px;min-height:44px;margin:0 0 8px}
.mtop .marca{flex:1}
.marca{display:flex;align-items:center}
.marca img{display:block;width:104px;height:auto;max-height:32px;object-fit:contain}
.ico-suelto{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--texto);background:none;border:0;cursor:pointer}
.ico-suelto svg{width:22px;height:22px}
.ico-suelto .cuenta{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--marca);color:#fff;font-size:var(--fs-min);font-weight:700;line-height:18px;text-align:center;letter-spacing:0}
.ico-suelto[aria-current="page"]{color:var(--texto)}
.perfil-movil{display:inline-grid;place-items:center;width:40px;height:40px}
.perfil-movil .avatar-persona{width:32px;height:32px;font-size:12px}
/* navegación del teléfono: cápsula gris muy claro flotante, ícono + etiqueta, activo relleno con raya corta */
.tabbar{position:fixed;z-index:900;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));width:calc(100% - 24px);max-width:440px;background:var(--gris-nav);border-radius:30px;box-shadow:var(--sombra-flotante);padding:4px}
.tabbar>div{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;min-width:0;color:var(--sec);font-size:11px;font-weight:500;letter-spacing:-.01em;border-radius:26px}
.tabbar a span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
/* 320–360 px: la cápsula gana 8 px y las etiquetas se aprietan un poco («Inversiones», «Resultados» caben enteras) */
@media (max-width:360px){.tabbar{width:calc(100% - 16px)}.tabbar a{letter-spacing:-.035em}.tabbar a span{padding:0}}
.tabbar a svg{width:21px;height:21px}
.tabbar a[aria-current="page"]{font-weight:650;background:var(--accion);color:#fff}
/* U2.0 (docs/29 §0.1 y §2.1): ancho de oficina (E1, E3, E4), contadores rojos de pestaña y grupos de «Más» */
.main.ancho-oficina{max-width:1440px}
.tabbar a .cuenta,.side-nav a .cuenta{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--marca);color:#fff;font-size:var(--fs-min);font-weight:700;line-height:17px;text-align:center;letter-spacing:0}
.tabbar a .cuenta{position:absolute;top:4px;left:calc(50% + 6px)}
.side-nav a .cuenta{margin-left:auto}
.cuenta-fila{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--marca);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;flex:none}
.side-grupo{margin:14px 12px 4px;font-size:var(--fs-sec);font-weight:600;color:var(--sec)}
.mas-grupo{margin:0 0 14px}
.mas-grupo>.sec-t{margin:0 2px 8px}
.cola-ind{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--est-warn);font-size:12px;font-weight:600}
.cola-ind .punto{width:8px;height:8px;border-radius:4px;background:currentColor;flex:none}
.cola-ind.mal{color:var(--est-bad)}

/* =============================================================== 5. componentes (ui.js) */
/* --- cabecera de pantalla --- */
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:4px 0 14px}
.cab>div:first-child{min-width:0;flex:1 1 220px}
.cab p.cab-sub{font-size:12px;color:var(--sec);margin-top:4px;line-height:1.45}
.cab-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* saludo en dos tonos (wallet-ben) */
.saludo{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.saludo .avatar-persona{width:40px;height:40px;font-size:14px}
.saludo h1{font-size:var(--fs-saludo);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.saludo h1 span{display:block;color:var(--ter);font-weight:600}

/* --- tarjeta (solo lo permitido) --- */
.tarjeta{background:var(--bloque-fondo);border:1px solid var(--bloque-borde);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}

/* --- cifra protagonista --- */
.cifra-tarj{padding:var(--bloque-pad) 16px;margin:0 0 var(--bloque-gap)}
.cifra-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cifra-etq{font-size:12px;font-weight:500;color:var(--sec)}
.cifra{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.cifra strong{font-size:var(--fs-cifra);font-weight:650;letter-spacing:-.03em;line-height:1.1;color:var(--texto)}
.cifra strong .gris{color:var(--ter);font-weight:500}
.cifra strong .pre{font-size:.6em;margin-right:2px;vertical-align:.45em}
.cifra .cifra-de{font-size:12px;color:var(--sec)}
.cifra .tend{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:600;color:var(--ok-flecha)}
.cifra.panel strong{font-size:var(--fs-cifra-2)}
.cifra-pie{font-size:12px;color:var(--sec);margin-top:4px}

/* --- barra de progreso con textos a los lados --- */
.prog{margin:10px 0 0}
.prog-barra{position:relative;height:6px;border-radius:3px;background:var(--gris-barra);overflow:visible}
.prog-barra i{display:block;height:100%;width:0;border-radius:3px;background:var(--accion);transition:width .5s var(--ease)}
.prog-barra s{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:var(--marca)}
.prog-txt{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:var(--fs-sec);color:var(--meta)}
.prog-txt b{color:var(--texto);font-weight:600}
.prog.fino .prog-barra{height:4px}
.prog.fino{margin:8px 0 6px}
.ranking-filtros .f:first-child{flex-basis:210px}

/* --- fila de datos 2 o 3 columnas (widgets) --- */
.datos{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--linea)}
.datos.sin-linea{border-top:0;padding-top:0}
.datos-3 .d-val,.datos-4 .d-val{font-size:var(--fs-dato)}
.datos .d-val{overflow-wrap:normal;word-break:normal}
.datos-1{--cols:1}.datos-2{--cols:2}.datos-3{--cols:3}.datos-4{--cols:4}
.datos>*{min-width:0;padding:0 12px;border-left:1px solid var(--linea);display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border-top:0;border-right:0;border-bottom:0;font:inherit;color:inherit}
.datos>*:first-child{padding-left:0;border-left:0}
.datos dt,.datos .d-etq{font-size:var(--fs-sec);color:var(--sec)}
.datos dd,.datos .d-val{font-size:var(--fs-cifra-2);font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* pulido de márgenes (docs/43): cada celda es contenedor y su cifra baja con clamp() según el ancho de la celda, hasta el
   piso de 11 px y nunca por encima de su tamaño (18 o 15 px): «Q1,500,000» ya no se parte en dos líneas */
.datos>*{container-type:inline-size}
.datos dd,.datos .d-val{font-size:clamp(var(--fs-min),13cqi,var(--fs-cifra-2))}
.datos-3 .d-val,.datos-4 .d-val{font-size:clamp(var(--fs-min),13cqi,var(--fs-dato))}
/* etiquetas y valores en celdas angostas: la palabra larga se divide con guion (español, html lang="es") en vez de partirse
   a media sílaba o salirse de la celda */
:is(.datos .d-etq,.datos .d-val,.datos .d-det,.datos dt,.mosaico-cab span,.asesor-medida strong,.asesor-medida span){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0}
/* 320 px (cierre de pendientes F5): una cifra no se parte a media cifra («Q135.0 / 0»); en tres columnas baja a 16 px */
@media(max-width:360px){.datos>*{padding:0 8px}}  /* la cifra baja sola con clamp() (abajo); antes, 14 px fijos */
.datos .d-det{font-size:var(--fs-sec);color:var(--meta)}
.datos button,.datos a{cursor:pointer;border-radius:10px}
.datos button:hover .d-val,.datos a:hover .d-val{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:520px){.datos.cuatro{--cols:2;row-gap:14px}.datos.cuatro>*:nth-child(3){padding-left:0;border-left:0}}

/* --- textos de datos (pulido de márgenes, docs/43): correos, códigos, direcciones y notas largas se parten donde haga
       falta, también dentro de filas flex y celdas de rejilla (overflow-wrap:anywhere sí reduce su ancho mínimo) --- */
:is(.nota,.cab-sub,.bloque-sub,.sub,.largo,.aviso,.d-det,.dir,.hoja-datos dd,.dl-plana dd,.banner .btx span,.info-mas>div,.mosaico small,.cab-oscura-cifra>small,.hoy-parada-lugar,.tarjeta-pie p){overflow-wrap:anywhere}

/* --- secciones --- */
.sec{margin:18px 0 0}
.sec-cab{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 8px}
.sec-cab .link{padding:4px 0}
.sec>.sec-t:only-child{margin-bottom:6px}

/* --- lista: filas blancas en píldora sobre el gris de la página (IMG_0360); dentro de un bloque, hoja o tarjeta,
       filas planas con separador fino que empieza después del ícono --- */
.lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
/* 320–400 px: una fila con botones a la derecha baja los botones bajo el texto (nunca desborda) */
@media (max-width:400px){.row:has(>.acc){flex-wrap:wrap}.row>.acc{width:100%;justify-content:flex-start;padding-left:46px}}
/* pulido de márgenes (docs/43): lo mismo cuando la LISTA es angosta aunque la pantalla sea ancha (columna de 300 px en
   escritorio): cada lista es contenedor y la fila con botones baja los botones bajo el texto */
.lista{container-type:inline-size}
/* y en cualquier ancho: el texto de una fila con botones conserva al menos 180 px; si no caben, los botones bajan */
.row:has(>.acc){flex-wrap:wrap}
.row:has(>.acc)>.t{min-width:min(180px,100%)}
.row>.acc{margin-left:auto}
@container (max-width:520px){.row:has(>.acc){flex-wrap:wrap}.row>.acc{width:100%;justify-content:flex-start;padding-left:46px}}
.lista>li{position:relative;background:var(--bloque-fondo);border-radius:var(--pildora-radio);padding:0 12px;box-shadow:var(--bloque-sombra)}
.lista>li.vacio,.lista>li.salto{background:none;box-shadow:none;padding-left:2px}
:is(.bloque,.tarjeta,dialog,.plegable,.tarjetas>li,.en-curso,.graf-card) .lista{gap:0}
:is(.bloque,.tarjeta,dialog,.plegable,.tarjetas>li,.en-curso,.graf-card) .lista>li{background:none;border-radius:0;padding:0;box-shadow:none}
:is(.bloque,.tarjeta,dialog,.plegable,.tarjetas>li,.en-curso,.graf-card) .lista>li+li::before{content:"";position:absolute;top:0;right:0;left:46px;border-top:1px solid var(--linea)}
:is(.bloque,.tarjeta,dialog,.plegable,.tarjetas>li,.en-curso,.graf-card) .lista.sin-ico>li+li::before{left:0}
.row{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 0;color:var(--texto);background:none;border:0;text-align:left;font:inherit;border-radius:0}
a.row,button.row{cursor:pointer}
a.row:hover .t>b,button.row:hover .t>b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--borde)}
.row .t{flex:1;min-width:0}
.row .t>b{display:block;font-size:var(--fs-fila);font-weight:600;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.row .t>span{display:block;font-size:var(--fs-sec);color:var(--sec);line-height:1.4;overflow-wrap:anywhere}
.row .t>span+span{margin-top:1px}
.row .t>.chips{display:flex;margin-top:4px}  /* U2.0: `.row .t>span{display:block}` pisaba el flex y los estados salían pegados («● Con factura● Por revisar») */
.row .v{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:48%;min-width:0}
.row .v>b{font-size:var(--fs-fila);font-weight:650;font-variant-numeric:tabular-nums}
.row .v>span{font-size:var(--fs-sec);color:var(--meta)}
.row .acc{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.row .chev{width:16px;height:16px;color:var(--deshab);flex:none}
.ico-fila{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;color:var(--texto);background:var(--ico-gris)}
.ico-fila svg{width:18px;height:18px}
.ico-fila.marca-ico{color:var(--marca)}
.vacio{padding:14px 0;color:var(--sec);font-size:12.5px;list-style:none}
.salto{padding:2px 0 2px 46px;color:var(--deshab);list-style:none}

/* --- fila con anillo (steady-presupuestos) --- */
.anillo{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.anillo svg.aro{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.anillo .aro-f{stroke:var(--gris-barra)}
.anillo .aro-t{stroke:var(--accion);stroke-linecap:round}
.anillo.yo .aro-t{stroke:var(--marca)}
.anillo.exceso .aro-t{stroke:var(--ok-flecha)}
.anillo .avatar-persona{width:34px;height:34px;font-size:12px}
.anillo .pos{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--accion);color:#fff;border:2px solid #fff;font-size:12px;font-weight:700;line-height:16px;text-align:center}
.anillo.yo .pos{background:var(--marca)}
.anillo .ico-anillo svg{width:18px;height:18px}
.rk.yo .t>b{font-weight:700}

/* --- chip de estado: texto de color con punto (§9; nunca bloques tintados) --- */
.chips{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.chips:empty{display:none!important}
.chip,.pill{display:inline-flex;align-items:center;gap:5px;min-height:18px;padding:0;border:0;border-radius:0;background:none;font-size:var(--fs-chip);font-weight:600;line-height:1.2;white-space:nowrap;vertical-align:middle;color:var(--est-neutro);max-width:100%}
/* pulido de márgenes (docs/43): el chip que no cabe en su línea se parte en dos líneas; nunca empuja la fila ni la caja */
.chip,.pill{white-space:normal}
.chip::before,.pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.chip.ok,.pill.ok{color:var(--est-ok)}
.chip.warn,.pill.warn{color:var(--est-warn)}
.chip.bad,.pill.bad{color:var(--est-bad)}
.chip.act,.pill.act{color:var(--est-act)}
.chip.act::before,.pill.act::before{background:var(--marca)}
.row .t>b .chip,.row .t>b .pill{margin-left:8px}

/* --- control segmentado (IMG_0360): contenedor en píldora blanca, activo en negro y contador rojo --- */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0 0 12px;padding:3px;background:var(--bloque-fondo);border-radius:18px;max-width:100%;box-shadow:var(--bloque-sombra)}
:is(.bloque,.tarjeta,dialog) .seg{background:var(--ico-gris);box-shadow:none}
.seg::-webkit-scrollbar{display:none}
.seg>a,.seg>button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;border:0;background:none;color:var(--sec);font-size:12px;font-weight:550;white-space:nowrap;cursor:pointer}
.seg>a:hover,.seg>button:hover{color:var(--texto)}
.seg>a[aria-current="page"],.seg>button[aria-current="page"]{background:var(--accion);color:#fff;font-weight:600}
.seg-cuenta{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--marca);color:#fff;font-size:var(--fs-min);font-weight:700;line-height:1}

/* --- acciones con ícono y etiqueta (navegacion fila 3) --- */
.acciones-iconos{display:flex;flex-wrap:wrap;gap:4px 6px;margin:10px 0 0}
.accion{flex:1 1 0;max-width:92px;display:inline-flex;flex-direction:column;align-items:center;gap:5px;min-width:60px;min-height:52px;padding:6px 4px;border-radius:14px;color:var(--texto);background:none;border:0;cursor:pointer;font-size:11.5px;font-weight:500;text-align:center}
.accion svg{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;background:var(--bloque-fondo);box-shadow:var(--bloque-sombra)}
:is(.bloque,.tarjeta,dialog,.tarjetas>li) .accion svg{background:var(--ico-gris);box-shadow:none}
.accion:hover svg{background:var(--gris-suave)}
.accion span{max-width:84px;line-height:1.2}

/* --- bloque negro «en curso» (pedido D de Cristopher, 8-nov-2026): izquierda hora, título y texto; derecha arriba el
       tiempo transcurrido EN VIVO y grande; derecha abajo el botón; etiquetas en la línea de la hora. En el teléfono
       angosto se apila con el botón a todo el ancho. --- */
.en-curso{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;background:var(--accion);color:#fff;border-radius:var(--bloque-radio);padding:14px 16px;margin:0 0 var(--bloque-gap);box-shadow:var(--sombra-flotante)}
.en-curso .ec-izq{min-width:0;display:flex;flex-direction:column;gap:3px}
.en-curso .ec-der{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.en-curso .ec-hora{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.en-curso .eyebrow{color:#cfcfcd;display:flex;align-items:center;gap:7px;margin:0}
.en-curso .eyebrow::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--marca);flex:none}
.en-curso h2{font-size:16px;font-weight:650;letter-spacing:-.015em;line-height:1.25;overflow-wrap:anywhere}
.en-curso p{color:#d6d6d4;font-size:12px;margin:0}
.en-curso .ec-tiempo{display:flex;flex-direction:column;align-items:flex-end;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.en-curso .ec-tiempo b{font-size:var(--fs-cifra);font-weight:650;letter-spacing:-.03em}
.en-curso .ec-tiempo span{font-size:var(--fs-sec);color:#cfcfcd;margin-top:4px}
.en-curso .ec-nota{font-size:11.5px;color:#e2e2e0;margin-top:2px}
.en-curso .ec-cuerpo{grid-column:1/-1;min-width:0}
.en-curso .accion{color:#fff}.en-curso .accion svg{background:#2c2c2b;box-shadow:none}.en-curso .accion:hover svg{background:#3a3a39}
.en-curso .datos{border-top-color:rgba(255,255,255,.16)}
.en-curso .datos>*{border-left-color:rgba(255,255,255,.16)}
.en-curso .datos .d-etq,.en-curso .datos dt{color:#cfcfcd}
.en-curso .btn.go{background:#fff;color:var(--accion);border-color:#fff}
.en-curso .btn.go:hover{background:#f0f0ee}
.en-curso .btn:not(.go){background:#2c2c2b;border-color:#2c2c2b;color:#fff}
.en-curso .link{color:#fff}
.en-curso .chip,.en-curso .pill{color:#e8e8e6}
.en-curso .chip.ok{color:#7ee2a6}.en-curso .chip.warn{color:#f3c27a}.en-curso .chip.bad{color:#ff9d8c}
.en-curso .pie-critico{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:6px 12px;flex-wrap:wrap}
.en-curso:focus-visible,.en-curso :focus-visible{outline-color:#fff}
@media (max-width:520px){
  /* angosto: el tiempo sigue arriba a la derecha (sin fila medio vacía) y el botón baja a todo el ancho */
  .en-curso .ec-der{display:contents}
  .en-curso .ec-izq{grid-column:1;grid-row:1}
  .en-curso .ec-tiempo{grid-column:2;grid-row:1;align-self:start}
  .en-curso .pie-critico{grid-column:1/-1;grid-row:2;width:100%;justify-content:stretch;margin-top:8px}
  .en-curso .pie-critico .btn.critico{flex:1 1 auto;width:100%;max-width:none}
  .en-curso .pie-critico .link{flex:none}
  .en-curso .ec-cuerpo{grid-row:3}
}

/* --- siguiente parada destacada (fila con borde carbón) --- */
.destacada{padding:var(--bloque-pad) 16px;margin:0 0 var(--bloque-gap)}
.destacada h2{font-size:16px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.destacada p.dir{font-size:12px;color:var(--sec);margin-top:3px}
.destacada .chips{margin-top:8px}
.pie-critico{margin-top:12px;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}

/* --- avisos: píldora blanca con ícono sobre el gris; dentro de un bloque, gris muy suave. El estado va en el color del
       ícono y del texto en negrita, nunca en un fondo tintado (§9) --- */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 var(--bloque-gap);font-size:12px;line-height:1.5;color:var(--sec);background:var(--bloque-fondo);border-radius:14px;box-shadow:var(--bloque-sombra)}
:is(.bloque,.tarjeta,dialog,.plegable,.tarjetas>li) .aviso{background:var(--gris-suave);box-shadow:none}
.aviso svg{width:18px;height:18px;margin-top:0;flex:none;color:var(--texto)}
.aviso b{color:var(--texto);font-weight:650}
.aviso.r svg,.aviso.r b{color:var(--est-bad)}
.aviso.a svg,.aviso.a b{color:var(--est-warn)}
.aviso.ok svg,.aviso.ok b{color:var(--est-ok)}
.aviso.r,.aviso.a{color:var(--texto)}
.aviso .acciones{margin-top:8px}
.aviso>div{flex:1;min-width:0}
.aviso p{margin:2px 0 0}

/* --- botones compactos (§2.7.2) --- */
.btn{position:relative;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--borde);background:#fff;color:var(--texto);font-size:var(--fs-btn);font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;line-height:1;transition:background .15s,opacity .15s;max-width:100%}
/* pulido de márgenes (docs/43): si el botón no cabe en su contenedor, su etiqueta baja a una segunda línea (nunca se
   corta ni empuja la fila). La altura queda como mínimo; una etiqueta corta se ve igual que antes */
.btn:not(.icono){height:auto;min-height:36px;padding-top:5px;padding-bottom:5px;line-height:1.2;white-space:normal;text-align:center;text-wrap:balance}
.btn svg{width:16px;height:16px}
.btn:hover{background:#fafaf9}
.btn:active{opacity:.75}
.btn.go,.btn.ink{background:var(--accion);border-color:var(--accion);color:#fff}
.btn.go:hover,.btn.ink:hover{background:var(--accion-hover)}
.btn.peligro{color:var(--bad);border-color:#efc6c7;background:#fff}
.btn.peligro:hover{background:var(--bad-t)}
.btn.sm{height:30px;padding:0 12px;font-size:12px}
.btn.sm:not(.icono){height:auto;min-height:30px;padding-top:4px;padding-bottom:4px}
.btn.sm svg{width:15px;height:15px}
.btn.icono{width:30px;padding:0}
.btn.critico{height:44px;max-width:280px;padding:0 22px;font-size:13.5px}
.btn.critico:not(.icono){height:auto;min-height:44px}
.btn.full{width:auto}
.btn[disabled]{background:#fff;color:var(--deshab);border-color:var(--linea);cursor:default}
.btn.go[disabled]{background:var(--gris-barra);border-color:var(--gris-barra);color:var(--sec)}
.link{appearance:none;display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:6px 2px;color:var(--texto);font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--borde);cursor:pointer}
.link svg{width:15px;height:15px}
.link:hover{text-decoration-color:var(--texto)}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* área táctil ampliada con espacio transparente, no agrandando el control */
@media (pointer:coarse){
  .btn.sm::after,.btn:not(.critico)::after,.link::after,.seg>a::after,.seg>button::after,.ico-suelto::after{content:"";position:absolute;inset:-5px -2px}
  .seg>a,.seg>button,.link{position:relative}
}

/* --- formularios --- */
.form{display:grid;gap:12px}
.f{display:block;font-size:12.5px;font-weight:550;color:var(--texto)}
.f input,.f select,.f textarea{display:block;width:100%;margin-top:5px;font-weight:400;border:1px solid var(--borde);border-radius:var(--r-campo);background:#fff;color:var(--texto);font-size:var(--fs-campo);padding:0 12px;height:38px}
.f textarea{height:auto;min-height:76px;padding:9px 12px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accion);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sec) 50%),linear-gradient(135deg,var(--sec) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.f input[type="search"],.buscar input,.f.buscador input{background:var(--gris-buscar);border-color:transparent;padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px 50%;background-size:18px 18px}
.f input[inputmode="numeric"][autocomplete="one-time-code"]{letter-spacing:.3em;text-align:center;font-size:20px}
.f small{display:block;margin-top:5px;color:var(--meta);font-size:var(--fs-sec);font-weight:400;line-height:1.45}
.ck{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--texto);min-height:38px;padding:2px 0}
.ck input{width:18px;height:18px;accent-color:var(--accion);flex:none}
.filtros{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:0 0 16px}
.filtros .f{flex:1 1 170px;min-width:0}
.filtros .ck{flex:none}
.f-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.error-formulario{color:var(--bad);font-size:12.5px;line-height:1.5;margin:0}
.error-formulario:empty{display:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.monto{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 12px;border:1px solid var(--borde);border-radius:var(--r-campo);background:#fff}
.monto i{font-style:normal;color:var(--sec);font-weight:600}
.monto input{border:0;background:none;width:9.5ch;font-size:var(--fs-campo);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--texto);padding:0}
.monto input:focus{outline:none}
.monto:focus-within{border-color:var(--accion);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.monto.grande{height:44px}
.monto.grande input{font-size:20px;width:11ch}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{appearance:none;display:grid;gap:2px;border:1px solid var(--borde);background:#fff;color:var(--texto);border-radius:14px;padding:9px 12px;text-align:left;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;line-height:1.25}
.opt small{display:block;font-size:var(--fs-sec);color:var(--sec);font-weight:500}
.opt[aria-checked="true"]{background:var(--accion);border-color:var(--accion);color:#fff}
.opt[aria-checked="true"] small{color:#d6d6d4}

/* --- hojas inferiores y diálogos (confirmar-transaccion) --- */
dialog{border:0;padding:0;background:#fff;color:var(--texto);border-radius:var(--r-hoja);width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);box-shadow:var(--sombra-flotante);overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:rgba(20,20,20,.32)}
dialog .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 4px}
dialog .dh h3{font-size:15px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
dialog .dh [data-cerrar]{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:var(--gris-buscar);border:0;color:var(--texto);text-decoration:none}
dialog .dh [data-cerrar] svg{width:16px;height:16px}
dialog .db{padding:6px 18px 18px}
dialog .db>p{color:var(--sec);font-size:12.5px;margin-bottom:10px}
.pie-hoja{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.pie-hoja .btn.go{width:100%;max-width:420px;height:44px;font-size:13.5px}
@media (max-width:640px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r-hoja) var(--r-hoja) 0 0;max-height:calc(100dvh - 24px);padding-bottom:var(--safe-b)}
  dialog::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--borde);margin:8px auto 0}
  dialog .dh{padding-top:10px}
  dialog.exito{width:100%}
  .acciones .btn.go[type="submit"]:only-child,.form>.acciones>.btn.go.full{width:100%;height:44px}
}
/* hoja contextual (ficha breve) */
.hoja-identidad{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.hoja-identidad h2{font-size:17px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.hoja-identidad p{font-size:12px;color:var(--sec);margin-top:3px}
.hoja-identidad .avatar-persona{width:52px;height:52px;font-size:17px}
.hoja-datos,.dl-plana{margin:8px 0 0}
.hoja-datos>div,.dl-plana>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linea);font-size:12.5px}
.hoja-datos dt,.dl-plana dt{color:var(--sec);flex:0 0 40%}
.hoja-datos dd,.dl-plana dd{text-align:right;font-weight:550;overflow-wrap:anywhere}
.hoja-riesgo{font-size:12.5px;line-height:1.5;color:var(--warn);padding:10px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:10px 0}
.hoja-riesgo.roja{color:var(--bad)}
.hoja-pie{display:flex;justify-content:center;margin-top:20px}
.hoja-pie .btn{width:100%;max-width:420px;height:44px}
.lead-sm{font-size:12.5px;color:var(--sec);margin:0 0 10px;line-height:1.45}
.lead-sm b{color:var(--texto);font-size:15px}

/* --- pantalla de éxito (money-exito) --- */
/* el ancho de 440 px solo en pantallas anchas: en el teléfono es hoja inferior a todo el ancho (la regla general iba
   después del @media(max-width:640px) con la misma especificidad y lo anulaba: 362 px pegada a la izquierda a 390) */
dialog.exito{text-align:center}
@media (min-width:641px){dialog.exito{width:min(440px,calc(100vw - 28px))}}
dialog.exito .dh{justify-content:flex-end;padding:16px 16px 0}
dialog.exito .dh h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
dialog.exito .dh [data-cerrar]{background:none}
dialog.exito .db{padding:4px 24px 26px}
.exito-ico{position:relative;width:96px;height:96px;margin:4px auto 14px;display:grid;place-items:center}
.exito-ico .halo{position:absolute;inset:8px;border-radius:50%;background:#dcfce7}
.exito-ico .check{position:relative;width:56px;height:56px;border-radius:50%;background:#22c55e;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px #bbf7d0}
.exito-ico .check svg{width:32px;height:32px;stroke-width:2.6}
.exito-ico i{position:absolute;width:7px;height:7px;border-radius:50%}
.exito-ico i:nth-of-type(1){top:6px;left:50%;background:#a855f7}.exito-ico i:nth-of-type(2){top:30px;left:2px;background:#f59e0b}
.exito-ico i:nth-of-type(3){top:22px;right:4px;background:#38bdf8}.exito-ico i:nth-of-type(4){bottom:14px;left:14px;background:#22c55e}
.exito-ico i:nth-of-type(5){bottom:8px;right:18px;background:var(--marca);width:9px;height:4px;border-radius:2px}
.exito h2{font-size:20px;font-weight:700;letter-spacing:-.025em}
.exito p{font-size:13px;color:var(--sec);margin:6px auto 0;max-width:320px;line-height:1.5}
.exito .pie-hoja{margin-top:26px}
@media (prefers-reduced-motion:no-preference){
  dialog.exito .check{animation:exito-entra .45s var(--ease) both}
  @keyframes exito-entra{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
}

/* --- aviso flotante --- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 28px);transform:translateX(-50%);z-index:2000;max-width:min(92vw,440px);padding:10px 16px;border-radius:999px;background:var(--accion);color:#fff;font-size:12.5px;font-weight:500;box-shadow:var(--sombra-flotante);text-align:center}
dialog .toast{position:sticky;bottom:12px;left:auto;transform:none;margin:12px auto 0;display:block;width:max-content}

/* --- tira de semana (calendario-semana) --- */
.fecha-control{margin:0 0 var(--bloque-gap)}
.fecha-semana{display:flex;align-items:stretch;gap:6px;padding:10px 8px 8px 4px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.fecha-elegida{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:0 10px 0 6px;border-right:1px solid var(--linea)}
.fecha-elegida b{font-size:var(--fs-cifra);font-weight:650;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--dia)}
.fecha-elegida span{font-size:var(--fs-sec);color:var(--sec);margin-top:3px}
.fecha-dias{flex:1;display:flex;justify-content:space-between;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.fecha-dias::-webkit-scrollbar{display:none}
.fecha-dia{position:relative;flex:1 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:9px 2px 4px;border:0;border-radius:14px;background:none;color:var(--ter);cursor:pointer;font-variant-numeric:tabular-nums}
.fecha-dia-nombre{font-size:13px;font-weight:500;text-transform:capitalize}
.fecha-dia-numero{font-size:11.5px;font-weight:600}
.fecha-dia small{font-size:var(--fs-min);color:var(--meta)}
/* FX2 (auditoría 1, P1-4): un solo componente; el día elegido en naranja (#D9762B, dirección v3) y hoy con punto */
.fecha-dia:is([aria-pressed="true"],[aria-current="page"]){color:var(--dia)}
.fecha-dia:is([aria-pressed="true"],[aria-current="page"]) .fecha-dia-nombre{font-size:14.5px;font-weight:700}
.fecha-dia:is([aria-pressed="true"],[aria-current="page"]) .fecha-dia-numero{font-weight:700}
.fecha-dia:is([aria-pressed="true"],[aria-current="page"])::after{content:"";position:absolute;bottom:0;left:50%;width:16px;height:2.5px;margin-left:-8px;border-radius:2px;background:var(--dia)}
.fecha-dia.es-hoy::before{content:"";position:absolute;top:1px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:3px;background:var(--dia)}
.fecha-dia:hover{color:var(--sec)}
.fecha-dia:is([aria-pressed="true"],[aria-current="page"]):hover{color:var(--dia)}
a.fecha-dia{text-decoration:none}
a.fecha-dia[aria-disabled="true"]{opacity:.4;pointer-events:none}
.fecha-mover{flex:none;display:grid;place-items:center;width:28px;font-size:18px;color:var(--texto);border-radius:12px}
.fecha-mover:hover{background:var(--gris-suave)}
.fecha-dia[disabled]{cursor:progress}
.fecha-error{color:var(--bad);font-size:12px;margin-top:6px}
.fecha-error:empty{display:none}

/* --- banner de campaña: imagen o bloque rojo Segura --- */
.banner{position:relative;display:block;border-radius:var(--bloque-radio);overflow:hidden;aspect-ratio:2.8/1;min-height:110px;max-height:220px;width:100%;background:var(--marca);color:#fff}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .btx{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:grid;gap:3px}
.banner.con-imagen .btx{background:linear-gradient(transparent,rgba(0,0,0,.6))}
.banner .btx b{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.banner .btx span{font-size:12px;opacity:.95;line-height:1.4}
.banner.rojo .btx{top:0;align-content:end}
/* pulido de márgenes: sin foto, el bloque rojo mide lo que su texto (el título largo ya no se corta abajo a 320) */
.banner.rojo{aspect-ratio:auto;max-height:none;display:grid;grid-template-columns:minmax(0,1fr)}
.banner.rojo .btx{position:relative;inset:auto}
.carrusel ul{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carrusel ul::-webkit-scrollbar{display:none}
.carrusel li{scroll-snap-align:start}
.carrusel .puntos{display:flex;justify-content:center;gap:6px;margin-top:10px}
.carrusel .puntos i{width:6px;height:6px;border-radius:3px;background:var(--gris-barra)}
.carrusel .puntos i.on{background:var(--texto);width:16px}

/* --- tarjetas permitidas (§2.7.3): paradas, cartera, concesionarios, asesores --- */
.tarjetas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tarjetas>li{background:var(--bloque-fondo);border:1px solid var(--bloque-borde);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:2px 14px}
.tarjetas>li.vacio{box-shadow:none;border:0;padding:14px 0;background:none}
.tarjetas .row{min-height:54px;padding:11px 0;align-items:flex-start}
.tarjetas .row .chev{margin-top:3px}
.tarjeta-pie{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:8px 0 10px;border-top:1px solid var(--linea);font-size:12px;color:var(--sec)}
.tarjeta-pie p{margin:0}
.tarjeta-pie p span{color:var(--meta);margin-right:6px}
.dato-linea{display:flex!important;align-items:center;gap:6px;font-size:11.5px!important;color:var(--sec)}
.dato-linea svg{width:14px;height:14px;color:var(--meta)}
.ord{flex:none;min-width:32px;height:32px;padding:0 6px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--ico-gris);color:var(--texto);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--borde);white-space:nowrap}
.ord.en_curso{background:var(--accion);border-color:var(--accion);color:#fff}
.ord.completada{background:var(--ok-t);border-color:transparent;color:var(--ok)}
.ord.no_realizada{background:var(--bad-t);border-color:transparent;color:var(--bad)}

/* --- panel de gráfica (graficas-barras) --- */
.graf-card{--graf-color:var(--s-teal);--graf-soft:var(--s-teal-t);background:var(--bloque-fondo);border:1px solid var(--bloque-borde);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:14px 16px;min-width:0;overflow:hidden;color:var(--texto)}
.graf-teal{--graf-color:var(--s-teal);--graf-soft:var(--s-teal-t)}.graf-coral{--graf-color:var(--s-coral);--graf-soft:var(--s-coral-t)}
.graf-purple{--graf-color:var(--s-violeta);--graf-soft:var(--s-violeta-t)}.graf-amber{--graf-color:var(--s-ambar);--graf-soft:var(--s-ambar-t)}
.graf-cabecera{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.graf-cabecera h2{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sec-t);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.graf-cabecera h2::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--graf-color);flex:none}
.graf-cabecera p{font-size:var(--fs-sec);color:var(--sec);line-height:1.4;flex-basis:100%}
.graf-destacado{display:grid;gap:2px;margin-top:10px;min-height:48px}
.graf-destacado span{font-size:var(--fs-sec);color:var(--sec)}
.graf-destacado strong{font-size:22px;line-height:1.15;font-weight:650;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.graf-scroll{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;scrollbar-width:thin;margin-top:6px}
.graf-scroll:has(>.graf-corta){overflow:visible}
.graf-scroll:focus-visible,.graf-tabla summary:focus-visible{outline:2px solid var(--accion);outline-offset:3px}
.graf-barras{display:block;min-width:100%;height:auto;max-height:240px}
.graf-corta{width:100%;min-width:0}
.graf-grid{stroke:var(--linea);stroke-width:1}
.graf-barra{fill:var(--graf-soft);transition:fill .15s}
.graf-seleccion .graf-barra{fill:var(--graf-color)}
.graf-pill{fill:var(--accion)}
.graf-dato .graf-pill{display:none}
.graf-dato,.graf-seleccion{cursor:pointer;outline:none}
.graf-dato:focus-visible .graf-barra,.graf-seleccion:focus-visible .graf-barra{stroke:var(--accion);stroke-width:2px}
.graf-etiqueta,.graf-eje{fill:var(--sec);font-family:inherit;font-size:11px}
.graf-seleccion .graf-etiqueta{fill:#fff;font-weight:600}
.graf-referencia{stroke:#a3a3a1;stroke-width:1;stroke-dasharray:4 4}
.graf-ref-label{fill:var(--texto);font-size:var(--fs-min);font-weight:600}
.graf-tabla{margin-top:10px;border-top:1px solid var(--linea);padding-top:8px}
.graf-tabla summary{cursor:pointer;color:var(--sec);font-size:var(--fs-sec);min-height:32px;line-height:32px;list-style:none}
.graf-tabla summary::-webkit-details-marker{display:none}
.graf-tabla table{width:100%;font-size:12px;border-collapse:collapse;margin-top:6px}
.graf-tabla th,.graf-tabla td{text-align:left;border-bottom:1px solid var(--linea);padding:7px 4px;font-weight:500}
.graf-tabla td{text-align:right;font-variant-numeric:tabular-nums}
.graf-tabla caption{text-align:left;padding-bottom:6px;font-size:var(--fs-sec);color:var(--sec)}
.graf-vacio{font-size:12.5px;color:var(--sec);padding:20px 0}
.graf-unica-resumen{display:grid;gap:2px;margin-top:16px}.graf-unica-resumen span{font-size:var(--fs-sec);color:var(--sec)}.graf-unica-resumen strong{font-size:22px;font-weight:600;letter-spacing:-.04em}
.graf-medidor{display:block;width:100%;height:6px;margin-top:12px;border:0;border-radius:3px;background:var(--gris-barra);appearance:none}
.graf-medidor::-webkit-meter-bar{background:var(--gris-barra);border:0;border-radius:3px;height:6px}
.graf-medidor::-webkit-meter-optimum-value{background:var(--graf-color);border-radius:3px}
.graf-medidor::-moz-meter-bar{background:var(--graf-color);border-radius:3px}
.graf-nota{font-size:var(--fs-sec);color:var(--sec);margin-top:8px}
.graf-anillo{width:140px;max-width:100%}
.graf-anillo svg{display:block;width:100%;height:auto}
.graf-anillo-fondo{stroke:var(--gris-barra)}
.graf-anillo-trazo{stroke:var(--graf-color,var(--accion));stroke-linecap:round}
.graf-anillo-cifra{font-family:inherit;font-size:22px;font-weight:600;fill:var(--texto);letter-spacing:-1px}
.graf-anillo-sub{font-family:inherit;font-size:12px;fill:var(--sec)}
.graficas-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bloque-gap);margin:0 0 var(--bloque-gap)}

/* --- avatar (foto real, iniciales de respaldo) --- */
.avatar-persona{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:#f3ece6;color:#6b4f3f;font-size:13px;font-weight:650;line-height:1;vertical-align:middle;letter-spacing:0}
.avatar-persona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.avatar-persona.grande{width:80px;height:80px;font-size:26px}

/* --- details plegables --- */
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
.plegable{margin:var(--bloque-gap) 0 0;padding:0 14px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
:is(.bloque,.tarjeta,dialog) .plegable{padding:0;background:none;box-shadow:none;border-top:1px solid var(--linea);border-radius:0}
.plegable>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;font-size:var(--fs-sec-t);font-weight:600}
.plegable>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--sec);border-bottom:2px solid var(--sec);transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .2s}
.plegable[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.plegable>summary span{display:inline-flex;align-items:center;gap:10px}
.plegable>summary .contador{margin-left:auto;font-size:12px;font-weight:500;color:var(--sec)}
.plegable>summary svg{width:18px;height:18px}
.plegable>:not(summary){margin-bottom:12px}
.mas-detalle>summary{display:inline-flex;align-items:center;min-height:32px;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--borde)}
.det{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--sec);white-space:pre-wrap;word-break:break-word;margin-top:6px;padding:8px 0 0;border-top:1px solid var(--linea)}

/* --- tabla plana (calendarios y proyecciones): sin relleno de color, líneas finas, cifras tabulares; se desplaza sola --- */
.tabla-plana-cont{overflow-x:auto;margin:16px 0 0;-webkit-overflow-scrolling:touch;position:relative}
/* pulido de márgenes (docs/43): el contenedor que se desplaza es también el bloque de referencia de lo absoluto que lleva
   dentro (las etiquetas .sr de los formularios de la tabla); si no, una etiqueta oculta en la última columna desplazaba
   la PÁGINA a lo ancho (Cierre del día y Metas a 1024 px) */
.graf-scroll,.fecha-dias,.carrusel ul{position:relative}
.tabla-plana{width:100%;min-width:420px;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.tabla-plana caption{text-align:left;font-size:12.5px;font-weight:600;color:var(--texto);padding:0 0 8px}
.tabla-plana th,.tabla-plana td{padding:8px 6px;border-bottom:1px solid var(--linea);text-align:right;white-space:nowrap;font-weight:500}
.tabla-plana thead th{font-size:var(--fs-sec);color:var(--sec);font-weight:500}
.tabla-plana th:first-child,.tabla-plana td:first-child{text-align:left;padding-left:0}
.tabla-plana tfoot th,.tabla-plana tfoot td{font-weight:650;border-bottom:0;border-top:1px solid var(--texto)}

/* --- migas y paginación --- */
.migas{font-size:12px;color:var(--sec);margin:0 0 12px}
.migas a{color:var(--texto);font-weight:550;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--borde)}
.paginacion,.lista-paginacion,.pag{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--sec)}

/* --- acceso (sin cascarón) --- */
.acceso{min-height:100dvh;display:grid;place-items:center;padding:calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 24px);background:var(--fondo-pagina)}
.acceso .caja{width:100%;max-width:400px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);padding:26px 22px;box-shadow:var(--bloque-sombra)}
.acceso .marca{margin:0 0 28px}
.acceso .marca img{width:150px;max-height:46px}
.acceso h1{font-size:var(--fs-titulo);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.acceso .lead{color:var(--sec);font-size:13px;margin:6px 0 20px}
.acceso .form .btn.go{width:100%;height:44px;font-size:13.5px;margin-top:8px}
.acceso .nota{margin-top:18px}
.acceso .aviso{margin-bottom:18px}
.clave{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:15px;letter-spacing:.06em;word-break:break-all;border:1px solid var(--borde);border-radius:12px;padding:12px 14px;user-select:all}
.qr{display:flex;justify-content:center;margin:14px 0}
.qr svg{width:200px;height:200px}
.pasos{margin:0 0 14px;padding-left:22px;color:var(--sec);font-size:13px}
.pasos li{margin-bottom:6px}
#mfa-datos{margin-bottom:18px}

/* =============================================================== 5b. secciones marcadas y componentes v3 (docs/21 §2.8, docs/28)
   Mandan sobre la «lista plana» de §2.1–2.2. Todo por tokens (§1). */
/* --- bloque de sección: blanco redondeado sobre el gris; encabezado con ícono, número de paso opcional y título; a la
       derecha, el estado (texto con punto) y la acción del bloque --- */
.bloque{background:var(--bloque-fondo);border:1px solid var(--bloque-borde);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:12px var(--bloque-pad) var(--bloque-pad);margin:0 0 var(--bloque-gap);min-width:0;scroll-margin-top:12px}
.bloque-cab{display:flex;align-items:center;gap:10px;min-height:34px;margin:0 0 6px}
.bloque-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ico-gris);color:var(--texto)}
.bloque-ico svg{width:16px;height:16px}
.bloque-t{flex:1 1 auto;min-width:min(150px,100%);display:flex;align-items:baseline;gap:7px;font-size:var(--fs-sec-t);font-weight:650;letter-spacing:-.01em;line-height:1.3}
.bloque-paso{flex:none;font-size:var(--fs-sec);font-weight:600;color:var(--ter);font-variant-numeric:tabular-nums}
.bloque-der{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:6px 10px;flex-wrap:wrap;max-width:62%;min-width:0}
.bloque-der>*{min-width:0;max-width:100%}
/* columna angosta (p. ej. En vivo a 1280): si el estado no cabe junto al título, baja a la línea de abajo */
.bloque-cab{flex-wrap:wrap}
/* mosaico angosto (dos por fila a 320 px): el ícono arriba y la etiqueta a todo el ancho del mosaico */
@container (max-width:150px){.mosaico-cab{flex-wrap:wrap;gap:4px}}
/* lo que se despliega en la cabecera del bloque (ⓘ, «Ver otro día») baja a su propia línea a todo el ancho */
.bloque-cab:has(>.bloque-der details[open]){flex-wrap:wrap}
.bloque-der:has(details[open]){flex:1 1 100%;max-width:100%;justify-content:flex-start}
.bloque-sub{font-size:var(--fs-sec);color:var(--sec);margin:-2px 0 8px 40px}
.bloque-cuerpo{min-width:0;container-type:inline-size}
/* pulido de márgenes (docs/43): cuatro datos en un bloque angosto (columna de 300 px en escritorio) van en 2 × 2, igual que
   en el teléfono; antes «Tiempo en punto» quedaba una palabra por línea en celdas de 44 px */
@container (max-width:440px){.datos.cuatro{--cols:2;row-gap:14px}.datos.cuatro>*:nth-child(3){padding-left:0;border-left:0}}
.bloque-der .cuenta-lista,.bloque-der .nota{margin:0}
.bloque-cuerpo>.datos:first-child{margin-top:4px}
.bloque .sub-t{font-size:12px;font-weight:650;color:var(--texto);margin:14px 0 2px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.bloque .sub-t span{font-size:var(--fs-sec);font-weight:500;color:var(--sec)}
.bloque .sec{margin-top:12px}
.bloque .comentarios{margin-top:0}
@media (max-width:420px){.bloque-cab{flex-wrap:wrap}.bloque-der{max-width:100%}.bloque-sub{margin-left:0}}
/* secundario plegado: info larga detrás de ⓘ */
.info-mas{margin:8px 0 0}
.info-mas>summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:var(--fs-sec);font-weight:600;color:var(--sec)}
.info-mas>summary svg{width:15px;height:15px}
.info-mas[open]>summary{color:var(--texto)}
.info-mas>div{font-size:var(--fs-sec);color:var(--sec);line-height:1.55;padding:4px 0 2px}
.info-mas>div p+p{margin-top:6px}

/* --- paso a paso (IMG_0345, §8): puntos numerados unidos por una línea fina; hecho negro con check, el actual en anillo
       rojo Segura, pendiente gris; la hora o el dato debajo --- */
.etapas{list-style:none;display:flex;margin:0 0 var(--bloque-gap);padding:12px 6px 10px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);counter-reset:etapa}
:is(.bloque,.tarjeta,dialog) .etapas{background:none;box-shadow:none;padding:6px 0}
.etapas li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:11px;color:var(--meta);counter-increment:etapa}
.etapas li::before{content:"";position:absolute;top:11px;left:calc(-50% + 14px);right:calc(50% + 14px);height:1.5px;background:var(--gris-barra)}
.etapas li:first-child::before{display:none}
.etapas li.hecho::before,.etapas li.actual::before{background:var(--accion)}
.etapas .punto{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bloque-fondo);border:1.5px solid var(--gris-barra);font-size:var(--fs-min);font-weight:700;color:var(--ter);font-variant-numeric:tabular-nums}
.etapas .punto svg{width:12px;height:12px;stroke-width:2.6}
.etapas li.hecho .punto{background:var(--accion);border-color:var(--accion);color:#fff}
.etapas li.actual .punto{border:2px solid var(--marca);color:var(--marca)}
.etapas b{max-width:100%;font-size:11.5px;font-weight:600;color:var(--texto);line-height:1.2;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
@media (max-width:420px){.etapas b{font-size:var(--fs-min);letter-spacing:-.02em}}
.f small.opcional{display:inline;margin:0;font-size:var(--fs-sec)}
.etapas li.pendiente b{color:var(--sec);font-weight:500}
.etapas li.actual b{color:var(--marca)}
.etapas small{font-size:var(--fs-min);color:var(--meta);font-variant-numeric:tabular-nums}
@media (max-width:360px){.etapas b{font-size:var(--fs-min)}.etapas small{font-size:var(--fs-min)}}

/* --- barra de acción fija (confirmar-transaccion): en el teléfono, sobre la cápsula de navegación y respetando el área
       segura; con lo que falta escrito en el mismo botón. En escritorio va al pie del contenido --- */
.barra-accion{position:fixed;z-index:880;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b) + var(--nav-h) + 6px);width:calc(100% - 24px);max-width:440px;display:flex;align-items:center;gap:8px;padding:6px;background:var(--bloque-fondo);border-radius:28px;box-shadow:var(--sombra-flotante)}
.barra-accion .btn{flex:1 1 auto;min-width:0;height:44px;max-width:none;font-size:13.5px;white-space:normal;line-height:1.2;text-align:center}
.barra-accion .btn.sec{flex:0 0 auto;background:var(--ico-gris);border-color:var(--ico-gris);color:var(--sec)}
.barra-accion .btn.sec:only-child{flex:1 1 auto} /* FX2 (P2-12): la barra sin elegir se lee (texto gris sobre gris claro) y ocupa la barra */
.barra-accion .btn[data-falta]{background:var(--gris-barra);border-color:var(--gris-barra);color:var(--texto)}
.barra-accion .link{flex:none;padding:6px 10px}
.barra-accion .barra-nota{flex:1 1 100%;font-size:var(--fs-sec);color:var(--sec);text-align:center;margin:0 4px}
.barra-accion.doble{flex-wrap:wrap}
@media (min-width:1024px){
  .bloque .barra-accion{display:contents}
  .barra-accion{position:static;transform:none;width:auto;max-width:none;margin:var(--bloque-gap) 0 0;justify-content:flex-end;box-shadow:var(--bloque-sombra);border-radius:var(--bloque-radio);padding:10px 12px}
  .barra-accion .btn{flex:0 1 auto;max-width:360px;padding:0 22px}
}

/* --- cabecera oscura (IMG_0346): cifra principal centrada, acciones redondas (la principal en blanco) y dos mosaicos --- */
.cab-oscura{background:var(--cab-oscura);color:var(--cab-texto);border-radius:var(--bloque-radio);padding:12px 14px 14px;margin:0 0 var(--bloque-gap);min-width:0}
.cab-oscura-arriba{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;min-height:26px}
.cab-oscura-arriba .bloque-paso{color:var(--cab-sec)}
.cab-oscura-arriba .cab-oscura-t{display:flex;align-items:baseline;gap:7px;margin:0;font-size:var(--fs-sec-t);font-weight:650;color:#fff}
.cab-oscura-arriba .eyebrow{color:var(--cab-sec);margin:0;display:flex;gap:6px;align-items:baseline}
.cab-oscura .chip,.cab-oscura .pill{color:#e8e8e6}
.cab-oscura .chip.ok{color:#7ee2a6}.cab-oscura .chip.warn{color:#f3c27a}.cab-oscura .chip.bad{color:#ff9d8c}
.cab-oscura-cifra{text-align:center;margin:8px 0 4px}
.cab-oscura-cifra>span{display:block;font-size:12px;color:var(--cab-sec)}
.cab-oscura-cifra strong{display:block;font-size:var(--fs-cifra);font-weight:650;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.cab-oscura-cifra strong .gris{color:#8f8f8d;font-weight:550}
.cab-oscura-cifra strong .pre{font-size:.62em;margin-right:2px;vertical-align:.4em;color:#bdbdbb}
.cab-oscura-cifra>small{display:block;font-size:var(--fs-sec);color:var(--cab-sec);margin-top:2px}
.cab-oscura-acc{display:flex;justify-content:center;gap:4px 16px;flex-wrap:wrap;margin:10px 0 2px}
.cab-oscura-acc>a,.cab-oscura-acc>button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:56px;padding:0;background:none;border:0;color:var(--cab-texto);font-size:11.5px;font-weight:500;cursor:pointer}
.cab-oscura-acc i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--cab-accion);color:#fff}
.cab-oscura-acc .principal i{background:#fff;color:var(--accion)}
.cab-oscura-acc svg{width:18px;height:18px}
.cab-oscura-acc>*:hover i{filter:brightness(1.12)}
.cab-oscura-acc [aria-disabled="true"]{opacity:.55}
.mosaicos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.mosaico{background:var(--cab-mosaico);border-radius:16px;padding:10px 12px;min-width:0}
.mosaico-cab{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--cab-sec)}
.mosaico-cab i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#444443;color:#fff;flex:none}
.mosaico-cab svg{width:13px;height:13px}
.mosaico b{display:block;font-size:var(--fs-cifra-2);font-weight:650;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* pulido de márgenes: la cifra del mosaico baja con el ancho del mosaico (clamp) en vez de partirse a media cifra */
.mosaico{container-type:inline-size}
.mosaico b{font-size:clamp(14px,15cqi,var(--fs-cifra-2))}
.mosaico-cab span{min-width:0;hyphens:auto;-webkit-hyphens:auto}
.mosaico small{display:block;font-size:var(--fs-sec);color:var(--cab-sec);margin-top:2px;line-height:1.35}
/* mosaicos claros (Te toca decidir, U2): gris muy claro con el número en negro */
.mosaicos.claros .mosaico{background:var(--gris-suave)}
.mosaicos.claros .mosaico-cab{color:var(--sec)}.mosaicos.claros .mosaico-cab i{background:var(--bloque-fondo);color:var(--texto)}
.mosaicos.claros .mosaico small{color:var(--sec)}

/* --- aprobaciones en anillos con ícono (IMG_0360 «Your rank»): verde hecho, rojo le toca, gris pendiente; barra fina --- */
.anillos{list-style:none;display:flex;gap:6px;margin:4px 0 0;padding:0}
.anillos li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.anillos .aro-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--gris-barra);color:var(--ter);background:var(--bloque-fondo)}
.anillos .aro-i svg{width:18px;height:18px}
.anillos li.hecho .aro-i{border-color:var(--est-ok);color:var(--est-ok)}
.anillos li.turno .aro-i{border-color:var(--marca);color:var(--marca)}
.anillos li.rechazado .aro-i{border-color:var(--est-bad);color:var(--est-bad)}
.anillos b{font-size:11px;font-weight:650;line-height:1.2;color:var(--texto);overflow-wrap:anywhere}
.anillos li.hecho b{color:var(--est-ok)}.anillos li.turno b{color:var(--marca)}.anillos li.pendiente b{color:var(--sec);font-weight:500}
.anillos small{font-size:var(--fs-min);color:var(--meta);line-height:1.25;overflow-wrap:anywhere}
.anillos-avance{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;font-size:var(--fs-sec);color:var(--sec)}
.anillos-avance b{color:var(--texto)}
.barra-fina{height:4px;border-radius:2px;background:var(--gris-barra);margin-top:6px;overflow:hidden}
.barra-fina i{display:block;height:100%;width:0;border-radius:2px;background:var(--dia)}

/* --- isla oscura para alertas en vivo (IMG_0354): visita abierta y aviso al alejarse; botón verde --- */
.isla{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 7px 7px 14px;background:var(--isla);color:#fff;border-radius:999px;box-shadow:var(--sombra-flotante)}
.isla-ico{flex:none;position:relative;display:grid;place-items:center;width:26px;height:26px;color:#fff}
.isla-ico svg{width:20px;height:20px}
.isla-ico::after{content:"";position:absolute;top:0;right:-1px;width:8px;height:8px;border-radius:50%;background:var(--marca);border:2px solid var(--isla)}
.isla-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.isla-txt small{font-size:var(--fs-min);color:#a9a9a7}
.isla-txt b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isla .btn{flex:none;height:34px;padding:0 14px;font-size:12px;border:0}
.isla .btn.ok-isla{background:var(--isla-ok);color:var(--isla-ok-texto)}
.isla .btn.gris-isla{background:#2c2c2b;color:#fff}
a.isla:hover .isla-txt b{text-decoration:underline;text-underline-offset:3px}
.visita-ind{margin:0 0 8px}
.visita-ind .isla-ver{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--isla-ok);color:var(--isla-ok-texto);font-size:11.5px;font-weight:650}
/* aviso al alejarse: isla flotante arriba (no es una ventana: la pantalla sigue usable) */
.isla-alerta{position:fixed;z-index:2100;left:50%;transform:translateX(-50%);top:calc(var(--safe-t) + 10px);width:calc(100% - 20px);max-width:520px;flex-wrap:wrap;border-radius:26px;padding:12px 12px 12px 14px;gap:10px 12px}
.isla-alerta .isla-txt b{white-space:normal}
.isla-alerta .isla-txt span{font-size:11.5px;color:#cfcfcd;margin-top:2px}
.isla-alerta .isla-acc{display:flex;gap:8px;flex:1 1 100%;justify-content:flex-end}
.isla-alerta:focus-visible{outline:2px solid #fff}
@media (prefers-reduced-motion:no-preference){.isla-alerta{animation:isla-entra .35s var(--ease) both}@keyframes isla-entra{from{transform:translate(-50%,-14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}}

/* --- interruptor (ejecución de la visita) --- */
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0;font-size:13px;cursor:pointer}
.interruptor+.interruptor{border-top:1px solid var(--linea)}
.interruptor span{flex:1;min-width:0}
.interruptor small{display:block;font-size:var(--fs-sec);color:var(--sec)}
.interruptor input{appearance:none;flex:none;position:relative;width:42px;height:25px;margin:0;border-radius:13px;background:var(--gris-barra);cursor:pointer;transition:background .15s}
.interruptor input::after{content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s var(--ease)}
.interruptor input:checked{background:var(--accion)}
.interruptor input:checked::after{transform:translateX(17px)}
.interruptor input:focus-visible{outline:2px solid var(--accion);outline-offset:2px}

/* --- foto con miniatura y quitar --- */
.foto-campo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.foto-mini{position:relative;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--ico-gris);flex:none}
.foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
.foto-campo .acc-foto{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}

/* --- U2.0 · E1 lista y detalle (ui.listaDetalle): en el teléfono una columna (la lista, o el detalle con «Volver»);
       desde 1024 px la lista a la izquierda (400 px) y el detalle a la derecha, sin cambiar de pantalla --- */
.lista-detalle{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bloque-gap);align-items:start}
.lista-detalle>*{min-width:0}
.lista-detalle.con-detalle>.ld-lista{display:none}
.lista-detalle:not(.con-detalle)>.ld-detalle{display:none}
.ld-vacio{padding:24px 6px;color:var(--sec);font-size:var(--fs-cuerpo)}
.ld-volver{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px}
.ld-volver .atras{width:16px;height:16px;transform:rotate(180deg)}
/* --- U2.0 · E3 tabla ordenable con paginación de 20 (ui.tabla) --- */
.tabla-e3 th button{all:unset;cursor:pointer;color:inherit;font:inherit}
.tabla-e3 th button:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:4px}
.tabla-e3 th[aria-sort="ascending"] button::after{content:" ↑"}
.tabla-e3 th[aria-sort="descending"] button::after{content:" ↓"}
.tabla-e3 tbody tr[data-id]{cursor:pointer}
.tabla-e3 td.vacio{text-align:left;color:var(--sec);padding:16px 0}
.paginas{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:10px 0 0;font-size:var(--fs-sec);color:var(--sec)}

/* =============================================================== 6. módulos (disposición propia, sin colores nuevos) */
/* inicio */
.inicio-ruta{margin:0 0 22px}
.inicio-ruta.sin-paradas{padding:16px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.inicio-ruta .sec-cab{margin-bottom:10px}
.inicio-otras{margin-top:16px}
.ranking-bloque+.ranking-bloque{margin-top:22px}
@media (min-width:1024px){.rejilla>.ranking-bloque{margin-top:0}}
.ranking-bloque h3{font-size:var(--fs-sec-t);font-weight:650;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ranking-bloque h3 small{font-size:var(--fs-sec);font-weight:500;color:var(--sec)}
.ranking-falta{font-size:12px;color:var(--sec);margin:4px 0 4px}
.fecha-ev{flex:none;display:grid;place-items:center;width:36px;height:36px;line-height:1.05;font-size:var(--fs-min);color:var(--sec);text-transform:uppercase}
.fecha-ev b{font-size:15px;color:var(--texto);font-weight:700}
/* agenda del equipo */
.equipo-control{margin:0 0 22px}
.equipo-periodo-barra{display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap}
.equipo-periodo-barra .f{flex:0 1 240px}
.equipo-rango-fecha{font-size:12px;color:var(--sec);padding-bottom:10px}
.equipo-periodo-error{color:var(--bad);font-size:12px;margin-top:8px}
.equipo-periodo-error:empty{display:none}
.asesor-card .row{align-items:center}
.asesor-medidas{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:12px 0;border-top:1px solid var(--linea)}
.asesor-medida{min-width:0;padding:0 12px;border-left:1px solid var(--linea)}
.asesor-medida:first-child{padding-left:0;border-left:0}
.asesor-medida-titulo{display:block;font-size:var(--fs-sec);color:var(--sec)}
.asesor-medida strong{display:block;font-size:var(--fs-cifra-2);font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0}
.asesor-medida .detalle{display:block;font-size:var(--fs-sec);color:var(--meta)}
.asesor-operacion{font-size:11.5px;color:var(--sec);padding:0 0 12px}
.asesor-alert{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 0;margin:0;border:0;border-top:1px solid var(--linea);background:none;color:var(--warn);font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.asesor-alert span{flex:1}
.asesor-alert svg{width:18px;height:18px}
/* concesionarios */
.cartera-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.cartera-barra .seg{margin:0}
.cartera-datos{position:relative}
.cartera-datos>summary{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--borde);border-radius:999px;font-size:13.5px;font-weight:600}
.cartera-datos>summary svg{width:16px;height:16px}
.cartera-datos>div{position:absolute;right:0;top:40px;z-index:20;display:grid;gap:6px;padding:10px;background:#fff;border:1px solid var(--linea);border-radius:16px;box-shadow:var(--sombra-flotante)}
.cartera-datos:not([open])>div{display:none}
@media (max-width:520px){.cartera-datos[open]{flex-basis:100%}.cartera-datos>div{position:static;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;box-shadow:var(--bloque-sombra)}}
.cartera-filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:14px 0 6px}
.cuenta-lista{font-size:12px;color:var(--sec);margin:10px 0 8px}
.conc-cab-chips{margin:-8px 0 16px}
.conc-indicadores .datos{margin-top:8px}
.conc-corte{font-size:13px;color:var(--meta)}
.visita-gestion{margin:0 0 var(--bloque-gap)}
.visita-gestion.plana{padding:var(--bloque-pad) 16px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.visita-gestion h2{font-size:16px;font-weight:650;letter-spacing:-.015em}
.visita-gestion p{font-size:12px;color:var(--sec);margin-top:3px}
.en-curso.visita-gestion p{color:#d6d6d4}
.mapa{position:relative;z-index:0;border-radius:var(--r-panel);overflow:hidden;background:#fff;border:1px solid var(--borde-panel)}
.mapa.grande{height:max(420px,calc(100dvh - 330px))}
.mapa.mini{height:220px}
.prop-mapa{height:200px;margin:10px 0}
.foto-visita{display:block;max-width:100%;max-height:420px;border-radius:var(--r-panel);margin:6px 0 12px}
.ctc{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea)}
.ctc .link{justify-self:start}
.ubm{position:relative;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--borde-panel)}
.ubmap{height:240px}
.cruz{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:500;pointer-events:none;color:var(--marca)}
.cruz svg{width:34px;height:34px;stroke-width:2.2;fill:#fff}
.ub-acc{margin-top:10px}
.ub-pegar{margin-top:10px}
.props>li{padding:16px 0}
.prop-det{font-size:13px;margin:6px 0}
/* hoja de salida sin señal (registrarSalida sin id, U1): cabecera y pie estables, solo el contenido se desplaza */
.visita-form .rejilla{align-items:start}
.visita-contacto{margin-top:12px}
.visita-contacto-nota{margin:4px 0 10px}
.visita-vendedores{margin-top:10px}
.visita-salida{margin-top:12px}
dialog.flujo-visita{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:hidden;display:flex;flex-direction:column}
dialog.flujo-visita:not([open]){display:none}
.flujo-visita .dh{flex:none}
.flujo-visita .db{display:flex;flex-direction:column;min-height:0;padding:0 20px;overflow:hidden}
.flujo-visita .db>p.visita-contexto{flex:none;display:grid;gap:2px;margin:0;padding:0 0 10px;color:var(--sec);font-size:12px}
.flujo-visita .db>p.visita-contexto b{color:var(--texto);font-size:15px}
.flujo-visita .visita-form{display:flex;flex-direction:column;min-height:0;gap:0}
.visita-progreso{flex:none}
.visita-paso{flex:none;font-size:var(--fs-sec);font-weight:600;color:var(--sec);margin:0;padding:0 0 8px}
.visita-pasos{display:flex;gap:6px;padding:0 0 14px}
.visita-pasos i{flex:1;height:4px;border-radius:2px;background:var(--gris-barra)}
.visita-pasos i.actual{background:var(--accion)}
.visita-contenido{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 12px;flex:1 1 auto}
.visita-contenido .aviso{margin:0 0 14px}
.flujo-visita .opts{grid-template-columns:1fr;gap:8px}
.flujo-visita .opt{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px}
.flujo-visita .opt small{text-align:right;max-width:130px}
.visita-alternativas{margin-top:12px}
.visita-alternativas>summary{display:inline-flex;min-height:36px;align-items:center;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--borde)}
.visita-grupo{margin:0 0 18px;display:grid;gap:12px}
.visita-grupo legend{font-size:12.5px;font-weight:650;margin-bottom:6px}
.visita-resultado{font-size:13px;font-weight:600;padding:0 0 12px;margin:0 0 14px;border-bottom:1px solid var(--linea)}
.visita-adjunto{display:inline-flex;gap:8px;cursor:pointer}
.visita-adjunto-estado{font-size:var(--fs-sec);color:var(--sec)}
.visita-adjunto-estado:empty{display:none}
.visita-pie{flex:none;padding:12px 0 calc(16px + var(--safe-b));border-top:1px solid var(--linea);background:#fff;text-align:center;display:grid;justify-items:center;gap:4px}
.visita-pie .btn{width:min(100%,280px);height:44px;font-size:13.5px}
.visita-pie-final{display:grid;justify-items:center;gap:2px;width:100%}
.flujo-visita [data-error]{color:var(--bad);font-size:12.5px;line-height:1.5;text-align:left;justify-self:stretch;margin:0 0 6px}
.flujo-visita [data-error]:empty{display:none}
.visita-accion{margin:16px 0}
/* cotizaciones */
.cot-editor{margin:0 0 var(--bloque-gap);padding:var(--bloque-pad) 16px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.cot-editor h2{font-size:15px;font-weight:650}
.cot-editor-pie{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cot-lista>li{padding:12px 14px}
.cot-lista .sec-cab{margin:0}
.cot-lista h3{font-size:14px;font-weight:600;margin:2px 0 6px}
.cot-accion{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cot-accion svg{width:16px;height:16px}
.cot-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:var(--fs-sec);color:var(--meta);margin-top:8px}
.cot-historial ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:12px}
.cot-historial span{color:var(--meta);font-size:var(--fs-sec)}
/* cotizador (F4a): formulario a la izquierda y resultado en vivo a la derecha (fijo al desplazar en computadora) */
.cot-campos{display:grid;gap:12px;margin:0 0 6px}
.cot-campos>legend{margin:18px 0 2px}
.cotizador .form>.cot-campos:first-child>legend{margin-top:0}
.cot-cliente-fijo{padding:0 0 12px;border-bottom:1px solid var(--linea)}
.cot-cliente-fijo p{font-size:13px}
.cot-vivo{margin-top:18px}
.cot-vivo .pie-hoja{margin-top:16px}
.cot-res .dl-plana>div{padding:8px 0;font-size:12.5px}
.cot-res .dl-plana dt{flex:1 1 auto}
.cot-res .dl-plana dd{flex:none;white-space:nowrap}
.cot-tasas{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 0 0;border-top:1px solid var(--linea)}
.cot-tasa-op .cifra{margin:2px 0 0}
.cot-tasas-sec{display:flex;gap:18px;margin:0 0 4px}
.cot-tasas-sec>div{display:grid;gap:1px;text-align:right}
.cot-tasas-sec dt{font-size:var(--fs-sec);color:var(--sec)}
.cot-tasas-sec dd{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cot-chips{margin:-10px 0 14px}
.cot-acciones{margin-bottom:18px}
.cot-grupo{margin-top:22px}
.tarjeta-pie-acc{display:inline-flex;gap:14px;flex-wrap:wrap}
.consentimiento p{font-size:12.5px;color:var(--sec);margin:0 0 8px;line-height:1.55}
@media (min-width:1024px){.cotizador .cot-vivo{position:sticky;top:24px;margin-top:0}}
/* expediente, bandeja «Por validar» e indicadores de cotizaciones (F4b): solo disposición, sin colores nuevos */
.expediente .datos{margin-bottom:4px}
.exp-etapa{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px}
.exp-etapa .nota{margin:0}
.exp-grupo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 0 2px}
.exp-grupo .cuenta-lista{font-weight:500;margin:0}
.exp-req .row,.exp-bandeja .row{align-items:flex-start}
.exp-req .row .acc,.exp-bandeja .row .acc{max-width:48%;padding-top:2px}
.exp-acciones{margin:16px 0 4px}
.btn.cargando{opacity:.55;pointer-events:none}
.emb-docs{margin-top:12px}
.emb-filtros .f{flex:0 1 220px}
.req-item{border-top:1px solid var(--linea);padding:6px 0 10px}
.req-item legend{width:100%}
.req-opc{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;padding-left:30px}
.req-opc .f input{height:36px}
@media (max-width:640px){
  .exp-req .row,.exp-bandeja .row{flex-wrap:wrap}
  .exp-req .row .acc,.exp-bandeja .row .acc{width:100%;max-width:none;justify-content:flex-start;padding-left:52px}
  .exp-grupo{flex-wrap:wrap}
  .req-opc{grid-template-columns:1fr;padding-left:0}
  .emb-filtros{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .emb-filtros .f:first-child{grid-column:1/-1}
}
/* jornada, auditoría de recorridos y liquidación (F5): solo disposición; colores del sistema (carbón para el plan, teal de serie para lo recorrido) */
.rastro-ind{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 14px;border-radius:999px;background:var(--bloque-fondo);color:var(--est-ok);font-size:12px;font-weight:600;text-decoration:none}
.rastro-ind svg{width:16px;height:16px}
.rastro-ind .punto{width:8px;height:8px;border-radius:4px;background:currentColor;flex:none}
.rastro-ind.mal{color:var(--est-warn)}
.jornada-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 var(--bloque-gap);background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.jornada-fila p{flex:1;min-width:0;display:grid;gap:2px}
.jornada-fila p b{font-size:14px;font-weight:650}
.jornada-fila p span{font-size:11.5px;color:var(--sec)}
.jornada-fila .btn{flex:none}
.en-curso.jornada h2{font-size:15px}
.mapa.audit{height:min(560px,max(340px,calc(100dvh - 300px)))}
.recorrido{stroke:var(--s-teal);stroke-width:4;stroke-opacity:.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.parada-larga{stroke:var(--warn);stroke-width:2;fill:var(--warn);fill-opacity:.18}
.pin-m{display:flex!important;align-items:center;justify-content:center;border-radius:11px;background:#fff;border:2px solid var(--s-teal);color:var(--texto);font-size:11px;box-shadow:var(--sombra-tarjeta)}
.pin-m b{font-weight:800;font-variant-numeric:tabular-nums}
.pin-m.alerta{border-color:var(--warn);background:var(--warn-t);color:var(--warn)}
.sw.plan{background:var(--accion);height:4px;border-radius:2px;width:16px}
.sw.real{background:var(--s-teal);height:4px;border-radius:2px;width:16px}
.sw.marca{background:#fff;box-shadow:inset 0 0 0 2px var(--s-teal)}
/* Reglamento de Viáticos (docs/25): tramo sin ajustar a calles (punteado gris, no se paga) y la línea de la pirámide */
.recorrido.pendiente{stroke:#9A9A98;stroke-width:3;stroke-dasharray:6 8;stroke-opacity:.95}
.sw.pend{height:0;width:16px;border-top:3px dashed #9A9A98;background:none}
.tramo-linea{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-size:13px}
.tramo-linea .chip{max-width:100%;height:auto;min-height:24px;padding-block:4px;white-space:normal;line-height:1.3}
.vehiculo-docs .row .acc{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.leyenda-audit{justify-content:flex-start;max-width:none;margin:10px 0 0}
.tl-hora{flex:none;width:48px;font-size:11.5px;font-weight:650;color:var(--sec);font-variant-numeric:tabular-nums;padding-top:2px}
.tl-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-right:8px;border-radius:10px;border:1.5px solid var(--s-teal);font-size:11px;font-weight:800;vertical-align:1px}
.linea-tiempo .row,.marcas-auto .row{align-items:flex-start}
.linea-tiempo li.hueco .t b{color:var(--warn)}
.audit-filtros .f{flex:0 1 200px}
.audit-tiempos{margin-bottom:6px}
.liq-acciones{margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--linea)}
.liq-rejilla{align-items:start}
.liq-almuerzos li.dia-alm .row{min-height:40px;padding:8px 0 2px}
.liq-almuerzos li.dia-alm .t>b{font-size:12.5px}
.liq-almuerzos li.del-dia>.row{padding-left:46px}
.liq-almuerzos li.del-dia::before{left:46px!important}
.liq-gastos .row{align-items:flex-start}
.liq-gastos .row .acc{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:52%}
.liq-gastos li.retirado .t b{color:var(--deshab)}
.factura-img{display:block;max-width:100%;max-height:70dvh;margin:0 auto;border-radius:var(--r-campo);border:1px solid var(--linea)}
.km-grupo{border:0;padding:0;margin:0;display:grid;gap:10px}
.km-grupo+.km-grupo{border-top:1px solid var(--linea);padding-top:14px}
.gasto-factura{margin-top:6px}
@media (max-width:640px){
  .jornada-fila{flex-wrap:wrap}
  .jornada-fila .btn{margin-left:48px}
  .liq-gastos .row{flex-wrap:wrap}
  .liq-gastos .row .acc{width:100%;max-width:none;justify-content:flex-start;padding-left:46px}
  .tl-hora{width:44px}
}
/* metas */
.metabloque .acc{display:flex;gap:8px;flex-wrap:wrap}
.t-link{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--texto)}
.pesos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* anuncios */
.mini-banner{flex:none;width:72px;height:40px;border-radius:10px;object-fit:cover}
.aud{display:grid;gap:2px}
.aud [data-modo]{padding:4px 0 4px 30px;display:grid}
.banner.previa{margin-top:10px}
.banner.solo{margin:0 0 20px}
.lecturas{display:grid;gap:18px}
/* notificaciones */
.notifs .punto{flex:none;width:8px;height:8px;border-radius:4px;background:transparent;margin-left:2px}
.notifs .row.nueva .punto{background:var(--marca)}
.notifs .row.nueva .t>b{font-weight:700}
.notifs .row:not(.nueva) .t>b{font-weight:500}
/* cuenta */
.perfil-cab{display:flex;align-items:center;gap:18px;margin:0 0 6px}
.perfil-cab h2{font-size:17px;font-weight:650;letter-spacing:-.02em}
.perfil-cab p{font-size:12px;color:var(--sec)}
.perfil-foto{display:flex;align-items:center;gap:18px;margin:6px 0 4px}
.perfil-foto-acciones{display:grid;gap:8px;min-width:0}
.perfil-guardar{display:flex;gap:8px;flex-wrap:wrap}
.perfil-archivo{font-size:var(--fs-sec);color:var(--sec);overflow-wrap:anywhere}
.perfil-ayuda{font-size:var(--fs-sec);color:var(--meta);margin-top:6px}
.perfil-error{color:var(--bad);font-size:12.5px}
.perfil-error:empty,.perfil-mensaje:empty{display:none}
.perfil-mensaje{font-size:12.5px;color:var(--ok)}
/* administración › puestos: árbol de la estructura (sangría por profundidad vía data-prof; sin colores propios) */
.arbol>li[data-prof="1"]{margin-left:14px}.arbol>li[data-prof="2"]{margin-left:28px}.arbol>li[data-prof="3"]{margin-left:42px}
.arbol>li[data-prof="4"]{margin-left:56px}.arbol>li[data-prof="5"]{margin-left:70px}
.arbol>li.inactivo .row .t>b{color:var(--sec);font-weight:500}
.arbol>li.inactivo .ico-fila{border-style:dashed}
@media (max-width:640px){.arbol .row{flex-wrap:wrap}.arbol .row .acc{width:100%;justify-content:flex-start;padding-left:52px}}
@media (min-width:720px){.arbol>li[data-prof="1"]{margin-left:28px}.arbol>li[data-prof="2"]{margin-left:56px}.arbol>li[data-prof="3"]{margin-left:84px}.arbol>li[data-prof="4"]{margin-left:112px}.arbol>li[data-prof="5"]{margin-left:140px}}
/* comentarios (comentarios.js): planos, con separadores */
.comentarios{margin-top:var(--bloque-gap)}
.cms,.resp{list-style:none;margin:0;padding:0}
li.cm{padding:10px 0;border-bottom:1px solid var(--linea)}
.cms>li.cm:last-child{border-bottom:0}
.resp{margin:8px 0 0 20px}
.resp li.cm{padding:8px 0;border-bottom:0}
.cmh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cmh b{font-size:13px}
.cmt{font-size:13px;line-height:1.55;margin-top:3px;overflow-wrap:anywhere}
li.cm.retirado .cmt{color:var(--deshab)}
.mencion{font-weight:650}
.cma{display:flex;gap:14px}
.cma .link,.cmh .link{padding:4px 0;font-size:var(--fs-sec)}
.adj{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.adj img{width:96px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--linea)}
.cmform{position:relative;display:grid;gap:8px;margin-top:12px}
.cmform textarea{width:100%;border:1px solid var(--borde);border-radius:var(--r-campo);background:#fff;color:var(--texto);padding:9px 12px;font-size:var(--fs-campo);resize:vertical;min-height:72px;line-height:1.5}
.cmpie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmpie .archivos{flex:1;min-width:0;font-size:var(--fs-sec);overflow-wrap:anywhere;color:var(--sec)}
.adjuntar{cursor:pointer}
.sug{list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--linea);border-radius:16px;box-shadow:var(--sombra-flotante);display:grid;gap:2px}
.sug button{width:100%;display:grid;text-align:left;border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--texto);min-height:40px}
.sug button:hover,.sug button:focus-visible{background:#fafaf9}
.sug button span{font-size:var(--fs-sec);color:var(--sec)}
.resp-form:empty{display:none}
.comentarios .card{padding:0;border:0;box-shadow:none;background:none}
/* mapa (Leaflet: colores por clase, nunca estilos en línea) */
.leaflet-container{font:inherit;font-size:12px;background:#fff}
.leaflet-tooltip{font-size:12px;border-radius:10px;border:1px solid var(--linea);box-shadow:var(--sombra-tarjeta);color:var(--texto)}
.leaflet-control-attribution{font-size:11px}
.leaflet-bar{border:1px solid var(--borde)!important;border-radius:12px!important;box-shadow:var(--sombra-tarjeta)!important;overflow:hidden}
.leaflet-bar a{width:36px!important;height:36px!important;line-height:36px!important;color:var(--texto)!important;background:#fff!important;border-bottom-color:var(--linea)!important}
.leaflet-bar a:hover{background:#fafaf9!important}
.zona{stroke-width:1;fill-opacity:.12}
.zona.roja{stroke:var(--marca);fill:var(--marca)}
.zona.prec{stroke:var(--warn);stroke-dasharray:4 4;fill:none}
.terr{stroke-width:1.2;stroke-dasharray:5 5;fill-opacity:.06}
path.cm{stroke:#fff;stroke-width:1.5;fill-opacity:.92}
.t0{fill:var(--t0);stroke:var(--t0)}.t1{fill:var(--t1);stroke:var(--t1)}.t2{fill:var(--t2);stroke:var(--t2)}.t3{fill:var(--t3);stroke:var(--t3)}
.t4{fill:var(--t4);stroke:var(--t4)}.t5{fill:var(--t5);stroke:var(--t5)}.t6{fill:var(--t6);stroke:var(--t6)}.t7{fill:var(--t7);stroke:var(--t7)}
path.cm.t0,path.cm.t1,path.cm.t2,path.cm.t3,path.cm.t4,path.cm.t5,path.cm.t6,path.cm.t7{stroke:#fff}
path.cm.validar{stroke:var(--texto);stroke-width:2;stroke-dasharray:2 2}
path.cm.rojo{fill:var(--marca);stroke:#fff;opacity:.75}
path.cm.yo{fill:var(--accion);stroke:#fff;stroke-width:2.5}
path.cm.antes{fill:var(--ter)}
path.cm.dup{fill:var(--s-ambar)}
.radio{stroke:var(--accion);stroke-width:1.5;stroke-dasharray:4 4;fill:var(--accion);fill-opacity:.06}
.ruta{stroke:var(--accion);stroke-width:4;stroke-opacity:.85;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ruta.recta{stroke-width:3;stroke-dasharray:7 9}
.pin-n{display:flex!important;align-items:center;justify-content:center;border-radius:13px;background:#fff;border:2px solid var(--accion);color:var(--texto);font-size:12px;box-shadow:var(--sombra-tarjeta)}
.pin-n b{font-weight:800;font-variant-numeric:tabular-nums}
.pin-n.completada{background:var(--ok-t);border-color:var(--ok);color:var(--ok)}
.pin-n.en_curso,.pin-n.sig{background:var(--accion);border-color:var(--accion);color:#fff}
.pin-n.no_realizada{background:var(--bad-t);border-color:var(--bad);color:var(--bad)}
.pin-ofi{display:flex!important;align-items:center;justify-content:center;border-radius:8px;background:var(--accion);color:#fff;box-shadow:var(--sombra-tarjeta)}
.pin-ofi svg{width:16px;height:16px}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-sec);color:var(--sec);align-items:center;justify-content:flex-end;max-width:640px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:6px;display:inline-block;background:var(--ter)}
.sw.t0{background:var(--t0)}.sw.t1{background:var(--t1)}.sw.t2{background:var(--t2)}.sw.t3{background:var(--t3)}.sw.t4{background:var(--t4)}.sw.t5{background:var(--t5)}.sw.t6{background:var(--t6)}.sw.t7{background:var(--t7)}
.sw.roja{background:var(--bad-t);box-shadow:inset 0 0 0 1.5px var(--marca);border-radius:3px}
.sw.prec{background:var(--warn-t);box-shadow:inset 0 0 0 1.5px var(--warn);border-radius:3px}
.sw.ofi{background:var(--accion);border-radius:3px}
.mapa-filtros .f{flex:1 1 130px}
/* F6 · Territorios (Mapa › Territorios) y tramos que pasan por zona roja */
.terr-form .f{flex:1 1 160px}
.terr-form .btn{flex:none}
.terr-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 10px}
.terr-cab .seg{margin:0}
.terr-cab .nota{margin:0}
.terr-mapa{height:max(380px,calc(100dvh - 380px))}
.terr-estado{margin:0 0 4px}
.terr-acciones{margin:16px 0 4px}
.terr-color{flex:none;width:14px;height:14px;border-radius:50%;margin:0 13px}
.terr-color.t0{background:var(--t0)}.terr-color.t1{background:var(--t1)}.terr-color.t2{background:var(--t2)}.terr-color.t3{background:var(--t3)}
.terr-color.t4{background:var(--t4)}.terr-color.t5{background:var(--t5)}.terr-color.t6{background:var(--t6)}.terr-color.t7{background:var(--t7)}
path.cm.cambia{stroke:var(--texto);stroke-width:2.5}
path.cm.foraneo{stroke-dasharray:2 2}
.sw.cambia{background:#fff;box-shadow:inset 0 0 0 2.5px var(--texto)}
.tramo-rojo{stroke:var(--marca);stroke-width:2.5;fill:var(--marca);fill-opacity:.12;stroke-dasharray:3 3}
@media (max-width:640px){.terr-mapa{height:360px}.terr-form .btn{width:auto}}
@media (max-width:640px){.leyenda{justify-content:flex-start}}

/* 6.U2 · campo del asesor */
/* (U2 escribe SOLO debajo de esta marca y antes de la de U3; docs/29 §11.2) */
/* Lote U2 (docs/30): Hoy (A1–A5) con la visita en 5 pasos, Bienvenida (A0), Clientes (A9), Cartera (A6), ficha (A7),
   Cotizar con origen (A8) y la cotización en pestañas (A10). Solo disposición: colores y tamaños salen de los tokens §1. */
/* --- Hoy: una columna por importancia en el teléfono; E2 de 3 columnas (5·4·3) desde 1024 px --- */
.hoy-e2{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap)}
.hoy-e2>*{min-width:0}
.hoy-e2>.hoy-c2:empty,.hoy-e2>.hoy-c3:empty{display:none}
.hoy-senal{margin:0 0 8px}
.hoy-isla{margin:0 0 var(--bloque-gap);flex-wrap:wrap;border-radius:22px}
.hoy-isla .isla-txt b{white-space:normal}
.hoy-cab .cab-oscura-cifra strong{overflow-wrap:anywhere}
.hoy-de-ayer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 2px;font-size:12px;color:var(--sec)}
.hoy-otro-dia>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--sec);padding:4px 0}
.hoy-otro-dia>summary::-webkit-details-marker{display:none}
.bloque-der:has(.hoy-otro-dia[open]){max-width:100%;flex:1 1 100%}
.bloque-cab:has(.hoy-otro-dia[open]){flex-wrap:wrap}
.hoy-otro-dia[open] .fecha-control{margin:6px 0 0}
.hoy-parada-nombre{font-size:var(--fs-cifra-2);font-weight:650;letter-spacing:-.02em;line-height:1.2;margin:0 0 2px}
.hoy-parada-lugar{font-size:12px;color:var(--sec);margin:0 0 6px}
.hoy-opo,.hoy-campana-linea{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12.5px;color:var(--texto)}
.hoy-opo svg,.hoy-campana-linea svg{width:16px;height:16px;flex:none}
.hoy-siguiente .acciones-iconos{margin-top:10px}
.hoy-faltan{display:block;font-size:var(--fs-sec);font-weight:600;color:var(--est-bad)}
.hoy-faltan:empty{display:none}
.hoy-cerrado-nota{margin:4px 2px var(--bloque-gap)}
.hoy-campana,.hoy-llamadas,.hoy-resto{margin-bottom:var(--bloque-gap)}
/* durante la visita (y su llegada) el recordatorio «Visita abierta · Registrar salida» de U1 sobra: la visita ya está en
   pantalla con su barra «Confirmar y finalizar» */
.main:has(.hoy-e2[data-hoy-estado="en_visita"]) .visita-ind,.main:has(.hoy-e2[data-hoy-estado="llegada"]) .visita-ind{display:none!important}
#paso-oportunidades .lista{margin-top:8px}
/* tira de la ruta (A2): un círculo por parada, desplazable; hecha negra con hora, siguiente en anillo rojo Segura,
   pendiente gris y no realizada tachada con punto rojo (estados como texto: nunca rayas laterales) */
.hoy-tira{background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:10px 6px 8px;margin:0 0 var(--bloque-gap)}
.tira-ruta{list-style:none;display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 4px 4px;scrollbar-width:none}
.tira-ruta::-webkit-scrollbar{display:none}
.tira-ruta li{position:relative;flex:0 0 74px;scroll-snap-align:start}
.tira-ruta li::before{content:"";position:absolute;top:13px;left:calc(-50% + 14px);right:calc(50% + 14px);height:1.5px;background:var(--gris-barra)}
.tira-ruta li:first-child::before{display:none}
.tira-ruta li.hecho::before{background:var(--accion)}
.tira-ruta button{all:unset;box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer;padding:0 2px}
.tira-ruta button:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:10px}
.tira-ruta .punto{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bloque-fondo);border:1.5px solid var(--gris-barra);font-size:11px;font-weight:700;color:var(--ter);font-variant-numeric:tabular-nums}
.tira-ruta .punto svg{width:13px;height:13px;stroke-width:2.6}
.tira-ruta b{max-width:100%;font-size:11px;font-weight:600;line-height:1.2;color:var(--texto);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tira-ruta small{font-size:var(--fs-min);color:var(--meta)}
.tira-ruta li.hecho .punto{background:var(--accion);border-color:var(--accion);color:#fff}
.tira-ruta li.actual .punto{border:2px solid var(--marca);color:var(--marca)}
.tira-ruta li.actual b,.tira-ruta li.actual small{color:var(--marca)}
.tira-ruta li.curso .punto{border:2px solid var(--accion);color:var(--accion)}
.tira-ruta li.pendiente b{color:var(--sec);font-weight:500}
.tira-ruta li.no b{text-decoration:line-through;color:var(--sec);font-weight:500}
.tira-ruta li.no .punto::after{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--est-bad);border:2px solid var(--bloque-fondo)}
/* pasos de la visita con vuelta: los hechos se pueden tocar */
.pasos-nav li.se-puede{cursor:pointer}
.pasos-nav li.se-puede:hover b{text-decoration:underline;text-underline-offset:3px}
.pasos-nav li.se-puede:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:10px}
/* paso ② de la visita: sí / no y contador − / + grandes (44 px) */
.si-no{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:4px 0}
.si-no+.si-no,.si-no+.contador-mm{border-top:1px solid var(--linea)}
.si-no-etq{flex:1;min-width:0;font-size:13px;font-weight:550}
.si-no-etq small{display:block;font-size:var(--fs-sec);color:var(--sec);font-weight:500}
.si-no-btn{display:inline-flex;gap:2px;padding:3px;background:var(--ico-gris);border-radius:22px}
.si-no-btn button{appearance:none;border:0;background:none;min-width:58px;height:38px;border-radius:19px;font-size:13px;font-weight:600;color:var(--texto);cursor:pointer}
.si-no-btn button[aria-pressed="true"]{background:var(--accion);color:#fff}
.contador-mm{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0}
.cmm-etq{flex:1;min-width:0;font-size:13px;font-weight:550}
.cmm-ctl{display:inline-flex;align-items:center;gap:6px}
.cmm-btn{appearance:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--ico-gris);color:var(--texto);cursor:pointer}
.cmm-btn svg{width:18px;height:18px}
.cmm-ctl input{width:56px;height:44px;text-align:center;font-size:var(--fs-campo);font-weight:650;border:1px solid var(--borde);border-radius:12px;background:#fff}
/* cierre del día (A4): una fila por parada con motivo y «Pasar a» */
.cierre-lista>li{padding:10px 0;border-bottom:1px solid var(--linea)}
.cierre-lista>li:last-child{border-bottom:0}
.cierre-parada-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 4px}
.cierre-parada-t b{font-size:13px}
.cierre-parada-t span{font-size:var(--fs-sec);color:var(--sec)}
/* Bienvenida (A0): «1 de 4» y un paso por pantalla; en escritorio, pasos a la izquierda y el contenido a la derecha */
.pasos-v{list-style:none;display:flex;gap:6px;margin:0 0 var(--bloque-gap);padding:0;overflow-x:auto}
.pasos-v li{display:flex;align-items:center;gap:6px;flex:none;font-size:11.5px;color:var(--sec);background:var(--bloque-fondo);border-radius:16px;padding:4px 10px 4px 4px}
.pasos-v .punto{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gris-barra);font-size:var(--fs-min);font-weight:700;background:var(--bloque-fondo)}
.pasos-v .punto svg{width:12px;height:12px;stroke-width:2.6}
.pasos-v li.hecho .punto{background:var(--accion);border-color:var(--accion);color:#fff}
.pasos-v li.actual{color:var(--texto);font-weight:600}
.pasos-v li.actual .punto{border:2px solid var(--marca);color:var(--marca)}
.bienvenida{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap);max-width:760px;margin:0 auto}
.bienvenida-cab{max-width:760px;margin-left:auto;margin-right:auto}
.bienvenida-texto{font-size:13px;line-height:1.6}
.bienvenida-doc{border:0;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--linea)}
.bienvenida-doc legend{font-size:12.5px;font-weight:600;padding:0}
.bienvenida-foto{align-self:end}
.bienvenida-avatar{display:flex;align-items:center;gap:12px}
/* Clientes (A9) y Cartera (A6) */
.row.elegida{background:var(--gris-suave)}
.clientes-seg{margin-bottom:8px}
.clientes-lista .row .t span.txt-rojo{color:var(--est-bad)}
.cartera-mas-filtros{margin:0 0 10px}
.cartera-mas-filtros .cartera-filtros{margin-top:6px}
.cartera-dia{margin:14px 2px 6px}
.cartera-e3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bloque-gap)}
.cartera-tabla{background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:4px 14px 10px;min-width:0}
.cartera-tabla tr[data-fila]{cursor:pointer}
.cartera-tabla tr[data-fila]:hover td,.cartera-tabla tr.elegida td{background:var(--gris-suave)}
.cartera-tabla .link{font-weight:600;text-align:left;white-space:normal}
.cartera-tabla :is(th,td):nth-child(-n+3){text-align:left}
.cartera-tabla td:nth-child(2){white-space:normal;min-width:150px}
.cartera-tabla .tabla-plana{min-width:0}
/* ficha (A7): identidad a la izquierda y las 4 pestañas a la derecha */
.conc-hoy{font-weight:600}
.ficha-seg{margin-bottom:10px}
/* Cotizar (A8) y la cotización en pestañas (A10) */
.cot-origen{background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra);padding:10px 14px;margin:0 0 var(--bloque-gap)}
.cot-origen p:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:12.5px}
.cot-origen svg{width:16px;height:16px;flex:none}
.cot-origen .nota{margin-top:4px}
.form .cot-origen{box-shadow:none;background:var(--gris-suave)}
.cot-origen-fijo{margin:0 0 8px}
.cot-res-cab{margin-bottom:var(--bloque-gap)}
.cot-res .cot-tasas-sec{display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 6px;font-size:12px}
.cot-res .cot-tasas-sec>div{display:flex;gap:6px}.cot-res .cot-tasas-sec dt{color:var(--sec)}.cot-res .cot-tasas-sec dd{margin:0;font-weight:600}
.cot-vivo .cot-barra{margin-top:12px}
.cot-migas{margin:0 0 8px}
.cot-a10{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap)}
.cot-a10>*{min-width:0}
.cot-a10:not(.escritorio) .cot-seg-esc,.cot-a10.escritorio .cot-seg-tel{display:none}
.cot-cab .cab-oscura-cifra strong{overflow-wrap:anywhere}
.exp-avance{margin:2px 0 10px}
.exp-avance p{font-size:12.5px;margin:0}
.exp-coment-lectura{margin-top:10px}
@media (min-width:1024px){
  .hoy-e2{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);align-items:start}
  .hoy-e2[data-hoy-estado="en_visita"],.hoy-e2[data-hoy-estado="llegada"]{grid-template-columns:minmax(0,1fr);max-width:760px}
  .hoy-e2[data-hoy-estado="cierre"],.hoy-e2[data-hoy-estado="cerrado"]{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hoy-e2[data-hoy-estado="cierre"]>.hoy-c3,.hoy-e2[data-hoy-estado="cerrado"]>.hoy-c3{grid-column:2}
  .tira-ruta li{flex-basis:88px}
  .bienvenida{grid-template-columns:200px minmax(0,1fr)}
  .bienvenida:not(:has(.bienvenida-pasos)){grid-template-columns:minmax(0,1fr)}
  .bienvenida .pasos-v{flex-direction:column;overflow:visible}
  .bienvenida .pasos-v li{background:none;padding:4px 0}
  .bienvenida~.barra-accion{max-width:760px;margin-left:auto;margin-right:auto}
  .cartera-e3{grid-template-columns:minmax(0,1fr) 260px;align-items:start}
  .cartera-detalle{position:sticky;top:20px}
  .ficha-a7{align-items:start}
  .cot-a10.escritorio{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}

/* =============================================================== 7. escritorio: barra lateral blanca y cuadrícula de 12 */
.rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap)}
.rejilla>*{min-width:0}
@media (min-width:720px){
  .graficas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .graficas-grid>.graf-card:only-child{grid-column:1/-1}
  .cartera-filtros{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
  .cartera-filtros.cartera-propia{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .lecturas{grid-template-columns:1fr 1fr}
  .tarjetas.dos-col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  :root{--fs-titulo:22px;--fs-saludo:20px}   /* los campos quedan en 16 px siempre (el teléfono no acerca la pantalla; regresión v21) */
  /* U2.0: barra lateral FIJA y de alto completo (antes sticky de 100dvh: a 1280 terminaba a unos 900 px y debajo se veía
     el gris de la página); el contenido se corre el ancho de la barra */
  .shell{display:block;min-height:100dvh;padding-left:var(--lado);background:linear-gradient(to right,var(--blanco) var(--lado),transparent var(--lado))} /* la columna blanca llega al pie también en capturas de página completa */
  .side{display:flex;flex-direction:column;position:fixed;z-index:800;top:0;bottom:0;left:0;width:var(--lado);padding:20px 12px 16px;background:#fff;border-right:0;overflow-y:auto}
  /* E1 (docs/43): la parte principal (el detalle) 7 columnas y la lista 5; desde 1440, 8 y 4 (abajo) */
  .lista-detalle{grid-template-columns:minmax(300px,5fr) minmax(0,7fr)}
  .lista-detalle>.ld-lista,.lista-detalle.con-detalle>.ld-lista,.lista-detalle:not(.con-detalle)>.ld-detalle{display:block}
  .lista-detalle .ld-volver{display:none}
  .side-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 6px 22px 10px}
  .side-top .marca img{width:120px}
  .side-nav{display:grid;gap:2px}
  .side-nav a{display:flex;align-items:center;gap:11px;height:36px;padding:0 12px;border-radius:999px;color:var(--texto);font-size:13px;font-weight:500}
  .side-nav a svg{width:19px;height:19px}
  .side-nav a:hover{background:var(--gris-suave)}
  .side-nav a[aria-current="page"]{background:var(--accion);color:#fff;font-weight:600}
  .side-pie{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--linea)}
  .side-perfil{display:flex;align-items:center;gap:10px;color:var(--texto)}
  .side-perfil .avatar-persona{width:34px;height:34px;font-size:12px}
  .side-perfil b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
  .side-perfil small{display:block;font-size:var(--fs-sec);color:var(--sec);line-height:1.35}
  .tabbar,.mtop{display:none}
  /* pulido de márgenes (docs/43): rejilla de página. Sin el tope de 1180 px heredado del teléfono: el contenido llega
     hasta los márgenes de la página (24 · 32 · 40 · 48 px a 1024 · 1280 · 1440 · 1920) y solo a 2560 se topa en 1680 px */
  .main,.main.ancho-oficina{max-width:var(--pagina-max);padding:26px var(--pagina-margen) 56px}
  .main:has(.barra-accion){padding-bottom:56px}
  .cab{margin-top:0;margin-bottom:16px}
  .rejilla{grid-template-columns:repeat(12,minmax(0,1fr))}
  .rejilla>*{grid-column:1/-1}
  .rejilla>.c-4{grid-column:span 4}.rejilla>.c-5{grid-column:span 5}.rejilla>.c-6{grid-column:span 6}
  .rejilla>.c-7{grid-column:span 7}.rejilla>.c-8{grid-column:span 8}
  .graficas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toast{bottom:28px}
  .cartera-filtros{max-width:880px}
}
@media (min-width:1280px){.graficas-grid.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* pulido de márgenes (docs/43): margen lateral de la página por ancho */
@media (min-width:1024px){:root{--pagina-margen:24px}}
@media (min-width:1280px){:root{--pagina-margen:32px}}
@media (min-width:1440px){:root{--pagina-margen:40px}.lista-detalle{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
@media (min-width:1920px){:root{--pagina-margen:48px}}
@media (min-width:1024px){
  /* E1 sin elegido: no se deja una columna en blanco con «Elige…»; la lista ocupa el ancho (las vistas que pueden abren
     el primero: Cartera, Clientes, Prospectos y Usuarios) */
  .lista-detalle:has(>.ld-detalle>.ld-vacio:only-child){grid-template-columns:minmax(0,1fr)}
  .lista-detalle>.ld-detalle:has(>.ld-vacio:only-child){display:none!important}
  /* E3: la tabla llena su columna y sus columnas crecen con ella */
  .tabla-e3,.tabla-plana{width:100%}
  /* G1 y rejillas de tarjetas: cada columna llega al pie de la fila (la última tarjeta crece), sin huecos debajo */
  .rejilla>[class*="c-"]{display:flex;flex-direction:column}
  /* una sola columna con contenido ocupa la fila; una columna vacía no se pinta */
  .rejilla>[class*="c-"]:only-child{grid-column:1/-1}
  .rejilla>[class*="c-"]:empty{display:none}
  .rejilla:has(>[class*="c-"]:empty)>[class*="c-"]:not(:empty){grid-column:1/-1}
  .rejilla>[class*="c-"]>:is(.bloque,.tarjeta,.graf-card,.panel-grafica,.cifra-tarj,.cab-oscura,.sec):last-child{flex:1 1 auto}
  /* formularios de oficina en 2 columnas cuando su caja lo permite (≥ 2 × 300 px); en hojas y paneles angostos, 1 */
  .main .form{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(300px,calc((100% - 12px) / 2))),1fr));column-gap:16px}
  .main .form>:not(label.f:not(:has(textarea,[type="file"]))){grid-column:1/-1}
  /* textos largos: ancho de lectura (65–75 caracteres) en el texto, nunca en la disposición */
  .main :is(.nota,.cab-sub,.bloque-sub,.largo,.info-mas>div,.lead-sm,.sub,.aviso>span,.aviso>div,li.vacio,.ld-vacio){max-width:var(--lectura)}
}

/* 6.U3 · equipo, bandejas y oficina */
/* (U3 escribe SOLO debajo de esta marca y antes de §8; docs/29 §11.2) */
/* --- cabecera con filtros en la línea del título (E3) y segmentados de oficina --- */
.cab-linea{align-items:flex-end}
.cab-linea .cab-acc{justify-content:flex-end}
.cab-linea .cab-acc .seg{margin:0}
.filtros.en-linea{margin:0;flex-wrap:nowrap;gap:8px}
.filtros.en-linea .f{flex:0 1 auto;min-width:120px;font-size:11.5px}
.filtros.en-linea .f input,.filtros.en-linea .f select{height:36px;margin-top:3px}
@media (max-width:640px){.filtros.en-linea{flex-wrap:wrap;width:100%}.filtros.en-linea .f{flex:1 1 140px}}
.seg.ritual{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.seg.ritual>a{padding:0 11px}
.seg-oscuro{background:var(--cab-mosaico);box-shadow:none;margin:0}
.seg-oscuro>button{color:var(--cab-sec)}
.seg-oscuro>button[aria-current="page"]{background:#fff;color:var(--accion)}

@media (min-width:1024px){.solo-movil{display:none!important}}
.sub-t{font-size:12px;font-weight:650;color:var(--texto);margin:12px 0 4px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sub-t span{font-size:var(--fs-sec);font-weight:500;color:var(--sec)}
.sub-t:first-child{margin-top:2px}

/* --- J1 · Equipo en vivo: islas, filas con foto en vivo, paradas mini y E4 (lista · mapa · lado) --- */
.isla-equipo{margin:0 0 8px;box-shadow:none}
.isla-equipo .isla-txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.islas-apiladas .isla-equipo .isla-txt b{-webkit-line-clamp:2}
.isla-equipo.cierre .isla-ico::after{background:var(--isla-ok)}
.btn-isla{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:var(--isla-ok);color:var(--isla-ok-texto);font-size:11.5px;font-weight:650;white-space:nowrap}
.islas-equipo{margin:0 0 var(--bloque-gap)}
.mas-alertas>summary{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;margin:0 0 8px;border-radius:999px;background:var(--bloque-fondo);font-size:var(--fs-sec);font-weight:650;cursor:pointer;box-shadow:var(--bloque-sombra)}
.islas-apiladas{display:grid;gap:6px;margin:0 0 var(--bloque-gap)}
.islas-apiladas .isla-equipo{margin:0}
.foto-vivo{position:relative;flex:none;display:inline-flex}
.foto-vivo>i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent}
.foto-vivo.en_visita>i{background:var(--est-ok)}
.foto-vivo.en_traslado>i{background:#9a9a98}
.foto-vivo.sin_ubicacion>i{background:var(--est-warn)}
.paradas-mini{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:5px}
.paradas-mini{gap:3px!important;margin-right:6px}
.paradas-mini::before{display:none!important}
.paradas-mini i{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--gris-barra)}
.paradas-mini i.completada{background:var(--accion)}
.paradas-mini i.en_curso{background:#fff;box-shadow:0 0 0 2px var(--marca)}
.paradas-mini i.no_realizada{background:var(--est-bad);opacity:.55}
.paradas-mini i.reasignada{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sec)}
.paradas-mini i.reasignada.completada{background:var(--accion);box-shadow:none}
/* J1 en el teléfono: el estado en una línea (la ficha J2 tiene el detalle), así caben 3 asesores sin desplazarse (J1-1) */
.equipo-vivo .row .t>span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg.ritual{margin-bottom:8px}
.paradas-mini b{font-size:var(--fs-min);color:var(--sec);font-weight:600}
.lista>li.fila-asesor{display:flex;align-items:center;gap:8px}
.lista>li.fila-asesor>.row{flex:1 1 auto;min-width:0}
.lista>li.fila-asesor>.acc{flex:none}
.lista>li.fila-asesor>.acc .btn{padding:0 10px}
@media (max-width:340px){.lista>li.fila-asesor{flex-wrap:wrap}.lista>li.fila-asesor>.acc{padding:0 0 8px 46px}}
/* columnas angostas (3 y 4 de 12): el estado y el enlace del bloque bajan bajo el título, nunca se salen */
@media (min-width:1024px){.rejilla>.c-3{grid-column:span 3}}
:is(.c-3,.c-4,.e4-lado) .bloque-cab{flex-wrap:wrap}
:is(.c-3,.c-4,.e4-lado) .bloque-der{max-width:100%;justify-content:flex-start}
.tabla-campo tfoot td{font-weight:650;background:var(--gris-suave);border-top:1px solid var(--borde)}
.tabla-campo tfoot td small{display:block;font-size:var(--fs-min);color:var(--meta);font-weight:400}
.equipo-e4{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap);align-items:start}
.equipo-e4>*{min-width:0}
.e4-mapa{display:none}
.pantalla-equipo.ver-mapa .e4-mapa{display:block}
.e4-lado .islas-apiladas{display:none}
.mapa-equipo{height:320px;border-radius:14px;overflow:hidden;background:var(--gris-suave)}
.sin-ubic{margin-top:8px}
.sin-ubic>li{display:flex;align-items:baseline;gap:8px;padding:5px 0;background:none;box-shadow:none;font-size:var(--fs-sec);color:var(--sec)}
.sin-ubic>li b{color:var(--texto);font-weight:600}
.punto-gris{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--deshab);align-self:center}
.pin-asesor-cont{background:none;border:0}
.pin-asesor{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #9a9a98,var(--sombra-tarjeta)}
.pin-asesor .avatar-persona{width:28px;height:28px;font-size:var(--fs-min)}
.pin-asesor.en_visita{box-shadow:0 0 0 3px var(--est-ok),var(--sombra-tarjeta)}
.resaltado .pin-asesor{transform:scale(1.25);box-shadow:0 0 0 3px var(--marca),var(--sombra-flotante)}
.parada-mapa{stroke:#fff;stroke-width:1.5;fill:#b9b9b7;fill-opacity:1}
.parada-mapa.completada{fill:var(--accion)}
.parada-mapa.en_curso{fill:var(--marca)}
.parada-mapa.no_realizada{fill:var(--est-bad);fill-opacity:.5}
.mosaicos.enlaces a.mosaico{display:block;color:var(--texto);border:1px solid transparent}
.mosaicos.enlaces a.mosaico:hover{border-color:var(--borde)}
.mosaicos.enlaces a.mosaico b{margin-top:4px}
.mosaicos.enlaces a.mosaico.alerta b{color:var(--est-bad)}
.mosaicos.enlaces a.mosaico.activo{border-color:var(--accion)}
@media (min-width:1024px){
  .equipo-e4{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}
  .e4-mapa{display:block;position:sticky;top:16px}
  .mapa-equipo{height:520px}
  .pantalla-equipo [data-islas-cont]{display:none}
  .e4-lado .islas-apiladas{display:grid}
  .e4-lado .mosaicos.enlaces{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* --- J3 · Cierre del día: una fila por asesor (teléfono) o la tabla E3 (escritorio); la tira de semana es la de §5 (FX2) --- */
.cierre-asesor{padding:12px!important}
.cierre-cab{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cierre-cab>div{flex:1;min-width:0}
.cierre-cab b{display:block;font-size:var(--fs-fila)}
.retro-form{display:flex;gap:6px;align-items:center;margin-top:8px}
.retro-form input{flex:1;min-width:0;height:36px;border:1px solid var(--borde);border-radius:var(--r-campo);padding:0 10px;font-size:var(--fs-campo);background:#fff}
.retro-previas{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.retro-previas li{font-size:var(--fs-sec);color:var(--sec)}
.retro-previas li b{color:var(--texto)}
.retro-previas li span{display:block;color:var(--texto);font-size:12px}
.cierre-escritorio{display:none}
@media (min-width:1024px){.cierre-movil{display:none}.cierre-escritorio{display:block}}
.tabla-cierre td,.tabla-campo td{vertical-align:top}
.tabla-cierre td b,.tabla-campo td b{display:inline-block;font-weight:650}
.tabla-cierre td small,.tabla-campo td small{display:block;font-size:var(--fs-min);color:var(--meta);font-weight:400;white-space:normal}
.tabla-cierre .retro-form{margin:0;min-width:240px}
.celda-persona{display:inline-flex;align-items:center;gap:8px;color:var(--texto);font-weight:600}
.celda-persona .avatar-persona{width:26px;height:26px;font-size:var(--fs-min)}
.tabla-equipo{margin-top:-2px}
.tabla-equipo td{font-weight:650;background:var(--gris-suave)}
.tabla-equipo td b{font-weight:700}
.tabla-equipo td small{display:block;font-size:var(--fs-min);color:var(--meta);font-weight:400}
.flecha{display:inline-flex;align-items:center;gap:1px;margin-left:5px;font-size:var(--fs-min);font-weight:650;vertical-align:middle}
.flecha svg{width:11px;height:11px;stroke-width:2.4}
.flecha.sube{color:var(--est-ok)}.flecha.baja{color:var(--est-bad)}.flecha.igual{color:var(--meta)}

/* --- J2 · una persona en una página: paneles con segmentado en el teléfono, todo a la vista en escritorio --- */
.j2 .panel{display:none}
.j2 .panel.activo{display:block}
@media (min-width:1024px){.j2 .panel{display:block}}

/* --- J4 · Por decidir (E1): mosaicos en el teléfono, secciones en la línea del título en escritorio --- */
.secciones-decidir{display:none}
.decidir-mosaicos{margin:0 0 var(--bloque-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.decidir-mosaicos .mosaico{background:var(--bloque-fondo);box-shadow:var(--bloque-sombra)}
.lista>li.sel{box-shadow:0 0 0 2px var(--accion)}
:is(.bloque) .lista>li.sel{box-shadow:none;background:var(--gris-suave)}
.tabla-e3 tr.sel td,.tabla-e3 tr[aria-selected="true"] td{background:var(--gris-suave)}
.ld-detalle{min-width:0}
.det-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:12px var(--bloque-pad);margin:0 0 var(--bloque-gap);background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.det-cab>div:first-child{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px}
.det-cab h2{font-size:15px;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.det-cab p{font-size:var(--fs-sec);color:var(--sec)}
.det-acc{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.det-acc .principal-det{display:none}
.det-cuerpo{min-width:0}
.visor{margin:0 0 var(--bloque-gap);padding:8px;background:var(--bloque-fondo);border-radius:var(--bloque-radio);box-shadow:var(--bloque-sombra)}
.visor img{display:block;width:100%;max-height:540px;object-fit:contain;border-radius:12px;background:var(--gris-suave)}
.visor-pdf{display:flex;align-items:center;gap:10px;padding:16px}
.visor-pdf svg{width:22px;height:22px}
.visor-pdf p{flex:1}
.miniaturas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--bloque-gap)}
.miniaturas .btn.activo{background:var(--accion);border-color:var(--accion);color:#fff}
.mapa-prop{height:220px;border-radius:14px;overflow:hidden;margin:0 0 var(--bloque-gap);background:var(--gris-suave)}
.comentario-decision{margin:0 0 var(--bloque-gap)}
@media (min-width:1024px){
  .secciones-decidir{display:inline-flex}
  .decidir-mosaicos{display:none}
  .det-acc .principal-det{display:inline-flex}
  .lista-detalle.ld-ancha{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .lista-detalle .ld-detalle{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto;padding-bottom:12px}
}

/* --- G1 · Tablero de Gerencia y Dirección --- */
.embudo-g1{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.embudo-g1 li{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(0,2fr) 44px;align-items:center;gap:10px;font-size:12px}
.embudo-g1 li b{text-align:right;font-variant-numeric:tabular-nums}
.embudo-g1 .prog{margin:0}

/* --- J9 · visita acompañada: guía de 1 · 2 · 3, anillos por criterio, elegir asesor --- */
.crit-lista{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px}
.crit{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.crit b{font-size:11px;font-weight:650;line-height:1.2;overflow-wrap:anywhere}
.crit small{font-size:var(--fs-min);color:var(--meta)}
.crit.ok .anillo .aro-t{stroke:var(--est-ok)}.crit.ok small{color:var(--est-ok)}
.crit.warn .anillo .aro-t{stroke:#d29a2a}.crit.warn small{color:var(--est-warn)}
.crit.bad .anillo .aro-t{stroke:var(--est-bad)}.crit.bad small{color:var(--est-bad)}
@media (min-width:720px){.crit-lista{grid-template-columns:repeat(6,minmax(0,1fr))}}
.guia-form .criterio{border:0;border-top:1px solid var(--linea);margin:0;padding:10px 0 8px;min-width:0}
.guia-form .criterio:first-of-type{border-top:0}
.guia-form legend{display:block;padding:0;margin-bottom:6px}
.guia-form legend b{display:block;font-size:13px}
.guia-form legend small{display:block;font-size:var(--fs-sec);color:var(--sec);line-height:1.35}
.escala{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.escala-op{position:relative;display:block;cursor:pointer}
.escala-op input{position:absolute;opacity:0;width:1px;height:1px}
.escala-op span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:4px;border-radius:12px;background:var(--gris-suave);border:1px solid var(--borde);font-size:var(--fs-min);color:var(--sec);line-height:1.15;text-align:center}
.escala-op span b{font-size:15px;color:var(--texto)}
.escala-op input:checked+span{background:var(--accion);border-color:var(--accion);color:#fff}
.escala-op input:checked+span b{color:#fff}
.escala-op input:focus-visible+span{outline:2px solid var(--accion);outline-offset:2px}
.comentario-crit{display:block;width:100%;margin-top:6px;height:36px;border:1px solid var(--borde);border-radius:var(--r-campo);padding:0 10px;font-size:var(--fs-campo);background:#fff}
.isla-acomp{margin:0 0 var(--bloque-gap)}
.elegir-asesor>li.sel{background:var(--gris-suave)}
.elegir-asesor button.row[aria-pressed="true"] .t>b::after{content:" ✓";color:var(--est-ok)}
.btn.go-suave{background:var(--gris-suave)}
.lista>li.actual{box-shadow:inset 0 0 0 1.5px var(--marca);border-radius:12px}
.orden-crit{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ico-gris);font-size:12px;font-weight:700}
.criterio-ed{border:0;padding:0;margin:0 0 6px}
.criterio-ed legend{font-size:12px;font-weight:650;margin-bottom:4px}
.paradas-reasignar{border:1px solid var(--linea);border-radius:12px;padding:8px 12px;max-height:240px;overflow:auto}
.paradas-reasignar .ck{display:flex;gap:8px;align-items:center;padding:4px 0;font-weight:500;font-size:12.5px}

/* 6.F7 · administración y datos */
/* (F7 escribe SOLO debajo de esta marca y antes de §8; docs/33) */
/* --- aviso «Listo» (toast): en escritorio va a la esquina inferior derecha del contenido, no en medio de la pantalla
       (a 1280 quedaba centrado sobre la página, entre la lista y el detalle de Por decidir) --- */
@media (min-width:1024px){body>.toast{left:auto;right:28px;transform:none;bottom:24px;max-width:min(420px,calc(100vw - var(--lado) - 56px))}}
/* --- íconos rellenos (-r) en la pestaña activa: la cápsula es negra con el ícono blanco, así que los trazos y puntos
       interiores BLANCOS desaparecían (Metas, Liquidaciones, Mi jornada, Mapa y Administración se veían como una mancha
       blanca). Sobre la cápsula activa, lo interior toma el color de la cápsula y se lee como recorte. --- */
:is(.tabbar,.side-nav) a[aria-current="page"] svg.r [stroke="#fff"]{stroke:var(--accion)}
:is(.tabbar,.side-nav) a[aria-current="page"] svg.r [fill="#fff"]{fill:var(--accion)}
/* --- Datos: carga en 4 pasos, vista previa fila por fila y exportaciones --- */
.carga-pasos>[data-pasos]{margin:0 0 10px}
.carga-pasos>.sub{margin:0 0 var(--bloque-gap)}
.carga-resumen{gap:6px 16px;margin:0 0 8px}
.f-mes{flex:0 0 auto;max-width:180px}
.f-mes input{height:30px;margin-top:2px}
.tabla-carga th,.tabla-carga td{text-align:left;white-space:normal;vertical-align:top}
.tabla-carga th.num,.tabla-carga td.num{text-align:right;width:52px}
.tabla-carga td:nth-child(2){width:96px}
.tabla-carga td b{font-weight:650}
.motivo-error{color:var(--est-bad)}
.lista-carga .que-pasa{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--texto);overflow-wrap:anywhere}
.exportaciones .acc{gap:6px}
/* --- Parámetros: comparar versiones, municipios del catálogo y confirmaciones --- */
.tabla-comparar th,.tabla-comparar td{text-align:left;white-space:normal;vertical-align:top}
.municipios{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 14px;max-height:380px;overflow:auto;padding:4px 2px}
.municipios .ck{font-size:12.5px;font-weight:500}
.ck.confirma{margin-top:10px}
/* --- Ayuda: texto corrido legible dentro de los bloques --- */
.ayuda-cuerpo .largo{font-size:var(--fs-cuerpo);line-height:1.55;color:var(--texto)}
/* --- detalle E1: acciones a la derecha de la cabecera del detalle --- */
.det-cab>.acc{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* --- Puestos E1: el árbol en la columna de 400 px con sangría corta --- */
.puestos-e1 .arbol>li[data-prof]{margin-left:0}
.puestos-e1 .arbol>li[data-prof="1"]{margin-left:12px}.puestos-e1 .arbol>li[data-prof="2"]{margin-left:24px}.puestos-e1 .arbol>li[data-prof="3"]{margin-left:36px}
.puestos-e1 .arbol>li[data-prof="4"]{margin-left:48px}.puestos-e1 .arbol>li[data-prof="5"]{margin-left:60px}
/* --- Bitácora E3: tabla a la izquierda, el antes y después a la derecha --- */
.bitacora-e3{margin-top:0}
.bitacora-e3 th,.bitacora-e3 td{text-align:left}
.bitacora-e3 tbody tr{cursor:pointer}
.bitacora-e3 tbody tr:focus-visible td{outline:2px solid var(--accion);outline-offset:-2px}
.bitacora-det{max-height:56vh;overflow:auto;padding:10px 12px;border-top:0;border-radius:12px;background:var(--gris-suave);color:var(--texto)}
/* --- Notificaciones: agrupadas por día; preferencias en su bloque --- */
.notif-dia{margin:14px 0 6px}
.notif-bandeja>.notif-dia:first-child{margin-top:0}
/* --- Metas E3: tabla de los puestos directos con la meta editable en su celda --- */
.metas-e3 th,.metas-e3 td{text-align:left;vertical-align:middle}
.metas-e3 th.num,.metas-e3 td.num{text-align:right}
.metas-e3 .monto{justify-content:flex-end}
.metas-e3 .monto input{max-width:150px}
@media (min-width:1024px){
  .bitacora-detalle,.notif-pref,.purga-confirmar{position:sticky;top:16px}
}
/* 6.U4 · canales: telemarketing, prospectos y salidas */
/* (U4 escribe SOLO debajo de esta marca y antes de §8; docs/29 §11.5). Solo tokens de §1: gris con bloques blancos,
   estados como texto con punto, cabecera carbón, sin bloques tintados ni rayas laterales. */
/* --- K1 cola de llamadas (E1: cola a la izquierda, contacto con el guion a la derecha) --- */
.tm-hoy>.cab-oscura{margin-bottom:var(--bloque-gap)}
.tm-ld .ld-lista>.sub-t{margin:4px 4px 6px}
.tm-ld .ld-lista>.lista+.sub-t{margin-top:14px}
.tm-cola .row .t span.txt-rojo{font-weight:600}
.ico-fila.rojo{color:var(--bad)}
.tm-salida{margin-top:var(--bloque-gap)}
.tm-contacto .cab-oscura-cifra strong{letter-spacing:.02em}
.tm-guion{white-space:pre-line;font-size:13.5px;line-height:1.55;color:var(--texto);background:var(--gris-suave);border-radius:14px;padding:12px 14px;margin:0}
.tm-form .opts+.f{margin-top:12px}
.tm-form .fg{margin:14px 0 6px}
.tm-form [data-sub]{margin-top:10px}
.tm-form [data-sub]>*+*{margin-top:10px}
.tm-form .opt small{font-size:var(--fs-min)}
.barra-accion .tm-llamar{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:0 16px;background:var(--ico-gris);border-color:var(--ico-gris);color:var(--texto)}
.barra-accion .tm-llamar svg{width:18px;height:18px}
.tm-contacto .bloque-der{flex-wrap:wrap;justify-content:flex-end}
.tm-contacto-acc{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tm-contacto-acc .btn svg{width:16px;height:16px}
.tm-contacto-det{margin:0;font-size:12.5px;color:var(--sec)}
.tm-guardar-cab{display:none}
.tm-ld .ld-lista>.cab-oscura{margin-bottom:var(--bloque-gap)}
.tm-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap)}
.tm-panel>*{min-width:0}
/* --- K3 cierre del día --- */
.tm-cierre-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bloque-gap);margin-top:var(--bloque-gap)}
/* --- K2 prospectos --- */
.pros-seg{margin:0 0 var(--bloque-gap)}
.pros-filtros{margin-bottom:10px}
.pros-importar{margin:0 0 10px}
.pros-importar .acciones{margin:8px 0}
.pros-importar label.btn{cursor:pointer}
.pros-cab{margin-bottom:var(--bloque-gap)}
.pros-guiones>.bloque+.bloque{margin-top:var(--bloque-gap)}
/* --- S1 salidas y visitas sin concesionario --- */
.sal-e2{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--bloque-gap)}
.sal-e2>*{min-width:0}
.sal-e2 .bloque,.sal-visita .bloque{margin-top:var(--bloque-gap)}
.sal-e2 .aviso{margin-top:var(--bloque-gap)}
.sal-visita .etapas{margin:var(--bloque-gap) 0 0}
.sal-quien{font-size:var(--fs-dato);margin:0 0 10px}
.sal-volver{display:inline-flex;align-items:center;gap:4px;color:var(--cab-sec);font-size:12px;text-decoration:none}
.sal-volver svg{width:14px;height:14px}
.sal-quien b{font-weight:650}
.hoy-citas .tl-hora{min-width:44px}
@media (min-width:1024px){
  .tm-cierre-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .sal-e2{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .sal-e2>.sal-c2>.bloque:first-child{margin-top:0}
  .sal-visita{max-width:760px}
  /* K1: la acción principal en la cabecera del detalle (E1), no en una barra al pie */
  .tm-guardar-cab{display:inline-flex}
  .tm-p2 .barra-accion{display:none}
}
@media (min-width:1440px){.tm-panel{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}

/* 7.FX2 · oficina, indicadores y sistema visual (docs/37) */
/* (FX2 escribe SOLO debajo de esta marca y antes de §8) */
/* (unión: las 3 reglas de 11 px de .tira-ruta small, .pasos-v .punto y .tm-form .opt small ya están en su línea de 6.U2 y 6.U4) */
/* --- J1 · la jefa en el teléfono (P1-6): cabecera compacta para ver ≥ 3 asesores sin desplazarse a 390 × 844 --- */
@media (max-width:767px){
  .cab-equipo{position:relative;padding:10px 12px 10px}
  .cab-equipo .cab-oscura-arriba{padding-right:96px}
  .cab-equipo .cab-oscura-cifra{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;text-align:left;margin:4px 0 2px}
  .cab-equipo .cab-oscura-cifra strong{order:-1;font-size:22px}
  .cab-equipo .cab-oscura-cifra>span{font-size:var(--fs-sec)}
  .cab-equipo .cab-oscura-acc{position:absolute;top:8px;right:10px;margin:0;gap:6px;flex-wrap:nowrap}
  .cab-equipo .cab-oscura-acc>a,.cab-equipo .cab-oscura-acc>button{min-width:0}
  .cab-equipo .cab-oscura-acc>a>span,.cab-equipo .cab-oscura-acc>button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cab-equipo .cab-oscura-acc i{width:36px;height:36px}
  .cab-equipo .mosaicos{margin-top:6px;gap:6px}
  .cab-equipo .mosaico{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;padding:6px 10px;border-radius:12px}
  .cab-equipo .mosaico-cab{gap:0}
  .cab-equipo .mosaico-cab i{display:none}
  .cab-equipo .mosaico b{margin:0;font-size:15px}
  .cab-equipo .mosaico small{display:none}
  .pantalla-equipo .islas-equipo{margin-bottom:6px}
  .pantalla-equipo .isla-equipo{padding:6px 6px 6px 12px}
  .pantalla-equipo .equipo-vivo>li .row{padding-top:8px;padding-bottom:8px}
}
/* isla con «+N» dentro (P1-6) y texto en 2 líneas */
.isla-equipo .isla-txt b{-webkit-line-clamp:2}
.isla.con-mas .isla-acc{display:flex;gap:6px;align-items:center}
.btn-isla.gris{background:#2c2c2b;color:#fff;border:0;cursor:pointer;font:inherit;font-size:var(--fs-sec);font-weight:650}
.islas-lista{display:grid;gap:6px;margin-top:6px}
.islas-lista .isla-equipo{margin:0}
/* --- Por decidir y el Cierre como filas de enlace sin número en el ritual (P1-7) --- */
.enlaces-ritual{margin:0 0 var(--bloque-gap)}
.cuenta-fila.neutra{background:var(--accion)}
/* --- J4 en el teléfono (P1-8): sin mosaicos en cero; lo que está al día en una línea --- */
.decidir-mosaicos.uno{grid-template-columns:minmax(0,1fr)}
.al-dia-linea{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0 0 var(--bloque-gap);font-size:var(--fs-sec);color:var(--sec)}
.al-dia-linea>span{display:inline-grid;color:var(--est-ok)}
.al-dia-linea svg{width:14px;height:14px}
@media (min-width:1024px){.al-dia-linea{display:none}}
/* --- C1 · pagar con la referencia a la vista y confirmación en línea (P1-12) --- */
.referencia-pago{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-sec);color:var(--sec)}
.referencia-pago input{width:170px;height:36px;margin:0;font-size:var(--fs-campo)}
.btn.go.confirmar{background:var(--est-bad);border-color:var(--est-bad)}
.conf-nota{flex-basis:100%;margin:0;color:var(--est-bad)}
@media (max-width:1023px){.det-acc .referencia-pago{flex:1 1 100%}.det-acc .referencia-pago input{flex:1;width:auto}}
.galon-form{margin:0 0 var(--bloque-gap)}
/* --- J3 · Cierre: el resultado del mes arriba de cada fila --- */
.cierre-meta{display:flex;justify-content:space-between;gap:8px;margin:2px 0 6px;font-size:var(--fs-sec);color:var(--sec)}
.cierre-meta b{color:var(--texto);font-weight:650}
.cierre-grupo{background:none!important;box-shadow:none!important;padding:0 2px!important}
.tabla-cierre .celda-persona+small{display:block;margin-top:2px}
/* --- tira de semana en la línea del título (J3) --- */
.cab-acc .fecha-control{margin:0}
.cab-acc .fecha-semana{padding:6px 6px 4px 2px}
.cab-acc .fecha-elegida{min-width:46px}
.cab-acc .fecha-elegida b{font-size:20px}
/* --- G1 · embudo en quetzales y tiempo --- */
.embudo-g1 li{grid-template-columns:minmax(100px,1fr) minmax(0,1.6fr) 36px minmax(64px,auto)}
.embudo-g1 li small{font-size:var(--fs-sec);color:var(--sec);text-align:right;font-variant-numeric:tabular-nums}
.embudo-corte{color:var(--est-warn)}
/* --- Administración (P1-10): filtros compactos sin etiqueta en la línea del título --- */
.filtros.compactos .f{min-width:0}
.filtros.compactos .buscador{flex:1 1 200px}
/* --- 320 px (P2-7): el árbol de Puestos y la tira del Cierre no desbordan --- */
.arbol .chips{flex-wrap:wrap;row-gap:2px}
.arbol .chip{white-space:normal}
@media (max-width:400px){.arbol>li[data-prof="1"]{margin-left:6px}.arbol>li[data-prof="2"]{margin-left:12px}.arbol>li[data-prof="3"]{margin-left:18px}.arbol>li[data-prof="4"]{margin-left:24px}.arbol>li[data-prof="5"]{margin-left:30px}}
.cab-acc{min-width:0;max-width:100%}
.cab-acc .fecha-control{min-width:0;max-width:100%;flex:1 1 auto}
@media (max-width:480px){.cab-acc .fecha-elegida{display:none}.cab-linea .cab-acc:has(.fecha-control){width:100%}}
/* Resultados (P1-16): el segmentado de 5 se desliza en una línea en el teléfono */
.seg.seg-desliza{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.seg.seg-desliza::-webkit-scrollbar{display:none}
/* tablas del embudo: la cantidad y debajo los quetzales */
.emb-tabla td small{display:block;font-size:var(--fs-sec);color:var(--meta)}

/* =============================================================== 8. accesibilidad y movimiento */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.tabbar a[aria-current="page"]::after,.fecha-dia[aria-pressed="true"]::after{background:CanvasText}}

/* Productos: las herramientas se agrupan debajo del nombre en teléfonos estrechos. */
@media(max-width:640px){.producto-fila{flex-wrap:wrap;align-items:flex-start}.producto-fila>.t{flex-basis:calc(100% - 52px)}.producto-fila>.acc{flex-basis:100%;justify-content:flex-start;padding-left:52px;flex-wrap:wrap}}

/* 7.FX4 · inversiones, captación y ahorro (docs/39) */
/* (FX4 escribe SOLO debajo de esta marca). Solo tokens de §1: gris con bloques blancos, estados como texto con punto,
   cabecera carbón, sin bloques tintados ni rayas laterales. 390 primero; a 1280 lista y detalle (E1). */
.inv .ld-lista>.cab-oscura{margin-bottom:var(--bloque-gap)}
.inv-seg{margin:0 0 var(--bloque-gap)}
.inv-ld .ld-lista>.sub-t{margin:4px 4px 6px}
.inv-ld .ld-lista>.lista+.sub-t{margin-top:14px}
.inv-ld .ld-lista>.filtros{margin:0 0 10px}
.inv-ld .ld-lista>.info-mas{margin-top:var(--bloque-gap)}
.inv-ld .ld-detalle>*+.bloque,.inv-ld .ld-detalle>*+.plegable{margin-top:var(--bloque-gap)}
/* fila de vencimiento: el enlace a la gestión y, al lado, Llamar · WhatsApp · Agendar (fuera del enlace) */
/* las acciones van bajo el texto, alineadas con él: el nombre no se aprieta (la lista mide 390 en el teléfono y 420 en E1) */
.lista>li.inv-fila{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
.lista>li.inv-fila>.row{flex:1 1 100%;min-width:0}
.inv-acc{display:flex;gap:6px;flex:none;margin:-6px 0 10px 52px}
.lista>li.inv-fila:has(>.row.elegida){background:var(--gris-suave)}
.lista>li.inv-fila>.row.elegida{background:none}
.inv-acc .btn{min-width:34px;min-height:34px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center}
.inv-acc .btn svg{width:16px;height:16px}
.inv-datos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;margin:0}
.inv-datos>div{min-width:0}
.inv-datos dt{font-size:var(--fs-meta);color:var(--sec);margin:0 0 2px}
.inv-datos dd{margin:0;font-size:var(--fs-dato);color:var(--texto);font-weight:600;overflow-wrap:anywhere}
.inv-datos dd small{display:block;font-weight:500;color:var(--sec);font-size:var(--fs-meta)}
.inv-datos dd .chip{margin-left:4px}
.inv-contacto-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.inv-contacto-acc .btn svg{width:16px;height:16px}
.inv-form .opts+.f,.inv-form .opts+[data-reunion],.inv-form [data-reunion]+.f{margin-top:12px}
.inv-form [data-reunion]>*+*,.inv-form [data-renueva]>*+*{margin-top:10px}
.inv-form [data-renueva]{margin-top:10px}
.inv-form .fg{margin:14px 0 6px}
.inv-form .opt small{font-size:var(--fs-min)}
.inv-form .acciones{margin-top:12px}
.inv-historial{margin-top:var(--bloque-gap)}
.inv-quien{font-size:var(--fs-dato);margin:0}
.inv-quien b{font-weight:650}
.inv-nueva>.form{gap:var(--bloque-gap)}
.inv-nueva .cab-oscura{margin-bottom:0}
.inv-nueva .sal-volver .atras{transform:rotate(180deg)}
.inv-form .bloque-cuerpo>*+*,.inv-form [data-persona]>*+*{margin-top:12px}
.inv-form .bloque-cuerpo>.opts+.fg{margin-top:14px}
.inv-hoy .mosaicos{margin:0 0 10px}
@media (max-width:340px){.inv-datos{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){
  .inv-ld{grid-template-columns:minmax(360px,420px) minmax(0,1fr)}
  .inv-nueva{max-width:760px}
  .inv-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 7.FX1 · campo, canales y colocación (docs/36). Solo esta sección; usa los tokens de §1 */
/* P0-2: un error de formulario nunca queda bajo la barra fija (se lleva al centro y deja libre el alto de la barra) */
.error-formulario{scroll-margin-bottom:calc(var(--nav-h) + var(--barra-h) + var(--safe-b) + 40px);scroll-margin-top:72px}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--est-bad)}
.sal-form [data-si][hidden]{display:none}
.sal-resumen{margin-top:12px}
/* P1-14: la cuota del cotizador a la vista mientras se escribe (en la barra fija del teléfono) */
.barra-accion .cot-cuota-barra{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;padding:0 8px 0 10px;line-height:1.15}
.barra-accion .cot-cuota-barra small{font-size:var(--fs-meta);color:var(--sec)}
.barra-accion .cot-cuota-barra b{font-size:var(--fs-dato);font-weight:650;font-variant-numeric:tabular-nums}
@media(min-width:1024px){.barra-accion .cot-cuota-barra{display:none}}
/* Corrección 3 · «Qué ofrecer aquí» y «Datos del predio»: filas planas dentro del bloque */
.ofrecer-lista{margin:0;padding:0;list-style:none}
.ofrecer-lista li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--borde);font-size:var(--fs-fila)}
.ofrecer-lista li:first-child{border-top:0}
.ofrecer-lista li span{color:var(--sec);font-size:var(--fs-sec);text-align:right}
/* Referido rápido: el formulario en la misma página, dentro de su bloque */
.referido-form .dos{gap:10px}
/* P1-13: cotizando desde la visita, la isla «Visita abierta · Registrar salida» no se ofrece (abandonaba la cotización
   sin aviso); se vuelve a la visita con «Volver a la visita» de la miga o al guardar */
body:has(.cot-desde-visita) [data-visita-abierta]{display:none!important}
.hoy-referido .referido-form,.clientes-referido .referido-form{margin-top:10px}

/* 7.UNION · cableado de la unión FX1–FX4 (Parámetros › Colocación) */
.fs-ofrecer{border:1px solid var(--borde);border-radius:12px;padding:8px 12px;margin:0 0 10px}
.fs-ofrecer legend{font-size:13px;font-weight:600;padding:0 4px}

/* 7.DEC · decisiones de negocio del 9-nov-2026 (D4 clasificación del trimestre, D6 retención, D8 conciliación) */
/* Solo esta sección; tokens de §1. Estados como texto con punto, sin tintes ni rayas laterales, una acción principal. */
.dec-terr-abc{margin:0 0 var(--bloque-gap)}
.dec-abc .cab{margin-bottom:var(--bloque-gap)}
.dec-abc-rejilla{align-items:start}
/* en el teléfono, la lista de predios va justo después del resumen (antes de Aprobar y Versiones) */
@media (max-width:1023px){.dec-abc-rejilla>div{display:contents}#abc-resumen{order:1}#abc-predios{order:2}.dec-abc-rejilla .bloque,.dec-abc-rejilla>div>.aviso,.dec-abc-rejilla>div>.nota{order:3}}
.dec-abc .bloque .datos{margin-bottom:6px}
.dec-abc-seg{margin:0}
.dec-abc-clase{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ico-gris);color:var(--texto);font-weight:700;font-size:var(--fs-dato)}
.dec-abc-lista>li.dec-abc-fila>.row{align-items:center}
.dec-abc-sel{flex:none;margin-left:6px}
.dec-abc-sel select{min-height:34px;padding:0 26px 0 10px;border:1px solid var(--borde);border-radius:var(--r-campo);background-color:var(--blanco);font-size:var(--fs-campo);font-weight:600}
.dec-abc-form .acciones{margin-top:10px}
.dec-abc-form .nota{margin:8px 0 0}
.dec-abc-lista+.acciones{margin-top:10px}
.dec-abc .barra-accion{z-index:5}
.dec-abc>.rejilla{padding-bottom:calc(var(--barra-h) + 12px)}
.dec-ret{margin-top:var(--bloque-gap)}
.dec-ret-cifras{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;margin:0 0 6px}
.dec-ret-cifras>div{min-width:0}
.dec-ret-cifras dt{font-size:var(--fs-meta);color:var(--sec);margin:0 0 2px}
.dec-ret-cifras dd{margin:0;font-size:var(--fs-cifra-2);font-weight:650;font-variant-numeric:tabular-nums;color:var(--texto)}
.dec-ret-cifras small{display:block;font-size:var(--fs-meta);color:var(--sec)}
.dec-ret-lista{margin-top:6px}
.dec-conc{margin:10px 0}
.dec-conc>.sub{margin:4px 0 6px}
@media (min-width:1024px){
  .dec-abc .dec-abc-rejilla>.c-5,.dec-abc .dec-abc-rejilla>.c-7{grid-column:span 6}
  .dec-abc>.rejilla{padding-bottom:0}
}  /* pulido de márgenes (docs/43): faltaba esta llave desde la unión de dec-negocio y el Hoy: todo 7.HOY y lo que sigue
      quedaba dentro de este @media (min-width:1024px) y en el teléfono no se aplicaba */
/* 7.HOY · cómo vas este mes (docs/44). Solo esta sección; usa los tokens de §1. Seis cuadros blancos sobre el gris en dos
   filas (3 por fila desde 768 px, 2 en el teléfono), estado como texto con punto (nunca bloque tintado ni raya lateral),
   «Qué hacer hoy para mejorar» como bloque y el carrusel de campañas y anuncios. */
.hoy-mes{margin:0 0 var(--bloque-gap);min-width:0;scroll-margin-top:12px}
.hm-cab{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin:6px 4px 8px}
.hm-t{font-size:var(--fs-sec-t);font-weight:650;letter-spacing:-.01em;line-height:1.3}
.hm-der{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;font-size:var(--fs-sec);color:var(--sec)}
.hm-der .link{font-size:12px;font-weight:600}
.hm-cuadros{list-style:none;margin:0 0 var(--bloque-gap);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hm-cuadros>li{min-width:0;display:flex}
.hm-cuadro{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:11px 12px 10px;background:var(--bloque-fondo);border:1px solid var(--bloque-borde);border-radius:16px;box-shadow:var(--bloque-sombra);color:var(--texto)}
.hm-cuadro:hover{border-color:var(--borde)}
.hm-etq{font-size:var(--fs-sec);font-weight:600;color:var(--sec);line-height:1.3}
.hm-num{display:block;font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.2;margin:4px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:100%}
.hm-comp{font-size:var(--fs-sec);color:var(--meta);line-height:1.35;overflow-wrap:anywhere;max-width:100%}
.hm-est{margin-top:auto;padding-top:6px;white-space:normal;line-height:1.25}
.hm-que-hacer .lista{margin:0}
.hm-acciones .row{min-height:46px;padding:6px 0;gap:10px}
.hm-acciones .t b{font-size:12.5px;font-weight:600;line-height:1.35;white-space:normal}
.hm-acc{flex:none;font-size:12px;font-weight:600;color:var(--texto)}
.hm-al-dia{margin:2px 0 0;font-size:12.5px}
.hm-al-dia .chip{font-size:12.5px}
.hm-carrusel{margin:0 0 var(--bloque-gap)}
.hm-carrusel .banner{min-height:96px;max-height:160px}
/* sin imagen, el bloque rojo mide lo que su texto (no la proporción de una foto): no recorta a 320 ni sobra a 1280 */
.hm-carrusel .banner.rojo{aspect-ratio:auto;min-height:84px;max-height:none}
.hm-carrusel .banner.rojo .btx{position:static;padding:14px 16px}
.hm-banner-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 0}
.hoy-casos-otros{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:12px}
@media (min-width:768px){
  .hm-cuadros{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-num{font-size:22px}
}
/* P1-15 · Hoy de escritorio (≥ 1024 px, `.hoy-esc`, hoy.js `hoyEscritorio`): ancho completo en 12 columnas. Arriba el
   carbón y «Cómo vas este mes» (6 cuadros en una fila si caben, si no 3 × 2); abajo la columna principal (la ruta a lo
   ancho, la siguiente parada y el resto en tabla) y la lateral («Qué hacer», llamadas desplegadas, citas, anuncios).
   El ancho de lectura va en los textos, no en la disposición. El teléfono (e2) no cambia. */
.hoy-resto-tabla{width:100%}
.hoy-resto-tabla th,.hoy-resto-tabla td{text-align:left;vertical-align:top}
.hoy-resto-tabla th[scope="row"]{font-weight:600;white-space:normal}
.hoy-resto-tabla th[scope="row"] .chips{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:2px}
.hoy-resto-tabla td.num{width:3em;font-variant-numeric:tabular-nums;color:var(--sec)}
.hoy-resto-tabla td{white-space:normal}
@media (min-width:1024px){
  .main:has(>.hoy-esc){max-width:1680px}
  .hoy-esc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start;
    grid-template-areas:"cab cab cab cab cab mes mes mes mes mes mes mes" "pri pri pri pri pri pri pri lat lat lat lat lat"}
  .he-cab{grid-area:cab;align-self:stretch;display:flex;flex-direction:column;min-width:0;container-type:inline-size}
  /* el carbón llena la fila de arriba (a la altura de los cuadros) con su contenido centrado, sin hueco debajo */
  .he-cab>.cab-oscura{flex:1;margin-bottom:var(--bloque-gap);display:flex;flex-direction:column}
  .he-cab>.cab-oscura>.cab-oscura-cifra{margin-top:auto}
  .he-cab>.cab-oscura>:last-child{margin-bottom:auto}
  .he-mes{grid-area:mes;align-self:stretch;display:flex;flex-direction:column;min-width:0;margin:0;container-type:inline-size}
  .he-mes .hm-cab{margin-top:0}
  .he-mes .hm-cuadros{flex:1}
  .he-principal{grid-area:pri;min-width:0}
  .he-lateral{grid-area:lat;min-width:0}
  /* la ruta a lo ancho: las paradas se reparten la fila */
  .hoy-esc .tira-ruta li{flex:1 0 96px}
  /* ancho de lectura en los textos */
  .hoy-esc .bloque-sub,.hoy-esc .bloque-cuerpo>p,.hoy-esc .hoy-parada-lugar,.hoy-esc .hoy-opo,.hoy-esc .nota{max-width:72ch}
  .hoy-esc .hm-acciones .t b,.hoy-esc .banner .btx{max-width:60ch}
  .he-lateral .plegable,.he-lateral .hoy-llamadas{margin-bottom:var(--bloque-gap)}
}
@media (min-width:1280px){
  .hoy-esc{grid-template-areas:"cab cab cab cab mes mes mes mes mes mes mes mes" "pri pri pri pri pri pri pri pri lat lat lat lat"}
}
/* seis cuadros en una sola fila cuando cada uno tiene al menos ~150 px */
@container (min-width:940px){.he-mes .hm-cuadros{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* carbón ancho (≥ 500 px, 1920): la cifra y sus acciones a la izquierda, los mosaicos a la derecha (menos alto, a la par
   de la fila de 6 cuadros) */
@container (min-width:500px){
  .he-cab>.cab-oscura:has(.mosaicos){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;align-content:center}
  .he-cab>.cab-oscura:has(.mosaicos)>.cab-oscura-arriba{grid-column:1/-1}
  .he-cab>.cab-oscura:has(.mosaicos)>.cab-oscura-cifra,.he-cab>.cab-oscura:has(.mosaicos)>.cab-oscura-acc{grid-column:1;margin-top:0;margin-bottom:0}
  .he-cab>.cab-oscura:has(.mosaicos)>.mosaicos{grid-column:2;grid-row:2/span 2;margin-top:0;align-self:center}
}

/* 7.MARGENES · pulido de márgenes y uso del ancho (docs/43). Solo esta sección; usa los tokens de §1. Las reglas
   generales (min-width:0, palabras largas, botones en 2 líneas, chips que envuelven, cifras con clamp(), rejilla de página,
   E1, E3, G1, formularios y ancho de lectura) están en §2–§5 y §7; aquí va solo lo propio de una pantalla. */
@media (min-width:1024px){
  /* Cartera del asesor (E3 + ficha resumida): la tabla manda; la ficha, con la primera fila ya elegida */
  .cartera-e3{grid-template-columns:minmax(0,1fr) clamp(280px,25%,400px)}
  .cartera-filtros{max-width:none}
  .cartera-mas-filtros .cartera-filtros{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* los títulos de columna bajan a 2 líneas antes que la tabla se desplace de lado */
  .cartera-tabla thead th{white-space:normal;vertical-align:bottom}
  /* sin filas (cartera vacía), la ficha no deja una columna en blanco */
  .cartera-e3:has(>.cartera-detalle>.ld-vacio:only-child){grid-template-columns:minmax(0,1fr)}
  .cartera-e3>.cartera-detalle:has(>.ld-vacio:only-child){display:none}
  /* Cotizar: los productos de cada grupo en dos columnas que llenan la fila */
  .cot-grupo .lista{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
  /* Hoy de Inversiones y salidas (hoy-e2 con dos columnas, no la visita): sin la tercera columna vacía. Para la unión
     con el Hoy de escritorio (docs/44): el Hoy del asesor de campo ya usa .hoy-esc de 12 columnas y no lo toca */
  .hoy-e2:not([data-hoy-estado="en_visita"]):not([data-hoy-estado="llegada"]):is(:has(>.hoy-c2:empty),:has(>.hoy-c3:empty)){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hoy-e2:not([data-hoy-estado="en_visita"]):not([data-hoy-estado="llegada"]):has(>.hoy-c2:empty):has(>.hoy-c3:empty){grid-template-columns:minmax(0,1fr)}
  /* formularios de captación y de salida: sin el tope de 760 px; el formulario va en 2 columnas (regla de §7) */
  .inv-nueva,.sal-visita{max-width:none}
}
/* Equipo (E4) entre 1024 y 1279 px: la tercera columna medía ~180 px y partía «Liquidaciones» a media palabra; baja a una
   fila propia a todo el ancho bajo la lista y el mapa */
@media (min-width:1024px) and (max-width:1279px){
  .equipo-e4{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .equipo-e4>.e4-lado{grid-column:1/-1}
}
/* Tablero (G1) entre 1024 y 1279 px: las tres columnas (5 · 4 · 3) dejaban el embudo en ~240 px y sus montos salían de
   la tarjeta; Resultado y Embudo van lado a lado y «Me toca decidir» y «Equipo hoy» abajo, en dos columnas */
@media (min-width:1024px) and (max-width:1279px){
  .rejilla.g1>.c-5,.rejilla.g1>.c-4{grid-column:span 6}
  .rejilla.g1>.c-3{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bloque-gap);align-items:stretch}
}
/* Ficha del concesionario (A7) sin parada de hoy (Legal, Consulta, mandos): la columna izquierda solo traía los chips y
   las acciones y dejaba 5 columnas en blanco; chips y acciones van arriba y las pestañas a todo el ancho */
@media (min-width:1024px){
  .ficha-a7:not(:has(>.ficha-izq>:nth-child(3)))>*{grid-column:1/-1}
}
/* Agenda del equipo: las dos medidas de cada asesor en columnas que pueden encogerse */
.asesor-medidas{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Clasificación del trimestre a 320–420 px: el selector de clase baja bajo el nombre del predio (el nombre tenía 89 px y
   se partía a media palabra) */
@media (max-width:420px){
  .dec-abc-fila>.row{flex-wrap:wrap}
  .dec-abc-fila .dec-abc-sel{flex:0 0 100%;padding-left:46px;margin-left:0}
}

/* 7.RANKING · ranking de oficina y paleta de gráficas en la línea de la marca (9-nov-2026, Cristopher: «aquí no está bien
   customizado»). Las gráficas dejan el violeta/teal genéricos: barra elegida en carbón, resto en gris; «mejora» en el
   naranja del día. El ranking de oficina es una lista a todo el ancho con barra proporcional (resultados.js rankingBarras). */
.graf-teal,.graf-purple,.graf-card{--graf-color:var(--cab-oscura);--graf-soft:#dcdcd9}
.graf-coral{--graf-color:var(--marca);--graf-soft:#f3d3d3}
.graf-amber{--graf-color:var(--dia);--graf-soft:#f4e1d1}
.rkb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rkb-fila{display:grid;grid-template-columns:28px 36px minmax(140px,1.1fr) minmax(120px,2fr) minmax(96px,auto);align-items:center;gap:12px;padding:10px 8px;border-top:1px solid var(--linea);border-radius:12px}
.rkb-fila:first-child{border-top:0}
.rkb-fila.yo{background:var(--gris-suave)}
.rkb-pos{font-weight:700;font-size:var(--fs-dato);color:var(--sec);text-align:center;font-variant-numeric:tabular-nums}
.rkb-fila.lider .rkb-pos{color:var(--texto)}
.rkb-nom{min-width:0;display:flex;flex-direction:column;gap:2px}
.rkb-nom b{font-size:var(--fs-fila);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkb-nom b .chip{margin-left:6px}
.rkb-nom small{font-size:var(--fs-sec);color:var(--meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkb-barra{width:100%;height:10px;display:block}
.rkb-fondo{fill:var(--gris-barra)}
.rkb-relleno{fill:#bdbdb9}
.rkb-fila.lider .rkb-relleno,.rkb-fila.yo .rkb-relleno{fill:var(--cab-oscura)}
.rkb-valor{text-align:right;font-weight:700;font-size:var(--fs-dato);font-variant-numeric:tabular-nums;white-space:nowrap}
.rkb-valor.neg{color:var(--est-bad)}
@media (max-width:640px){
  .rkb-fila{grid-template-columns:22px 32px minmax(0,1fr) auto;row-gap:6px}
  .rkb-barra{grid-column:3/5;grid-row:2}
}

/* 7.GRAFICAS · barras horizontales (graficas.js graficaBarras, 9-nov-2026): una fila por dato con etiqueta completa,
   barra a todo el ancho y cifra; la elegida (o la mayor) en el color de la gráfica, las demás en gris. */
.gb{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.gb-fila{display:grid;grid-template-columns:minmax(110px,30%) minmax(80px,1fr) minmax(72px,auto);align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--linea)}
.gb-fila:first-child{border-top:0}
.gb-eti{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:var(--fs-fila);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-eti small{font-size:var(--fs-sec);color:var(--meta);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.gb-barra{width:100%;height:10px;display:block;overflow:visible}
.gb-fondo{fill:var(--gris-barra)}
.gb-relleno{fill:#bdbdb9}
.gb-fila.sel .gb-relleno{fill:var(--graf-color)}
.gb-fila.sel .gb-eti{font-weight:700}
.gb-fila.neg .gb-relleno{fill:var(--est-bad)}
.gb-ref{stroke:var(--texto);stroke-width:.6;stroke-dasharray:1.5 1.5;vector-effect:non-scaling-stroke}
.gb-valor{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--fs-fila)}
@media (max-width:480px){.gb-fila{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.gb-barra{grid-column:1/3;grid-row:2}}
/* 9-nov-2026: barras con extremos redondos reales (el SVG se recorta; los rect sin rx no se deforman al estirarse) y la cifra
   del ranking con su avance contra la meta debajo. */
.rkb-barra,.gb-barra{border-radius:999px;overflow:hidden}
.rkb-valor{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rkb-valor small{font-size:var(--fs-sec);font-weight:500;color:var(--meta)}
.rkb-valor small.ok{color:var(--est-ok)}
@media (min-width:641px){.rkb-fila{grid-template-columns:28px 36px minmax(140px,1fr) minmax(120px,2fr) minmax(150px,auto)}}

/* 7.CLIENTES-OFICINA · Clientes para toda la estructura (9-nov-2026, clientes-oficina.js): una fila por cliente que se
   despliega con sus cotizaciones. Nombre y resumen arriba; etapa y monto a la derecha (debajo en el teléfono). */
.cli-of-lista{list-style:none;margin:0;padding:0}
.cli-of{border-top:1px solid var(--linea)}
.cli-of:first-child{border-top:0}
.cli-of>details>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:12px 4px;cursor:pointer}
.cli-of-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.cli-of-t b{font-size:var(--fs-fila);font-weight:700}
.cli-of-t small{font-size:var(--fs-sec);color:var(--meta);overflow-wrap:anywhere}
.cli-of-d{display:flex;align-items:center;gap:12px;white-space:nowrap}
.cli-of-d b{font-variant-numeric:tabular-nums}
.cli-of-cots{margin:0 0 10px}
@media (max-width:640px){
  .cli-of>details>summary{grid-template-columns:minmax(0,1fr)}
  .cli-of-d{justify-content:space-between}
}
.cli-of-t{align-items:flex-start;text-align:left}
/* 9-nov-2026 (Cristopher: «1, 2, 3, 4 lo podemos centrar»): los 4 pasos del día ocupan todo el ancho, repartidos y
   centrados; si no caben (pantallas muy angostas) se deslizan como antes. */
.seg.ritual{width:100%;max-width:100%;justify-content:space-between}
.seg.ritual>a{flex:1 0 auto;justify-content:center;text-align:center}