/* ui_base — los tokens y controles del sistema. Desde la 4.5 (D123): la dirección «Índigo» —lavanda muy pálida de fondo, índigo profundo
   como color de acción, lila suave como acento, letra Plus Jakarta Sans (servida desde aquí) y tarjetas blancas con borde fino—; claro por
   defecto («light») y una noche índigo («night») que se elige en el menú de tu nombre o se hereda del equipo si así se pide. Los efectos
   (la aurora que deriva despacio, el grano, la luz que sigue al cursor dentro de las tarjetas, los números que ruedan, las pantallas que
   entran por bloques) viven al final de esta hoja y se apagan con «Reducir movimiento» del equipo o con «Menos movimiento» del menú.
   Desde la 3.63 (D113): íconos de un solo dibujo, el menú con el cliente arriba y lo del sistema dentro de tu nombre, y «Buscar o ir a…»
   (⌘K). El vidrio va en lo que flota —menú, barra de arriba, barras de herramientas, avisos flotantes, menús, el visor—; las tablas y
   las cifras van sobre superficie firme. Números con cifras del mismo ancho. Con «Reducir transparencia» el vidrio se vuelve sólido. */
@font-face{font-family:"Plus Jakarta Cierres";font-style:normal;font-display:swap;font-weight:200 800;src:url(/letra/plus-jakarta-sans.woff2) format("woff2-variations"),url(/letra/plus-jakarta-sans.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Cierres";font-style:normal;font-display:swap;font-weight:100 900;src:url(/letra/inter.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--franja:0px;
  --fondo:#F5F5FA; --superficie:#FFFFFF; --superficie-2:#F7F7FC; --linea:#E4E4F0; --linea-fuerte:#CBCBDE;
  --tinta:#16163A; --tinta-2:#44446A; --tinta-3:#6F6F92;
  --acento:#3730A3; --acento-suave:#EEEDFF; --acento-tinta:#FFFFFF; --acento-texto:#3730A3; --acento-hover:#4338CA; --lila:#DAD8FF;
  --bien:#1D7A46; --bien-suave:#E3F3EA; --aviso:#8A5208; --aviso-suave:#FDF0DC; --mal:#BF3328; --mal-suave:#FBE8E6;
  --maquina:#0E7490; --maquina-suave:#E0F2F7;
  --campo:#F3F3F9; --encima:rgba(80,80,140,.10); --encima-2:rgba(80,80,140,.18);
  --tarjeta-borde:#E4E4F0; --tarjeta-sombra:0 1px 2px rgba(22,22,58,.04),0 10px 30px -14px rgba(55,48,163,.10);
  --vidrio:rgba(255,255,255,.62); --vidrio-fuerte:rgba(255,255,255,.84); --vidrio-borde:rgba(255,255,255,.8);
  --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.9); --vidrio-sombra:0 12px 40px rgba(55,48,163,.08); --desenfoque:blur(24px) saturate(160%);
  --aurora-1:#DAD8FF; --aurora-2:#E9E6FB; --aurora-3:#D9ECFB;
  --campo-fondo:radial-gradient(1100px 680px at 8% 0%,var(--aurora-1) 0%,rgba(218,216,255,0) 62%),radial-gradient(900px 620px at 96% 10%,var(--aurora-2) 0%,rgba(233,230,251,0) 60%),radial-gradient(1000px 700px at 70% 100%,var(--aurora-3) 0%,rgba(217,236,251,0) 60%);
  --marca:linear-gradient(145deg,#6366F1 0%,#3730A3 60%,#2E2A7A 100%);
  --radio:10px; --radio-grande:16px; --alto:40px; --sombra:0 16px 48px -16px rgba(22,22,58,.28);
  --fuente:"Plus Jakarta Cierres",-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Cierres","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --fuente-titulo:"Plus Jakarta Cierres",-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Cierres","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:11.5px; --t-s:12.5px; --t-m:14px; --t-l:17px; --t-xl:22px; --t-xxl:30px;
  --curva:cubic-bezier(.4,0,.2,1); --suave:cubic-bezier(.22,1,.36,1); --resorte:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#0F1020; --superficie:#161730; --superficie-2:#1C1D3A; --linea:#262849; --linea-fuerte:#383B66;
    --tinta:#ECECF7; --tinta-2:#B8B9D6; --tinta-3:#8788AC;
    --acento:#A5B4FC; --acento-suave:#22244F; --acento-tinta:#15163A; --acento-texto:#BFC8FD; --acento-hover:#BFC8FD; --lila:#2F3270;
    --bien:#8ED9AC; --bien-suave:#1A3325; --aviso:#F3CF7A; --aviso-suave:#3A2F13; --mal:#F2A09A; --mal-suave:#3A1F1D;
    --maquina:#7DD3E8; --maquina-suave:#15303A;
    --campo:#1C1D3A; --encima:rgba(255,255,255,.07); --encima-2:rgba(255,255,255,.12);
    --tarjeta-borde:#262849; --tarjeta-sombra:0 1px 2px rgba(0,0,0,.3);
    --vidrio:rgba(22,23,48,.62); --vidrio-fuerte:rgba(22,23,48,.86); --vidrio-borde:rgba(255,255,255,.09);
    --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06); --vidrio-sombra:0 18px 50px rgba(0,0,0,.45);
    --aurora-1:#26285C; --aurora-2:#1C1E44; --aurora-3:#182A4A;
    --campo-fondo:radial-gradient(900px 600px at 6% 0%,rgba(38,40,92,.9) 0%,rgba(38,40,92,0) 65%),radial-gradient(800px 560px at 100% 100%,rgba(24,42,74,.8) 0%,rgba(24,42,74,0) 65%),radial-gradient(700px 500px at 60% 50%,rgba(28,30,68,.7) 0%,rgba(28,30,68,0) 60%);
    --marca:linear-gradient(145deg,#A5B4FC 0%,#6366F1 60%,#3730A3 100%);
    --sombra:0 16px 48px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#0F1020; --superficie:#161730; --superficie-2:#1C1D3A; --linea:#262849; --linea-fuerte:#383B66;
  --tinta:#ECECF7; --tinta-2:#B8B9D6; --tinta-3:#8788AC;
  --acento:#A5B4FC; --acento-suave:#22244F; --acento-tinta:#15163A; --acento-texto:#BFC8FD; --acento-hover:#BFC8FD; --lila:#2F3270;
  --bien:#8ED9AC; --bien-suave:#1A3325; --aviso:#F3CF7A; --aviso-suave:#3A2F13; --mal:#F2A09A; --mal-suave:#3A1F1D;
  --maquina:#7DD3E8; --maquina-suave:#15303A;
  --campo:#1C1D3A; --encima:rgba(255,255,255,.07); --encima-2:rgba(255,255,255,.12);
  --tarjeta-borde:#262849; --tarjeta-sombra:0 1px 2px rgba(0,0,0,.3);
  --vidrio:rgba(22,23,48,.62); --vidrio-fuerte:rgba(22,23,48,.86); --vidrio-borde:rgba(255,255,255,.09);
  --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06); --vidrio-sombra:0 18px 50px rgba(0,0,0,.45);
  --aurora-1:#26285C; --aurora-2:#1C1E44; --aurora-3:#182A4A;
  --campo-fondo:radial-gradient(900px 600px at 6% 0%,rgba(38,40,92,.9) 0%,rgba(38,40,92,0) 65%),radial-gradient(800px 560px at 100% 100%,rgba(24,42,74,.8) 0%,rgba(24,42,74,0) 65%),radial-gradient(700px 500px at 60% 50%,rgba(28,30,68,.7) 0%,rgba(28,30,68,0) 60%);
  --marca:linear-gradient(145deg,#A5B4FC 0%,#6366F1 60%,#3730A3 100%);
  --sombra:0 16px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* D111: con «Reducir transparencia» el vidrio es sólido; con «Más contraste», bordes marcados */
@media (prefers-reduced-transparency:reduce){
  :root{--vidrio:var(--superficie);--vidrio-fuerte:var(--superficie);--desenfoque:none}
}
@media (prefers-contrast:more){
  :root{--linea:var(--linea-fuerte);--vidrio-borde:var(--linea-fuerte);--tarjeta-borde:var(--linea-fuerte)}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--campo-fondo) fixed,var(--fondo);color:var(--tinta);font-family:var(--fuente);font-size:var(--t-m);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--fuente-titulo);font-weight:600;letter-spacing:-.015em;text-wrap:balance;line-height:1.25}
h1{font-size:var(--t-xxl);font-weight:700;letter-spacing:-.028em;line-height:1.12} h2{font-size:var(--t-l);letter-spacing:-.018em} h3{font-size:15px} h4{font-size:13px;color:var(--tinta-2)}
p{margin:0}
a{color:var(--acento-texto);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;color:inherit}
code{font-family:var(--mono);font-size:.92em;background:var(--superficie-2);padding:1px 6px;border-radius:6px}
kbd{font-family:var(--fuente);font-size:11px;font-weight:600;color:var(--tinta-3);padding:1px 6px;border-radius:6px;background:var(--encima);border:0;line-height:1.5;white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.94em}
.mudo{color:var(--tinta-3)} .s{font-size:13px} .xs{font-size:var(--t-xs)}
.etq{font-size:12px;letter-spacing:0;color:var(--tinta-3);font-weight:500}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::selection{background:var(--acento-suave)}

/* ---- íconos (D113): un solo dibujo; lo marcado «r» se rellena suave donde estás ---- */
.icono{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px;overflow:visible}
.icono .r{fill:currentColor;fill-opacity:0;transition:fill-opacity .15s}
.icono.lleno .r,[aria-current="page"]>.icono .r,[aria-pressed="true"]>.icono .r{fill-opacity:.2}
.mosaico{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--acento-suave);color:var(--acento-texto)}
.mosaico .icono{width:18px;height:18px}
.mosaico .icono .r{fill-opacity:.2}
.mosaico[data-tono="bien"]{background:var(--bien-suave);color:var(--bien)}
.mosaico[data-tono="aviso"]{background:var(--aviso-suave);color:var(--aviso)}
.mosaico[data-tono="mal"]{background:var(--mal-suave);color:var(--mal)}
.mosaico[data-tono="maquina"]{background:var(--maquina-suave);color:var(--maquina)}
.mosaico[data-tono="neutro"]{background:var(--encima);color:var(--tinta-2)}

/* ---- el vidrio: una sola receta para lo que flota ---- */
.vidrio{background:var(--vidrio);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}

/* ---- la marca: el cuadrito del sistema ---- */
.marca-riel{width:30px;height:30px;border-radius:9px;background:var(--marca);color:#fff;display:grid;place-items:center;flex:0 0 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(10,60,140,.25)}
.marca-riel .icono{width:18px;height:18px;stroke-width:1.9}

/* ---- cascarón (D113): menú lateral de vidrio —la marca, el cliente con su buscador, las secciones y tu nombre abajo—,
   la barra de arriba con «Buscar o ir a…» y el contenido ---- */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:100%;overflow-x:clip}
.riel{grid-column:1;grid-row:1/3;position:sticky;top:calc(12px + var(--franja));z-index:25;height:calc(100vh - 24px - var(--franja));margin:12px 0 12px 12px;display:flex;flex-direction:column;gap:2px;padding:14px 10px 10px;border-radius:24px;
  background:var(--vidrio);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra);min-width:0;overflow-y:auto;scrollbar-width:thin}
.riel .marca{display:flex;align-items:center;gap:10px;padding:0 6px 12px;text-decoration:none;color:var(--tinta)}
.riel .marca:hover{text-decoration:none}
.riel .marca-nombre{font-family:var(--fuente-titulo);font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--tinta)}
.riel a.tab{display:flex;align-items:center;gap:11px;min-height:36px;padding:0 10px;border-radius:10px;color:var(--tinta);text-decoration:none;font-size:var(--t-m);font-weight:500;position:relative}
.riel a.tab .icono{color:var(--tinta-2)}
.riel a.tab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riel a.tab .cuantos,.barra-cel .cuantos{flex:0 0 auto;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acento);color:var(--acento-tinta);font-variant-numeric:tabular-nums;display:inline-grid;place-items:center}
.riel a.tab:hover{background:var(--encima);text-decoration:none}
.riel a.tab[aria-current="page"]{background:var(--acento-suave);color:var(--acento-texto);font-weight:600}
.riel a.tab[aria-current="page"] .icono{color:var(--acento-texto)}
.riel .grupo-menu{display:flex;flex-direction:column;gap:1px}
.riel .grupo-menu+.grupo-menu{margin-top:10px}
.riel .grupo-titulo{display:block;padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el cliente activo: su nombre, su rol y, al tocarlo, el buscador de clientes */
.selector-cli{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;margin:0 0 10px;border:0;border-radius:14px;background:var(--encima);color:var(--tinta);cursor:pointer;text-align:left}
.selector-cli:hover{background:var(--encima-2)}
.selector-cli[aria-expanded="true"]{background:var(--acento-suave)}
.selector-cli .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.selector-cli .txt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selector-cli .txt span{font-size:12px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selector-cli>.icono{color:var(--tinta-3);width:16px;height:16px}
.iniciales{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;background:#6B7280}
.iniciales.redonda{border-radius:50%}
.iniciales[data-c="0"]{background:#2F6FDB}.iniciales[data-c="1"]{background:#1F8A5B}.iniciales[data-c="2"]{background:#C2410C}.iniciales[data-c="3"]{background:#7C3AED}
.iniciales[data-c="4"]{background:#0E7490}.iniciales[data-c="5"]{background:#B4235A}.iniciales[data-c="6"]{background:#4D7C0F}.iniciales[data-c="7"]{background:#9A6B00}
/* tu nombre, abajo: abre Mi cuenta, Personas, Bitácora, el tema y Salir */
.riel .abajo{margin-top:auto;padding-top:8px;border-top:1px solid var(--linea)}
.yo{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:12px;background:transparent;color:var(--tinta);cursor:pointer;text-align:left}
.yo:hover,.yo[aria-expanded="true"]{background:var(--encima)}
.yo .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.yo .txt b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo .txt span{font-size:12px;color:var(--tinta-3)}
.yo>.icono{color:var(--tinta-3);width:16px;height:16px}
.avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--marca);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;border:0;text-decoration:none}
a.boton{text-decoration:none}
/* los menús que flotan (el del cliente, el de tu nombre) */
.menu-flota{position:fixed;z-index:80;min-width:250px;max-width:min(340px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:6px;border-radius:16px;display:flex;flex-direction:column;gap:1px;transform-origin:top left;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),0 18px 50px rgba(15,25,45,.22);animation:aparece .15s var(--curva)}
.menu-flota .cab-menu{display:flex;flex-direction:column;padding:8px 10px 6px;line-height:1.3}
.menu-flota .cab-menu b{font-size:13.5px}
.menu-flota .cab-menu span{font-size:12px;color:var(--tinta-3);overflow-wrap:anywhere}
.op-menu{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--tinta);font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;text-decoration:none;width:100%}
.op-menu:hover,.op-menu.activa,.op-menu:focus-visible{background:var(--acento);color:var(--acento-tinta);text-decoration:none;outline:none}
.op-menu .icono{width:18px;height:18px;color:inherit;opacity:.85}
.op-menu .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;padding:4px 0}
.op-menu .txt span{font-size:11.5px;opacity:.7;font-weight:400}
.op-menu .der{margin-left:auto;font-size:12px;opacity:.7}
.op-menu[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:auto;opacity:.8}
.sep-menu{height:1px;background:var(--linea);margin:5px 8px}
.menu-flota>*,.hoja>*{flex-shrink:0}
.menu-flota .buscar-menu{-webkit-appearance:none;appearance:none;height:36px;margin:2px 2px 6px;border-radius:9px;background:var(--campo);border:1px solid transparent;padding:0 10px;font-size:13.5px;color:var(--tinta);outline:none;width:calc(100% - 4px)}
.menu-flota .buscar-menu:focus{border-color:var(--acento);background:var(--superficie)}
.menu-flota .vacio-menu{padding:10px;font-size:13px;color:var(--tinta-3)}
.menu-flota .segmentos{margin:4px 4px 6px;display:flex}
.menu-flota .segmentos button{flex:1;justify-content:center;padding:0 8px}
.menu-flota .version{padding:4px 10px 6px;font-size:11.5px;color:var(--tinta-3)}
@keyframes aparece{from{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:none}}
/* la barra de arriba */
.cima{grid-column:2;grid-row:1;position:sticky;top:var(--franja);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 28px 10px;min-width:0;
  background:linear-gradient(to bottom,var(--fondo) 0%,rgba(0,0,0,0) 100%)}
.cima::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.cima .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.buscar-boton{display:inline-flex;align-items:center;gap:9px;height:38px;width:min(380px,100%);padding:0 8px 0 12px;border-radius:12px;border:1px solid var(--vidrio-borde);cursor:pointer;color:var(--tinta-3);font-size:13.5px;text-align:left;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-brillo),0 2px 10px rgba(30,45,80,.06)}
.buscar-boton:hover{color:var(--tinta-2)}
.buscar-boton span{flex:1}
.buscar-boton .icono{width:17px;height:17px}
.contenido{grid-column:2;grid-row:2;padding:12px 28px 72px;min-width:0;max-width:1180px}
.ruta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--tinta-3)}
.ruta span+span::before{content:"›";margin-right:6px}
.ruta strong{color:var(--tinta-2);font-weight:500}
/* «Buscar o ir a…»: como Spotlight */
.paleta-fondo{position:fixed;inset:0;z-index:95;background:rgba(10,14,20,.22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;animation:aparece .12s ease-out}
.paleta{width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),0 30px 80px rgba(10,20,40,.35)}
.paleta .entrada{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--linea)}
.paleta .entrada .icono{width:22px;height:22px;color:var(--tinta-3)}
.paleta .entrada input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;color:var(--tinta);outline:none}
.paleta .resultados{overflow:auto;padding:6px;display:flex;flex-direction:column;gap:1px}
.paleta .grupo-p{padding:8px 10px 4px;font-size:12px;font-weight:600;color:var(--tinta-3)}
.paleta .op-menu{min-height:44px}
.paleta .op-menu .mosaico{width:28px;height:28px;border-radius:8px}
.paleta .op-menu.activa .mosaico,.paleta .op-menu:hover .mosaico{background:rgba(255,255,255,.22);color:inherit}
.paleta .pie-p{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--linea);font-size:11.5px;color:var(--tinta-3)}
/* D112: las pestañas del periodo —Documentos · Cerrar y entregar · Liga— y el control segmentado en general */
.segmentos{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:13px;background:var(--encima);align-self:flex-start;max-width:100%}
.zona-avisos:empty{display:none}
.segmentos a,.segmentos button{height:34px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--tinta-2);font:inherit;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none;white-space:nowrap}
.segmentos a:hover,.segmentos button:hover{color:var(--tinta);text-decoration:none}
.segmentos .icono{width:17px;height:17px}
.segmentos [aria-current="page"],.segmentos [aria-pressed="true"]{background:var(--superficie);color:var(--tinta);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
/* el celular: abajo, cuatro secciones y «Más» (D113) */
.barra-cel{display:none}
.hoja-fondo{position:fixed;inset:0;z-index:90;background:rgba(10,14,20,.28);animation:aparece .12s ease-out}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:91;max-height:84vh;overflow:auto;padding:8px 12px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;display:flex;flex-direction:column;gap:2px;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border-top:1px solid var(--vidrio-borde);box-shadow:0 -10px 40px rgba(10,20,40,.25);animation:sube .2s ease-out}
.hoja .asa{align-self:center;width:38px;height:5px;border-radius:3px;background:var(--encima-2);margin:2px 0 10px}
.hoja .op-menu{min-height:46px;font-size:15px}
.hoja .op-menu .icono{width:20px;height:20px}
.hoja .grupo-p{padding:10px 10px 4px;font-size:12px;font-weight:600;color:var(--tinta-3)}
@keyframes sube{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.menu-flota,.paleta-fondo,.hoja,.hoja-fondo{animation:none}}

/* ---- puerta (entrar, invitación, restablecer): una tarjeta de vidrio sobre el fondo ---- */
.puerta{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.puerta .recuadro{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px;padding:30px 28px;border-radius:28px;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}
.puerta .marca{display:flex;align-items:center;gap:10px}
.puerta .marca .marca-riel{margin:0;width:40px;height:40px;flex-basis:40px;border-radius:12px}
.puerta .marca .marca-riel .icono{width:23px;height:23px}
.puerta .marca .etq{font-size:13px;font-weight:600;color:var(--tinta-2)}
.puerta h1{font-size:28px}
.puerta .pie{font-size:12.5px;color:var(--tinta-3)}

/* ---- bloques ---- */
.pila{display:flex;flex-direction:column;gap:22px}
.pila:empty{display:none}
.fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tarjeta{min-width:0;background:var(--superficie);border:1px solid var(--tarjeta-borde);border-radius:var(--radio-grande);padding:20px 22px;box-shadow:var(--tarjeta-sombra);position:relative;isolation:isolate;transition:box-shadow .35s var(--curva),transform .35s var(--suave),border-color .35s var(--curva)}
.tarjeta>header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:0 0 14px}
.tarjeta>header h2{display:flex;align-items:center;gap:11px}
.tarjeta>header .der{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.tarjeta>header .der>.boton{max-width:100%;flex:0 1 auto}
@media (max-width:640px){.tarjeta>header .der>.boton.chico{white-space:normal;height:auto;min-height:32px;padding:5px 13px;line-height:1.25;text-align:center}}
.tarjeta>.cuerpo{padding:2px 0 0}
.tarjeta .tarjeta{box-shadow:none;background:var(--superficie-2);border-color:transparent}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 32px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px 28px}
.tile{min-width:0}
.tile .etq{display:block;margin-bottom:4px}
.tile .v{display:block;font-family:var(--fuente-titulo);font-size:24px;font-weight:700;letter-spacing:-.022em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .sub{display:block;font-size:12px;color:var(--tinta-3);margin-top:3px}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--encima);color:var(--tinta-2);white-space:nowrap;vertical-align:middle;letter-spacing:.005em}
.chip .icono{width:13px;height:13px;margin-left:-2px}
.chip.bien{background:var(--bien-suave);color:var(--bien)}
.chip.aviso{background:var(--aviso-suave);color:var(--aviso)}
.chip.mal{background:var(--mal-suave);color:var(--mal)}
.chip.acento{background:var(--acento-suave);color:var(--acento-texto)}

/* ---- controles: campos rellenos, como en iOS; el borde aparece al escribir ---- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label{font-size:12.5px;font-weight:500;color:var(--tinta-2)}
.campo .control,.campo .select{width:100%}
.control,.select{height:var(--alto);border-radius:11px;border:1px solid transparent;background:var(--campo);padding:0 12px;font:inherit;color:var(--tinta);outline:none;min-width:0;transition:border-color .12s,background .12s,box-shadow .12s}
.control:hover,.select:hover{border-color:var(--linea-fuerte)}
.control::placeholder{color:var(--tinta-3);opacity:.85}
.control:focus,.control:focus-visible,.select:focus-visible{border-color:var(--acento);background:var(--superficie);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 12%,transparent)}
.control[readonly]{cursor:default}
.control.mono{font-family:var(--mono)}
.control[aria-invalid="true"]{border-color:var(--mal)}
.select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A909B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9.5l4-4 4 4M8 14.5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:15px 15px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--alto);padding:0 16px;border-radius:999px;border:0;background:var(--encima);color:var(--tinta);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s var(--curva),filter .15s,transform .15s var(--suave),box-shadow .2s var(--curva);min-width:0;position:relative;overflow:hidden;isolation:isolate}
.boton:hover{background:var(--encima-2);text-decoration:none}
.boton:active{transform:scale(.98)}
.boton:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.boton .icono{width:17px;height:17px;margin-left:-3px}
.boton.primario{background:var(--acento);color:var(--acento-tinta);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(10,40,90,.18)}
.boton.primario:hover{background:var(--acento-hover);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -6px rgba(55,48,163,.45)}
.boton.primario:active{transform:scale(.98)}
.boton.peligro{color:var(--mal);background:var(--mal-suave)}
.boton.peligro:hover{background:var(--mal-suave);filter:brightness(.97)}
.boton.chico{height:32px;padding:0 13px;font-size:13px}
.boton.chico .icono{width:15px;height:15px}
.boton.liso{background:transparent;color:var(--acento-texto)}
.boton.liso:hover{background:var(--encima)}
.boton.solo-icono{width:var(--alto);padding:0}
.boton.chico.solo-icono{width:32px}
.boton.solo-icono .icono{margin:0}
.boton[disabled]{opacity:.4;cursor:not-allowed;transform:none}
textarea.control{height:auto;min-height:76px;width:100%;box-sizing:border-box;padding:10px 12px;resize:vertical;line-height:1.45}
input[type="checkbox"],input[type="radio"]{accent-color:var(--acento)}
.ayuda{font-size:12px;color:var(--tinta-3)}

/* ---- avisos con forma: el frente reacciona a la clase del código, no al texto (R59); con su ícono (D113) ---- */
.aviso{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--superficie-2);border:1px solid transparent;font-size:13.5px;line-height:1.45}
.aviso>.icono{width:19px;height:19px;margin-top:1px;color:var(--tinta-3)}
.aviso>.icono .r{fill-opacity:.18}
.aviso .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.aviso .txt>span:first-child{font-weight:500}
.aviso .txt small{color:var(--tinta-2);font-size:12px}
.aviso .que{font-size:12.5px;color:var(--tinta-2);font-weight:400}
.aviso[data-clase="PERMISO"],.aviso[data-clase="CSRF"],.aviso[data-clase="TASA"]{background:var(--aviso-suave)}
.aviso[data-clase="PERMISO"]>.icono,.aviso[data-clase="CSRF"]>.icono,.aviso[data-clase="TASA"]>.icono{color:var(--aviso)}
.aviso[data-clase="VALIDACION"],.aviso[data-clase="PRECONDICION"],.aviso[data-clase="CONFLICTO"],.aviso[data-clase="INTERNO"]{background:var(--mal-suave)}
.aviso[data-clase="VALIDACION"]>.icono,.aviso[data-clase="PRECONDICION"]>.icono,.aviso[data-clase="CONFLICTO"]>.icono,.aviso[data-clase="INTERNO"]>.icono{color:var(--mal)}
.aviso.bien{background:var(--bien-suave)}
.aviso.bien>.icono{color:var(--bien)}
.aviso .codigo{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);margin-left:auto;align-self:flex-start;white-space:nowrap}

/* ---- tablas: encabezados en minúsculas, renglones con línea fina ---- */
.tabla-env{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;font-size:12px;letter-spacing:0;color:var(--tinta-3);font-weight:600;padding:8px 12px 8px 0;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linea);vertical-align:middle;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla td.largo{white-space:normal}
.tabla td.mono{white-space:nowrap}
.tabla td .sub{display:block;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.tabla td .sub.pendiente-nombre{color:var(--aviso);white-space:normal}
.nombre-armado{padding:8px 10px;border-radius:10px;background:var(--superficie);border:1px dashed var(--linea-fuerte)}
.pieza-nombre button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 6px;font:inherit;line-height:1}
.pieza-nombre button:hover{opacity:.7}
.tabla th:last-child,.tabla td:last-child{padding-right:0}
.tabla tr:last-child td{border-bottom:0}
.tabla tr[data-estado] td:first-child{position:relative;padding-left:12px}
.tabla tr[data-estado] td:first-child::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--linea-fuerte)}
.tabla tr[data-estado="mal"] td:first-child::before{background:var(--mal)}
.tabla tr[data-estado="aviso"] td:first-child::before{background:var(--aviso)}
.tabla tr[data-estado="ok"] td:first-child::before{background:var(--bien)}

/* ---- modo cliente ---- */
.glosario{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 28px;margin:0}
.glosa dt{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:4px}
.glosa dt .icono{color:var(--acento)}
.glosa dd{margin:0;color:var(--tinta-2);font-size:13.5px;line-height:1.5}
.anio-grupo{border-left:3px solid var(--acento-suave);padding:2px 0 2px 12px}
/* R398: la tarjeta de cada periodo con sus números, y el resumen de todos */
.periodo{display:flex;flex-direction:column;gap:3px;min-width:172px;padding:14px 16px;border:1px solid var(--tarjeta-borde);border-radius:18px;background:var(--superficie);color:var(--tinta);text-decoration:none;box-shadow:var(--tarjeta-sombra);transition:box-shadow .15s,transform .15s,background .12s}
.periodo:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 12px 28px rgba(16,24,40,.10)}
.periodo.activo{background:var(--acento-suave);box-shadow:0 0 0 2px var(--acento)}
.periodo-nombre{font-weight:600;font-size:14px;white-space:nowrap}
.periodo-total{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px}
.periodo .mono{font-variant-numeric:tabular-nums}
.periodo-pendientes{color:var(--aviso);font-weight:500}
.periodo-listo{color:var(--bien)}
.resumen-periodos{padding:14px 16px;border-radius:16px;background:var(--superficie-2)}
.resumen-periodos .tile .v{font-size:19px}
.fila.periodos{align-items:stretch}
@media (max-width:560px){.periodo{min-width:0;flex:1 1 calc(50% - 8px)}.periodo-nombre{white-space:normal;overflow-wrap:anywhere}.periodo-nombre .mono{display:block}.resumen-periodos .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.resumen-periodos .tile .v{font-size:16px}}
.anio-titulo{font-size:15px;margin-bottom:8px}
.anio-titulo b{font-size:17px;letter-spacing:.02em}
.nivel-recuadro{border:1px solid var(--linea);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
details summary{cursor:pointer;color:var(--acento-texto);font-weight:500}
.aviso ul{margin:4px 0 0;padding-left:18px}
.tabla td .control,.tabla td .select{height:32px}
label.fila{white-space:nowrap}
label.fila>span{flex:1 1 200px;min-width:0;white-space:normal}      /* el texto largo de una casilla parte renglón en vez de salirse de la tarjeta */
.tile .v.nombre{font-family:var(--fuente);font-size:16px}

/* ---- liga de un solo uso ---- */
.liga{display:flex;gap:8px;align-items:center;min-width:0}
.liga .control{flex:1;font-family:var(--mono);font-size:12px}

/* ---- pie de estado ---- */
.estado-pie{position:fixed;left:0;right:0;bottom:0;padding:6px 12px;font-size:11.5px;color:var(--tinta-3);background:var(--vidrio);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border-top:1px solid var(--vidrio-borde);display:flex;gap:12px;justify-content:center;pointer-events:none}

/* ---- expediente paso a paso ---- */
.estado-exp{font-size:13px;color:var(--tinta-2)}
.exp-lay{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.exp-indice{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(64px + var(--franja))}
.paso-item{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:left;color:var(--tinta-2);font-size:13px;width:100%}
.paso-item:hover{background:var(--encima)}
.paso-item[aria-current="step"]{background:var(--acento-suave);color:var(--acento-texto);font-weight:600}
.paso-item .t{line-height:1.25}
.punto{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;flex:0 0 22px;background:var(--encima);color:var(--tinta-3);border:0;font-variant-numeric:tabular-nums}
.punto[data-estado="lista"]{background:var(--bien-suave);color:var(--bien);border-color:transparent}
.punto[data-estado="pendiente"]{background:var(--aviso-suave);color:var(--aviso);border-color:transparent}
.punto[data-estado="con_errores"]{background:var(--mal-suave);color:var(--mal);border-color:transparent}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:11px;color:var(--tinta-3);padding:10px 8px 0}
.leyenda .punto{width:12px;height:12px;flex-basis:12px}
.chip[data-estado="lista"]{background:var(--bien-suave);color:var(--bien)}
.chip[data-estado="pendiente"]{background:var(--aviso-suave);color:var(--aviso)}
.chip[data-estado="con_errores"]{background:var(--mal-suave);color:var(--mal)}
.exp-paso{min-width:0;max-width:760px}
h2.pregunta{font-size:21px;letter-spacing:-.02em;margin-top:4px;line-height:1.25}
.explica{color:var(--tinta-2);max-width:64ch}
.opciones{display:flex;flex-direction:column;gap:6px}
.opcion{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linea);border-radius:14px;cursor:pointer;background:var(--superficie);transition:border-color .12s,background .12s}
.opcion:hover{border-color:var(--linea-fuerte)}
.opcion:has(input:checked){border-color:var(--acento);background:var(--acento-suave)}
.opcion.apagada{opacity:.55;cursor:not-allowed}
.opcion input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--acento)}
.opcion .op-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.opcion .op-txt b{font-weight:600}
.vacio-paso{padding:16px;border:1px dashed var(--linea-fuerte);border-radius:14px;display:flex;flex-direction:column;gap:10px;color:var(--tinta-2)}
.frase{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:10px 12px;border:1px solid var(--linea);border-radius:14px;font-size:13px}
.frase .select,.frase .control{height:36px}
.fila-dato{padding:12px 14px;border-radius:14px;background:var(--superficie-2);display:flex;flex-direction:column;gap:8px}
.cadena{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.plantillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.plantilla{border:1px solid var(--linea);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.plantilla h3{font-size:13.5px}
.quitar-chip{border:0;background:transparent;color:var(--tinta-3);cursor:pointer;padding:0 0 0 2px;font-size:13px;line-height:1}
.quitar-chip:hover{color:var(--mal)}
.probador{padding:14px 16px;border-radius:16px;background:var(--superficie-2);display:flex;flex-direction:column;gap:8px}
.probador .fila .control{flex:1;min-width:200px}
.sangria{padding-left:14px;border-left:2px solid var(--linea)}
.sangria:empty{display:none}
.pie-paso{padding-top:14px;border-top:1px solid var(--linea)}
.res-paso{padding:12px 0;border-bottom:1px solid var(--linea)}
.res-paso h3{font-size:13.5px}
.res-paso p{color:var(--tinta-2)}
details.avanzado summary{font-size:12.5px}
fieldset.solo-lectura{border:0;padding:0;margin:0;min-width:0}
.nivel-recuadro[data-transversal]{border-style:dashed}
.chip[hidden]{display:none}
/* documentos (entrega 3) */
.oculto{display:none}
.soltar{border:1.5px dashed var(--linea-fuerte);border-radius:18px;padding:28px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--superficie-2);transition:border-color .12s,background .12s}
.soltar>.mosaico{width:48px;height:48px;border-radius:14px}
.soltar>.mosaico .icono{width:26px;height:26px}
.soltar.encima{border-color:var(--acento);background:var(--acento-suave)}
.barra{height:8px;border-radius:4px;background:var(--superficie-2);overflow:hidden}
.barra span{display:block;height:100%;width:0;background:var(--acento);transition:width .2s}
.tabla th.num,.tabla td.num{text-align:right}
/* 4.2 (R460): la tabla por sucursal del tablero tiene once columnas; compacta, con encabezados que se parten, cabe sin deslizar en escritorio */
.tabla.compacta th{white-space:normal;font-size:11.5px;line-height:1.2;padding-right:8px;vertical-align:bottom}
.tabla.compacta td{padding:7px 8px 7px 0;font-size:13px}
.tabla.compacta td.largo{min-width:110px}
.tabla tr.clic{cursor:pointer}
.tabla tr.clic:hover td{background:var(--superficie-2)}
.tabla tr.total td{font-weight:600;border-top:1px solid var(--linea-fuerte)}
.tabla tr.separa td{font-size:12px;font-weight:600;color:var(--tinta-3);padding-top:16px}
.tabla.cuenta td:first-child{white-space:normal;min-width:180px}
.tile .v.nombre{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.lugar{padding:12px 14px;border-radius:14px;background:var(--superficie-2)}
.lugar .etq{margin-left:4px}
@media (max-width:640px){
  .tabla.docs th:nth-child(1),.tabla.docs td:nth-child(1),.tabla.docs th:nth-child(3),.tabla.docs td:nth-child(3){display:none}
  .tabla.docs td:nth-child(2){padding-left:10px}
  .tabla.docs td.largo{white-space:normal;min-width:0}
  .tabla.docs .chip{white-space:normal;height:auto;padding:2px 7px}
}
@media (max-width:760px){
  .exp-lay{grid-template-columns:minmax(0,1fr);gap:14px}
  .exp-indice{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding-bottom:4px}      /* 4.9.3: en dos renglones; antes el 10, el 11 y el resumen quedaban fuera de vista */
  .paso-item{width:auto;padding:0 6px;flex:0 0 auto}
  .paso-item .t{display:none}
  .leyenda{display:none}
  .pie-paso .boton{flex:1}
}

@media (max-width:640px){
  .tarjeta>header .der .mudo{display:none}
  .tarjeta{padding:16px 16px;border-radius:20px}
  .app{grid-template-columns:minmax(0,1fr)}
  .riel{display:none}
  .barra-cel{display:flex;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:30;height:64px;padding:0 4px;border-radius:24px;align-items:stretch;
    background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}
  .barra-cel a,.barra-cel button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:var(--tinta-2);font:inherit;font-size:10.5px;font-weight:500;text-decoration:none;position:relative;border-radius:18px;cursor:pointer}
  .barra-cel .icono{width:24px;height:24px}
  .barra-cel [aria-current="page"]{color:var(--acento-texto);font-weight:600}
  .barra-cel .cuantos{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:10px;padding:0 5px}
  .cima,.contenido{grid-column:1}
  .cima{padding:10px 16px 8px;flex-wrap:nowrap}
  .buscar-boton{flex:1;width:auto;min-width:0}
  .cima .der{flex:none}
  .buscar-boton kbd{display:none}
  .contenido{padding:8px 16px 104px}
  h1{font-size:26px}
  .estado-pie{display:none}
}

/* ---- documentos a lo ancho (entrega 3.8, D64) ---- */
.contenido.ancho{max-width:none}
.chip.maquina{background:var(--maquina-suave);color:var(--maquina)}
/* .chip.aviso también es .aviso (la caja de avisos): se le devuelve su forma de chip */
.chip.aviso{display:inline-flex;gap:5px;padding:0 9px;border:0;border-radius:999px;font-size:11.5px;align-items:center}
.docs-pantalla{gap:14px}
.docs-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-radius:18px;position:sticky;top:calc(58px + var(--franja));z-index:15;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}
.docs-barra .select{height:34px;font-size:13.5px;max-width:280px}
.docs-sel{display:inline-flex;align-items:center;gap:6px;margin:0}
.docs-sel>span{font-size:12px;color:var(--tinta-3);font-weight:500}
.docs-barra .espacio{flex:1}
.docs-barra .buscar{height:34px;font-size:13.5px;width:260px;max-width:100%;border-radius:999px;padding:0 14px}
.cuenta-chica{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--maquina-suave);color:var(--maquina);font-size:10.5px;font-family:var(--mono)}
.boton.primario .cuenta-chica{background:var(--fondo);color:var(--tinta)}
.panel{border:1px solid var(--tarjeta-borde);border-radius:var(--radio-grande);padding:18px 20px;background:var(--superficie);display:flex;flex-direction:column;gap:14px;box-shadow:var(--tarjeta-sombra)}
.panel>header{display:flex;align-items:center;gap:10px}
.panel>header h2{display:flex;align-items:center;gap:11px}
.panel>header .boton{margin-left:auto}
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px}
.resumen-ia{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.resumen-ia .etq{display:block}
.resumen-ia b{font-size:20px;font-weight:500}
/* 4.5 (D123): la cuenta del periodo en una tarjeta: arriba lo que cuenta, lo que la marca ve y lo que aprobó (grande); abajo el desglose
   en celdas iguales, cada cifra con su etiqueta encima; al final las alertas. Todo con la misma letra y los números del mismo ancho. */
.docs-cabeza{display:flex;flex-direction:column;gap:0;background:var(--superficie);border:1px solid var(--tarjeta-borde);border-radius:var(--radio-grande);box-shadow:var(--tarjeta-sombra);padding:4px 22px 14px;position:relative;isolation:isolate}
.docs-cabeza>.alertas{padding-top:14px;margin-top:14px;border-top:1px solid var(--linea)}
.docs-cabeza>.alertas:empty{display:none}
.docs-resumen{display:flex;flex-direction:column;gap:0}
.docs-resumen>.silueta,.docs-resumen>.fila.silueta{padding:16px 0}
.cuenta-principal{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(170px,1fr));gap:12px 0;padding:16px 0 14px;border-bottom:1px solid var(--linea)}
.cuenta-principal>.dato{padding:2px 24px 2px 0;border-right:1px solid var(--linea);margin-right:24px;min-width:0}
.cuenta-principal>.dato:last-child{border-right:0;margin-right:0;padding-right:0}
.cuenta-desglose{display:flex;flex-wrap:wrap;gap:10px 0;padding:14px 0 0}
.cuenta-desglose>.dato{padding:0 22px 0 0;margin-right:22px;border-right:1px solid var(--linea);min-width:0}
.cuenta-desglose>.dato:last-child{border-right:0;margin-right:0;padding-right:0}
.cuenta-desglose:empty{display:none}
.docs-resumen .dato{display:flex;flex-direction:column;gap:1px;align-items:flex-start;line-height:1.2}
.docs-resumen .dato .etq{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--tinta-3);white-space:nowrap}
.docs-resumen .dato .v{font-family:var(--fuente-titulo);font-size:19px;font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap}
.docs-resumen .dato .s.mudo{font-size:12px;line-height:1.3}
.docs-resumen .dato .chip{margin-top:3px}
.cuenta-principal>.dato .v{font-size:24px;letter-spacing:-.02em;margin-top:2px}
.cuenta-principal>.dato.grande .v{font-size:34px;letter-spacing:-.03em;color:var(--acento-texto)}
.cuenta-desglose>.dato .v{font-size:16px;font-weight:600}
.cuenta-desglose>.dato .s.mudo{font-size:11.5px}
@media (max-width:760px){
  .docs-cabeza{padding:4px 16px 12px}
  .cuenta-principal{grid-template-columns:minmax(0,1fr);gap:10px}
  .cuenta-principal>.dato{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--linea);padding-bottom:10px}
  .cuenta-principal>.dato:last-child{border-bottom:0;padding-bottom:0}
  .cuenta-desglose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .cuenta-desglose>.dato{border-right:0;margin-right:0;padding-right:0}
}
/* R381: el total de la carga y su desglose en una tarjeta flotante: no empuja nada */
.dato-docs{position:relative}
.dato-boton{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:0;padding:2px 8px 2px 6px;margin:-2px -8px -2px -6px;border-radius:8px;font:inherit;color:inherit;cursor:pointer;line-height:1.2;text-align:left}
.dato-boton:hover,.dato-boton[aria-expanded="true"]{background:var(--acento-suave)}
.dato-boton .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.desglose{position:absolute;top:calc(100% + 6px);left:-6px;z-index:14;width:min(360px,calc(100vw - 32px));border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}
.desglose .cab-d{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.desglose .renglon-d{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 6px;margin:0 -6px;border-radius:6px;background:none;border:0;font:inherit;font-size:13px;color:var(--tinta-2);text-align:left}
.desglose .renglon-d .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinta)}
.desglose .con-filtro{cursor:pointer}
.desglose .con-filtro:hover{background:var(--superficie)}
.desglose .con-filtro .etq-d{text-decoration:underline dotted;text-underline-offset:3px}
.desglose .total-d{border-top:1px solid var(--linea);margin-top:4px;padding-top:7px;font-weight:600;color:var(--tinta)}
.desglose .tipos-d,.desglose .aparte-d{margin-top:4px;line-height:1.45}
.alertas{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.alerta{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:1px solid transparent;background:var(--superficie);font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--tinta-2);white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.alerta:hover{filter:brightness(.97)}
.alerta b{font-weight:700;font-variant-numeric:tabular-nums}
.alerta[data-tono="aviso"]{background:var(--aviso-suave);border-color:transparent;color:var(--aviso)}
.alerta[data-tono="mal"]{background:var(--mal-suave);border-color:transparent;color:var(--mal)}
.alerta[data-tono="maquina"]{background:var(--maquina-suave);border-color:transparent;color:var(--maquina)}
.alerta[data-tono="acento"]{background:var(--acento-suave);border-color:transparent;color:var(--acento-texto)}
/* 3.74 (D118): el visto de la agencia en el renglón de Documentos */
.visto-zona{display:inline-flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.visto-si{color:var(--bien);font-weight:600}
.visto-cayo{color:var(--aviso);font-weight:600}
.boton.visto-dar{padding:1px 8px;height:22px;font-size:12px;border:1px solid var(--linea)}
.alerta[aria-pressed="true"]{box-shadow:0 0 0 2px var(--acento)}
span.alerta{cursor:default}
.docs-env{border:1px solid var(--tarjeta-borde);border-radius:20px;background:var(--superficie);overflow:visible;box-shadow:var(--tarjeta-sombra)}   /* sin desplazamiento propio: así el encabezado se pega al bajar la página */
@media (max-width:1180px){.docs-env{overflow-x:auto}}                                                      /* angosto: la tabla se desplaza de lado y el encabezado no se pega */
/* D84: las notas flotantes (lo que se acaba de guardar): abajo al centro, sobre todo, se van solas */
.notas{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;max-width:min(560px,92vw)}
.nota{pointer-events:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px 11px 16px;border-radius:16px;background:rgba(29,29,31,.86);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);color:#F5F5F7;font-size:13.5px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:nota-entra .18s ease-out}
.nota .que{opacity:.75;font-size:12px}
.nota.mal{background:var(--mal);color:#fff}
.nota .cerrar{margin-left:auto;background:transparent;border:0;color:inherit;opacity:.6;font-size:16px;line-height:1;cursor:pointer;padding:0 0 0 4px}
.nota .cerrar:hover{opacity:1}
.nota.sale{opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s}
@keyframes nota-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* D84: el renglón que acaba de cambiar se ilumina un momento, para no perderlo de vista */
.docs2 tr.doc.recien td{animation:recien 1.6s ease-out}
@keyframes recien{from{background:var(--acento-suave)}to{background:var(--superficie)}}
@media (prefers-reduced-motion:reduce){.nota,.docs2 tr.doc.recien td{animation:none}.nota.sale{transition:none}}
.control.calculado,.control.calculado:focus{background:var(--superficie-2);color:var(--tinta);font-weight:600;border-style:dashed;cursor:default;outline:none}
th.ordenable{cursor:pointer;user-select:none;white-space:nowrap}
th.ordenable:hover,th.ordenable.activo{color:var(--tinta)}
th .flecha-orden{font-size:9px;color:var(--acento)}
th.ordenable:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
table.docs2{font-size:12.5px;min-width:1020px}
.docs2 th{position:sticky;top:var(--tope-encabezado,0px);background:var(--superficie);z-index:1;padding:10px 10px 9px 0;box-shadow:0 1px 0 var(--linea)}
.docs2 thead th:first-child{border-top-left-radius:20px}.docs2 thead th:last-child{border-top-right-radius:20px}
.docs2 th:first-child,.docs2 td:first-child{padding-left:12px}
.docs2 td{padding:8px 10px 8px 0;font-variant-numeric:tabular-nums}
.docs2 td.num{width:1%}
.docs2 td.cero{color:var(--tinta-3)}
.docs2 td.fuerte{font-weight:600}
.docs2 tr.grupo td{background:var(--superficie-2);cursor:pointer;border-bottom:1px solid var(--linea-fuerte);padding-top:9px;padding-bottom:9px}
.docs2 tr.grupo:hover td{filter:brightness(.98)}
.docs2 tr.grupo td .t{font-weight:600;font-size:13.5px}
.docs2 tr.grupo td.flecha{width:28px;color:var(--tinta-3);font-size:12px}
.docs2 tr.grupo .entrar{margin-left:8px;font-size:12px}
.docs2 tr.grupo .desvio{color:var(--mal);white-space:normal}
.docs2 tbody.grupo.abierto{box-shadow:inset 3px 0 0 var(--acento)}
.docs2 tr.doc td{background:var(--superficie)}
.docs2 tr.doc:hover td{background:var(--superficie-2)}
.docs2 tr.doc.activo td{background:var(--acento-suave)}
.docs2 tr.doc.apagado td{opacity:.55}
/* el foco del renglón: un marco continuo por celdas (el outline de un <tr> se pinta a pedazos entre columnas) */
.docs2 tr.doc:focus-visible{outline:none}
.docs2 tr.doc:focus-visible td{box-shadow:inset 0 2px 0 var(--acento),inset 0 -2px 0 var(--acento)}
.docs2 tr.doc:focus-visible td:first-child{box-shadow:inset 2px 2px 0 var(--acento),inset 0 -2px 0 var(--acento),inset 2px 0 0 var(--acento)}
.docs2 tr.doc:focus-visible td:last-child{box-shadow:inset 0 2px 0 var(--acento),inset 0 -2px 0 var(--acento),inset -2px 0 0 var(--acento)}
.docs2 td.icos{width:1%;white-space:nowrap;padding-left:22px}
.docs2 td.doc-nombre{min-width:220px;max-width:340px}
.docs2 td.doc-nombre .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.docs2 td.doc-nombre .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.docs2 tr.grupo td .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.docs2 td.estado{white-space:normal;min-width:140px;max-width:200px}
.docs2 td.estado .sub{white-space:normal}
.docs2 tr.no-cuenta td.num{color:var(--tinta-3);font-style:italic}
.docs2 tr.no-cuenta td.fuerte{font-weight:400}
.docs2 td.estado .chip+.chip{margin-left:4px}
.docs2 tr.acciones-grupo td{background:var(--superficie);padding:4px 0 8px 22px}
.docs2 tr.vacio td{padding-left:22px}
.docs2 tfoot td{background:var(--superficie);border-top:1px solid var(--linea-fuerte);font-weight:600;padding-top:9px;padding-bottom:9px}
.marca-fecha{color:var(--mal);cursor:help}
.ico{display:inline-grid;place-items:center;min-width:36px;height:20px;padding:0 6px;border-radius:6px;font-family:var(--fuente);font-size:10px;font-weight:700;letter-spacing:.03em;border:0;margin-right:3px;background:color-mix(in srgb,currentColor 13%,transparent);line-height:1}
button.ico{cursor:pointer}
button.ico:hover{background:color-mix(in srgb,currentColor 22%,transparent)}
.ico.xml{color:var(--acento)} .ico.pdf{color:var(--mal)} .ico.img{color:var(--bien)} .ico.man{color:var(--aviso)} .ico.otro{color:var(--tinta-3)} .ico.itin{color:var(--maquina)}
.ico.danado{color:var(--mal);outline:1px dashed currentColor;outline-offset:-1px;text-decoration:line-through}
.control.leido{background:var(--maquina-suave)}
.docs2 td.doc-nombre .sub.viaje{color:var(--maquina)}
.docs2 td.doc-nombre .sub.folio{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.01em;color:var(--tinta-2);max-width:none;overflow:visible;cursor:copy;user-select:all}
.docs2 td.doc-nombre .sub.folio:hover{color:var(--tinta)}
.docs2 td.doc-nombre .sub.folio[data-copiado]::after{content:" · copiado";color:var(--bien);font-family:var(--fuente)}
details.plegable>summary{font-size:12.5px;font-weight:500;padding:4px 0}
details.recuadro{border:1px solid var(--linea);border-radius:14px;padding:10px 14px;background:var(--superficie)}
table.compacta{font-size:12.5px}
.tabla.compacta td{padding:5px 10px 5px 0}

/* ---- el visor: el archivo a la izquierda, sus datos a la derecha ---- */
body.con-visor{overflow:hidden}
.visor-fondo{position:fixed;inset:0;background:rgba(10,14,20,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60}
.visor{position:fixed;top:10px;right:10px;bottom:10px;width:min(1320px,calc(96vw - 10px));background:var(--superficie);box-shadow:0 30px 80px rgba(0,0,0,.30);z-index:61;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--linea);border-radius:22px;overflow:hidden}
.visor-cab{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--linea);min-width:0;background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque)}
.visor-cab .nombre{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;font-size:13px}
.visor-cuerpo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(380px,1fr);min-height:0;background:var(--superficie)}
.visor-archivo{background:var(--superficie-2);min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--linea)}
.visor-archivo iframe{flex:1;border:0;width:100%;min-height:0;background:#fff}
.visor-archivo .img-env{flex:1;overflow:auto;display:grid;place-items:center;padding:14px;min-height:0}
.visor-archivo img{max-width:100%;height:auto;box-shadow:0 2px 14px rgba(0,0,0,.18);cursor:zoom-in;background:#fff}
.visor-archivo .img-env .img-girada{max-width:100%}
.visor-archivo img.zoom{max-width:none;cursor:zoom-out}
.visor-archivo pre.xml{flex:1;margin:0;overflow:auto;padding:14px;font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre;background:var(--superficie);color:var(--tinta);min-height:0}
.visor-pestanas{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--linea);background:var(--superficie)}
.visor-pie{display:flex;align-items:center;gap:6px;padding:4px 8px;border-top:1px solid var(--linea);background:var(--superficie)}
.visor-pie .xs{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--tinta-2)}
.visor-datos{overflow:auto;padding:16px 20px 60px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.visor-titulo{font-size:22px;line-height:1.22;letter-spacing:-.02em}
.sub-titulo{font-size:12.5px;color:var(--tinta-3);font-weight:600;margin-bottom:6px}
.hechos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;font-size:13px;margin:0}
.hechos dt{color:var(--tinta-3);font-size:12px;padding-top:1px}
.hechos dd{margin:0;overflow-wrap:anywhere}
.lectura{border:1px solid var(--maquina-suave);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--superficie)}
.forma-lectura .rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.forma-lectura .campo>label{font-size:11.5px}
.forma-lectura .control,.forma-lectura .select{height:34px;font-size:13px}
.visor-pagina .visor-cuerpo{height:calc(100vh - 150px);min-height:520px;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
@media (max-width:980px){
  .visor{width:auto;left:0;top:0;right:0;bottom:0;border-radius:0}
  .visor-cuerpo{grid-template-columns:minmax(0,1fr);grid-template-rows:52vh auto;overflow:auto}
  .visor-archivo{border-right:0;border-bottom:1px solid var(--linea)}
  .visor-datos{overflow:visible}
  .visor-pagina .visor-cuerpo{height:auto}
}
@media (max-width:640px){
  .docs-barra{position:static}
  .docs-barra .buscar{width:100%}
  table.docs2{min-width:0}
  .docs2 th:nth-child(n+3):nth-child(-n+10),.docs2 td:nth-child(n+3):nth-child(-n+10),.docs2 th:nth-child(12),.docs2 td:nth-child(12){display:none}
  .docs2 tr.resumen-grupo td{display:table-cell}
  .docs2 td.icos{padding-left:10px}
  .docs2 td.doc-nombre{min-width:0}
  .docs2 td.doc-nombre .t,.docs2 td.doc-nombre .sub{max-width:36vw}
  .docs2 tr.grupo td .sub{max-width:58vw}
  .docs2 td.icos .ico+.ico{display:none}
  .forma-lectura .rejilla{grid-template-columns:minmax(0,1fr)}
}
.factura-env{flex:1;overflow:auto;padding:18px;min-height:0}
.factura{max-width:760px;margin:0 auto;background:var(--superficie);border:1px solid var(--linea);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.08);padding:22px 24px;display:flex;flex-direction:column;gap:16px;font-size:13px}
.factura>header{display:flex;gap:16px;justify-content:space-between;align-items:flex-start}
.factura>header .der{text-align:right;align-items:flex-end}
.factura>header strong{font-size:15px}
.factura-receptor{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:8px 10px;border-radius:6px;background:var(--superficie-2)}
.factura-totales{display:flex;justify-content:flex-end}
.factura-totales table{width:auto;min-width:280px}
.factura>footer{border-top:1px solid var(--linea);padding-top:10px;line-height:1.6}

/* ---- categoría y comisión (entrega 3.9) ---- */
.docs2 td.categoria{white-space:nowrap;max-width:170px}
.docs2 button.cat{border:0;background:transparent;font:inherit;font-size:12px;padding:2px 6px;border-radius:5px;cursor:pointer;color:var(--tinta);max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.docs2 button.cat:hover{background:var(--superficie-2)}
.docs2 button.cat.persona{font-weight:500}
.docs2 button.cat.senal{color:var(--tinta-2);font-style:italic}
.docs2 button.cat.empate,.docs2 button.cat.ninguna{background:var(--aviso-suave);color:var(--aviso)}
.docs2 .cat-sel{height:28px;font-size:12px;max-width:170px;padding-right:24px}
.comision-chica{font-size:11.5px;color:var(--acento);white-space:nowrap}
.docs2 tr.resumen-grupo td{background:var(--superficie);padding:6px 10px 6px 22px;border-bottom:1px dashed var(--linea)}
.linea-cats{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:12px;white-space:normal}
.linea-cats .etq{margin-right:2px}
.cat-suma{color:var(--tinta-2)}
.cat-suma b{color:var(--tinta);font-weight:600}
.cat-suma.sin{color:var(--aviso)}
.cat-suma.total{color:var(--acento)}
.cat-suma.total b{color:var(--acento)}
.categoria-visor{gap:10px;padding:10px 12px;border-radius:14px;background:var(--superficie-2)}
table.relacion td:first-child{white-space:normal;min-width:140px}
table.relacion th{white-space:normal;max-width:90px;line-height:1.25}

/* fase 7: cerrar el periodo */
.requisitos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.requisito{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-top:1px solid var(--linea)}
.requisito:first-child{border-top:0;padding-top:2px}
.requisito b{font-weight:600}
.estado-req{flex:0 0 24px;height:24px;display:inline-grid;place-items:center;color:var(--bien);font-size:0}
.estado-req .icono{width:24px;height:24px}
.estado-req .icono .r{fill-opacity:.16}
.requisito[data-cumple="no"] .estado-req{color:var(--mal)}
.requisito[data-cumple="no"]>.txt>b{color:var(--tinta)}
.eslabon{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--linea);border-radius:16px}
.eslabon.firmada{border-color:transparent;background:var(--bien-suave)}
.eslabon .num{flex:0 0 26px;height:26px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;background:var(--acento-suave);color:var(--acento-texto);font-variant-numeric:tabular-nums}
.eslabon.firmada .num{background:var(--bien);color:var(--superficie)}
.periodo-cerrado{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:var(--radio);background:var(--bien-suave);color:var(--bien);font-size:13px}
/* 3.58 (D106): la ventana del cliente */
.recuadro-suave{background:var(--superficie-2);border-radius:18px;padding:14px 16px}
.fila-ventana{cursor:pointer}
.fila-ventana:hover td,.fila-ventana:focus-visible td{background:var(--superficie-2)}
.imagen-ventana{display:block;max-width:100%;height:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
/* 3.59 (D108): lo que revisa el cliente — su palomita y la conversación de cada revisión */
.fila-ventana.abierta td{background:var(--acento-suave)}
.palomita{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;cursor:pointer}
.palomita input{width:17px;height:17px;cursor:pointer;accent-color:var(--bien)}
.hilo{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--linea);border-radius:18px;background:var(--superficie)}
.hilo[data-estado="abierta"]{border-color:var(--aviso)}
.hilo .mensajes{display:flex;flex-direction:column;gap:6px}
.hilo .mensaje{display:flex;flex-direction:column;gap:2px;max-width:min(560px,92%);padding:9px 13px;border-radius:18px 18px 18px 6px;background:var(--superficie-2)}
.hilo .mensaje.agencia{align-self:flex-end;background:var(--acento-suave);border-radius:18px 18px 6px 18px}
.hilo .mensaje .s{white-space:pre-wrap;overflow-wrap:anywhere}
.hilo textarea{min-height:56px}
/* 3.62 (D112): «Hoy» — lo que te toca; 3.72: cada cliente con lo que cuenta a la derecha de sus pendientes, y la pantalla a lo ancho */
.contenido.ancha{max-width:1560px}
.hoy{gap:16px}
.hoy-fecha{font-size:13px;font-weight:600;color:var(--tinta-3)}
.hoy-frase{font-family:var(--fuente-titulo);font-size:var(--t-xl);line-height:1.3;font-weight:600;letter-spacing:-.022em;max-width:62ch;text-wrap:balance;min-height:1.3em;color:var(--tinta-2)}
.hoy-frase b{color:var(--tinta)}
.hoy-rejilla{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.hoy-principal{flex:1 1 100%;min-width:0}
.hoy-lado{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:18px}
@media (min-width:1500px){.hoy-principal{flex:1 1 640px}.hoy-lado{flex:1 1 250px;max-width:320px}}            /* con sitio, «Tus clientes» al lado; si no, abajo y en columnas */
.hoy-lado:empty{display:none}
.vidrio-tarjeta{background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border-color:var(--vidrio-borde);box-shadow:var(--vidrio-brillo),var(--vidrio-sombra)}
.hoy-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hoy-tarea{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid var(--linea)}
.hoy-tarea:first-child{border-top:0;padding-top:4px}
.hoy-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--acento-suave);color:var(--acento-texto)}
.hoy-ico .icono{width:20px;height:20px}
.hoy-ico .icono .r{fill-opacity:.2}
.hoy-ico[data-clave="revisiones"],.hoy-ico[data-clave="repetidos"]{background:var(--aviso-suave);color:var(--aviso)}
.hoy-ico[data-clave="ia"],.hoy-ico[data-clave="portal"]{background:var(--maquina-suave);color:var(--maquina)}
.hoy-ico[data-clave="firmas"],.hoy-ico[data-clave="firma_periodo"]{background:var(--bien-suave);color:var(--bien)}
.hoy-ico[data-clave="sin_visto"]{background:var(--acento-suave);color:var(--acento-texto)}
.hoy-visto{color:var(--acento-texto);font-weight:600}
.hoy-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hoy-txt b{font-size:14.5px;font-weight:600}
.hoy-txt span{font-size:13px;color:var(--tinta-3);overflow-wrap:anywhere}
.hoy-tarea>.boton{flex:0 0 auto}
.hoy-grupo-cuerpo{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:stretch;gap:0 22px}
.hoy-grupo-lista{flex:1 1 400px;min-width:0;display:flex;flex-direction:column}
/* el recuadro de «lo que cuenta» se acomoda según el ancho de la tarjeta: angosto, abajo en una columna; con algo más, abajo en dos;
   con sitio, a la derecha en una columna; a lo ancho, a la derecha en dos columnas (los requisitos que faltan al lado del total) */
.hoy-foco{flex:1 1 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;padding:14px 0 2px;margin-top:6px;border-top:1px solid var(--linea)}
.hoy-faltan-zona{display:flex;flex-direction:column;gap:4px;min-width:0}
.hoy-foco-acciones{padding-top:2px}
@container ((min-width:470px) and (max-width:799.98px)) or (min-width:1100px){
  .hoy-foco{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"total faltan" "listo faltan" "acciones faltan";column-gap:32px}
  .hoy-foco>.hoy-total{grid-area:total}.hoy-foco>.hoy-listo{grid-area:listo}.hoy-foco>.hoy-faltan-zona{grid-area:faltan}.hoy-foco>.hoy-foco-acciones{grid-area:acciones;align-self:end}
}
@container (min-width:800px){.hoy-foco{flex:0 0 330px;padding:6px 0 2px 22px;margin-top:0;border-top:0;border-left:1px solid var(--linea)}}
@container (min-width:1100px){.hoy-foco{flex:0 0 540px}}
.hoy-total{display:flex;flex-direction:column;gap:2px}
.hoy-total b{font-family:var(--fuente-titulo);font-size:28px;font-weight:700;letter-spacing:-.028em;font-variant-numeric:tabular-nums;line-height:1.12}
.hoy-faltan{margin:0;padding:0 0 0 18px;font-size:13px;color:var(--tinta-2);display:flex;flex-direction:column;gap:2px}
.hoy-clientes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hoy-clientes li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 0;border-top:1px solid var(--linea)}
.hoy-clientes li:first-child{border-top:0;padding-top:0}
.hoy-clientes a{font-weight:500;min-width:0;overflow-wrap:anywhere}
@media (max-width:1499px){.hoy-clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 28px}.hoy-clientes li,.hoy-clientes li:first-child{border-top:0;border-bottom:1px solid var(--linea);padding:9px 0}}
.hoy-vacio{display:flex;flex-direction:column;gap:6px}
@media (max-width:720px){
  .hoy-frase{font-size:19px}
  .hoy-tarea{flex-wrap:wrap;gap:6px 14px}
  .hoy-txt{flex:1 1 calc(100% - 60px)}
  .hoy-tarea>.boton{margin-left:54px}
}
/* D112 (ahorro 5): motivos sugeridos de un toque */
.motivos{display:flex;flex-wrap:wrap;gap:6px}
.chip-motivo{height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--encima);color:var(--tinta-2);font-size:12.5px;font-weight:500;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-motivo:hover{background:var(--acento-suave);color:var(--acento-texto)}
/* D112 (ahorro 2): a dónde van los archivos, dentro del panel de subir */
.donde-subir{padding:10px 12px;border-radius:16px;background:var(--superficie-2)}
.donde-subir .select{background-color:var(--superficie)}
.donde-subir .select{max-width:280px}
.hoy-mas{margin-top:6px;align-self:flex-start}
.hoy-faltan li::marker{color:var(--aviso)}
@media (max-width:720px){
  .segmentos{flex-wrap:nowrap;overflow-x:auto;align-self:stretch;scrollbar-width:none}
  .segmentos a,.segmentos button{flex:1 0 auto;justify-content:center;padding:0 10px}
  .segmentos .icono{display:none}
}
/* D113: un nombre con sus iniciales (clientes, personas) */
.con-iniciales{display:flex;align-items:center;gap:12px;min-width:0}
.con-iniciales a.fuerte{font-weight:600;color:var(--tinta)}
.con-iniciales a.fuerte:hover{color:var(--acento-texto)}
.nota{align-items:center}
.nota>.icono{width:18px;height:18px;flex:none;opacity:.9}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.tabla tr[data-estado] td:first-child:has(> .con-iniciales){padding-left:0}
.tabla tr[data-estado] td:first-child:has(> .con-iniciales)::before{display:none}
/* ---- 3.64 (D114) ---- */
/* las cifras, en la letra normal con números del mismo ancho */
.cifra{font-family:var(--fuente);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.docs2 td.num.cifra{font-size:12.5px}
.docs2 td.cero{color:var(--tinta-3);opacity:.7}
/* lo que no tiene nada no deja hueco */
.docs-pantalla>div:empty{display:none}
/* seleccionar varios: la casilla del renglón y la barra que aparece abajo */
.sel-doc{width:16px;height:16px;margin:0 8px 0 0;vertical-align:-3px;cursor:pointer}
.docs2 tr.doc.elegido td{background:var(--acento-suave)}
.barra-seleccion{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:16;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:18px;align-self:center;max-width:100%;
  background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),0 14px 40px rgba(15,25,45,.22);animation:aparece .14s ease-out}
.barra-seleccion .fila{gap:8px}
.barra-seleccion .select{height:32px;font-size:13px;max-width:220px;background-color:var(--superficie)}
.barra-seleccion .control{height:32px;font-size:13px;min-width:220px;background:var(--superficie)}
.cuenta-sel{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--acento);color:var(--acento-tinta);font-size:12.5px;font-variant-numeric:tabular-nums}
/* confirmar varios leídos: la lista con su foto chica */
.lista-confirmar{display:flex;flex-direction:column;max-height:min(58vh,560px);overflow:auto;border-radius:14px;background:var(--superficie-2);padding:4px}
.renglon-confirmar{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer}
.renglon-confirmar:hover{background:var(--encima)}
.renglon-confirmar.fuera{opacity:.5}
.renglon-confirmar input{width:18px;height:18px;flex:none}
.renglon-confirmar .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.renglon-confirmar .txt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.renglon-confirmar>b.num{font-size:15px;font-weight:700;white-space:nowrap}
.mini{width:44px;height:56px;flex:none;border-radius:8px;object-fit:cover;background:var(--superficie);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mini-liga{display:inline-flex;flex:none;line-height:0;border-radius:8px}
/* R477: la miniatura de una foto que vino de lado se enseña derecha: gira y toma la medida cruzada, con márgenes que dejan su lugar igual */
.mini[data-giro="90"],.mini[data-giro="270"]{width:56px;height:44px;margin:6px -6px}
.mini[data-giro="90"]{transform:rotate(90deg)}.mini[data-giro="270"]{transform:rotate(270deg)}.mini[data-giro="180"]{transform:rotate(180deg)}
/* R477: la envoltura de una foto girada en su lugar (Documentos, el inspector): toma el tamaño que ocupa girada; la foto gira al centro */
.img-girada{display:block;max-width:100%;margin:0 auto;position:relative}
.img-girada>img{display:block;transform-origin:center center}
.prog-foto-liga{display:block}
.mini-liga:hover .mini{filter:brightness(.93)}
.mini.vacia{display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:var(--tinta-3);letter-spacing:.03em}
.hoy-acciones{display:flex;gap:4px;align-items:center;flex:none}
@media (max-width:720px){.hoy-acciones{margin-left:54px}}
@media (max-width:640px){
  .barra-seleccion{bottom:calc(84px + env(safe-area-inset-bottom))}
  .barra-seleccion .control{min-width:0;flex:1}
}
/* D114: el camino corto del expediente y lo que sigue en «Cerrar y entregar» */
.camino-corto,.siguiente-paso{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.camino-corto>.mosaico,.siguiente-paso>.mosaico{width:44px;height:44px;border-radius:13px}
.camino-corto>.mosaico .icono,.siguiente-paso>.mosaico .icono{width:24px;height:24px}
.camino-corto .txt,.siguiente-paso .txt{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px}
.camino-corto .txt b,.siguiente-paso .txt b{font-family:var(--fuente-titulo);font-size:17px;font-weight:650;letter-spacing:-.015em}
.pasos-cortos{flex:1 1 100%;gap:8px}
.paso-corto{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border:0;border-radius:999px;background:var(--encima);color:var(--tinta);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.paso-corto.hecho{background:var(--bien-suave);color:var(--bien)}
.paso-corto .punto{width:22px;height:22px;flex-basis:22px}
.siguiente-paso{border:1px solid var(--tarjeta-borde)}
/* 4.7 (D126): el alta asistida del expediente: tres caminos al mismo borrador */
.opciones-alta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.opcion-alta{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border:1px solid var(--linea);border-radius:16px;background:var(--superficie);color:var(--tinta);font:inherit;cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.opcion-alta:hover{border-color:var(--acento);background:var(--acento-suave)}
.opcion-alta.activa{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.opcion-alta.apagada{opacity:.62}
.opcion-alta>.mosaico{width:38px;height:38px;border-radius:12px}
.opcion-alta>.mosaico .icono{width:20px;height:20px}
.opcion-alta .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.opcion-alta .txt b{font-family:var(--fuente-titulo);font-size:15px;font-weight:650;letter-spacing:-.01em}
.panel-alta{padding:14px;border-radius:14px;background:var(--superficie-2);border:1px solid var(--linea)}
.panel-alta textarea.control{min-height:110px;resize:vertical;font:inherit;line-height:1.45}
.adjuntos-ia{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.adjuntos-ia li{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.propuesta-ia details summary{cursor:pointer;font-weight:600}
@media (max-width:600px){.opciones-alta{grid-template-columns:1fr}}
/* con la casilla de elegir, la tabla debe caber en una laptop de 1440: el estado y el rango de fechas parten renglón */
.docs2 td.icos{padding-left:14px}
.docs2 td.doc-nombre{max-width:290px}
.docs2 td.doc-nombre .t,.docs2 td.doc-nombre .sub{max-width:290px}
.docs2 td.estado{min-width:120px;max-width:160px}
.docs2 td.estado .chip{white-space:normal;text-align:left;line-height:1.25;height:auto;padding-top:3px;padding-bottom:3px}
.docs2 tr.grupo td.s{white-space:normal;min-width:84px}
/* lo que se trae a la vista (formas, avisos) no queda debajo de la barra de búsqueda pegada arriba */
.contenido *{scroll-margin-top:76px}

/* ---- 3.65 (D115) ---- */
/* el anillo de avance: una vuelta es el total */
.anillo{display:inline-grid;place-items:center;flex:none;line-height:1}
.anillo>svg,.anillo>.anillo-centro{grid-area:1/1}
.anillo-fondo{stroke:var(--linea-fuerte)}
.anillo-parte{stroke:var(--acento);transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1)}
.anillo[data-tono="bien"] .anillo-parte{stroke:var(--bien)}
.anillo[data-tono="aviso"] .anillo-parte{stroke:var(--aviso)}
.anillo-centro{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--tinta);letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.anillo-parte{transition:none}}
/* «Hoy» por cliente */
.hoy-grupos{gap:14px}
.hoy-grupo{padding-top:14px}
.hoy-grupo-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.hoy-grupo-cab .iniciales{width:36px;height:36px;border-radius:11px;font-size:13px}
.hoy-grupo-nombre{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:1px}
.hoy-grupo-nombre a{font-weight:650;font-size:15.5px;color:var(--tinta);text-decoration:none;overflow-wrap:anywhere}
.hoy-grupo-nombre a:hover{color:var(--acento-texto)}
.hoy-grupo-avance{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.hoy-grupo-avance b{font-weight:600}
.hoy-listo{display:flex;align-items:center;gap:14px}
.hoy-listo>div{display:flex;flex-direction:column;gap:2px}
.hoy-listo .anillo-centro{font-size:13.5px}
@media (max-width:720px){.hoy-grupo-nombre{flex:1 1 0}.hoy-grupo-avance{order:3;flex-basis:100%;margin:-4px 0 0 48px}.hoy-grupo-avance .anillo svg{width:26px;height:26px}}
/* siluetas al cargar y la entrada suave al cambiar de pantalla */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sil{display:block;max-width:100%;border-radius:7px;background-color:var(--linea);background-image:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--superficie) 70%,transparent) 50%,transparent 100%);
  background-size:220% 100%;background-repeat:no-repeat;animation:sil 1.4s ease-in-out infinite}
.sil.cuadro{border-radius:12px;flex:none}
.sil.titulo{border-radius:10px}
.sil.pildora{border-radius:999px}
.silueta .fila{align-items:center}
.silueta.tarjeta{padding:18px 20px}
@keyframes sil{0%{background-position:120% 0}100%{background-position:-120% 0}}
.contenido.entra>.pila{animation:entra .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sil{animation:none}.contenido.entra>.pila{animation:none}}
.docs-env>.silueta.tarjeta{box-shadow:none;background:none}
/* barras por categoría: a escala desde cero, un solo color */
.barras{display:flex;flex-direction:column;gap:7px;margin:12px 0 6px}
.barra-fila{display:grid;grid-template-columns:minmax(90px,180px) minmax(60px,1fr) auto;align-items:center;gap:12px;font-size:13px}
.barra-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-2)}
.barra-pista{height:12px;border-radius:999px;background:var(--linea);overflow:hidden;min-width:0}
.barra-valor{display:block;height:100%;border-radius:999px;background:var(--acento)}
.barra-fila.otras .barra-valor{background:var(--tinta-3)}
.barra-cifra{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:9.5em}
.barra-cifra b{font-weight:600}
@media (max-width:560px){.barra-fila{grid-template-columns:1fr auto;gap:4px 10px}.barra-pista{grid-column:1/-1;grid-row:2}.barra-cifra{min-width:0}}
/* la ventana del cliente como estado de cuenta */
.estado-cuenta{display:flex;flex-direction:column;gap:18px}
.ec-cabeza{display:flex;flex-wrap:wrap;gap:18px 32px;justify-content:space-between;align-items:flex-start}
.ec-quien{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.ec-quien h2{font-size:var(--t-xl);letter-spacing:-.02em;margin:2px 0}
.ec-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 1 auto;text-align:right}
.ec-total>b{font-family:var(--fuente-titulo);font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.ec-desglose{display:grid;grid-template-columns:auto auto;gap:2px 14px;margin:6px 0 0;font-size:13px}
.ec-desglose dt{color:var(--tinta-3);text-align:right}
.ec-desglose dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.ec-entrega{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:16px;background:var(--bien-suave)}
.ec-parte{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--linea);padding-top:14px}
@media (max-width:560px){.ec-total{align-items:flex-start;text-align:left}.ec-desglose dt,.ec-desglose dd{text-align:left}.ec-total>b{font-size:28px}}
/* revisar como en Mail: la fila a la izquierda del visor (D115) */
.visor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.visor-principal{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0}
.visor-lista{display:none}
@media (min-width:1180px){
  .visor.con-lista{width:min(1640px,calc(100vw - 20px));grid-template-columns:300px minmax(0,1fr)}
  .visor.con-lista .visor-lista{display:flex;flex-direction:column;overflow:auto;min-height:0;border-right:1px solid var(--linea);background:var(--superficie-2);padding:6px 6px 24px}
}
.visor-lista-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 10px 10px;position:sticky;top:-6px;background:var(--superficie-2);z-index:1}
.visor-lista-cab b{font-size:13px}
.visor-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--tinta);font:inherit;padding:9px 10px;border-radius:12px;cursor:pointer}
.visor-item:hover{background:var(--encima)}
.visor-item[aria-current="true"]{background:var(--acento);color:var(--acento-tinta)}
.visor-item[aria-current="true"] .mudo{color:inherit;opacity:.8}
.visor-item-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.visor-item-txt b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-item-txt .xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-item-total{font-size:12.5px;font-weight:600;white-space:nowrap}
.visor-punto{width:8px;height:8px;border-radius:50%;background:var(--linea-fuerte)}
.visor-item[data-tono="mal"] .visor-punto{background:var(--mal)}
.visor-item[data-tono="aviso"] .visor-punto{background:var(--aviso)}
.visor-item[data-tono="ok"] .visor-punto{background:var(--bien)}
.visor-item[aria-current="true"] .visor-punto{box-shadow:0 0 0 2px var(--superficie)}
/* «Primeros pasos» de un cliente nuevo */
.primeros-pasos header .der{display:flex;align-items:center;gap:10px}
.pasos-lista{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.primer-paso{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--linea)}
.primer-paso:first-child{border-top:0}
.paso-marca{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:12.5px;font-weight:650;background:var(--encima);color:var(--tinta-2)}
.primer-paso[data-hecho] .paso-marca{background:var(--bien-suave);color:var(--bien)}
.primer-paso[data-hecho] .paso-txt b{color:var(--tinta-2)}
.primer-paso[data-bloqueado] .paso-txt{opacity:.6}
.paso-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.paso-txt b{font-weight:600;font-size:14px}
@media (max-width:560px){.primer-paso{flex-wrap:wrap}.primer-paso>.boton{margin-left:42px}}
/* entrar con Touch ID o Face ID */
.entrar-llave{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:4px;text-align:center}
.entrar-llave .boton{justify-content:center}
.llaves-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.llaves-lista li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linea)}
.llaves-lista li:first-child{border-top:0;padding-top:0}
.llaves-lista li>.icono{color:var(--acento-texto);flex:none}
/* un hueco vacío (una zona que todavía no tiene nada) no deja doble espacio en la pila */
.contenido .pila>div:empty{display:none}
.entrar-llave:empty{display:none}
/* la marca del portal: el editor y su vista previa (D116) */
.marca-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:900px){.marca-rejilla{grid-template-columns:minmax(0,1fr)}}
.marca-fila{display:grid;grid-template-columns:160px auto minmax(0,1fr);gap:8px 14px;align-items:center}
.marca-fila.columna{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.marca-fila{grid-template-columns:minmax(0,1fr)}}
.marca-etq{display:flex;flex-direction:column;gap:2px;min-width:0}
.marca-acciones{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.marca-acciones label.boton{cursor:pointer}
.marca-imagen{display:grid;place-items:center;border:1px solid var(--linea);border-radius:14px;background:var(--superficie-2);overflow:hidden}
.marca-imagen img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.marca-imagen.marca-logo{width:84px;height:84px}
.marca-imagen.marca-portada{width:180px;aspect-ratio:16/7}
.marca-imagen.marca-portada img{width:100%;height:100%;object-fit:cover}
.marca-imagen.heredada{border-style:dashed;opacity:.7}
.marca-color{width:44px;height:36px;padding:0;border:1px solid var(--linea);border-radius:10px;background:none;cursor:pointer}
.marca-previa{display:flex;flex-direction:column;gap:8px}
.marca-telefono{width:100%;max-width:320px;border-radius:30px;padding:14px;background:var(--fondo);border:1px solid var(--linea-fuerte);display:flex;flex-direction:column;gap:12px;box-shadow:var(--tarjeta-sombra)}
.marca-cab{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:18px;background:var(--superficie);border:1px solid var(--linea);overflow:hidden}
.marca-cab.con-color{border-top:3px solid var(--acento)}
.marca-cab.con-portada{padding-top:0;border-top-width:1px}
.marca-cab-portada{display:block;width:calc(100% + 28px);max-width:none;margin:0 -14px 6px;aspect-ratio:16/7;object-fit:cover}
.marca-cab-titulos{display:flex;align-items:center;gap:10px;min-width:0}
.marca-cab-titulos>div{display:flex;flex-direction:column;min-width:0}
.marca-cab-titulos b{font-size:17px;letter-spacing:-.01em}
.marca-cab-logo{height:36px;width:auto;max-width:90px;object-fit:contain;border-radius:8px;flex:none}
.marca-cab-quien{font-size:10px;letter-spacing:.05em;color:var(--tinta-3);font-weight:600}
.marca-cab-bienvenida{margin:2px 0 0;font-size:12.5px;color:var(--tinta-2);white-space:pre-line;overflow-wrap:anywhere}
.marca-cuerpo-previa{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:18px;background:var(--superficie);border:1px solid var(--linea)}
.marca-cuerpo-previa .boton{justify-content:center;pointer-events:none}
.marca-liga-previa{font-size:12.5px;color:var(--acento-texto);text-decoration:underline}

/* 3.70: la liga de invitación junto a su persona; la caja se queda a la vista aunque la tabla sea más ancha que la pantalla */
.tabla tr.fila-liga>td{padding:4px 0 14px;background:none;white-space:normal}
.tabla tr.fila-liga>td>div{position:sticky;left:0;max-width:min(760px,calc(100vw - 48px));border-left:3px solid var(--acento)}
.tabla tr.fila-liga .ayuda{white-space:normal}

/* 3.71: en «Hoy», lo que cuenta cada periodo cuando un cliente tiene varios con pendientes */
.hoy-cuenta{font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.hoy-cuenta::before{content:"· "}

/* ---- 4.0 (D119): el programa de puntos visto por la agencia (ui_programa.js) ---- */
.prog-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.prog-num{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;background:var(--superficie);border:1px solid var(--tarjeta-borde);box-shadow:var(--tarjeta-sombra);min-width:0}
.prog-num .etq{font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.prog-num b{font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prog-dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.prog-reglitas{display:inline-flex;gap:3px}
.prog-reglitas i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--linea-fuerte)}
.prog-reglitas i[data-cumple=si]{background:var(--bien)}
.prog-reglitas i[data-cumple=no]{background:var(--mal)}
.prog-reglitas i[data-cumple=duda]{background:var(--aviso)}
.prog-detalle:empty{display:none}
.prog-detalle-cuerpo{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:18px}
@media (max-width:900px){ .prog-detalle-cuerpo{grid-template-columns:1fr} }
.prog-visor{display:flex;flex-direction:column;gap:6px;min-width:0}
.prog-foto{display:block;width:100%;max-width:100%;border-radius:14px;border:1px solid var(--linea);background:var(--superficie-2)}
.prog-pdf{width:100%;height:520px;border:1px solid var(--linea);border-radius:14px;background:#fff}
.prog-lados{gap:16px;min-width:0}
.prog-reglas{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.prog-reglas li{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;background:var(--superficie-2);border-left:3px solid var(--linea-fuerte);font-size:13.5px}
.prog-reglas li[data-cumple=si]{border-left-color:var(--bien)}
.prog-reglas li[data-cumple=no]{border-left-color:var(--mal)}
.prog-reglas li[data-cumple=duda]{border-left-color:var(--aviso)}
.prog-reglas li span{color:var(--tinta-2)}
.prog-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.prog-renglones .control.chico{height:32px;font-size:13px;padding:0 8px;min-width:0;width:100%}
.prog-renglones .control.num{width:72px}
.prog-renglones td:first-child .control{min-width:150px}
.prog-renglones th,.prog-renglones td{padding-left:6px;padding-right:6px;white-space:nowrap}
.prog-renglones tr[data-participa=si] td:first-child{box-shadow:inset 3px 0 0 var(--bien)}
.prog-decision{padding:12px 14px;border-radius:14px;background:var(--acento-suave)}
.prog-hilo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prog-hilo li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--superficie-2);max-width:78ch;font-size:14px}
.prog-hilo li[data-lado=agencia]{align-self:flex-end;background:var(--acento-suave)}
.prog-datos{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:14px}
.prog-datos dt{color:var(--tinta-3)}
.prog-datos dd{margin:0}
.prog-movs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.prog-movs li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--superficie-2);font-size:14px}
.prog-movs li b{min-width:48px;font-variant-numeric:tabular-nums}
.prog-movs li > span:not(.xs){flex:1 1 200px}
.prog-premios-ag{display:flex;flex-direction:column;gap:14px}
.prog-premio-ag.inactivo{opacity:.7}
.prog-premio-ag-cuerpo{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:start}
@media (max-width:600px){ .prog-premio-ag-cuerpo{grid-template-columns:1fr} }
.prog-premio-ag-img{width:100%;max-width:140px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--superficie-2);border:1px solid var(--linea)}
.prog-premio-ag-img.sin{display:grid;place-items:center;color:var(--tinta-3)}
.prog-montos-ag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.tabla tr[data-estado=mal] td{color:var(--tinta-2)}
.prog-envio{max-width:260px;min-width:160px}
/* 4.1 (D120): los módulos del programa de puntos, como la barra del manifiesto */
.prog-modulos{display:flex;flex-wrap:wrap;gap:8px}
.prog-modulos a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);text-decoration:none;font-weight:600;font-size:14px}
.prog-modulos a svg{width:18px;height:18px;color:var(--tinta-3)}
@media (max-width:1500px){.prog-modulos a{padding:9px 11px;gap:6px;font-size:13.5px}}   /* en una laptop caben los ocho módulos en un renglón */
.prog-modulos a[aria-current=page]{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta)}
.prog-modulos a[aria-current=page] svg{color:var(--acento-tinta)}
.prog-disputa{padding:12px 14px;border-radius:14px;background:var(--superficie-2)}
.prog-renglones input[type=checkbox]{width:18px;height:18px}
.prog-casilla-ag{font-size:14px}
.prog-pasos-asistente{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;counter-reset:paso}
.prog-pasos-asistente li{counter-increment:paso;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--superficie-2);font-size:13px;color:var(--tinta-3)}
.prog-pasos-asistente li::before{content:counter(paso);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--linea-fuerte);color:#fff;font-size:12px;font-weight:700}
.prog-pasos-asistente li[aria-current=step]{background:var(--acento-suave);color:var(--tinta)}
.prog-pasos-asistente li[aria-current=step]::before,.prog-pasos-asistente li[data-hecho]::before{background:var(--acento)}
.prog-pestanas-ficha{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linea);padding-bottom:6px}
.prog-pestanas-ficha button{border:0;background:transparent;padding:8px 12px;border-radius:10px;font-weight:600;color:var(--tinta-3);cursor:pointer}
.prog-pestanas-ficha button[aria-current=page]{background:var(--acento-suave);color:var(--tinta)}
.prog-barra-progreso{height:12px;border-radius:999px;background:var(--superficie-2);position:relative;overflow:visible;margin:18px 0 26px}
.prog-barra-progreso > i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--acento)}
.prog-barra-progreso > b{position:absolute;top:-4px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--superficie);border:3px solid var(--linea-fuerte);font-size:0}
.prog-barra-progreso > b[data-logrado]{border-color:var(--bien);background:var(--bien)}
.prog-barra-progreso > b > span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;color:var(--tinta-3)}
/* 4.2 (R460): con más de tres hitos las etiquetas van en lista bajo la barra */
.prog-barra-progreso.sin-etiquetas{margin-bottom:12px}
.prog-hitos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--tinta-3)}
.prog-hitos li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid var(--linea-fuerte);margin-right:6px;vertical-align:-1px;background:var(--superficie)}
.prog-hitos li[data-logrado]{color:var(--tinta)}.prog-hitos li[data-logrado]::before{background:var(--bien);border-color:var(--bien)}
.prog-portada-anuncio{display:block;width:100%;max-width:420px;border-radius:14px;border:1px solid var(--linea);background:var(--superficie-2)}
.prog-portada-anuncio.sin{aspect-ratio:16/9;display:grid;place-items:center;color:var(--tinta-3)}
td .prog-premio-ag-img{max-width:80px;aspect-ratio:16/10}
.prog-contactos{max-height:320px;overflow:auto;border:1px solid var(--linea);border-radius:12px;padding:6px}
.prog-contactos label{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px}
.prog-contactos label:hover{background:var(--superficie-2)}
.prog-color{width:44px;height:36px;padding:2px;border-radius:8px;border:1px solid var(--linea)}

/* 4.2 (R460): la vista previa de la marca con fondo, tono y segundo logo */
.marca-previa.con-fondo .marca-telefono{background:var(--marca-fondo-url) center top/cover no-repeat,var(--fondo)}
.marca-previa.oscura .marca-telefono{--fondo:#0B0D12;--superficie:#161920;--superficie-2:#1D212A;--linea:#272C36;--linea-fuerte:#363C48;--tinta:#F3F4F6;--tinta-2:#BCC2CC;--tinta-3:#959CAA;color:var(--tinta)}
.marca-previa.oscura.con-fondo .marca-cab,.marca-previa.oscura.con-fondo .marca-cuerpo-previa{background:rgba(22,25,32,.88)}
.marca-previa.clara .marca-telefono{--fondo:#EEF1F5;--superficie:#FFFFFF;--superficie-2:#F3F5F8;--linea:#E3E6EE;--linea-fuerte:#CDD3DE;--tinta:#15181F;--tinta-2:#4A5060;--tinta-3:#7A8294;color:var(--tinta)}
.marca-previa.clara.con-fondo .marca-cab,.marca-previa.clara.con-fondo .marca-cuerpo-previa{background:rgba(255,255,255,.9)}
.marca-cab-logo.segundo{margin-left:auto}
.marca-imagen.marca-fondo img,.marca-imagen.marca-logo_2 img{max-height:72px}

/* ======================================================================================================================
   4.5 (D123): la dirección «Índigo» con sus efectos. Todo lo de aquí se apaga con «Reducir movimiento» del equipo o con
   «Menos movimiento» (html[data-movimiento="menos"]); nada de esto cambia lo que las pantallas hacen.
   ====================================================================================================================== */
#app{position:relative;z-index:1}
/* la atmósfera: tres manchas de color que derivan muy despacio detrás de todo, y un grano fino encima */
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambiente span{position:absolute;border-radius:50%;filter:blur(72px);opacity:.8;will-change:transform;transition:background 1s var(--curva)}
.ambiente .a1{width:56vw;height:56vw;left:-14vw;top:-22vw;background:var(--aurora-1);animation:deriva1 34s ease-in-out infinite alternate}
.ambiente .a2{width:44vw;height:44vw;right:-12vw;top:8vh;background:var(--aurora-2);animation:deriva2 42s ease-in-out infinite alternate}
.ambiente .a3{width:48vw;height:48vw;left:28vw;bottom:-30vw;background:var(--aurora-3);animation:deriva3 38s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate3d(10vw,8vh,0) scale(1.12)}}
@keyframes deriva2{to{transform:translate3d(-9vw,14vh,0) scale(.92)}}
@keyframes deriva3{to{transform:translate3d(-12vw,-10vh,0) scale(1.08)}}
.grano{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] .grano{mix-blend-mode:screen;opacity:.06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grano{mix-blend-mode:screen;opacity:.06}}
body:has(.ambiente){background:var(--fondo)}                                      /* con la aurora viva, el fondo fijo sobra */
/* la luz que sigue al cursor dentro de cada tarjeta y enciende su borde cerca de él (--mx/--my los pone ui_base.js) */
.tarjeta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--lila) 45%,transparent),transparent 65%);opacity:0;transition:opacity .4s var(--curva);pointer-events:none}
.tarjeta::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acento) 60%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s var(--curva);pointer-events:none}
.tarjeta.con-luz::before,.tarjeta.con-luz::after{opacity:1}
.tarjeta:hover{box-shadow:0 2px 4px rgba(22,22,58,.05),0 18px 40px -18px rgba(55,48,163,.22)}
.tarjeta .tarjeta::before,.tarjeta .tarjeta::after{display:none}
/* botones: brillo al pasar, onda al tocar */
.boton::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--curva);pointer-events:none}
.boton:hover::before{transform:translateX(120%)}
.boton .onda{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:onda .6s var(--curva) forwards;pointer-events:none;z-index:-1}
@keyframes onda{to{transform:scale(2.6);opacity:0}}
/* la pantalla entra por bloques, de arriba abajo */
.contenido.entra>.pila>*,.contenido.entra>.pila>.pila>*,.contenido.entra>.pila>.hoy>*{animation:entra .55s var(--suave) both}
.contenido.entra>.pila>.pila>*:nth-child(1),.contenido.entra>.pila>.hoy>*:nth-child(1){animation-delay:70ms}
.contenido.entra>.pila>.pila>*:nth-child(2),.contenido.entra>.pila>.hoy>*:nth-child(2){animation-delay:140ms}
.contenido.entra>.pila>.pila>*:nth-child(3),.contenido.entra>.pila>.hoy>*:nth-child(3){animation-delay:210ms}
.contenido.entra>.pila>.pila>*:nth-child(4),.contenido.entra>.pila>.hoy>*:nth-child(4){animation-delay:280ms}
.contenido.entra>.pila>.pila>*:nth-child(5),.contenido.entra>.pila>.hoy>*:nth-child(5){animation-delay:350ms}
.contenido.entra>.pila>.pila>*:nth-child(n+6),.contenido.entra>.pila>.hoy>*:nth-child(n+6){animation-delay:420ms}
.contenido.entra>.pila{animation:none}
/* los números que ruedan: cada dígito es un rodillo de 0 a 9 */
.odo{display:inline-flex;align-items:flex-end;overflow:hidden;line-height:1;vertical-align:bottom;font-variant-numeric:tabular-nums;padding-top:.08em}
.odo .d{display:inline-block;height:1em;overflow:hidden;position:relative;width:.62em;text-align:center}
.odo .d>.rollo{display:flex;flex-direction:column;transition:transform 1.1s var(--suave)}
.odo .d>.rollo>span{display:block;height:1em;line-height:1}
.odo .sep{display:inline-block;height:1em;line-height:1}
/* el chip que acaba de cambiar brinca un poco */
.chip.pulso{animation:brinco .5s var(--resorte)}
@keyframes brinco{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
/* el menú de la izquierda: lo elegido se marca con una pastilla que se desliza */
.riel .grupo-menu{position:relative}
.riel a.tab{transition:color .2s var(--curva),transform .25s var(--suave)}
.riel a.tab:hover{transform:translateX(2px)}
/* apagado: por el equipo o por elección */
@media (prefers-reduced-motion:reduce){
  .ambiente span{animation:none}
  .grano{display:none}
  .tarjeta::before,.tarjeta::after,.boton::before,.boton .onda{display:none}
  .contenido.entra>.pila>*,.contenido.entra>.pila>.pila>*,.contenido.entra>.pila>.hoy>*{animation:none}
  .odo .d>.rollo{transition:none}
  .chip.pulso{animation:none}
  .riel a.tab:hover,.boton.primario:hover{transform:none}
}
html[data-movimiento="menos"] .ambiente,html[data-movimiento="menos"] .grano{display:none}
html[data-movimiento="menos"] .tarjeta::before,html[data-movimiento="menos"] .tarjeta::after,html[data-movimiento="menos"] .boton::before,html[data-movimiento="menos"] .boton .onda{display:none}
html[data-movimiento="menos"] .contenido.entra>.pila>*,html[data-movimiento="menos"] .contenido.entra>.pila>.pila>*,html[data-movimiento="menos"] .contenido.entra>.pila>.hoy>*{animation:none}
html[data-movimiento="menos"] .odo .d>.rollo{transition:none}
html[data-movimiento="menos"] .riel a.tab:hover,html[data-movimiento="menos"] .boton.primario:hover{transform:none}
html[data-movimiento="menos"] body:has(.ambiente){background:var(--campo-fondo) fixed,var(--fondo)}

/* ---- 4.5 (D124): menos clics ---- */
/* el buscador simple: una caja, los estatus como pastillas con su conteo, y los demás filtros plegados */
.buscador-simple{display:flex;flex-direction:column;gap:12px}
.buscador-simple .campo-buscar{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:14px;background:var(--campo);border:1px solid transparent;transition:border-color .15s,background .15s,box-shadow .15s}
.buscador-simple .campo-buscar:focus-within{border-color:var(--acento);background:var(--superficie);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 12%,transparent)}
.buscador-simple .campo-buscar .icono{color:var(--tinta-3);flex:none}
.buscador-simple .campo-buscar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--tinta);outline:none}
.buscador-simple .campo-buscar kbd{flex:none}
.estatus-chips{display:flex;flex-wrap:wrap;gap:6px}
.estatus-chips button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s var(--curva),color .2s,border-color .2s,transform .25s var(--resorte)}
.estatus-chips button b{font-weight:700;font-size:12px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--encima);display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.estatus-chips button:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.estatus-chips button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta);transform:scale(1.03)}
.estatus-chips button[aria-pressed="true"] b{background:rgba(255,255,255,.22);color:inherit}
.estatus-chips button[data-tono="aviso"][aria-pressed="true"]{background:var(--aviso);border-color:var(--aviso);color:#fff}
.estatus-chips button[data-tono="bien"][aria-pressed="true"]{background:var(--bien);border-color:var(--bien);color:#fff}
.estatus-chips button[data-tono="mal"][aria-pressed="true"]{background:var(--mal);border-color:var(--mal);color:#fff}
.mas-filtros>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--acento-texto);cursor:pointer;padding:4px 0}
.mas-filtros>summary::-webkit-details-marker{display:none}
.mas-filtros>summary .icono{width:15px;height:15px;transition:transform .3s var(--suave)}
.mas-filtros[open]>summary .icono{transform:rotate(180deg)}
.mas-filtros .prog-campos{margin-top:10px}
/* el inspector del ticket: el documento a la derecha, pegado mientras bajas; la decisión en la cabeza, siempre a la vista */
.inspector{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:22px;align-items:start}
.inspector>.inspector-doc{position:sticky;top:calc(76px + var(--franja));display:flex;flex-direction:column;gap:8px;min-width:0}
.inspector>.inspector-doc .prog-foto{max-height:min(70vh,760px);object-fit:contain;background:var(--superficie-2)}
.inspector>.inspector-doc .prog-pdf{height:min(70vh,760px)}
@media (max-width:1100px){.inspector{grid-template-columns:minmax(0,1fr)}.inspector>.inspector-doc{position:static;order:-1}}
.decision-barra{position:sticky;top:calc(60px + var(--franja));z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-6px -8px 8px;padding:10px 12px;border-radius:16px;background:var(--vidrio-fuerte);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-brillo),0 10px 30px -12px rgba(22,22,58,.25)}
.decision-barra .txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 180px}
.decision-barra .txt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.decision-barra .txt span{font-size:12px;color:var(--tinta-3)}
.decision-barra .boton.exito{background:var(--bien);color:#fff}
/* la cola de revisión: «siguiente por revisar» */
.cola-siguiente{display:inline-flex;align-items:center;gap:8px}
.cola-siguiente kbd{font-size:11px}
/* el teléfono con la vista previa del anuncio */
.telefono{width:min(100%,300px);aspect-ratio:9/18.5;border-radius:36px;background:#0F1020;padding:10px;box-shadow:0 30px 70px -24px rgba(22,22,58,.55),inset 0 0 0 1px rgba(255,255,255,.08);position:relative;margin:0 auto;transition:transform .5s var(--suave)}
.telefono::before{content:"";position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#0F1020;z-index:2}
.telefono .pantalla{height:100%;border-radius:28px;overflow:hidden;background:var(--fondo);color:var(--tinta);display:flex;flex-direction:column;font-size:12.5px}
.telefono .pantalla .cab{padding:40px 16px 14px;background:var(--marca);color:#fff;font-weight:700;font-size:14px}
.telefono .pantalla .cuerpo{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.telefono .anuncio{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--tarjeta-sombra)}
.telefono .anuncio .chip{align-self:flex-start}
.telefono .anuncio b{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.telefono .anuncio p{color:var(--tinta-2);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.telefono .anuncio .portada{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--superficie-2);display:block}
.telefono .anuncio .adj{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--acento-texto)}
.telefono .pie-tel{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px;font-size:9.5px;color:var(--tinta-3);border-top:1px solid var(--linea);background:var(--superficie)}
.telefono .pie-tel b{color:var(--tinta)}
.previa-anuncio{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width:980px){.previa-anuncio{grid-template-columns:minmax(0,1fr)}.previa-anuncio .telefono{display:none}}
/* el botón «¿Cómo funciona esta pantalla?» de la barra de arriba, y los conteos en los módulos del programa */
.boton-guia{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--vidrio-borde);background:var(--vidrio-fuerte);color:var(--acento-texto);cursor:pointer;box-shadow:var(--vidrio-brillo),0 2px 10px rgba(22,22,58,.06);transition:transform .25s var(--resorte),background .2s}
.boton-guia:hover{transform:scale(1.08);background:var(--acento-suave)}
.boton-guia .icono{width:19px;height:19px}
.prog-modulos a .cuantos{font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--aviso);color:#fff;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.prog-modulos a[aria-current=page] .cuantos{background:rgba(255,255,255,.25);color:inherit}
/* mandar la liga por WhatsApp: el botón junto a «Copiar» */
.liga .boton.whats{background:#DCF5E4;color:#146C3A}
:root[data-theme="dark"] .liga .boton.whats{background:#1A3325;color:#8ED9AC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .liga .boton.whats{background:#1A3325;color:#8ED9AC}}

/* ---- 4.5 (R461): el recorrido guiado: el foco sobre la pantalla real y el globo que explica ---- */
.guia-foco{position:fixed;z-index:120;border-radius:14px;box-shadow:0 0 0 9999px rgba(15,16,32,.42),0 0 0 3px var(--acento),0 0 30px 4px color-mix(in srgb,var(--acento) 40%,transparent);pointer-events:none;transition:top .35s var(--suave),left .35s var(--suave),width .35s var(--suave),height .35s var(--suave),border-radius .35s}
.guia-foco.sin{box-shadow:0 0 0 9999px rgba(15,16,32,.42)}
.guia-foco.espera{animation:latido 1.6s var(--curva) infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 9999px rgba(15,16,32,.42),0 0 0 3px var(--acento),0 0 0 0 color-mix(in srgb,var(--acento) 55%,transparent)}70%{box-shadow:0 0 0 9999px rgba(15,16,32,.42),0 0 0 3px var(--acento),0 0 0 14px rgba(55,48,163,0)}}
.guia-globo{position:fixed;z-index:121;width:min(360px,calc(100vw - 24px));padding:16px 18px 14px;border-radius:18px;background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);box-shadow:0 30px 70px -20px rgba(22,22,58,.45),0 2px 8px rgba(22,22,58,.08);display:flex;flex-direction:column;gap:10px;animation:aparece .25s var(--suave);transition:top .3s var(--suave),left .3s var(--suave)}
.guia-globo .paso{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-texto);font-weight:700;display:flex;align-items:center;gap:8px}
.guia-globo .paso::before{content:"";width:16px;height:2px;background:var(--acento);border-radius:2px}
.guia-globo h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.guia-globo p{font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.guia-globo .puntos{display:flex;gap:5px;align-items:center}
.guia-globo .puntos i{width:6px;height:6px;border-radius:50%;background:var(--linea-fuerte);transition:width .3s var(--suave),background .3s}
.guia-globo .puntos i[data-actual]{width:18px;background:var(--acento)}
.guia-globo .puntos i[data-visto]{background:var(--acento)}
.guia-globo .acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}
.guia-globo .acciones .saltar{margin-left:auto;font-size:12.5px;color:var(--tinta-3);background:transparent;border:0;cursor:pointer;padding:6px 4px;font:inherit}
.guia-globo .acciones .saltar:hover{color:var(--tinta)}
.guia-globo .espera-aviso{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--acento-texto);font-weight:600}
.guia-globo .espera-aviso i{width:8px;height:8px;border-radius:50%;background:var(--acento);animation:latido-pto 1.2s ease-in-out infinite}
@keyframes latido-pto{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.guia-globo .cerrar-guia{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--tinta-3);cursor:pointer;font-size:18px;line-height:1}
.guia-globo .cerrar-guia:hover{background:var(--encima);color:var(--tinta)}
.guia-globo .cola{position:absolute;width:14px;height:14px;background:var(--superficie);border-left:1px solid var(--linea);border-top:1px solid var(--linea);transform:rotate(45deg)}
.guia-globo[data-lado="abajo"] .cola{top:-8px;left:28px}
.guia-globo[data-lado="arriba"] .cola{bottom:-8px;left:28px;transform:rotate(225deg)}
.guia-globo[data-lado="derecha"] .cola{left:-8px;top:24px;transform:rotate(-45deg)}
.guia-globo[data-lado="izquierda"] .cola{right:-8px;top:24px;transform:rotate(135deg)}
.guia-globo[data-lado="centro"]{left:50%;top:50%;transform:translate(-50%,-50%)}
.guia-globo[data-lado="centro"] .cola{display:none}
.guia-globo.cargando{opacity:.6;transition:opacity .2s}
@media (max-width:640px){.guia-globo{left:12px !important;right:12px;width:auto;top:auto !important;bottom:calc(16px + env(safe-area-inset-bottom)) !important;transform:none !important}.guia-globo .cola{display:none}.guia-globo[data-movil="arriba"]{top:calc(12px + env(safe-area-inset-top)) !important;bottom:auto !important}}
@media (prefers-reduced-motion:reduce){.guia-foco,.guia-globo{transition:none;animation:none}.guia-foco.espera{animation:none}}
html[data-movimiento="menos"] .guia-foco,html[data-movimiento="menos"] .guia-globo{transition:none;animation:none}
.prog-tabla tr.clic.elegida td{background:var(--acento-suave)}
.prog-tabla tr.clic{cursor:pointer;transition:background .2s var(--curva)}
.prog-tabla tr.clic:hover td{background:var(--superficie-2)}
.inspector .prog-renglones td:first-child .control{min-width:220px}
.inspector .prog-campos{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* 4.8 (R466): la franja del sistema de capacitación: fija arriba, no se quita, empuja lo demás */
.franja-capacitacion{position:fixed;top:0;left:0;right:0;z-index:1000;height:28px;display:flex;align-items:center;justify-content:center;padding:0 12px;background:#B45309;color:#FFF7ED;font-size:12.5px;font-weight:600;letter-spacing:.01em;text-align:center;line-height:1.2;box-shadow:0 1px 0 rgba(0,0,0,.12);overflow:hidden;white-space:nowrap}
.franja-capacitacion .corta{display:none}
@media (max-width:760px){.franja-capacitacion .larga{display:none}.franja-capacitacion .corta{display:inline}}
html[data-entorno="capacitacion"],html[data-entorno="demo"]{--franja:28px}
html[data-entorno="capacitacion"] body,html[data-entorno="demo"] body{padding-top:var(--franja)}
html[data-entorno="demo"] .franja-capacitacion{background:#3730A3;color:#EEF2FF}

/* 4.11 (R475): la pantalla «Demostración»: los QR para proyectar */
.demo-qrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.demo-qr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:1px solid var(--linea);border-radius:16px;background:var(--superficie);text-align:center;min-width:0}
.demo-qr img{width:220px;height:220px;max-width:100%;border-radius:12px;background:#fff;padding:6px;border:1px solid var(--linea)}
.demo-qr .liga{width:100%}
.demo-qr .s{color:var(--tinta-2)}
.demo-qr .demo-prueba{color:var(--maquina);font-weight:600}
.demo-qr[data-tipo="cliente"] .chip{background:var(--aviso-suave);color:var(--aviso)}

/* 4.12 (R476): la presentación guiada: el panel que conduce la demostración, siempre a la vista */
.pres-panel{position:fixed;right:16px;bottom:16px;z-index:1150;width:min(440px,calc(100vw - 32px));max-height:min(78vh,760px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 18px 48px rgba(20,22,60,.22);color:var(--tinta)}
.pres-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:sticky;top:-14px;background:var(--superficie);padding:4px 0 6px;border-bottom:1px solid var(--linea);z-index:1}
.pres-cabeza b{font-size:1.05em}
.pres-cuerpo{gap:10px}
.pres-vio{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:12px;background:var(--superficie-2);border:1px solid var(--linea)}
.pres-datos{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:.92em}
.pres-datos dt{color:var(--tinta-2)}.pres-datos dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pres-decir{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;border-left:3px solid var(--acento);background:var(--acento-suave)}
.pres-decir p{margin:0;font-size:.95em;line-height:1.45}
.pres-toca{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--aviso-suave);color:var(--tinta);font-weight:600;line-height:1.35;border:1px solid var(--aviso)}
.pres-pie{gap:8px;flex-wrap:wrap;align-items:center}
.pres-pie kbd{margin-left:6px;font-size:.8em;opacity:.7}
.pres-ayuda{align-self:flex-end}
.pres-panel.izq{right:auto;left:16px}
.pres-marcado{outline:3px solid var(--acento);outline-offset:6px;border-radius:14px;transition:outline-color .3s}
.bien{color:var(--bien)}
/* 4.15 (R481): avanza sola: los subtítulos en grande, quién hace cada cosa en tres colores y lo que validó lo real */
.pres-controles{gap:8px;align-items:center;flex-wrap:wrap}
.pres-controles .select{width:auto;min-width:0}
.pres-g{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;background:var(--superficie-2);color:var(--tinta-2)}
.pres-g[data-g="regla"]{background:var(--bien-suave);color:var(--bien)}
.pres-g[data-g="ia"]{background:var(--maquina-suave);color:var(--maquina)}
.pres-g[data-g="persona"]{background:var(--aviso-suave);color:var(--aviso)}
.pres-leyenda{display:flex;gap:6px;flex-wrap:wrap}
.pres-leyenda .pres-g{font-weight:500}.pres-leyenda .pres-g b{font-weight:700}
.pres-donde{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--superficie-2);border:1px solid var(--linea)}
.pres-donde ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.pres-donde li{display:flex;gap:8px;align-items:baseline;font-size:.92em;line-height:1.35}
.pres-donde li span:last-child{min-width:0}
.pres-grupo{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;border-left:3px solid var(--linea-fuerte);background:var(--superficie-2)}
.pres-grupo[data-g="regla"]{border-left-color:var(--bien)}.pres-grupo[data-g="regla"] > b{color:var(--bien)}
.pres-grupo[data-g="ia"]{border-left-color:var(--maquina)}.pres-grupo[data-g="ia"] > b{color:var(--maquina)}
.pres-grupo[data-g="persona"]{border-left-color:var(--aviso)}.pres-grupo[data-g="persona"] > b{color:var(--aviso)}
.pres-grupo ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.pres-grupo li{display:grid;grid-template-columns:3.2em 1fr;gap:8px;font-size:.9em;line-height:1.35}
.pres-grupo .num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.pres-grupo .que{min-width:0;overflow-wrap:anywhere}
.pres-decir p.ahora{font-weight:600;color:var(--tinta)}
.pres-decir p{color:var(--tinta-2);transition:color .2s}
.pres-sub{position:fixed;left:16px;right:476px;bottom:16px;z-index:1149;display:flex;flex-direction:column;gap:8px;padding:16px 22px 12px;border-radius:18px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 18px 48px rgba(20,22,60,.22)}
.pres-sub.izq{left:476px;right:16px}
.pres-sub-cap{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.pres-sub-cap:empty{display:none}
.pres-sub-texto{margin:0;font-size:var(--t-xl);line-height:1.35;font-weight:600;color:var(--tinta);text-wrap:balance;max-width:62ch}
.pres-sub[data-tono="toca"]{border-color:var(--aviso);background:var(--aviso-suave)}
.pres-sub[data-tono="vivo"] .pres-sub-texto::before{content:"● ";color:var(--mal)}
.pres-sub.pausa .pres-sub-texto::after{content:"  (en pausa)";font-weight:400;color:var(--tinta-2);font-size:.7em}
.pres-sub-barra{height:3px;border-radius:3px;background:var(--linea);overflow:hidden}
.pres-sub-barra span{display:block;height:100%;width:0;background:var(--acento);transition:width .1s linear}
.pres-sub[data-tono="toca"] .pres-sub-barra{visibility:hidden}
@media (max-width:1100px){.pres-sub,.pres-sub.izq{left:16px;right:16px;bottom:auto;top:calc(env(safe-area-inset-top, 0px) + 12px)}.pres-sub-texto{font-size:var(--t-l)}}
@media (max-width:760px){.pres-panel{right:8px;left:8px;bottom:8px;width:auto;max-height:60vh}.pres-sub,.pres-sub.izq{left:8px;right:8px;padding:10px 14px 8px}.pres-sub-texto{font-size:var(--t-m)}}
/* R486 (4.17): la presentación en dos pantallas: el reflector, el foco en un QR, la diapositiva, la portada de cada capítulo, el rótulo,
   la pizarra de «qué valida», el celular simulado, la tapa de la pantalla grande y la ventana que conduce */
.pres-reflector{position:fixed;z-index:1130;border-radius:16px;pointer-events:none;box-shadow:0 0 0 200vmax rgba(12,14,34,.55),0 0 0 4px var(--acento),0 0 40px 8px color-mix(in srgb,var(--acento) 45%,transparent);transition:top .28s var(--suave),left .28s var(--suave),width .28s var(--suave),height .28s var(--suave)}
.demo-qr{transition:filter .4s,opacity .4s}
.demo-qr.pres-desenfocado{filter:grayscale(1) blur(7px);opacity:.3}
.pres-dia,.pres-portada,.pres-tapa{position:fixed;inset:0;z-index:1120;display:grid;place-items:center;padding:5vh 5vw;background:var(--fondo);color:var(--tinta);opacity:0;transition:opacity .45s var(--suave);overflow:auto}
.pres-portada{z-index:1125}
.pres-tapa{z-index:1300;opacity:1}
.pres-dia.visible,.pres-portada.visible{opacity:1}
.pres-dia-marco{width:min(1280px,100%);display:flex;flex-direction:column;gap:3vh}
.pres-dia-cap,.pres-portada-num{font-size:clamp(13px,1.2vw,18px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.pres-dia h1,.pres-tapa h1{margin:0;font-family:var(--fuente-titulo);font-size:clamp(30px,4vw,64px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.pres-flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pres-flujo li,.pres-color,.pres-pregunta{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:var(--superficie);border:1px solid var(--linea);min-width:0}
.pres-flujo .num{font-weight:700;color:var(--acento);font-variant-numeric:tabular-nums}
.pres-flujo b,.pres-color b{font-size:clamp(18px,1.8vw,28px);line-height:1.15}
.pres-flujo li span:last-child,.pres-color span:last-child,.pres-pregunta span{color:var(--tinta-2);font-size:clamp(14px,1.15vw,19px);line-height:1.4}
.pres-colores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pres-color{border-left:6px solid var(--linea-fuerte)}
.pres-color .que{font-weight:600;color:var(--tinta)}
.pres-color[data-g="regla"]{border-left-color:var(--bien)}.pres-color[data-g="regla"] b{color:var(--bien)}
.pres-color[data-g="ia"]{border-left-color:var(--maquina)}.pres-color[data-g="ia"] b{color:var(--maquina)}
.pres-color[data-g="persona"]{border-left-color:var(--aviso)}.pres-color[data-g="persona"] b{color:var(--aviso)}
.pres-sistemas{display:flex;flex-direction:column;gap:8px}
.pres-sistemas ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;counter-reset:sis}
.pres-sistemas li{counter-increment:sis;display:flex;gap:8px;align-items:baseline;padding:10px 16px;border-radius:999px;background:var(--superficie);border:1px solid var(--linea);font-size:clamp(15px,1.25vw,20px)}
.pres-sistemas li::before{content:counter(sis);font-weight:700;color:var(--acento)}
.pres-sistemas li span{color:var(--tinta-2)}
.pres-preguntas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pres-pregunta b{font-size:clamp(18px,1.7vw,26px)}
.pres-portada-marco{width:min(1100px,100%);display:flex;flex-direction:column;gap:2vh}
.pres-portada h1{margin:0;font-family:var(--fuente-titulo);font-size:clamp(44px,7vw,120px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.pres-portada-sub{margin:0;font-size:clamp(18px,2vw,32px);color:var(--tinta-2)}
.pres-portada ol{margin:2vh 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pres-portada li{padding:6px 14px;border-radius:999px;background:var(--superficie);border:1px solid var(--linea);font-size:clamp(13px,1.1vw,18px);color:var(--tinta-2)}
.pres-rotulo{position:fixed;left:24px;bottom:24px;z-index:1140;max-width:min(56vw,900px,calc(100vw - min(31vw,480px) - 96px));display:flex;flex-direction:column;gap:2px;padding:14px 22px 16px;border-radius:20px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 22px 60px rgba(12,14,40,.35)}
.pres-rotulo-cap{font-size:clamp(12px,1.05vw,16px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.pres-rotulo-titulo{font-size:clamp(20px,2.1vw,34px);line-height:1.15;color:var(--tinta);text-wrap:balance}
.pres-rotulo-sub{margin:4px 0 0;font-size:clamp(15px,1.45vw,24px);line-height:1.35;color:var(--tinta-2);max-width:60ch}
.pres-rotulo-sub:empty{display:none}
.pres-rotulo-vivo{display:none;align-self:flex-start;margin-bottom:4px;padding:1px 10px;border-radius:999px;background:var(--mal);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pres-rotulo-vivo::before{content:"● "}
.pres-rotulo.vivo .pres-rotulo-vivo{display:inline-block}
.pres-pizarra{position:fixed;right:24px;bottom:24px;z-index:1140;width:min(31vw,480px);min-width:300px;max-height:min(60vh,640px);overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:20px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 22px 60px rgba(12,14,40,.35);font-size:clamp(13px,1vw,17px)}
.pres-pizarra .xs.mudo{display:none}
.pres-pizarra .pres-donde li,.pres-pizarra .pres-grupo li{font-size:1em}
body.pres-con-tel .pres-pizarra{right:auto;left:24px;bottom:auto;top:24px}
.pres-tel-capa{position:fixed;inset:0;z-index:1135;background:rgba(10,12,30,.45);opacity:0;transition:opacity .4s;pointer-events:none}
.pres-tel-capa.visible{opacity:1}
.pres-tel{position:fixed;z-index:1142;right:max(5vw,24px);top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(40px,-50%);opacity:0;transition:transform .5s var(--suave),opacity .4s;pointer-events:none;font-size:clamp(11px,1.6vh,15px)}
.pres-tel.visible{transform:translate(0,-50%);opacity:1}
body:not(.pres-en-pantalla) .pres-tel{right:476px;top:44%}
body:not(.pres-en-pantalla):has(.pres-panel.izq) .pres-tel{right:24px}
.pres-tel-marco{height:min(74vh,680px);aspect-ratio:9/19;display:flex;flex-direction:column;border-radius:46px;padding:12px;background:#0f1014;box-shadow:0 0 0 2px #2a2c33,0 30px 80px rgba(0,0,0,.5);overflow:hidden}
body:not(.pres-en-pantalla) .pres-tel-marco{height:min(62vh,580px)}
.pres-tel-barra{display:flex;justify-content:space-between;align-items:center;padding:10px 22px 6px;background:var(--superficie);border-radius:34px 34px 0 0;font-size:.85em;font-weight:600;color:var(--tinta)}
.pres-tel-isla{width:30%;height:22px;border-radius:999px;background:#0f1014}
.pres-tel-app{display:flex;flex-direction:column;padding:8px 16px 10px;background:var(--superficie);border-bottom:1px solid var(--linea)}
.pres-tel-app b{font-size:1.05em;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres-tel-app span{font-size:.8em;color:var(--acento);font-weight:600}
.pres-tel-pantalla{flex:1;min-height:0;position:relative;background:var(--fondo);border-radius:0 0 34px 34px;overflow:hidden}
.pres-tel-paso{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:16px;overflow:hidden;animation:pres-entra .35s var(--suave) both}
.pres-tel-paso:has(.pres-tel-camara){padding:0}
@keyframes pres-entra{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.pres-tel-titulo{margin:0;font-size:1.35em;font-weight:700;color:var(--tinta)}
.pres-tel-s{margin:0;font-size:.9em;line-height:1.35;color:var(--tinta-2)}
.pres-tel-s.mal{color:var(--mal)}
.pres-tel-boton{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--superficie);border:1px solid var(--linea);font-weight:600;color:var(--tinta)}
.pres-tel-boton.primario{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta)}
.pres-tel-boton.toca{animation:pres-toque .6s var(--suave)}
.pres-tel-boton.toca::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 2px rgba(0,0,0,.18);animation:pres-dedo .6s ease-out both}
@keyframes pres-toque{40%{transform:scale(.96)}}
@keyframes pres-dedo{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
.pres-tel-camara{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0b0c10;color:#e8e8ee}
.pres-tel-camara p{margin:0;font-size:.9em;opacity:.85}
.pres-tel-visor{position:relative;width:78%;aspect-ratio:3/4;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a3d48,#15161c);border-radius:12px;overflow:hidden}
.pres-tel-visor .esq{position:absolute;width:22px;height:22px;border:3px solid rgba(255,255,255,.85)}
.pres-tel-visor .esq.a{top:8px;left:8px;border-right:0;border-bottom:0}.pres-tel-visor .esq.b{top:8px;right:8px;border-left:0;border-bottom:0}
.pres-tel-visor .esq.c{bottom:8px;left:8px;border-right:0;border-top:0}.pres-tel-visor .esq.d{bottom:8px;right:8px;border-left:0;border-top:0}
.pres-ilus-ticket{width:58%;aspect-ratio:.56;display:flex;flex-direction:column;gap:7%;padding:10% 9%;background:#faf8f2;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.55);transform:rotate(-4deg)}
.pres-ilus-ticket i{display:block;height:5px;border-radius:2px;background:#2a2a2a;opacity:.7}
.pres-ilus-ticket i.grande{height:9px;width:72%;opacity:.85}
.pres-ilus-ticket i.corto{width:55%}
.pres-ilus-ticket i.hueco{background:transparent}
.pres-ilus-ticket.movido{filter:blur(2.6px);animation:pres-temblor .18s linear infinite}
@keyframes pres-temblor{0%,100%{transform:rotate(-4deg) translate(0,0)}50%{transform:rotate(-3deg) translate(3px,-2px)}}
.pres-ilus-selfie{position:relative;width:100%;height:100%;background:linear-gradient(#6aa6d8,#a9cdea 60%,#d9c7a8)}
.pres-ilus-selfie .cara{position:absolute;left:50%;top:26%;width:34%;aspect-ratio:1;margin-left:-17%;border-radius:50%;background:#f0cfa8}
.pres-ilus-selfie .hombros{position:absolute;left:50%;bottom:-8%;width:76%;height:34%;margin-left:-38%;border-radius:50% 50% 0 0;background:#3c5a8a}
.pres-tel-obturador{width:58px;height:58px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);transition:transform .15s}
.pres-tel-obturador.disparo{transform:scale(.85);background:#fff}
.pres-tel-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.pres-tel-flash.disparo{animation:pres-flash .5s ease-out}
@keyframes pres-flash{0%{opacity:.95}100%{opacity:0}}
.pres-tel-leyendo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.pres-tel-leyendo b{font-size:1.2em;color:var(--tinta)}
.pres-tel-giro{width:46px;height:46px;border-radius:50%;border:4px solid var(--linea);border-top-color:var(--acento);animation:pres-gira .9s linear infinite}
@keyframes pres-gira{to{transform:rotate(360deg)}}
.pres-tel-foto{display:block;max-width:100%;max-height:30%;margin:0 auto;border-radius:10px;object-fit:contain;background:var(--superficie-2);border:1px solid var(--linea)}
.pres-tel-veredicto{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--superficie-2);border-left:5px solid var(--linea-fuerte)}
.pres-tel-veredicto b{font-size:1.3em;color:var(--tinta)}
.pres-tel-veredicto[data-tono="bien"]{background:var(--bien-suave);border-left-color:var(--bien)}.pres-tel-veredicto[data-tono="bien"] b{color:var(--bien)}
.pres-tel-veredicto[data-tono="mal"]{background:var(--mal-suave);border-left-color:var(--mal)}.pres-tel-veredicto[data-tono="mal"] b{color:var(--mal)}
.pres-tel-veredicto[data-tono="aviso"]{background:var(--aviso-suave);border-left-color:var(--aviso)}.pres-tel-veredicto[data-tono="aviso"] b{color:var(--aviso)}
.pres-tel-puntos{font-size:1.5em;font-weight:800;color:var(--bien)}
.pres-tel-datos{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:.9em}
.pres-tel-datos dt{color:var(--tinta-2)}.pres-tel-datos dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--tinta)}
.pres-tel-dicho{display:flex;flex-direction:column;gap:6px}
.pres-tel-compra,.pres-tel-archivo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--superficie);border:1px solid var(--linea);color:var(--tinta)}
.pres-tel-compra > span:first-child,.pres-tel-archivo > span{flex:1;min-width:0;display:flex;flex-direction:column}
.pres-tel-archivo .ok{flex:0;color:var(--bien);opacity:0;transition:opacity .3s}
.pres-tel-archivo.elegido{border-color:var(--acento)}.pres-tel-archivo.elegido .ok{opacity:1}
.pres-tel-escribe{min-height:5.5em;padding:10px 12px;border-radius:12px;background:var(--superficie);border:1px solid var(--acento);font-size:.95em;line-height:1.4;color:var(--tinta)}
.pres-tel-escribe::after{content:"|";animation:pres-cursor 1s steps(1) infinite;color:var(--acento)}
@keyframes pres-cursor{50%{opacity:0}}
.pres-tel-pie{margin:0;padding:4px 12px;border-radius:999px;background:var(--superficie);border:1px solid var(--linea);font-size:.85em;font-weight:600;color:var(--tinta-2)}
.pres-tapa-marco{width:min(760px,100%);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pres-tapa-estado{margin:0;font-size:clamp(16px,1.6vw,24px);color:var(--tinta-2)}
.pres-negro{position:fixed;inset:0;z-index:1400;background:#000;cursor:none}
body.pres-conduciendo{overflow:hidden}
.pres-conductor{position:fixed;inset:0;z-index:1300;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;padding:16px 24px;background:var(--fondo);color:var(--tinta);overflow:hidden}
.pres-c-cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pres-c-cabeza kbd,.pres-c-botones kbd{margin-left:6px;font-size:.8em;opacity:.7}
.pres-c-capitulos{display:flex;gap:8px;flex-wrap:wrap}
.pres-c-cap{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta-2);font:inherit;font-size:var(--t-s);cursor:pointer}
.pres-c-cap .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--superficie-2);font-weight:700;font-size:12px}
.pres-c-cap.ahora{border-color:var(--acento);color:var(--tinta);background:var(--acento-suave)}.pres-c-cap.ahora .num{background:var(--acento);color:var(--acento-tinta)}
.pres-c-cap.visto{color:var(--tinta-3)}
.pres-c-cap:disabled{cursor:default}
.pres-c-cuerpo{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:18px;min-height:0}
.pres-c-guion{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding:20px 24px;border-radius:22px;background:var(--superficie);border:1px solid var(--linea)}
.pres-c-guion h1{margin:0;font-family:var(--fuente-titulo);font-size:clamp(24px,2.4vw,38px);line-height:1.1;text-wrap:balance}
.pres-c-donde{margin:0;font-size:var(--t-s);color:var(--tinta-2);font-weight:600}
.pres-c-frases{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.pres-c-frases li{position:relative;padding-left:16px;border-left:4px solid transparent;font-size:clamp(18px,1.6vw,26px);line-height:1.45;color:var(--tinta-2);transition:color .2s}
.pres-c-frases li.dicha{color:var(--tinta-3)}
.pres-c-frases li.ahora{border-left-color:var(--acento);color:var(--tinta);font-weight:600;font-size:clamp(22px,2.1vw,34px)}
.pres-c-barra{display:block;height:4px;margin-top:8px;border-radius:4px;background:var(--linea);overflow:hidden}
.pres-c-barra span{display:block;height:100%;width:0;background:var(--acento);transition:width .2s linear}
.pres-c-botones{gap:8px;flex-wrap:wrap;margin-top:auto}
.pres-c-lado{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.pres-c-sigue{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--superficie-2);border:1px solid var(--linea)}
.pres-c-pie{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--linea)}
.pres-c-pie label{gap:6px;align-items:center}
.pres-c-pasos{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:clamp(15px,1.2vw,19px);line-height:1.5}
.pres-c-indice{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (max-width:1100px){body:not(.pres-en-pantalla) .pres-tel{right:16px}.pres-flujo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pres-c-cuerpo{grid-template-columns:1fr}.pres-conductor{overflow:auto}.pres-colores,.pres-preguntas{grid-template-columns:1fr}}
body.pres-en-pantalla .riel{display:none}
body.pres-en-pantalla .app{grid-template-columns:0 minmax(0,1fr)}
body.pres-con-pizarra .app{margin-right:calc(min(31vw,480px) + 36px);transition:margin-right .3s var(--suave)}
.pres-c-prueba{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:12px 14px;border-radius:14px;background:var(--superficie-2);border:1px dashed var(--linea-fuerte)}
/* 4.17.3 (R487): ¿cómo presentas? «Yo explico» o «Guiado automático»; y las pestañas de cada cliente */
.demo-modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.demo-modo{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid var(--linea);background:var(--superficie);color:var(--tinta);font:inherit;cursor:pointer;min-width:0}
.demo-modo b{font-size:1.05em}
.demo-modo.activa{border-color:var(--acento);background:var(--acento-suave);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 18%,transparent)}
.demo-pestanas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:pes}
.demo-pestanas li{counter-increment:pes;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--superficie-2);border:1px solid var(--linea)}
.demo-pestanas li::before{content:counter(pes);grid-row:1/3;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acento);color:var(--acento-tinta);font-weight:700;font-size:13px}
@media (max-width:700px){.demo-modos{grid-template-columns:1fr}}
/* 4.17.4: la primera celda de Documentos —la casilla, el tipo de archivo y su estado— en un solo renglón alineado; la casilla, del
   sistema (no la del navegador) y discreta hasta pasar el ratón; el estado del renglón, una barrita a la izquierda en vez de un punto suelto */
.docs2 td.icos .icos-fila{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.docs2 td.icos .icos-fila .ico{margin-right:0}
.sel-doc{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0 4px 0 0;padding:0;border:1.5px solid var(--linea-fuerte);border-radius:6px;background:var(--superficie) center/12px 12px no-repeat;cursor:pointer;opacity:.5;vertical-align:middle;transition:opacity .15s,border-color .15s,background-color .15s}
.docs2 tr:hover .sel-doc,.docs2 tr:focus-within .sel-doc,.docs2 tr.elegido .sel-doc,.sel-doc:focus-visible{opacity:1}
.sel-doc:hover{border-color:var(--acento)}
.sel-doc:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.sel-doc:checked{opacity:1;border-color:var(--acento);background-color:var(--acento);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3 4.9 8.7 9.6 3.5' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sel-doc:checked{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3 4.9 8.7 9.6 3.5' fill='none' stroke='%2315163A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>")}}
:root[data-theme="dark"] .sel-doc:checked{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3 4.9 8.7 9.6 3.5' fill='none' stroke='%2315163A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.docs2 tr[data-estado] td.icos::before{left:4px;top:12px;bottom:12px;width:3px;height:auto;margin-top:0;border-radius:3px}
/* 4.17.5 (R489): la contraseña se puede ver mientras se escribe: el campo con un ojo a la derecha */
.con-ojo{position:relative;display:block;width:100%;min-width:0}
.con-ojo .control{padding-right:42px}
.con-ojo .ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--tinta-3);cursor:pointer}
.con-ojo .ojo:hover,.con-ojo .ojo.abierto{color:var(--acento);background:var(--acento-suave)}
.con-ojo .ojo:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.con-ojo .ojo.abierto{position:absolute}
.con-ojo .ojo.abierto::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:1.5px;background:currentColor;transform:rotate(-35deg)}

/* 4.17.8 (D141): al cambiar de periodo o actividad, lo de antes se atenúa y un renglón dice qué se está cargando. Va al final de la hoja
   y con la misma especificidad que la entrada por bloques (arriba): esa animación deja la opacidad en 1 y aquí se apaga mientras se carga;
   al terminar vuelve, y lo nuevo entra suave. */
.contenido>.pila>.docs-pantalla>.docs-ocupado{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:14px;background:var(--acento-suave);color:var(--acento-texto);font-size:14px;font-weight:600;animation:aparece .18s ease-out}
.docs-ocupado .gira{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--acento) 30%,transparent);border-top-color:var(--acento);animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
.contenido>.pila>.docs-pantalla.ocupada>.docs-cabeza,.contenido>.pila>.docs-pantalla.ocupada>.docs-env,.contenido>.pila>.docs-pantalla.ocupada>.que-revisar,.contenido>.pila>.docs-pantalla.ocupada>.pila:last-child{animation:none;opacity:.45;pointer-events:none;filter:saturate(.5);transition:opacity .2s,filter .2s}
@media (prefers-reduced-motion:reduce){.contenido>.pila>.docs-pantalla>.docs-ocupado{animation:none}.docs-ocupado .gira{animation:none;border-color:var(--acento)}}