/* ============================================================================
   PIEL · la identidad del sitio nuevo aplicada al portal · 28/09/2026
   ============================================================================
   Es piel, no cuerpo: CSS, fuentes e imágenes de marca. Ni un texto, ni un
   dato, ni una vista por papel cambian por este archivo.

   Los VALORES viven en `tokens.css` (bloque «LA MARCA DEL SITIO», prefijo
   `--rma-`), que sigue siendo el único lugar donde se escribe un color, un
   radio o un tiempo. Aquí sólo se declaran las fuentes y las piezas que los usan.

   LAS FUENTES VIVEN EN EL PORTAL (`fuentes/`), no en Google Fonts: cada carga
   desde Google le manda la IP de quien entra, y el sitio del despacho ya
   promete no usar terceros. La política de seguridad (`netlify.toml`) sólo
   deja cargar fuentes del propio portal (`font-src 'self'`).
     · Instrument Serif 400 normal y cursiva, Instrument Sans 400/500/600: las
       del sitio (@fontsource 5.3.0, subconjunto latino: acentos, ñ, ¿, ¡, «»).
     Sora, la letra de títulos y cifras de antes, se fue en la vuelta 2
     (28/09/2026). Las dos licencias (SIL Open Font License 1.1) van junto a
     los archivos.

   LAS PIEZAS NACEN SIN APLICARSE (paso 1): todo va bajo `.piel` o con prefijo
   `pl-`, que hoy ninguna pantalla usa. Cada paso siguiente las enciende donde
   toca.
   ============================================================================ */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fuentes/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fuentes/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fuentes/instrument-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fuentes/instrument-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fuentes/instrument-sans-latin-600-normal.woff2") format("woff2")}

/* TODO LO QUE SIGUE ES DE PANTALLA (@media screen): al papel no llega nada de la piel, y el bloque
   `@media print` de tokens.css sigue mandando. Sólo el lazo y el sello se esconden al imprimir (abajo del todo):
   sin sus estilos, el SVG saldría como una mancha negra. */
@media screen{
/* ---- base: la selección y el foco, en oro ----
   Sobre oscuro, el oro del sitio; sobre claro (`.piel-claro`), el oro oscuro,
   porque el claro sobre papel no llega a 3:1 y un foco que no se ve no sirve. */
.piel ::selection{background:var(--rma-oro);color:var(--rma-noche)}
.piel :focus-visible{outline:2px solid var(--rma-oro);outline-offset:3px;border-radius:4px}
.piel-claro :focus-visible{outline-color:var(--rma-oro-osc)}

/* ---- tipografía ---- */
.pl-eyebrow{font-family:var(--rma-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--rma-oro);display:flex;align-items:center;gap:10px}
.pl-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.8;flex:none}
.piel-claro .pl-eyebrow{color:var(--rma-oro-osc)}
.pl-titulo{font-family:var(--rma-serif);font-weight:400;line-height:1;letter-spacing:-.015em;text-wrap:balance}
.pl-titulo em{font-style:italic;color:var(--rma-oro)}
.piel-claro .pl-titulo em{color:var(--rma-oro-osc)}
.pl-num{font-variant-numeric:tabular-nums}

/* ---- botones: píldora ----
   `.pl-btn-neg` es el primario del portal (el verde, decisión 2); `.pl-btn-linea`
   el secundario, con línea de oro. */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--rma-sans);font-size:15px;
  font-weight:600;line-height:1;border-radius:999px;padding:14px 24px;border:1px solid transparent;cursor:pointer;
  transition:background var(--rma-t),border-color var(--rma-t),color var(--rma-t),filter var(--rma-t)}
.pl-btn-neg{background:var(--accent);color:var(--accent-ink)}
.pl-btn-neg:hover{filter:brightness(1.06)}
.pl-btn-linea{background:transparent;border-color:var(--rma-oro-line);color:var(--rma-lino)}
.pl-btn-linea:hover{border-color:var(--rma-oro);color:var(--rma-oro)}

/* ---- campos: sin caja, con línea inferior que se vuelve oro al enfocar ---- */
.pl-campo{display:flex;flex-direction:column;gap:6px}
.pl-campo label{font-family:var(--rma-sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--rma-suave-d)}
.pl-campo input{font:inherit;font-size:17px;color:var(--rma-lino);background:transparent;border:0;
  border-bottom:1px solid var(--rma-linea-campo);border-radius:0;padding:10px 0;outline:none;
  transition:border-color var(--rma-t)}
.pl-campo input:focus{border-bottom-color:var(--rma-oro)}

/* ============================================================================
   PASO 2 · LA PANTALLA DE ACCESO (y las dos que comparten su pieza: elegir
   contraseña y el aviso de privacidad). Llevan la clase `piel` en el markup.
   Fondo noche; el nombre en Instrument Serif con el remate en cursiva oro;
   campos sin caja con línea inferior; el botón primario verde en píldora; el
   lazo dorado del sitio que se dibuja una vez al abrir (sólo en el acceso), y
   el sello de 60 años, discreto. Este archivo se carga DESPUÉS de los <style>
   de index.html, así que a igual especificidad manda lo de aquí.
   ============================================================================ */
body:has(> .acceso.piel:not(.oculto)){background:var(--rma-noche);background-image:none}
.acceso.piel{color:var(--rma-lino);font-family:var(--rma-sans)}
.acceso.piel .izq{padding-top:72px}
.acceso.piel .der{padding-top:72px}
.acceso.piel .eyebrow{font-family:var(--rma-sans);font-size:11px;letter-spacing:.24em;font-weight:600;
  color:var(--rma-oro);display:flex;align-items:center;gap:10px}
.acceso.piel .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.8;flex:none}
.acceso.piel h1{font-family:var(--rma-serif);font-weight:400;font-size:clamp(40px,5.2vw,64px);line-height:1;
  letter-spacing:-.02em;color:var(--rma-lino)}
.acceso.piel h1 em{font-style:italic;color:var(--rma-oro)}
.acceso.piel p.entrada{color:var(--rma-suave-d)}
.acceso.piel .der{border-left-color:var(--rma-linea-d);border-top-color:var(--rma-linea-d)}
.acceso.piel .formulario h2{font-family:var(--rma-sans);color:var(--rma-suave-d);letter-spacing:.24em}
.acceso.piel .formulario label{color:var(--rma-suave-d);letter-spacing:.12em}
.acceso.piel .formulario input:not([type="checkbox"]){background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--rma-linea-campo);padding:10px 0;font-size:17px;color:var(--rma-lino);
  box-shadow:none;transition:border-color var(--rma-t)}
.acceso.piel .formulario input:not([type="checkbox"]):focus{outline:0;border-bottom-color:var(--rma-oro);box-shadow:none}
.acceso.piel .formulario input:not([type="checkbox"]):focus-visible{outline:0}
/* El autorrelleno del navegador pinta su propio fondo claro debajo del campo:
   sobre un campo transparente se vería como un parche. Se tapa con noche. */
.acceso.piel .formulario input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--rma-noche) inset;
  -webkit-text-fill-color:var(--rma-lino);caret-color:var(--rma-lino)}
.acceso.piel .btn-entrar{border-radius:999px;padding:14px 26px;font-family:var(--rma-sans);font-size:15px}
.acceso.piel .hint{color:var(--rma-suave-d)}
.acceso.piel .aviso-texto{border-color:var(--rma-linea-d)}
.acceso.piel .aviso-texto h2{color:var(--rma-suave-d)}
.acceso.piel .aviso-texto p{color:var(--rma-lino)}
.acceso.piel ::selection{background:var(--rma-oro);color:var(--rma-noche)}
.acceso.piel :focus-visible{outline:2px solid var(--rma-oro);outline-offset:3px;border-radius:4px}
/* El campo enfocado ya lo dice su línea de oro; el contorno va en todo lo demás
   (botones, enlaces, la casilla). */

/* ---- el lazo: dos relaciones, un cruce (el de la portada del sitio) ----
   Se dibuja UNA vez al abrir la pantalla, con CSS y sin código: cada trazo
   declara pathLength="1", así que dibujarlo es llevar su desfase de 1 a 0.
   Con «reducir movimiento» no hay animación y el estado de reposo ya es el
   lazo completo (el desfase en 0). Sin rótulos: ningún texto nuevo. */
/* Con más fuerza (Rafa, 21/10/2026: «que el lazo se vea con más "Punch"»): más grande, trazo más
   grueso y con brillo; al terminar de dibujarse, una luz recorre la segunda relación y el nudo
   respira. Con «reducir movimiento», el lazo completo y quieto, con su brillo. */
.pl-lazo{margin:30px 0 0;max-width:420px;aspect-ratio:600/440;pointer-events:none}
.pl-lazo svg{display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rma-oro-2) 70%,transparent))
         drop-shadow(0 0 22px color-mix(in srgb,var(--rma-oro) 50%,transparent))}
.pl-lazo .trazo{fill:none;stroke:var(--rma-oro);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;animation:pl-dibujo 2.6s cubic-bezier(.45,.05,.2,1) both}
.pl-lazo .sombra{stroke:var(--rma-lino);stroke-width:4;opacity:.9;stroke-dasharray:.14 .86;
  animation:pl-aparece .6s ease-out 2.4s both,pl-corre 6s linear 2.4s infinite}
.pl-lazo .nudo{fill:var(--rma-oro-2);stroke:var(--rma-noche);stroke-width:3;transform-box:fill-box;transform-origin:center;
  animation:pl-aparece .8s ease-out 2.2s both,pl-late 3.5s ease-in-out 3s infinite}
@keyframes pl-dibujo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pl-aparece{from{opacity:0}to{opacity:1}}
@keyframes pl-corre{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pl-late{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
/* Quieto, la luz no tiene a dónde ir: se quita (si no, se quedaría un pedazo suelto). */
@media(prefers-reduced-motion:reduce){.pl-lazo .sombra{display:none}}

@media(max-width:860px){
  .acceso.piel .izq{padding-top:48px}
  .acceso.piel .der{padding-top:34px}
  .pl-lazo{max-width:300px;margin-top:26px}
}

/* ============================================================================
   PASO 3 · EL MARCO Y LA LISTA DE PÓLIZAS
   ----------------------------------------------------------------------------
   EL MARCO (todas las pantallas, porque es de todas): la barra superior y la
   columna de pestañas en noche, sin el resplandor verde de antes; el nombre del
   despacho y el del cliente en Instrument Serif; la barra que une las dos marcas,
   en oro.
   PROGRAMA (sólo cuando es la pestaña abierta; el resto, en la vuelta 2): la
   columna central en papel —los tokens claros viven en tokens.css, «TEMA
   claro»—; las tarjetas de cada póliza en bosque («TEMA bosque») con sus cifras
   en números tabulares; la tabla sobre claro con separadores de 1 px y
   encabezados en eyebrow. Sin inclinación, sin imán y sin la subida al pasar.
   ============================================================================ */
body:has(> #chrome-top:not(.oculto)){background:var(--rma-noche);background-image:none}
body:has(> #chrome-top:not(.oculto)) ::selection{background:var(--rma-oro);color:var(--rma-noche)}
.top{background:var(--rma-noche);border:1px solid var(--rma-linea-d);box-shadow:none;border-radius:var(--rma-radio)}
.marca-lado .txt .brand-name{font-family:var(--rma-serif);font-weight:400;font-size:21px;letter-spacing:-.005em;line-height:1.05}
.marca-lado .txt .brand-sub{color:var(--rma-suave-d)}
.marca-lazo{background:linear-gradient(180deg,transparent,var(--rma-oro) 22%,var(--rma-oro-2) 78%,transparent)}
.side{border-right-color:var(--rma-linea-d)}
.barra-cliente{background:var(--rma-noche);border-bottom-color:var(--rma-linea-d)}
.barra-cliente .et{color:var(--rma-oro);letter-spacing:.24em}

/* ---- Programa sobre papel ---- */
.app > .main{margin-left:24px;padding:26px 30px 34px;border-radius:var(--rma-radio)}
/* A menos de 900 px la rejilla es de una columna (pestañas arriba): sin margen y con menos relleno. */
@media(max-width:900px){.app > .main{margin-left:0;padding:20px 16px 26px}}
.app > .main :focus-visible{outline:2px solid var(--rma-oro-osc);outline-offset:3px}
.app > .main .pcard :focus-visible{outline-color:var(--rma-oro)}
.app .hero h1{font-family:var(--rma-serif);font-weight:400;font-size:40px;line-height:1;
  letter-spacing:-.015em}
.app .hero .eyebrow{font-family:var(--rma-sans);font-size:11px;letter-spacing:.24em;
  color:var(--rma-oro-osc);display:flex;align-items:center;gap:10px}
.app .hero .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;
  opacity:.8;flex:none}
.app .hd h2{font-family:var(--rma-serif);font-weight:400;font-size:27px;
  letter-spacing:-.01em;line-height:1.05}
.app .emp-head h3{font-family:var(--rma-serif);font-weight:400;font-size:23px}
/* LOS TÍTULOS DE TODAS LAS PANTALLAS EN INSTRUMENT SERIF (vuelta 2). La serif se ve más chica que la Sans al mismo
   tamaño: sube ~25% y va en 400, como en el sitio. Las etiquetas en mayúsculas y el título chico de una discrepancia
   se quedan en Sans. */
.app .company-head h2,.app .a-card h2{font-family:var(--rma-serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
.app .mv-col h3,.app .saldo-cab h3,.app details.sec>summary h2{font-family:var(--rma-serif);font-weight:400;font-size:21px}
.sheet-head h3{font-family:var(--rma-serif);font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1.05}
.inicio h1{font-family:var(--rma-serif);font-weight:400;font-size:40px;letter-spacing:-.015em;line-height:1}
/* Las tarjetas de cada póliza: bosque, borde fino, sombra larga; quietas. */
.app .pcard{border-radius:var(--rma-radio);box-shadow:var(--rma-sombra);
  transition:border-color var(--rma-t)}
.app .pcard:hover{transform:none;border-color:var(--rma-oro-line)}
.app .pcard .neta{font-family:var(--rma-sans);font-weight:600;font-size:25px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.app .pcard .lab{font-family:var(--rma-sans);letter-spacing:.14em}
.app .pcard .rowx b,
.app .pcard .rowx.tot b{font-family:var(--rma-sans);font-variant-numeric:tabular-nums}
/* La tabla, sobre claro: separadores de 1 px y encabezados en eyebrow. */
.app .dtable{box-shadow:none;border-radius:var(--rma-radio-chico)}
.app .dtable thead th{font-family:var(--rma-sans);font-size:10.5px;letter-spacing:.2em;
  font-weight:600;color:var(--rma-suave);background:transparent;border-top:0;border-bottom:1px solid var(--rma-linea)}
.app .dtable td{border-color:var(--rma-linea);font-variant-numeric:tabular-nums}
.app .avisos .av{box-shadow:none}
.app .btn.sm{border-radius:999px}
/* «Padrón Excel» pinta su letra con el color de datos de Vida: sobre claro da
   3.09:1. El botón «de oro», en claro, va en el oro oscuro de la marca (4.82:1). */
.app .btn.gold,.sheet .btn.gold,
.app .btn.gold:hover,.sheet .btn.gold:hover{color:var(--rma-oro-osc);border-color:var(--rma-oro-line)}
/* Los eyebrows (la etiqueta chica en mayúsculas sobre un título) en oro: oscuro sobre claro (4.55:1), el del sitio
   sobre noche. Antes iban en verde; el verde es de las acciones. */
.app > .main .eyebrow,.sheet .eyebrow{color:var(--rma-oro-osc);letter-spacing:.24em}
.inicio .eyebrow{color:var(--rma-oro);letter-spacing:.24em}

/* ============================================================================
   DESPUÉS DE LA REVISIÓN DE RAFA (28/09/2026)
   ============================================================================ */
/* LAS DOS MARCAS CON PROTAGONISMO («el logo del cliente y RMA pueden tener tanto
   protagonismo haga sentido con el diseño»). El del cliente va sobre la placa
   clara (`--placa-marca`), la misma de «Mis clientes»: un logo ajeno llega hecho
   para fondo claro y sobre el recuadro oscuro el de Gran Ciudad casi no se veía.
   El del despacho es nuestro y está hecho para la noche. */
.marca{gap:16px}
.marca-lado{gap:10px}
.marca-lado .logo-chip{background:var(--placa-marca);border-color:transparent;border-radius:12px;padding:7px 12px}
.marca-lado .logo-chip img{height:40px}
.marca-lado .rma-img{height:46px}
.marca-lazo{height:40px}
.marca-lado .txt .brand-name{font-size:23px}
.marca-lado .txt .brand-sub{max-width:150px;line-height:1.3}
/* SIN LOS NOMBRES, EN UN RENGLÓN (Rafa, 28/09/2026: que ocupen menos espacio). Medido en NTN a 1536 px: la marca y la
   sesión caben juntas con estos rellenos; en una pantalla más angosta la sesión baja, como ya estaba previsto. */
.top{gap:16px;padding:16px 18px}
.top-right{gap:8px}
.sesion{gap:6px}
.sesion .correo{padding-left:10px;padding-right:10px}
.top-right .btn.sm{padding-left:11px;padding-right:11px}
.updated{padding:5px 9px}
/* El contenedor de la barra es un `.wrap`, que trae 64 px de relleno abajo para el pie de las pantallas: debajo de la
   barra sólo dejaba un hueco antes del selector de cliente. */
#chrome-top{padding-bottom:14px}

/* EL PAPEL DE LA CUENTA junto al correo: eyebrow en oro, sin caja. */
.papel-cuenta{font-family:var(--rma-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--rma-oro);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.papel-cuenta::before{content:"";width:12px;height:1px;background:currentColor;opacity:.8}

/* (a) EL RENGLÓN QUE SE LLENA DE BOSQUE al pasar el cursor, como el índice de
   sectores del sitio: el fondo sube desde abajo y la letra se aclara. Sólo en la
   tabla de «Cómo se integra la prima», sobre claro. Es un fondo que crece, no
   algo que se mueve de lugar; con «reducir movimiento» cambia de golpe. */
.app #tbl-primas tbody td{
  background-image:linear-gradient(var(--rma-bosque),var(--rma-bosque));background-repeat:no-repeat;
  background-position:bottom;background-size:100% 0;
  transition:background-size .3s cubic-bezier(.2,.7,.2,1),color .1s}
/* La letra se aclara cuando el bosque ya cubrió el renglón (0.3 s de espera), y
   al salir se oscurece de inmediato: en ningún momento hay letra clara sobre
   papel ni oscura sobre bosque. */
.app #tbl-primas tbody tr:hover td{background-size:100% 100%;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .12s .3s}
.app #tbl-primas tbody tr:hover td *{transition:color .12s .3s}
.app #tbl-primas tbody tr:hover td,
.app #tbl-primas tbody tr:hover td *{color:var(--rma-lino)}

/* (b) LA RAYA DEL EYEBROW CRECE al abrir Programa, de 0 a 26 px, una vez por
   cada vez que se abre. */
.app:has(#tab-pro[aria-selected="true"]) .hero .eyebrow::before{animation:pl-raya .7s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes pl-raya{from{width:0}to{width:26px}}

/* (c) La prima que cuenta hasta su valor vive en `piel.js`. */

/* VUELTA 3 · EL PORTAL DE LA PERSONA ASEGURADA (Rafa, 28/09/2026: «Sí, entra en vuelta 3»). No usa la rejilla `.app`:
   vive en `#portal-aseg`, que entra al TEMA claro (tokens.css) como una hoja de papel dentro del marco en noche, con
   las mismas piezas que el portal de RH: título en serif, eyebrow en oro oscuro con su raya, títulos de tarjeta en
   serif. */
/* El contenedor es un `.wrap` (1240 px con 24 de relleno a cada lado): su fondo pintaría también el relleno y la hoja
   saldría más ancha que la barra de arriba. Se ciñe al ancho de la barra. */
#portal-aseg{border-radius:var(--rma-radio);width:calc(100% - 48px);max-width:1192px;margin:10px auto 34px;padding-top:26px}
#portal-aseg .hero h1{font-family:var(--rma-serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.015em}
#portal-aseg .eyebrow{font-family:var(--rma-sans);font-size:11px;letter-spacing:.24em;color:var(--rma-oro-osc);
  display:flex;align-items:center;gap:10px}
#portal-aseg .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.8;flex:none}
#portal-aseg .a-card h2{font-family:var(--rma-serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
#portal-aseg .btn.sm{border-radius:999px}
#portal-aseg :focus-visible{outline:2px solid var(--rma-oro-osc);outline-offset:3px}

/* LOS CAMPOS DE SOLICITUDES, CON LÍNEA INFERIOR COMO EN EL ACCESO (Rafa, 28/09/2026). Sin caja: la línea sobre claro
   (--rma-linea-campo-claro, 3.31:1) que se vuelve oro oscuro al enfocar. Las casillas, los botones de opción y el
   campo de archivo conservan su forma: una línea no dice qué son. */
#view-sol .f input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#view-sol .f select,#view-sol .f textarea{background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--rma-linea-campo-claro);padding-left:0;padding-right:0;box-shadow:none;
  transition:border-color var(--rma-t)}
#view-sol .f select{padding-right:22px}
#view-sol .f input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#view-sol .f select:focus,#view-sol .f textarea:focus{outline:0;border-bottom-color:var(--rma-oro-osc);box-shadow:none}

/* LAS MARCAS SIN SU NOMBRE AL LADO (Rafa, 28/09/2026: «prefiero que se borren los textos que dicen el nombre del
   cliente y el "R Montalvo & Asociados" para que ocupen menos espacio»). Se esconde a la vista, no se borra: los dos
   logos llevan su nombre como texto alternativo (el del cliente lo pone pintarLogo con `nombre_corto`), así que el
   lector de pantalla no pierde nada. El del cliente se esconde SÓLO cuando hay logo: sin logo, el nombre es lo único
   que dice de quién es la pantalla (y en «Mis clientes» ahí dice «Todos los clientes»). El subtítulo se queda. */
.marca-lado:has(> .logo-chip:not(.oculto)) .brand-name,
.marca-lado.rma .txt{display:none}

/* ============================================================================
   EL ARMAZÓN · 20/10/2026 (rediseño 2b2, parte b; Figma «RMA · Hub de Rafa», página Portal: «Siempre la misma casa:
   barra lateral oscura (noche) a la izquierda y el área de trabajo clara (papel) a la derecha. En celular, la barra
   baja al pie»). Es el mismo encabezado de siempre (`#chrome-top`), dibujado de lado: arriba «← Mis clientes» y la
   placa del cliente, luego las pestañas, «Mi seguro» y la demostración, y al pie la cuenta y «Salir». Lo prende la
   clase `arm` del body (app.js, `marcoArm`); el Hub del dueño trae su propia barra y no la lleva.
   ============================================================================ */
body.arm:has(> #chrome-top:not(.oculto)){background:var(--rma-papel);padding-left:264px}
body.arm > #chrome-top{position:fixed;inset:0 auto 0 0;width:264px;max-width:none;margin:0;padding:0;z-index:40;
  overflow-y:auto;background:var(--rma-noche);color:var(--rma-lino)}
body.arm #chrome-top .top{min-height:100%;box-sizing:border-box;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
  justify-content:flex-start;gap:14px;margin:0;padding:22px 16px 16px;border:0;border-radius:0;background:none}
body.arm #chrome-top .arm-volver{align-self:flex-start;font:inherit;font-size:13.5px;font-weight:500;color:var(--rma-oro);
  background:none;border:0;padding:4px 10px;cursor:pointer}
body.arm #chrome-top .arm-volver:hover{text-decoration:underline}
.arm-volver{display:none}
body.arm #chrome-top .arm-volver:not(.oculto){display:inline-flex;gap:8px}
/* La placa: el cliente arriba, en grande; el despacho, chico debajo (las dos marcas, como pidió Rafa el 28/09). */
body.arm #chrome-top .marca{flex-direction:column;align-items:stretch;gap:12px;padding:14px;border-radius:var(--rma-radio-chico);
  background:var(--rma-bosque)}
body.arm #chrome-top .marca-lazo{display:none}
body.arm #chrome-top .marca-lado{flex-direction:column;align-items:stretch;gap:8px}
body.arm #chrome-top .marca-lado .logo-chip{justify-content:center;padding:12px;border-radius:12px}
body.arm #chrome-top .marca-lado .logo-chip img{height:44px;max-width:100%;object-fit:contain}
body.arm #chrome-top .marca-lado:has(> .logo-chip:not(.oculto)) .brand-name{display:block}
body.arm #chrome-top .marca-lado .txt .brand-name{font-family:var(--rma-sans);font-weight:600;font-size:15px;color:var(--rma-lino)}
body.arm #chrome-top .marca-lado .txt .brand-sub{max-width:none;font-size:12.5px;line-height:1.4;color:var(--rma-suave-d)}
body.arm #chrome-top .marca-lado.rma{flex-direction:row;align-items:center;padding-top:10px;border-top:1px solid var(--rma-linea-d)}
body.arm #chrome-top .marca-lado .rma-img{height:30px}
body.arm #chrome-top .updated{align-self:flex-start;white-space:normal;font-size:11px}
/* Las pestañas: los renglones de la barra. Sin el portal del cliente a la vista (Mi seguro, la demostración, la
   carga, la lista de clientes) no hay pestañas que enseñar. */
body.arm #chrome-top .tabs{flex-direction:column;gap:2px;margin:4px 0 0;padding:0;border:0}
body.arm:has(> #portal.oculto) #chrome-top .tabs{display:none}
/* Las secciones de Fianzas MGC (20/10/2026) sólo con su tablero a la vista. */
#fz-tabs{display:none}
/* Las de «Mi seguro» (20/10/2026), sólo con la pantalla de la persona asegurada a la vista. */
#aseg-slot{display:none}
body.arm:has(> #portal-aseg:not(.oculto)) #chrome-top #aseg-slot{display:block}
body.arm:has(> #portal-aseg:not(.oculto)) #chrome-top #aseg-slot .tabs{display:flex}
body.arm:has(> #portal-fz:not(.oculto)) #chrome-top #fz-tabs,body.arm:has(#fz-ini:not(.oculto)) #chrome-top #fz-tabs{display:flex}
body.arm #chrome-top .tab{display:flex;align-items:center;width:100%;font-family:var(--rma-sans);font-size:15px;font-weight:500;
  color:var(--rma-suave-d);background:none;border:0;border-radius:12px;padding:11px 14px;margin:0;text-align:left;
  transition:background var(--rma-t),color var(--rma-t)}
body.arm #chrome-top .tab:hover{color:var(--rma-lino);background:color-mix(in srgb, var(--rma-bosque) 55%, transparent)}
body.arm #chrome-top .tab[aria-selected="true"]{color:var(--rma-lino);background:var(--rma-bosque);font-weight:600;
  box-shadow:inset 3px 0 0 var(--rma-oro)}
body.arm #chrome-top .tab.oculto{display:none}
body.arm #chrome-top .tab:focus-visible,body.arm #chrome-top .top :focus-visible{outline:2px solid var(--rma-oro);outline-offset:2px}
/* Lo de la cuenta, al pie. */
body.arm #chrome-top .top-right{flex:1 1 auto;flex-direction:column;align-items:stretch;justify-content:flex-end;margin:0;width:auto}
body.arm #chrome-top .sesion{flex-direction:column;align-items:stretch;gap:6px;flex-wrap:nowrap}
body.arm #chrome-top .sesion > .btn.sm{justify-content:flex-start;font-size:14px;color:var(--rma-lino);background:none;
  border:1px solid var(--rma-linea-d);box-shadow:none;padding:9px 14px}
body.arm #chrome-top .sesion > .btn.sm:hover{border-color:var(--rma-oro);color:var(--rma-oro)}
body.arm #chrome-top .sesion > .btn.sm.oculto{display:none}
.arm-pie{display:flex;align-items:center;gap:10px;min-width:0}
body.arm #chrome-top .arm-pie{margin-top:8px;padding:12px;border-radius:14px;background:var(--rma-bosque)}
/* «Ver como», por papel (26/10/2026): el selector al pie de la barra, sólo al admin global. */
.arm-vercomo{display:flex;flex-direction:column;gap:5px;min-width:0}
body.arm #chrome-top .arm-vercomo{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--rma-bosque)}
body.arm #chrome-top .arm-vercomo label{font-family:var(--rma-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--rma-suave-d)}
body.arm #chrome-top .arm-vercomo select{font:inherit;font-size:13px;max-width:100%;padding:6px 8px;border-radius:8px;
  border:1px solid var(--rma-linea-d);background:var(--rma-noche);color:var(--rma-lino)}
/* … y en la barra lateral del Hub, encima del pie (el Hub esconde la barra de arriba). En celular no cabe: se va. */
#hub-lado .arm-vercomo{margin-top:auto;padding:10px 12px;border-radius:14px;background:var(--rma-bosque)}
#hub-lado .arm-vercomo+.hl-pie{margin-top:8px}
#hub-lado .arm-vercomo label{font-family:var(--rma-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--rma-suave-d)}
#hub-lado .arm-vercomo select{font:inherit;font-size:13px;max-width:100%;padding:6px 8px;border-radius:8px;
  border:1px solid var(--rma-linea-d);background:var(--rma-noche);color:var(--rma-lino)}
@media (max-width:900px){#hub-lado .arm-vercomo{display:none}}
.arm-ini{display:none}
body.arm #chrome-top .arm-ini{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--rma-oro);color:var(--rma-noche);font-size:12.5px;font-weight:600}
body.arm #chrome-top .arm-ini:empty{display:none}
.arm-quien{display:flex;align-items:center;gap:6px;min-width:0}
body.arm #chrome-top .arm-quien{flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:1px}
body.arm #chrome-top .arm-quien b{font-size:13.5px;font-weight:500;color:var(--rma-lino);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.arm-quien b:empty{display:none}
body.arm #chrome-top .arm-quien .correo{padding:0;font-size:11.5px;color:var(--rma-suave-d);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:none;border:0}
body.arm #chrome-top .arm-quien .papel-cuenta{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;letter-spacing:.14em}
body.arm #chrome-top .arm-quien .papel-cuenta.oculto{display:none}
body.arm #chrome-top .arm-quien .papel-cuenta::before{display:none}
body.arm #chrome-top .btn-salir{flex:none;align-self:center;font-size:12.5px;padding:6px 10px;border-radius:999px}
body.arm > #chrome-top{overflow-x:hidden}
body.arm #chrome-top .updated{display:block;padding:0 4px;background:none;border:0;color:var(--rma-suave-d)}
body.arm #chrome-top .updated .dot{display:inline-block;margin-right:8px;vertical-align:1px}
/* La barra de clientes de arriba ya no hace falta: «← Mis clientes» la sustituye. */
body.arm > #barra{display:none}
/* El área de trabajo, clara de orilla a orilla. */
body.arm > #portal,body.arm > #cargando,body.arm > #portal-aseg,body.arm > #demo-barra,body.arm > #vercomo-barra,body.arm > #portal-fz{max-width:1240px;box-sizing:border-box;padding-left:40px;padding-right:40px}
body.arm .app > .main{margin-left:0;padding:30px 0 40px;border-radius:0;background:none}
body.arm > #portal-aseg{width:auto;margin:0 auto;padding-top:30px;border-radius:0;background:none}
body.arm > #inicio{max-width:1240px}
/* El tablero de MGC sale a todo el ancho de la ventana (`100vw`): con la barra lateral, a todo el ancho que queda. */
body.arm > #portal-fz{max-width:none}
body.arm .fz-vista[data-vista="tablero"],.inicio.con-lado .fz-vista[data-vista="tablero"]{width:auto;margin-left:0}

/* ---- el botón «?» · 20/10/2026 ---- */
.ayuda{position:fixed;right:24px;bottom:24px;z-index:45;display:inline-flex;align-items:center;gap:0;height:40px;
  padding:0 5px;border-radius:20px;background:var(--rma-bosque);color:var(--rma-lino);text-decoration:none;
  box-shadow:0 6px 18px color-mix(in srgb, var(--rma-noche) 22%, transparent);font-family:var(--rma-sans);
  font-size:14px;font-weight:500;transition:gap var(--rma-t),padding var(--rma-t)}
.ayuda-q{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--rma-oro);
  color:var(--rma-noche);font-family:var(--rma-serif);font-size:20px;line-height:1}
.ayuda-t{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width var(--rma-t)}
.ayuda:hover,.ayuda:focus-visible{gap:10px;padding-right:18px}
.ayuda:hover .ayuda-t,.ayuda:focus-visible .ayuda-t{max-width:200px}
.ayuda:focus-visible{outline:2px solid var(--rma-oro);outline-offset:3px}
/* Con el expediente abierto el «?» se va: en celular tapaba «Ver como esta persona», el último botón del pie (Rafa,
   21/10/2026, en la pasada de celular: «no pude ver "Ver Como Esta Persona", se tapa creo»). */
body:has(#sheet.on) .ayuda{display:none}
.ayuda.oculto{display:none}
body:not(.arm):not(:has(#inicio.con-lado:not(.oculto))) .ayuda{display:none}

/* ============================================================================
   LAS PESTAÑAS CON EL LENGUAJE DEL HUB · 20/10/2026 (rediseño 2b2, parte c2)
   El título de cada pestaña arriba y en grande (`pintarCabeza` en app.js); si la pestaña abre con su propio
   encabezado, su h2 se vuelve ese título y su línea queda como bajada. Las tarjetas y las cifras, claras con borde
   (el TEMA bosque de tokens.css ya es opt-in, clase `tema-bosque`).
   ============================================================================ */
#portal .hero{padding-top:4px}
#portal .hero h1{font-size:54px;margin:10px 0 10px}
#portal.cabeza-propia .app > .main [id^="view-"] > .hd:first-child h2{display:none}
#portal.cabeza-propia .app > .main [id^="view-"] > .hd:first-child{margin-top:-4px}
#portal.cabeza-propia .app > .main [id^="view-"] > .hd:first-child .s{font-size:15px;line-height:1.55;max-width:760px;color:var(--soft)}
.app .pcard{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.app .pcard:hover{border-color:var(--rma-oro-line)}
.app .kpi{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.app .kpi .v,.app .kpi .n{color:var(--ink)}
@media (max-width:900px){#portal .hero h1{font-size:38px}}
/* (c2b) ASEGURADOS, y con ella todas las pastillas del área de trabajo (Figma «Asegurados con expediente»): la elegida
   en noche, las demás con borde; el buscador redondo; el nombre de cada persona en tinta (no en verde), y el renglón
   que se ilumina en oro al pasar el cursor, que es el que abre el expediente. */
.app > .main .chip,.app > .main .per{border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--ink);background:var(--card);border-color:var(--card-border)}
.app > .main .chip:hover,.app > .main .per:hover{border-color:var(--rma-oro-line);color:var(--ink)}
.app > .main .chip[aria-pressed="true"],.app > .main .per[aria-pressed="true"]{background:var(--rma-noche);border-color:var(--rma-noche);color:var(--rma-lino)}
.app > .main .chip[aria-pressed="true"] .tick{background:var(--rma-oro);border-color:var(--rma-oro)}
.app > .main .chip[aria-pressed="true"] .tick svg{stroke:var(--rma-noche)}
.app > .main .seg{border-radius:999px;padding:4px;box-shadow:none;border-color:var(--card-border)}
.app > .main .seg button{border-radius:999px;padding:7px 16px}
.app > .main .seg button[aria-pressed="true"]{background:var(--rma-noche);color:var(--rma-lino)}
.app > .main .field input{border-radius:999px;border-color:var(--card-border)}
.app > .main .pol{border-radius:var(--rma-radio)}
.app > .main .pol-num{font-size:15px;font-weight:600;color:var(--ink)}
.app > .main tbody tr.clik{transition:background var(--rma-t)}
.app > .main tbody tr.clik:hover{background:color-mix(in srgb, var(--rma-oro) 12%, transparent)}
.app > .main td.nm .rowbtn{color:var(--ink);font-weight:500}
.app > .main tr.clik:hover td.nm .rowbtn{text-decoration:underline;text-decoration-color:var(--rma-oro-osc);text-underline-offset:3px}
/* La acción principal, en noche (Figma: «botón oscuro para la acción principal»): «Enviar», «Confirmar el envío»,
   «Solicitar un movimiento». El verde se queda para lo que dice «bien» (vigente, aplicada). */
.app > .main .btn.solid,.sheet .btn.solid{background:var(--rma-noche);border-color:var(--rma-noche);color:var(--rma-lino)}
.app > .main .btn.solid:hover,.sheet .btn.solid:hover{filter:none;background:var(--rma-bosque);border-color:var(--rma-bosque)}
/* (c2c) SOLICITUDES (Figma «Cliente · Solicitudes»): los tipos como tarjetas, la elegida en noche; el formulario en
   su tarjeta blanca; el folio en su propia tarjeta junto al título. Los campos se quedan con su línea inferior (Rafa,
   28/09/2026, «como en el acceso»): Figma los dibujó en caja, y lo que Rafa pidió con su nombre manda. */
#view-sol .tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
#view-sol .tip{border-radius:16px;padding:16px 18px;gap:4px;font-size:15px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);transition:border-color var(--rma-t),background var(--rma-t)}
#view-sol .tip .d{font-size:13px;line-height:1.4;color:var(--soft)}
#view-sol .tip:hover{border-color:var(--rma-oro-line)}
#view-sol .tip[aria-pressed="true"]{background:var(--rma-noche);border-color:var(--rma-oro);color:var(--rma-lino)}
#view-sol .tip[aria-pressed="true"] .d{color:var(--rma-suave-d)}
#view-sol > .form{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:24px 26px;box-shadow:var(--shadow)}
#view-sol > .hd:first-child .dest{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px;
  padding:10px 16px;background:var(--card);border:1px solid var(--card-border);color:var(--soft);font-size:12px}
#view-sol > .hd:first-child .dest .dot{display:none}
#view-sol > .hd:first-child .dest #folio-actual{font-size:18px;color:var(--ink)}
/* Dentro del formulario, la misma pieza elige pólizas («Pólizas que aplican»): ahí va chica, como pastilla. */
#view-sol #sol-fields .tipos{display:flex;flex-wrap:wrap;gap:8px}
#view-sol #sol-fields .tip{flex:0 0 auto;min-width:0;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500;box-shadow:none}
#view-sol > .sol-mias{margin-top:22px;background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:6px 26px 22px;box-shadow:var(--shadow)}
#view-sol > .sol-mias > .hd{margin-top:18px!important}
#view-sol > .sol-mias .sumbox{box-shadow:none;border-radius:14px}
@media (max-width:640px){#view-sol > .form,#view-sol > .sol-mias{padding:18px 16px}}
/* (c2d) Las demás pestañas con las mismas piezas: la tabla de Correos y la bandeja de Endosos, cada una en su tarjeta
   blanca, como el formulario de Solicitudes. */
#view-cor #tbl-correos{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:6px 18px 10px;box-shadow:var(--shadow);overflow-x:auto}
#view-end #ban-form{max-width:none!important;background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:20px 24px;box-shadow:var(--shadow)}
@media (max-width:640px){#view-cor #tbl-correos{padding:4px 10px 8px}#view-end #ban-form{padding:16px}}
/* (e) «Cómo Usar Mi Portal» como primer renglón de Documentos y de Mis documentos (20/10/2026). */
.guia-doc{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 20px;border-radius:16px;
  background:color-mix(in srgb, var(--rma-oro) 8%, var(--card));border:1px solid var(--card-border);box-shadow:var(--shadow)}
.guia-doc.oculto{display:none}
.guia-doc-ic{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--rma-oro);
  color:var(--rma-noche);font-family:var(--rma-serif);font-size:20px}
.guia-doc-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.guia-doc-txt b{font-weight:600;color:var(--ink)}
.guia-doc-txt small{font-size:12.5px;color:var(--soft)}
.guia-doc .btn{text-decoration:none}
/* El expediente: las dos cifras grandes, como las de la pestaña. */
.sheet .mini .b{border-radius:14px;padding:14px 16px;border-color:var(--card-border)}
.sheet .mini .b .v{font-family:var(--rma-sans);font-weight:600;font-size:24px}
.sheet .mini .b .l{text-transform:none;letter-spacing:0;font-size:12.5px}
.sheet .mini .b{display:flex;flex-direction:column-reverse;justify-content:flex-end}

/* En celular la barra se parte: la placa y la cuenta arriba, las pestañas al pie (Figma: «En celular, la barra baja
   al pie»). */
@media (max-width:900px){
  body.arm:has(> #chrome-top:not(.oculto)){padding-left:0;padding-bottom:72px}
  body.arm > #chrome-top{position:static;width:auto;overflow:visible}
  body.arm #chrome-top .top{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px}
  body.arm #chrome-top .marca{flex-direction:row;flex:1 1 auto;padding:8px 10px;gap:10px}
  body.arm #chrome-top .marca-lado{flex-direction:row;align-items:center}
  body.arm #chrome-top .marca-lado.rma,body.arm #chrome-top .updated,body.arm #chrome-top .marca-lado .txt .brand-sub{display:none}
  body.arm #chrome-top .marca-lado .logo-chip{padding:6px 10px}
  body.arm #chrome-top .marca-lado .logo-chip img{height:28px}
  body.arm #chrome-top .tabs{position:fixed;left:0;right:0;bottom:0;z-index:44;flex-direction:row;flex-wrap:nowrap;gap:4px;margin:0;padding:8px 10px;
    overflow-x:auto;background:var(--rma-noche);border-top:1px solid var(--rma-linea-d)}
  body.arm #chrome-top .tab{width:auto;flex:none;white-space:nowrap;padding:9px 12px;font-size:14px}
  body.arm #chrome-top .top-right{flex:1 1 100%}
  body.arm #chrome-top .sesion{flex-direction:row;flex-wrap:wrap;align-items:center}
  body.arm #chrome-top .arm-pie{margin:0 0 0 auto;padding:0;background:none}
  body.arm #chrome-top .arm-ini,body.arm #chrome-top .arm-quien{display:none}
  body.arm > #portal,body.arm > #cargando,body.arm > #portal-aseg,body.arm > #demo-barra{padding-left:16px;padding-right:16px}
  .ayuda{right:16px;bottom:84px}
}

/* ---- movimiento: con «reducir movimiento», nada se mueve ---- */
@media(prefers-reduced-motion:reduce){
  .piel *,.piel *::before,.piel *::after{animation:none!important;transition:none!important}
}
}

/* Al imprimir, el lazo y el sello no salen. */
@media print{.pl-lazo{display:none}}

/* ============================================================================
   LOS RAMOS · 20/10/2026 (rama diseno-ramos; Rafa: «vamos a darle más al diseño en TODO el portal»)
   La foto y el dibujo de cada ramo, de `assets/ramos/`, los pone `ramos.js` donde la pantalla los marca. El
   movimiento es el del sitio, con sus curvas: la foto entra con una cortina de izquierda a derecha (0.9 s) y se
   asienta (1.6 s); el dibujo se traza (1.4 s). Una sola vez: lo dispara la clase `sale`. Sólo en los encabezados y
   en las tarjetas de póliza o de cliente: tablas, formularios, solicitudes y altas y bajas no se mueven.
   ============================================================================ */
.rv-img{clip-path:inset(0 100% 0 0);transform:scale(1.12)}
.rv-img.sale{clip-path:inset(0 0 0 0);transform:scale(1);
  transition:clip-path .9s cubic-bezier(.6,.1,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.rv-dib svg{display:block;width:100%;height:100%;overflow:visible}
.rv-dib path{stroke-dasharray:1;stroke-dashoffset:1}
.rv-dib.sale path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1)}

/* (a) EL ENCABEZADO SOBRE LA BANDA: el texto va sobre un velo de verde noche que no baja de .86 bajo las letras, y
   el fondo de la caja es noche, así que mientras la foto no llega (o no llega nunca) el contraste es el mismo. */
.hero.rv-con-banda{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--rma-radio);
  background:var(--rma-noche);padding:34px 34px 30px;min-height:210px;align-items:flex-end;margin-bottom:22px}
.rv-banda{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rv-banda-mov{position:absolute;left:0;right:0;top:-24px;bottom:-24px;will-change:transform}
.rv-banda img{display:block;width:100%;height:100%;object-fit:cover}
/* Desde el 21/10/2026 las fotos van a color: el velo se queda donde está el texto y se abre a la derecha, para que la
   foto se vea. Bajo las letras no baja de .86. */
.rv-banda::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,31,24,.94) 0%,rgba(13,31,24,.86) 44%,rgba(13,31,24,.42) 72%,rgba(13,31,24,.12) 100%)}
.hero.rv-con-banda h1{color:var(--rma-lino)}
.hero.rv-con-banda .eyebrow{color:var(--rma-oro-2)}
.hero.rv-con-banda p{color:rgba(238,241,236,.86)}
.hero.rv-con-banda .dl{position:relative}
#portal .hero.rv-con-banda{padding-top:34px}
#portal-aseg .hero.rv-con-banda{margin-top:4px}
/* (k4) «Mis clientes» del Hub: el título va sobre la banda del banco de Cowork, igual que el encabezado de un cliente.
   En las demás vistas del Hub la caja no lleva foto (`data-rv-banda="ninguna"`) y no se nota. */
.inicio .ini-cab.rv-con-banda{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--rma-radio);
  background:var(--rma-noche);padding:34px 34px 30px;min-height:210px;margin-bottom:22px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end}
.inicio .ini-cab.rv-con-banda h1{color:var(--rma-lino);position:relative}
.inicio .ini-cab.rv-con-banda .eyebrow{color:var(--rma-oro-2);position:relative}
@media (max-width:600px){
  .hero.rv-con-banda{padding:26px 20px 22px;min-height:180px}
  .inicio .ini-cab.rv-con-banda{padding:26px 20px 22px;min-height:180px}
  .rv-banda::after{background:rgba(13,31,24,.88)}
}

/* (c) LA TARJETA: la foto arriba, a sangre, y el dibujo del ramo junto a su nombre. En celular la foto es la
   cuadrada (ramos.js la pide con <picture>), recortada a la misma franja. */
.rv-carta{position:relative;transform-style:flat;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color var(--rma-t)}
.rv-carta .rv-foto{display:block;position:relative;overflow:hidden;height:128px;margin:-18px -20px 16px;
  border-radius:calc(var(--rma-radio) - 1px) calc(var(--rma-radio) - 1px) 0 0;background:var(--rma-noche)}
.cli-card.rv-carta .rv-foto{height:96px;border-radius:13px 13px 0 0;margin-bottom:12px}
.rv-carta .rv-foto picture,.rv-carta .rv-foto img{display:block;width:100%;height:100%;object-fit:cover}
.rv-carta .top .rv-dib{flex:none;width:36px;height:29px;color:var(--rma-oro-osc);margin-right:-2px}
/* El trazo del dibujo es de 1.2 en un lienzo de 200: a 36 px saldría de dos décimas de pixel. */
.rv-carta .top .rv-dib svg{stroke-width:6.5}
.rv-carta .top{justify-content:flex-start;flex-direction:row;align-items:center;gap:10px}
.rv-carta .top .folio{margin-left:auto;white-space:nowrap}
/* La luz que sigue al cursor (sólo con mouse; ramos.js pone la clase y la posición). */
.rv-carta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--rv-x,50%) var(--rv-y,50%),rgba(232,206,142,.16),transparent 60%);
  transition:opacity .3s}
.rv-carta.rv-luz{transition:transform .12s linear,border-color var(--rma-t)}
.rv-carta.rv-luz::after{opacity:1}

/* (d) EL ESTADO VACÍO: el dibujo del ramo trazándose, en oro oscuro sobre papel. */
.rv-vacio .rv-vacio-dib{display:block;width:112px;height:90px;margin:4px auto 12px;color:var(--rma-oro-osc)}
.rv-vacio .rv-vacio-dib svg{stroke-width:2.4}
.bit-vacio.rv-vacio,.hint.rv-vacio,.a-nota.rv-vacio{text-align:center}
/* (k3) El estado vacío con el cuadro del banco de Cowork: la foto cuadrada, chica y redondeada, sobre el texto. */
.rv-vacio .rv-vacio-foto{display:block;position:relative;overflow:hidden;width:148px;height:148px;margin:4px auto 14px;
  border-radius:18px;background:var(--rma-noche)}
.rv-vacio .rv-vacio-foto img{display:block;width:100%;height:100%;object-fit:cover}

/* Con «reducir movimiento», nada se mueve: la foto y el dibujo ya están puestos. */
@media (prefers-reduced-motion: reduce){
  .rv-img,.rv-img.sale{clip-path:none;transform:none;transition:none}
  .rv-dib path,.rv-dib.sale path{stroke-dashoffset:0;transition:none}
  .rv-carta,.rv-carta.rv-luz{transform:none !important;transition:border-color var(--rma-t)}
  .rv-carta::after{display:none}
  .rv-banda-mov{transform:none !important}
}

/* ============================================================================
   EL BRILLO · 20/10/2026 (rama diseno-ramos, rediseño 2b2 g)
   Rafa: «más animación discreta … movimiento al pasar por elementos, filas/columnas que crecen o tienen algún elemento
   visual atractivo cuando el cursor pasa encima»; «los botones deben ser más bonitos»; «la forma como actúa el listado
   del padrón de MGC me gusta mucho. Aplícalo a todo». El lenguaje es el del tablero de MGC: el renglón que se llena de
   bosque desde abajo, la hoja que entra flotando desde la derecha, y las curvas del sitio. Lo que cuenta, traza y pone
   la luz vive en `brillo.js`; aquí, todo lo demás. Con «reducir movimiento», al final, nada se mueve.
   ============================================================================ */

/* (1) LA VISTA ENTRA: al cambiar de pestaña, el contenido aparece en vez de saltar. Sólo opacidad: un `transform` aquí
   volvería «fijo» relativo a la vista todo lo que vive adentro con position:fixed. */
@keyframes br-aparece{from{opacity:0}to{opacity:1}}
.app > .main > [id^="view-"]:not(.oculto),#portal-aseg > [id^="a"]:not(.oculto){animation:br-aparece .45s ease both}

/* (2) LAS CIFRAS DE PROGRAMA: su dibujo arriba a la derecha (se traza al entrar y otra vez al pasar el cursor), se
   levantan un poco y les crece una raya de oro abajo. */
.app .pro-kpi{position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .35s}
.app .pro-kpi:hover{transform:translateY(-3px);border-color:var(--rma-oro-line);box-shadow:0 18px 34px -20px rgba(13,31,24,.45)}
.app .pro-kpi::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;
  background:var(--rma-oro);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.app .pro-kpi:hover::after{transform:scaleX(1)}
.kpi-ic{display:block;width:26px;height:26px;margin:0 0 10px;color:var(--rma-oro-osc)}
.kpi-ic svg{display:block;width:100%;height:100%;overflow:visible}
.kpi-ic path{stroke-dasharray:1;stroke-dashoffset:1}
.kpi-ic.sale path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1)}
@keyframes br-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.app .pro-kpi:hover .kpi-ic path,.rv-carta:hover .top .rv-dib path{animation:br-traza 1s cubic-bezier(.4,.1,.2,1)}

/* (3) Aquí vivió «La vigencia, día por día»: salió el 21/10/2026 (2b2 j, Rafa: «quítalas»). */

/* El aviso flotante (brillo.js), como el del tablero de MGC. */
.br-tip{position:fixed;z-index:90;pointer-events:none;background:var(--rma-noche);color:var(--rma-lino);
  padding:7px 11px;border-radius:10px;font-size:12.5px;line-height:1.35;white-space:nowrap;
  border:1px solid var(--rma-linea-d);box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .12s}
.br-tip.ve{opacity:1}

/* (4) LA LUZ QUE SIGUE AL CURSOR sobre las tarjetas (brillo.js pone la posición). Sólo con mouse. */
:is(.app > .main :is(.kpi,.doc-pol,.mem,.av,.disc),#portal-aseg .a-card,.hub-card){position:relative}
:is(.app > .main :is(.kpi,.doc-pol,.mem,.av,.disc),#portal-aseg .a-card,.hub-card)::before{content:"";position:absolute;
  inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(340px circle at var(--br-x,50%) var(--br-y,50%),rgba(201,162,78,.11),transparent 65%)}
:is(.app > .main :is(.kpi,.doc-pol,.mem,.av,.disc),#portal-aseg .a-card,.hub-card):hover::before{opacity:1}
@media (hover:none){:is(.app > .main :is(.kpi,.doc-pol,.mem,.av,.disc),#portal-aseg .a-card,.hub-card)::before{display:none}}

/* (5) LOS RENGLONES, COMO EL PADRÓN DE MGC. El que abre algo (`tr.clik`) se llena de bosque desde abajo y su letra se
   aclara cuando el bosque ya lo cubrió; el que no abre nada se ilumina en oro y le sale una raya a la izquierda. */
.app > .main tbody tr.clik:hover,.sheet tbody tr.clik:hover{background:transparent}
.app > .main tbody tr.clik td,.sheet tbody tr.clik td{
  background-image:linear-gradient(var(--rma-bosque),var(--rma-bosque));background-repeat:no-repeat;
  background-position:left bottom;background-size:calc(100% + 1px) 0;
  transition:background-size .3s cubic-bezier(.2,.7,.2,1),color .1s}
.app > .main tbody tr.clik:hover td,.sheet tbody tr.clik:hover td{background-size:calc(100% + 1px) 100%;color:var(--rma-lino);
  transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .12s .3s}
.app > .main tbody tr.clik:hover td *,.sheet tbody tr.clik:hover td *{color:var(--rma-lino);transition:color .12s .3s}
.app > .main tr.clik:hover td.nm .rowbtn{text-decoration:none}
.app > .main tbody tr.clik:hover :is(.pill,.st),.sheet tbody tr.clik:hover :is(.pill,.st){
  background:rgba(238,241,236,.12);border-color:rgba(238,241,236,.35);transition:background .2s .3s,border-color .2s .3s}
.app > .main table:not(.cobt) tbody tr:not(.clik) td{transition:background-color .25s,box-shadow .25s}
.app > .main table:not(.cobt) tbody tr:not(.clik):hover td{background-color:color-mix(in srgb,var(--rma-oro) 8%,transparent)}
.app > .main table:not(.cobt) tbody tr:not(.clik):hover td:first-child{box-shadow:inset 3px 0 0 var(--rma-oro)}

/* El renglón del padrón con sus elementos (renderRoster): iniciales, la familia colgando de su titular, los años y la
   barra de la prima, que crece al pasar el cursor. */
.app > .main td.nm{position:relative;white-space:nowrap}
.app > .main .ini{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;
  vertical-align:middle;font-size:10px;font-weight:700;letter-spacing:.04em;
  background:color-mix(in srgb,var(--rma-oro) 18%,transparent);color:var(--rma-oro-osc);
  transition:background .3s,color .3s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.app > .main .ini.t{background:var(--rma-bosque);color:var(--rma-lino)}
.app > .main tr.clik:hover .ini{transform:scale(1.1);background:var(--rma-oro);color:var(--rma-noche) !important}
.app > .main tr.dep td.nm{padding-left:46px}
.app > .main tr.dep td.nm::after{content:"";position:absolute;left:27px;top:0;width:12px;height:50%;
  border-left:1.5px solid var(--rma-oro-line);border-bottom:1.5px solid var(--rma-oro-line);border-bottom-left-radius:8px}
.app > .main .anios{display:block;font-size:11px;color:var(--soft);margin-top:1px}
.app > .main td.prima{position:relative}
.app > .main .pbar{position:absolute;right:14px;bottom:6px;height:3px;border-radius:3px;width:calc(var(--p,0) * 70px);
  background:var(--rma-oro);opacity:.5;transition:width .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.app > .main tr.clik:hover .pbar{width:calc(var(--p,0) * 110px);opacity:1}
/* Al abrir una póliza, sus renglones entran uno tras otro (brillo.js pone `abre` un momento; una búsqueda que vuelve a
   dibujar la lista no los hace brincar). */
@keyframes br-fila{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app .pol.open.abre tbody tr{animation:br-fila .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 22ms)}
/* La cabeza de la póliza: una raya de oro que crece y el chevrón que gira. */
.app > .main .pol-head{position:relative}
.app > .main .pol-head::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;
  background:var(--rma-oro);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.app > .main .pol-head:hover::after{transform:scaleX(1)}
.app > .main .pol-head .chev{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* (6) LA HOJA DEL EXPEDIENTE, como la de una fianza en MGC: flota a 14 px de la orilla, entra desde la derecha con la
   curva del tablero, y lo de adentro sube un renglón tras otro. */
.sheet{top:14px;right:14px;bottom:14px;height:auto;width:min(580px,calc(100% - 28px));border:0;border-radius:20px;
  overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(13,31,24,.06);
  transform:translateX(calc(100% + 40px));visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s .42s}
.sheet.on{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.sheet-bg{background:rgba(13,31,24,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .3s}
@keyframes br-sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet.on .sheet-body > *{animation:br-sube .45s cubic-bezier(.2,.8,.2,1) both}
.sheet.on .sheet-body > :nth-child(2){animation-delay:.05s}
.sheet.on .sheet-body > :nth-child(3){animation-delay:.1s}
.sheet.on .sheet-body > :nth-child(4){animation-delay:.15s}
.sheet.on .sheet-body > :nth-child(n+5){animation-delay:.2s}
@media (max-width:620px){.sheet{top:0;right:0;bottom:0;width:100%;border-radius:0}}

/* (7) LOS BOTONES. El de siempre se llena de bosque desde la izquierda; el principal (noche) lleva un brillo de oro que
   lo cruza; el de oro se llena de oro. Todos se hunden un poco al apretarlos, y la flecha de descarga baja y sube. */
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .25s,border-color .25s,transform .15s,box-shadow .3s}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--rma-bosque);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(.solid):not(:disabled):hover{color:var(--rma-lino);border-color:var(--rma-bosque);background:transparent}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(.solid):not(:disabled):hover::before{transform:scaleX(1)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.gold::before{background:var(--rma-oro)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.gold:not(:disabled):hover{color:var(--rma-noche);border-color:var(--rma-oro)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid::before{transform:none;
  background:linear-gradient(105deg,transparent 30%,rgba(232,206,142,.38) 50%,transparent 70%);
  background-size:250% 100%;background-position:120% 0;transition:background-position .7s cubic-bezier(.2,.7,.2,1)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid:not(:disabled):hover::before{background-position:-20% 0}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid:not(:disabled):hover{box-shadow:0 10px 22px -12px rgba(13,31,24,.6)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(:disabled):active{transform:scale(.97)}
@keyframes br-baja{0%,100%{transform:none}50%{transform:translateY(2px)}}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:hover svg{animation:br-baja .5s cubic-bezier(.4,.1,.2,1)}

/* Ver y Descargar: pastillas con su dibujo (un ojo, una flecha), en el expediente, en Documentos y en «Mis
   documentos». El dibujo va como máscara: toma el color de la letra. */
:is(.doc-ver,.a-doc).rowbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid var(--card-border);background-color:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(var(--rma-bosque),var(--rma-bosque));background-repeat:no-repeat;
  background-position:left center;background-size:0 100%;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .2s .08s,border-color .2s,transform .15s}
:is(.doc-ver,.a-doc).rowbtn:not(:disabled):hover{background-size:100% 100%;color:var(--rma-lino);border-color:var(--rma-bosque)}
:is(.doc-ver,.a-doc).rowbtn:not(:disabled):active{transform:scale(.96)}
:is(.doc-ver,.a-doc).rowbtn::before{content:"";flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--br-ic) center/contain no-repeat;mask:var(--br-ic) center/contain no-repeat;transition:transform .3s}
:is(.doc-ver,.a-doc).rowbtn[data-m="ver"]{--br-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
:is(.doc-ver,.a-doc).rowbtn[data-m="bajar"]{--br-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-4.5-4.5M12 15l4.5-4.5M5 20h14'/%3E%3C/svg%3E")}
:is(.doc-ver,.a-doc).rowbtn[data-m="ver"]:hover::before{transform:scale(1.15)}
:is(.doc-ver,.a-doc).rowbtn[data-m="bajar"]:hover::before{animation:br-baja .5s cubic-bezier(.4,.1,.2,1)}
.doc-acts,.a-doc-acts{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* «Mis documentos» de la persona asegurada: cada renglón con su hoja dibujada, que se ilumina al pasar el cursor. */
#portal-aseg .a-doc-fila{border-radius:12px;margin:0 -10px;padding-left:10px;padding-right:10px;
  transition:background-color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
#portal-aseg .a-doc-fila:hover{background-color:color-mix(in srgb,var(--rma-oro) 8%,transparent)}
#portal-aseg .a-doc-fila::before{content:"";flex:none;align-self:center;width:34px;height:34px;border-radius:10px;order:-1;
  background:color-mix(in srgb,var(--rma-oro) 16%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4M10 12h5M10 15.5h5'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
#portal-aseg .a-doc-fila:hover::before{transform:rotate(-6deg) scale(1.06)}
#portal-aseg .a-doc-fila > div:first-child{flex:1;min-width:0}
@media (max-width:600px){#portal-aseg .a-doc-fila{flex-wrap:wrap}#portal-aseg .a-doc-acts{width:100%;justify-content:flex-start;padding-left:48px}}

/* El dibujo suelto del ramo (ramos.js, `data-rv-dib`): en la cabeza de cada póliza del padrón y en cada ramo de «Mi
   cobertura». Se vuelve a trazar al pasar el cursor por su póliza. */
.rv-suelto{display:inline-block;flex:none;width:34px;height:27px;margin-right:8px;vertical-align:middle;color:var(--rma-oro-osc)}
.rv-suelto svg{stroke-width:6.5}
#portal-aseg .a-ramo .rv-suelto{width:26px;height:21px;margin-right:6px}
.app > .main .pol-head:hover .rv-suelto path{animation:br-traza 1s cubic-bezier(.4,.1,.2,1)}

/* La barra lateral: la pestaña bajo el cursor se recorre un poco y le aparece la raya de oro que lleva la elegida. */
@media (min-width:901px){
  body.arm #chrome-top .tab{transition:background var(--rma-t),color var(--rma-t),padding-left .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  body.arm #chrome-top .tab:not([aria-selected="true"]):hover{padding-left:19px;box-shadow:inset 2px 0 0 var(--rma-oro-line)}
}

/* Con «reducir movimiento», nada se mueve: las cifras y los dibujos ya están, la hoja aparece sin deslizarse. */
@media (prefers-reduced-motion: reduce){
  .app > .main > [id^="view-"],#portal-aseg > [id^="a"],.app .pol.open.abre tbody tr,.sheet.on .sheet-body > *{animation:none !important}
  .app .pro-kpi,.app .pro-kpi:hover{transform:none;transition:border-color .2s}
  .kpi-ic path,.app .pro-kpi:hover .kpi-ic path,.rv-carta:hover .top .rv-dib path{stroke-dashoffset:0;animation:none;transition:none}
  .sheet,.sheet.on{transition:visibility 0s}
  body.arm #chrome-top .tab{transition:none}
  :is(.app > .main,.sheet,#portal-aseg,.hub) .btn,:is(.app > .main,.sheet,#portal-aseg,.hub) .btn::before{transition:none}
  :is(.app > .main,.sheet,#portal-aseg,.hub) .btn:hover svg,:is(.doc-ver,.a-doc).rowbtn::before{animation:none !important;transform:none !important}
  .app > .main .pbar,.app > .main .ini,#portal-aseg .a-doc-fila,#portal-aseg .a-doc-fila::before{transition:none;transform:none !important}
}

/* ============================================================================
   LOS LOGOS Y EL COLOR · 20/10/2026 (rama diseno-ramos, rediseño 2b2 h)
   Rafa: «quiero más color en los botones y quiero que los logos de cada cliente tengan más protagonismo. Agrégalos
   también como integraste los de las afianzadoras en esas escalas de colores, consistentes con las del portal».
   ============================================================================ */

/* (1) EL LOGO EN UNA TINTA (`.lt`, marca.js y brillo.js): máscara del color de la letra. Hasta que brillo.js lo revisa
   no se ve; si no es transparente, sale a color en su placa. */
.lt{display:inline-block;flex:none;vertical-align:middle}
.lt:not(.lista):not(.sin-tinta){visibility:hidden}
.lt.lista{background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.lt.sin-tinta{background:var(--placa-marca);border-radius:10px;padding:6px 10px;box-sizing:content-box}
.lt.sin-tinta img{display:block;width:100%;height:100%;object-fit:contain}

/* En el encabezado, grande y en lino sobre la banda, arriba a la derecha; con una sombra suave para que se lea sobre
   la foto. Sin banda (antes de que llegue), no sale. */
.hero-logo{display:none}
.hero.rv-con-banda .hero-logo{display:block;position:absolute;top:30px;right:34px;line-height:0;color:var(--rma-lino);
  filter:drop-shadow(0 2px 14px rgba(13,31,24,.6));opacity:0;transform:translateY(6px);
  transition:opacity .6s .5s,transform .8s cubic-bezier(.2,.7,.2,1) .5s}
.hero.rv-con-banda .hero-logo:has(.lt.lista),.hero.rv-con-banda .hero-logo:has(.lt.sin-tinta){opacity:1;transform:none}
.hero-logo .lt-hero{--lt-h:44px;--lt-w:230px}
@media (max-width:700px){
  .hero.rv-con-banda .hero-logo{position:static;margin:0 0 16px}
  .hero-logo .lt-hero{--lt-h:32px;--lt-w:170px}
}

/* En la barra lateral, en oro sobre la noche y sin placa: la placa clara sólo queda para un logo que no se pueda
   entintar. */
body.arm #chrome-top .marca-lado .logo-chip:has(.lt.lista){background:none;border-color:transparent;padding:10px 4px 6px;justify-content:flex-start}
body.arm #chrome-top .marca-lado .logo-chip:has(.lt.lista) img{display:none}
body.arm #chrome-top .marca-lado .logo-chip .lt.sin-tinta,.marca-lado .logo-chip .lt:not(.lista){display:none}
.marca-lado .logo-chip .lt-lado{--lt-h:36px;--lt-w:190px;color:var(--rma-oro-2)}
body:not(.arm) .marca-lado .logo-chip .lt{display:none}
body:not(.arm) .marca-lado .logo-chip img{display:block}

/* En «Mis clientes», sin placa y más grande, en tinta; al pasar el cursor por la tarjeta, se vuelve oro. */
.cli-marca:has(.lt){background:none;border:0;padding:0;height:52px}
.cli-marca .lt-card{--lt-h:34px;--lt-w:200px;color:var(--rma-tinta);transition:color .35s}
.cli-card:hover .cli-marca .lt-card.lista{color:var(--rma-oro-osc)}

/* (2) MÁS COLOR EN LOS BOTONES. Cada botón trae ya su tinte de la paleta y se llena del todo al pasar el cursor:
   el de siempre en bosque (fondo de bosque muy claro y letra bosque), el de oro en oro, y el principal en un
   degradado de bosque a noche con su brillo de oro. «Ver» va en bosque y «Descargar» en oro. */
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(.solid):not(.gold){
  background-color:color-mix(in srgb,var(--rma-bosque) 9%,var(--card));
  border-color:color-mix(in srgb,var(--rma-bosque) 24%,transparent);color:var(--rma-bosque-2)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(.solid):not(.gold) svg{color:var(--rma-oro-osc);stroke:var(--rma-oro-osc)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn:not(.solid):not(.gold):not(:disabled):hover svg{stroke:var(--rma-oro)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.gold{background-color:color-mix(in srgb,var(--rma-oro) 18%,var(--card));
  border-color:var(--rma-oro-line);color:var(--rma-oro-osc)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.gold svg{stroke:currentColor}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid{background:linear-gradient(135deg,var(--rma-bosque-2),var(--rma-noche));
  border-color:var(--rma-bosque);color:var(--rma-lino)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid svg{stroke:var(--rma-oro-2)}
:is(.app > .main,.sheet,#portal-aseg,.hub) .btn.solid:not(:disabled):hover{background:linear-gradient(135deg,var(--rma-bosque),var(--rma-bosque-2));border-color:var(--rma-oro-line)}
/* Las pastillas que eligen algo (filtros, vistas): la elegida en bosque con su punto de oro. */
.app > .main :is(.chip,.per)[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--rma-oro)}

/* «Ver» en bosque y «Descargar» en oro, cada uno con su tinte; al pasar el cursor se llenan de su color. */
:is(.doc-ver,.a-doc).rowbtn[data-m="ver"]{background-color:color-mix(in srgb,var(--rma-bosque) 9%,var(--card));
  border-color:color-mix(in srgb,var(--rma-bosque) 24%,transparent);color:var(--rma-bosque-2)}
:is(.doc-ver,.a-doc).rowbtn[data-m="bajar"]{background-color:color-mix(in srgb,var(--rma-oro) 16%,var(--card));
  border-color:var(--rma-oro-line);color:var(--rma-oro-osc);
  background-image:linear-gradient(var(--rma-oro),var(--rma-oro))}
:is(.doc-ver,.a-doc).rowbtn[data-m="bajar"]:not(:disabled):hover{color:var(--rma-noche);border-color:var(--rma-oro)}

/* Los dos botones del encabezado viven sobre la foto: el CSV de vidrio claro y el Excel lleno de oro. */
.hero.rv-con-banda .dl .btn:not(.gold){background:rgba(238,241,236,.1) !important;border-color:rgba(238,241,236,.38) !important;
  color:var(--rma-lino) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero.rv-con-banda .dl .btn:not(.gold) svg{stroke:var(--rma-oro-2) !important}
.hero.rv-con-banda .dl .btn.gold{background:var(--rma-oro) !important;border-color:var(--rma-oro) !important;color:var(--rma-noche) !important}
.hero.rv-con-banda .dl .btn.gold::before{background:var(--rma-oro-2)}
.hero.rv-con-banda .dl .btn.gold:not(:disabled):hover{color:var(--rma-noche) !important}

@media (prefers-reduced-motion: reduce){
  .hero.rv-con-banda .hero-logo{transition:none;transform:none}
  .cli-marca .lt-card{transition:none}
}

/* ============================================================================
   EL PUNCH · 20/10/2026 (rama diseno-ramos, rediseño 2b2 i)
   Rafa: «las gráficas, pies y demás necesitan movimiento»; «estos botones y selectores están muy desorganizados y poco
   intuitivos»; «le falta punch, movimiento, interacción y hacerlo agradable de ver, movimiento que llame la atención».
   Lo que entra en pantalla y el dibujo de cada sección los marca `brillo.js` (`br-listo`, `br-r`, `br-ve`, `.hd-ic`).
   ============================================================================ */

/* (1) LO QUE ENTRA EN PANTALLA sube y aparece, una vez; en una rejilla, una tarjeta tras otra. El relleno del
   movimiento es «backwards»: al terminar no deja un transform puesto que pise la inclinación de las tarjetas. */
@keyframes br-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes br-lado{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.br-listo .br-r:not(.br-ve){opacity:0}
.br-listo .br-r.br-ve{animation:br-entra .7s cubic-bezier(.2,.8,.2,1) backwards}
.br-listo :is(.pgrid,.kpis,.avisos,.hub-rej,.op-rej,.saldo-cifras,#altas,#bajas,.op-urg,.op-hall) > .br-r:nth-child(2){animation-delay:.07s}
.br-listo :is(.pgrid,.kpis,.avisos,.hub-rej,.op-rej,.saldo-cifras,#altas,#bajas,.op-urg,.op-hall) > .br-r:nth-child(3){animation-delay:.14s}
.br-listo :is(.pgrid,.kpis,.avisos,.hub-rej,.op-rej,.saldo-cifras,#altas,#bajas,.op-urg,.op-hall) > .br-r:nth-child(4){animation-delay:.21s}
.br-listo :is(.pgrid,.kpis,.avisos,.hub-rej,.op-rej,.saldo-cifras,#altas,#bajas,.op-urg,.op-hall) > .br-r:nth-child(5){animation-delay:.28s}
.br-listo :is(.pgrid,.kpis,.avisos,.hub-rej,.op-rej,.saldo-cifras,#altas,#bajas,.op-urg,.op-hall) > .br-r:nth-child(n+6){animation-delay:.34s}
@media print{.br-listo .br-r{opacity:1 !important;animation:none !important}}

/* (2) EL DIBUJO DE CADA SECCIÓN: un chip de oro antes del título, que se traza al aparecer y se mece al pasar. */
.hd-ic{display:inline-grid;place-items:center;width:38px;height:38px;margin-right:12px;border-radius:12px;vertical-align:-8px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rma-oro) 24%,var(--card)),color-mix(in srgb,var(--rma-bosque) 10%,var(--card)));
  box-shadow:inset 0 0 0 1px var(--rma-oro-line);color:var(--rma-oro-osc);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.hd-ic svg{width:20px;height:20px;overflow:visible}
.hd-ic path{stroke-dasharray:1;stroke-dashoffset:1}
.hd-ic.sale path{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,.1,.2,1)}
.hd:hover .hd-ic,.a-card:hover > h2 .hd-ic{transform:rotate(-8deg) scale(1.06)}
#portal-aseg .a-card > h2 .hd-ic{width:34px;height:34px;vertical-align:-7px}

/* (3) LAS GRÁFICAS SE MUEVEN CUANDO SE VEN. La dona se dibuja segmento tras segmento (hasta hoy lo hacía al cargar la
   página, abajo, donde nadie la veía) y su leyenda entra renglón por renglón; las barras crecen desde su base. */
.br-listo .pchart.br-r:not(.br-ve) .dona .seg{animation-play-state:paused}
.pchart .dona .seg:nth-child(2){animation-delay:.12s}
.pchart .dona .seg:nth-child(3){animation-delay:.24s}
.pchart .dona .seg:nth-child(4){animation-delay:.36s}
.pchart .dona .seg:nth-child(5){animation-delay:.48s}
.pchart .dona .seg:nth-child(n+6){animation-delay:.6s}
.dona .seg{transition:stroke-width .3s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.dona svg:hover .seg{opacity:.55}
.dona svg .seg:hover{stroke-width:28;opacity:1}
.pchart.br-ve .leyenda .rw{animation:br-lado .5s cubic-bezier(.2,.8,.2,1) backwards}
.pchart.br-ve .leyenda .rw:nth-child(2){animation-delay:.1s}
.pchart.br-ve .leyenda .rw:nth-child(3){animation-delay:.2s}
.pchart.br-ve .leyenda .rw:nth-child(4){animation-delay:.3s}
.pchart.br-ve .leyenda .rw:nth-child(n+5){animation-delay:.4s}
.pchart .leyenda .rw{transition:background-color .25s,transform .3s cubic-bezier(.2,.7,.2,1);border-radius:10px}
.pchart .leyenda .rw:hover{background-color:color-mix(in srgb,var(--rma-oro) 9%,transparent);transform:translateX(4px)}
.stack i{transform-origin:left center;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .2s}
.br-listo .stack.br-r:not(.br-ve) i{transform:scaleX(0)}
.stack i:nth-child(2){transition-delay:.1s}.stack i:nth-child(3){transition-delay:.2s}.stack i:nth-child(n+4){transition-delay:.3s}
.op-hb .pista i{transform-origin:left center;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .2s}
.br-listo .op-hb.br-r:not(.br-ve) .pista i{transform:scaleX(0)}
.op-hb .pista:nth-child(5) i{transition-delay:.06s}.op-hb .pista:nth-child(8) i{transition-delay:.12s}
.op-hb .pista:nth-child(11) i{transition-delay:.18s}.op-hb .pista:nth-child(14) i{transition-delay:.24s}
.op-hb .pista:nth-child(17) i{transition-delay:.3s}.op-hb .pista:nth-child(n+20) i{transition-delay:.36s}
.op-hb .pista:hover i{filter:brightness(1.18) saturate(1.1)}
.op-pila .pila > span{transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .2s}
.br-listo .op-pila.br-r:not(.br-ve) .pila > span{transform:scaleX(0)}
.op-pila .pila > span:hover{filter:brightness(1.12)}
.op-svg rect:not(.marca-hit){transform-box:fill-box;transform-origin:center bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .2s}
.br-listo .op-svg.br-r:not(.br-ve) rect:not(.marca-hit){transform:scaleY(0)}


/* (4) EL SELECTOR DE RAZÓN SOCIAL Y PÓLIZAS (selector() en app.js). */
#empbar,#polbar{display:inline-flex;flex-wrap:wrap;align-items:flex-start;gap:8px;vertical-align:top;margin:0 8px 12px 0}
#empbar:empty{display:none}
.sel{position:relative}
.sel-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 8px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);
  transition:border-color .2s,box-shadow .3s,transform .15s}
.sel-btn:hover{border-color:var(--rma-oro-line);box-shadow:0 10px 24px -14px rgba(13,31,24,.45)}
.sel-btn:active{transform:scale(.98)}
.sel-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--rma-bosque) 10%,var(--card));color:var(--rma-bosque-2)}
.sel-ic svg{width:18px;height:18px}
.sel-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sel-v{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel.filtrando .sel-btn{border-color:var(--rma-oro);background:color-mix(in srgb,var(--rma-oro) 12%,var(--card))}
.sel.filtrando .sel-ic{background:var(--rma-oro);color:var(--rma-noche)}
.sel-chev{width:16px;height:16px;fill:none;stroke:var(--soft);stroke-width:2;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sel.abierto .sel-chev{transform:rotate(180deg)}
.sel-pop{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(420px,calc(100vw - 32px));max-height:min(460px,70vh);
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  box-shadow:0 30px 60px -24px rgba(13,31,24,.45),0 0 0 1px rgba(13,31,24,.03);overflow:hidden;
  transform-origin:top left;animation:br-pop .28s cubic-bezier(.2,.8,.2,1)}
.sel-pop[hidden]{display:none}
@keyframes br-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.sel-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.sel-cab b{font-family:var(--rma-serif);font-weight:400;font-size:20px}
.sel-rap{display:flex;gap:6px}
.sel-rap button{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 11px;border-radius:999px;
  border:1px solid var(--card-border);background:var(--card);color:var(--rma-bosque-2);transition:background .2s,color .2s,border-color .2s}
.sel-rap button:hover{background:var(--rma-bosque);color:var(--rma-lino);border-color:var(--rma-bosque)}
.sel-q{margin:0 16px 8px;padding:9px 14px;border-radius:999px;border:1px solid var(--card-border);font:inherit;font-size:14px;
  background:var(--rma-papel);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.sel-q:focus{border-color:var(--rma-oro);box-shadow:0 0 0 3px color-mix(in srgb,var(--rma-oro) 20%,transparent)}
.sel-lista{overflow:auto;padding:0 8px 10px}
.sel-grupo{display:flex;align-items:center;gap:4px;margin:10px 8px 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sel-grupo .rv-suelto{width:28px;height:22px;margin-right:4px}
.sel-op{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  cursor:pointer;transition:background-color .2s}
.sel-op:hover{background-color:color-mix(in srgb,var(--rma-oro) 9%,transparent)}
.sel-op.oculto{display:none}
.sel-op input{position:absolute;opacity:0;pointer-events:none}
.sel-caja{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--rma-linea-campo-claro);
  background:var(--card);transition:background .2s,border-color .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.sel-caja svg{width:14px;height:14px;fill:none;stroke:var(--rma-lino);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sel-caja path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s cubic-bezier(.4,.1,.2,1) .05s}
.sel-op input:checked + .sel-caja{background:var(--rma-bosque);border-color:var(--rma-bosque);transform:scale(1.05)}
.sel-op input:checked + .sel-caja path{stroke-dashoffset:0}
.sel-op input:focus-visible + .sel-caja{outline:2px solid var(--rma-oro-osc);outline-offset:2px}
.sel-txt{display:flex;flex-direction:column;min-width:0}
.sel-txt b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-txt small{font-size:12px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-n{font-size:12px;font-weight:600;color:var(--rma-bosque-2);background:color-mix(in srgb,var(--rma-bosque) 9%,var(--card));
  padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.sel-solo{font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:0;background:none;color:var(--rma-oro-osc);padding:4px 6px;
  border-radius:8px;opacity:0;transition:opacity .2s,background .2s}
.sel-op:hover .sel-solo,.sel-solo:focus-visible{opacity:1}
.sel-solo:hover{background:color-mix(in srgb,var(--rma-oro) 16%,transparent)}
@media (hover:none){.sel-solo{opacity:1}}
.sel-activas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px;animation:br-pop .3s cubic-bezier(.2,.8,.2,1)}
.sel-quita{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:5px 8px 5px 12px;border-radius:999px;border:1px solid var(--rma-oro-line);background:color-mix(in srgb,var(--rma-oro) 14%,var(--card));
  color:var(--rma-oro-osc);transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.sel-quita span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(140,106,31,.14);font-size:14px;line-height:1}
.sel-quita:hover{background:var(--rma-oro);color:var(--rma-noche)}
.sel-quita:hover span{transform:rotate(90deg);transition:transform .3s}
.sel-limpia{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border:0;background:none;color:var(--rma-bosque-2);
  text-decoration:underline;text-decoration-color:var(--rma-oro);text-underline-offset:3px;padding:5px 6px}
@media (max-width:600px){
  #empbar,#polbar{display:flex;width:100%;margin-right:0}
  .sel,.sel-btn{width:100%}
  .sel-v{flex:1;max-width:none;text-align:right}
}

/* (5) BENEFICIOS: los documentos que se piden van numerados, lo que se rechaza lleva su «!», y los pasos de «Si
   necesitas atención médica» son una ruta: cada paso con su número, unidos por una línea, entrando uno tras otro. */
#view-ben .avisos{counter-reset:req}
#view-ben .av.dato .t::before,#view-ben .av.pend .t::before{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;
  border-radius:50%;font-size:12px;font-weight:700;vertical-align:1px;font-family:var(--rma-sans)}
#view-ben .av.dato .t::before{counter-increment:req;content:counter(req);background:var(--rma-bosque);color:var(--rma-lino)}
#view-ben .av.pend .t::before{content:"!";background:var(--rma-oro);color:var(--rma-noche)}
.app > .main .avisos .av{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .3s}
.app > .main .avisos .av:hover{transform:translateX(5px);border-color:var(--rma-oro-line);box-shadow:0 12px 26px -18px rgba(13,31,24,.4)}
#view-ben .pcard ol{list-style:none;padding-left:0 !important;counter-reset:paso}
#view-ben .pcard ol li{position:relative;padding-left:40px;margin-bottom:16px !important;counter-increment:paso}
#view-ben .pcard ol li::before{content:counter(paso);position:absolute;left:0;top:-2px;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--rma-oro-osc);
  background:color-mix(in srgb,var(--rma-oro) 20%,var(--card));box-shadow:inset 0 0 0 1px var(--rma-oro-line);
  transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
#view-ben .pcard ol li:hover::before{background:var(--rma-bosque);color:var(--rma-lino);transform:scale(1.1)}
#view-ben .pcard ol li:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:-15px;width:1px;
  background:linear-gradient(var(--rma-oro-line),transparent)}
#view-ben .pcard.br-ve ol li{animation:br-lado .5s cubic-bezier(.2,.8,.2,1) backwards}
#view-ben .pcard.br-ve ol li:nth-child(2){animation-delay:.12s}
#view-ben .pcard.br-ve ol li:nth-child(3){animation-delay:.24s}
#view-ben .pcard.br-ve ol li:nth-child(n+4){animation-delay:.36s}

/* (6) EL COTEJO CON QUATTRO: el tipo en su pastilla y la pista como una acción con su flecha. */
.tipo-pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600}
.tipo-pill.t-ALTA{background:color-mix(in srgb,var(--rma-bosque) 12%,var(--card));color:var(--rma-bosque-2)}
.tipo-pill.t-BAJA{background:color-mix(in srgb,var(--rma-oro) 20%,var(--card));color:var(--rma-oro-osc)}
.pista-accion{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--rma-bosque-2)}
.pista-accion::after{content:"";width:14px;height:14px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
tr:hover .pista-accion::after{transform:translateX(4px)}

/* (7) EL FORMULARIO DE SOLICITUDES: cada tipo con su dibujo, y el archivo se suelta en una caja que se ilumina. */
#view-sol .tip{position:relative;padding-left:62px !important;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .2s}
#view-sol .tip:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(13,31,24,.45)}
#view-sol .tip::before{content:"";position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:10px;
  background:color-mix(in srgb,var(--rma-oro) 20%,var(--card)) var(--ic) center/18px no-repeat;
  transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
#view-sol .tip:hover::before{transform:rotate(-8deg) scale(1.08)}
#view-sol .tip[aria-pressed="true"]::before{background-color:var(--rma-oro)}
#view-sol .tip[data-t="movimiento"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM3.5 20c.6-3.4 2.8-5.4 5.5-5.4s4.9 2 5.5 5.4M17 8v6M14 11h6'/%3E%3C/svg%3E")}
#view-sol .tip[data-t="correccion"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4'/%3E%3C/svg%3E")}
#view-sol .tip[data-t="constancia"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4M9.5 14l2 2 3.5-4'/%3E%3C/svg%3E")}
#view-sol .tip[data-t="otro"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4zM8 9.5h8M8 12.5h5'/%3E%3C/svg%3E")}
#view-sol .tip[data-t="danos"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16H3v-4l2-1 3-4h8l3 4 2 1v4h-2M7 16h10M5 16a2 2 0 1 0 4 0 2 2 0 1 0-4 0M15 16a2 2 0 1 0 4 0 2 2 0 1 0-4 0'/%3E%3C/svg%3E")}
#view-sol input[type=file]{width:100%;box-sizing:border-box;padding:24px 18px 24px 70px;cursor:pointer;color:var(--soft);font:inherit;font-size:13.5px;
  border:1.5px dashed var(--rma-oro-line);border-radius:16px;
  background:color-mix(in srgb,var(--rma-oro) 6%,var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.6-8 6 6 0 0 1 11.6-1.5A4.5 4.5 0 0 1 17.5 18M12 12v8m0-8-3 3m3-3 3 3'/%3E%3C/svg%3E") 22px center/30px no-repeat;
  transition:border-color .2s,background-color .25s,transform .2s}
#view-sol input[type=file]:hover,#view-sol input[type=file].br-encima{border-color:var(--rma-oro);background-color:color-mix(in srgb,var(--rma-oro) 14%,var(--card))}
#view-sol input[type=file].br-encima{transform:scale(1.01)}
#view-sol input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-right:14px;
  padding:9px 16px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--rma-bosque-2),var(--rma-noche));color:var(--rma-lino);
  transition:filter .2s}
#view-sol input[type=file]:hover::file-selector-button{filter:brightness(1.15)}
#view-sol .f :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){
  background-image:linear-gradient(var(--rma-oro-osc),var(--rma-oro-osc));background-repeat:no-repeat;background-position:left bottom;
  background-size:0 2px;transition:background-size .45s cubic-bezier(.2,.7,.2,1),border-color .2s}
#view-sol .f :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus{background-size:100% 2px}

@media (prefers-reduced-motion: reduce){
  .br-listo .br-r,.br-listo .br-r.br-ve{opacity:1;animation:none}
  .hd-ic path{stroke-dashoffset:0;transition:none}.hd-ic{transition:none}
  .stack i,.op-hb .pista i,.op-pila .pila > span,.op-svg rect:not(.marca-hit){transition:none;transform:none !important}
  .pchart.br-ve .leyenda .rw,#view-ben .pcard.br-ve ol li{animation:none}
  .sel-pop{animation:none}.sel-caja path{transition:none}
  #view-sol .tip,#view-sol .tip::before,.app > .main .avisos .av{transition:none;transform:none !important}
}

/* ============================================================================================================
   CLARO Y FÁCIL · 21/10/2026 (rama diseno-ramos, rediseño 2b2 j; Figma «Rediseño · claro y fácil», autorizado ese día)
   Rafa: «Falta color, falta movimiento, falta que sea MUCHO más intuitivo»; «logos de arriba y cifras hazlas más
   visuales, más atractivas». Cada tarjeta lleva su tono (--k-* en tokens.css) y su letra se mezcla con la tinta.
   ============================================================================================================ */
.k-oro{--k:var(--k-oro)}.k-azul{--k:var(--k-azul)}.k-salmon{--k:var(--k-salmon)}
.k-verde{--k:var(--k-verde)}.k-rosa{--k:var(--k-rosa)}.k-bosque{--k:var(--k-bosque)}

/* (1) EL ENCABEZADO DE PROGRAMA: el logo más grande, la vigencia como barra y las aseguradoras en una fila. */
.hero-logo .lt-hero{--lt-h:60px;--lt-w:300px}
.hero-vig{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.hv-pista{position:relative;width:220px;max-width:50vw;height:8px;border-radius:8px;overflow:hidden;
  background:color-mix(in srgb,var(--rma-lino) 18%,transparent)}
.hv-pista i{position:absolute;left:0;top:0;bottom:0;width:var(--hoy);border-radius:8px;
  background:linear-gradient(90deg,var(--rma-oro-osc),var(--rma-oro));transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .3s}
.br-listo .hv-pista:not(.sale) i{transform:scaleX(0)}
.hv-txt{font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px;color:var(--rma-lino);
  background:color-mix(in srgb,var(--rma-oro) 26%,transparent)}
.hero:not(.rv-con-banda) .hv-txt{color:var(--rma-oro-osc);background:color-mix(in srgb,var(--rma-oro) 16%,transparent)}
.hero-aseg{order:3;flex-basis:100%;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid color-mix(in srgb,var(--rma-lino) 14%,transparent)}
.hero:not(.rv-con-banda) .hero-aseg{border-top-color:var(--card-border)}
.ha-t{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rma-oro-2)}
.hero:not(.rv-con-banda) .ha-t{color:var(--rma-oro-osc)}
.ha-l{display:flex;gap:10px;flex-wrap:wrap}
.ha-n{font-family:var(--rma-serif);font-size:22px;line-height:1;padding:10px 18px;border-radius:16px;color:var(--rma-lino);
  background:color-mix(in srgb,var(--rma-lino) 7%,transparent);border:1px solid color-mix(in srgb,var(--rma-lino) 20%,transparent);
  opacity:0;transform:translateY(6px);animation:cf-entra .6s cubic-bezier(.2,.7,.2,1) forwards}
.ha-n:nth-child(2){animation-delay:.12s}.ha-n:nth-child(3){animation-delay:.24s}.ha-n:nth-child(n+4){animation-delay:.36s}
.hero:not(.rv-con-banda) .ha-n{color:var(--ink);background:var(--card);border-color:var(--card-border)}
@keyframes cf-entra{to{opacity:1;transform:none}}

/* (2) LAS CINCO CIFRAS, cada una con su color y su dibujo. */
.app .pro-kpi[class*=" k-"]{background:linear-gradient(color-mix(in srgb,var(--k) 9%,transparent),color-mix(in srgb,var(--k) 9%,transparent)),var(--card);
  border-color:color-mix(in srgb,var(--k) 32%,var(--card-border))}
.app .pro-kpi[class*=" k-"] .kpi-ic{width:44px;height:44px;padding:10px;border-radius:50%;box-sizing:border-box;
  color:color-mix(in srgb,var(--k) 75%,var(--ink));background:color-mix(in srgb,var(--k) 17%,transparent)}
.app .pro-kpi[class*=" k-"] .lab{color:color-mix(in srgb,var(--k) 72%,var(--ink));font-weight:600}
.app .pro-kpi[class*=" k-"]::after{background:var(--k)}
.app .pro-kpi.k-bosque .val{font-size:22px;padding-top:6px}
.k-mezcla{display:flex;gap:3px;height:10px;margin:12px 0 6px}
.k-mezcla i{display:block;min-width:6px;border-radius:5px;transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .2s}
.k-mezcla i:nth-child(2){transition-delay:.12s}.k-mezcla i:nth-child(3){transition-delay:.24s}.k-mezcla i:nth-child(n+4){transition-delay:.36s}
.br-listo .k-mezcla:not(.sale) i{transform:scaleX(0)}
.k-mezcla i:hover{filter:brightness(1.15)}
.k-ley{font-size:11.5px;color:var(--soft);line-height:1.4}
.k-aro{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12px;color:var(--soft);line-height:1.35}
.k-aro svg{width:46px;height:46px;flex:none;transform:rotate(-90deg)}
.k-aro circle{fill:none;stroke-width:6}
.k-aro-f{stroke:color-mix(in srgb,var(--k) 18%,transparent)}
.k-aro-t{stroke:var(--k);stroke-linecap:round;stroke-dasharray:var(--frac) 100;transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.br-listo .k-aro:not(.sale) .k-aro-t{stroke-dasharray:0 100}
.k-chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 4px}
.k-chips span{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
  color:color-mix(in srgb,var(--k) 72%,var(--ink));background:color-mix(in srgb,var(--k) 15%,transparent)}
/* En celular las cifras van de dos en dos: la prima, que es la más larga, va completa, y también la última si quedaría sola. */
@media (max-width:600px){.app .pro-kpi.k-oro,.app .pro-kpis > .pro-kpi:last-child:nth-child(even){grid-column:1 / -1}}

/* (3) «¿QUÉ QUIERES HACER HOY?»: cuatro botones grandes, con su color; se levantan y la flecha avanza. */
.pro-acc-t{font-family:var(--rma-serif);font-weight:400;font-size:28px;letter-spacing:-.01em;margin:6px 0 14px;color:var(--ink)}
.pro-acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px}
.pro-a{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  padding:16px 18px;border-radius:var(--rma-radio);border:1px solid color-mix(in srgb,var(--k) 28%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--k) 6%,transparent),color-mix(in srgb,var(--k) 6%,transparent)),var(--card);
  box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.pro-a:hover,.pro-a:focus-visible{transform:translateY(-4px);outline:none;
  background:linear-gradient(color-mix(in srgb,var(--k) 13%,transparent),color-mix(in srgb,var(--k) 13%,transparent)),var(--card);
  box-shadow:0 18px 34px -20px rgba(13,31,24,.45)}
.pro-a:focus-visible{box-shadow:0 0 0 3px var(--rma-oro-line)}
.pro-a-ic{flex:none;width:50px;height:50px;padding:12px;box-sizing:border-box;border-radius:50%;
  color:color-mix(in srgb,var(--k) 75%,var(--ink));background:color-mix(in srgb,var(--k) 17%,transparent)}
.pro-a-ic svg{display:block;width:100%;height:100%}
.pro-a-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pro-a-tx b{font-size:15px;font-weight:600}
.pro-a-tx span{font-size:12.5px;color:var(--soft)}
.pro-a-fl{font-size:20px;color:color-mix(in srgb,var(--k) 75%,var(--ink));transition:transform .25s}
.pro-a:hover .pro-a-fl,.pro-a:focus-visible .pro-a-fl{transform:translateX(4px)}

@media (prefers-reduced-motion: reduce){
  .hv-pista i,.k-mezcla i,.k-aro-t,.pro-a,.pro-a-fl{transition:none}
  .br-listo .hv-pista:not(.sale) i,.br-listo .k-mezcla:not(.sale) i{transform:none}
  .br-listo .k-aro:not(.sale) .k-aro-t{stroke-dasharray:var(--frac) 100}
  .ha-n{animation:none;opacity:1;transform:none}
  .pro-a:hover,.pro-a:focus-visible{transform:none}
}

/* (4) BENEFICIOS (renderBeneficiosNuevo): sin plegables a todo lo ancho; tarjetas de color que se leen sin abrir nada. */
#view-ben .bn-blq{margin:0 0 30px}
.bn-cab{margin:0 0 14px}
.bn-cab h2{font-family:var(--rma-serif);font-weight:400;font-size:28px;letter-spacing:-.01em;margin:0;color:var(--ink)}
.bn-cab p{margin:4px 0 0;font-size:13px;color:var(--soft);max-width:80ch}
.bn-ic{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;
  color:color-mix(in srgb,var(--k,var(--k-bosque)) 75%,var(--ink));background:color-mix(in srgb,var(--k,var(--k-bosque)) 17%,transparent)}
.bn-ic svg{width:22px;height:22px}
.bn-nota{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--soft)}
.bn-n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:700;
  color:var(--rma-blanco);background:color-mix(in srgb,var(--k,var(--k-bosque)) 82%,var(--ink))}
.bn-sits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.bn-sit,.bn-contacto{padding:20px 22px;border-radius:var(--rma-radio);border:1px solid color-mix(in srgb,var(--k) 30%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--k) 8%,transparent),color-mix(in srgb,var(--k) 8%,transparent)),var(--card);
  box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.bn-sit:hover,.bn-contacto:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(13,31,24,.45)}
.bn-sit-cab{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bn-sit-cab h3{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.bn-sit-cab p{margin:2px 0 0;font-size:12.5px;color:var(--soft)}
.bn-ceja{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--k) 72%,var(--ink))}
.bn-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bn-pasos li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.bn-pasos li .bn-n{margin-top:-2px}
.bn-dos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start}
.bn-dos > .bn-blq{margin-bottom:30px}
@media (max-width:900px){.bn-dos{grid-template-columns:1fr}}
.bn-papeles,.bn-rechazos{list-style:none;margin:0;padding:6px;border-radius:var(--rma-radio);background:var(--card);
  border:1px solid var(--card-border);box-shadow:var(--shadow)}
.bn-papel{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;--k:var(--k-oro)}
.bn-papel + .bn-papel{border-top:1px solid var(--card-border)}
.bn-papel:hover{background:color-mix(in srgb,var(--k-oro) 7%,transparent)}
.bn-papel-tx{flex:1;min-width:0}
.bn-papel-t{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bn-papel-d{font-size:12.5px;color:var(--soft);margin-top:2px}
.bn-papel .tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:6px;
  color:var(--rma-oro-osc);background:color-mix(in srgb,var(--rma-oro) 18%,transparent)}
.bn-papel-b{flex:none}
.bn-rechazos{--k:var(--k-rosa);padding:10px 14px}
.bn-rechazos li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13.5px;color:var(--ink)}
.bn-rechazos li + li{border-top:1px solid var(--card-border)}
.bn-rechazos .bn-ic{width:34px;height:34px;border-radius:50%}
.bn-rechazos .bn-ic svg{width:18px;height:18px}
.bn-tiempos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.bn-tiempo{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  padding:16px 18px;border-radius:var(--rma-radio);border:1px solid color-mix(in srgb,var(--k) 30%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--k) 8%,transparent),color-mix(in srgb,var(--k) 8%,transparent)),var(--card)}
.bn-tiempo .bn-ic{grid-row:1 / 3}
.bn-tiempo b{font-size:20px;font-weight:600;color:var(--ink);line-height:1.15}
.bn-tiempo span{font-size:12.5px;color:var(--soft)}
.bn-ramos{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start}
.bn-ramo{padding:0 0 18px;border-radius:var(--rma-radio);overflow:hidden;background:var(--card);border:1px solid var(--card-border);
  box-shadow:var(--shadow);border-top:6px solid var(--k)}
.bn-ramo > *{margin-left:20px;margin-right:20px}
.bn-ramo-cab{display:flex;align-items:center;gap:12px;padding:18px 0 12px}
.bn-ramo-cab h3{margin:0;font-family:var(--rma-serif);font-weight:400;font-size:22px;color:var(--ink)}
.bn-ramo-cab p{margin:3px 0 0;font-size:12.5px;color:color-mix(in srgb,var(--k) 70%,var(--ink));font-weight:600}
.bn-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:0;margin-bottom:12px}
.bn-ficha > div{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--k) 9%,transparent)}
.bn-ficha dt{font-size:11px;color:var(--soft)}
.bn-ficha dd{margin:2px 0 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.bn-temas{list-style:none;padding:0;margin-top:4px;margin-bottom:0}
.bn-temas li{position:relative;padding:7px 0 7px 18px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.bn-temas li + li{border-top:1px dashed var(--card-border)}
.bn-temas li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--k)}
.bn-temas li b{font-weight:600}
.bn-temas li span{color:var(--soft)}
.bn-mas summary{cursor:pointer;font-size:13px;font-weight:600;margin-top:6px;color:color-mix(in srgb,var(--k) 72%,var(--ink))}
.bn-nivel{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.bn-chip-dato{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--ink);
  background:color-mix(in srgb,var(--k,var(--k-bosque)) 7%,transparent);border:1px solid color-mix(in srgb,var(--k,var(--k-bosque)) 20%,transparent)}
.bn-chip-dato .tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;
  color:color-mix(in srgb,var(--k,var(--k-bosque)) 72%,var(--ink))}
.bn-chip-dato ul{margin:4px 0 0;padding-left:18px}
.bn-chip-dato.bn-accion{--k:var(--k-rosa)}
.bn-tabla{margin-top:8px}
.bn-palabras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bn-palabra{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--card-border)}
.bn-palabra b{display:block;font-size:14px;color:var(--rma-oro-osc);margin-bottom:4px}
.bn-palabra span{font-size:13px;line-height:1.45;color:var(--ink)}
.bn-entrega{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.bn-entrega .bn-chip-dato{margin:0}
.bn-acudir{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.bn-contacto h3{margin:2px 0 0;font-size:17px;font-weight:600;color:var(--ink)}
.bn-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bn-botones .btn svg{width:15px;height:15px;margin-right:6px;vertical-align:-3px}
.bn-cierre{margin-top:6px}
@media (prefers-reduced-motion: reduce){.bn-sit,.bn-contacto{transition:none}.bn-sit:hover,.bn-contacto:hover{transform:none}}
.bn-botones a.btn{text-decoration:none}

/* (5) SOLICITUDES: el formulario en pasos numerados, lo que se necesita como lista de pendientes, la vista previa como
   la hoja que va a recibir tu ejecutivo y la lista vacía sin tanto aire. La lógica de Sol no cambia. */
#view-sol .form{counter-reset:paso}
#view-sol .form .f:not(.oculto) > label{counter-increment:paso;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink)}
#view-sol .form .f:not(.oculto) > label::before{content:counter(paso);flex:none;display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:50%;font-size:12px;font-weight:700;letter-spacing:0;color:var(--rma-blanco);background:var(--rma-bosque-2)}
#view-sol .reqs{--k:var(--k-oro);border:1px solid color-mix(in srgb,var(--k) 32%,var(--card-border));border-left-width:1px;border-radius:16px;padding:16px 18px;
  background:linear-gradient(color-mix(in srgb,var(--k) 9%,transparent),color-mix(in srgb,var(--k) 9%,transparent)),var(--card)}
#view-sol .reqs .t{font-family:var(--rma-serif);font-size:21px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
#view-sol .reqs ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
#view-sol .reqs li{position:relative;padding:10px 12px 10px 42px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--ink);background:var(--card)}
#view-sol .reqs li::before{content:"✓";position:absolute;left:12px;top:9px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--rma-blanco);background:var(--rma-oro-osc)}
#view-sol .sumbox{position:relative;padding:20px 22px 18px;border-radius:16px;border-top:5px solid var(--rma-oro)}
#view-sol .sumbox pre{font-family:var(--rma-sans);font-size:13px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
#view-sol .sumbox pre:empty::before{content:"Aquí aparece la solicitud en cuanto elijas qué pides.";color:var(--soft)}
#view-sol .sol-vacia{display:flex;align-items:center;gap:14px;margin:4px 0 0;padding:14px 16px;border-radius:14px;font-size:13px;text-align:left;
  background:color-mix(in srgb,var(--rma-oro) 8%,transparent)}
#view-sol .sol-vacia .rv-vacio-dib,#view-sol .sol-vacia svg{width:44px !important;height:44px !important;margin:0 !important;flex:none}
#view-sol .sol-vacia .rv-vacio-foto{width:72px;height:72px;margin:0;border-radius:12px;flex:none}
#view-sol .form .hd h2{font-size:22px !important}

/* (6) LAS FOTOS EN MÁS LUGARES Y DOCUMENTOS EN BOTONES · 21/10/2026 (Rafa: «úsalos e impleméntalos, conforme el giro del
   cliente, tipo de póliza, servicios, algo para el buscador, solicitudes, etc. Hazlo de verdad PRECIOSO»). */
/* La tarjeta de cada póliza en Beneficios y en Documentos lleva la foto de su ramo arriba, a sangre. */
.bn-ramo.rv-carta .rv-foto{height:118px;margin:0 0 2px;border-radius:0}
.bn-ramo.rv-carta{border-top-width:0}
.bn-ramo.rv-carta .rv-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--k)}
.doc-pol.rv-carta{padding:0 0 14px;overflow:hidden;border-radius:var(--rma-radio)}
.doc-pol.rv-carta .rv-foto{height:96px;margin:0 0 12px;border-radius:0}
.doc-pol.rv-carta > :not(.rv-foto){margin-left:18px;margin-right:18px}
.doc-pol-head{gap:10px 12px}
.doc-pol-head .pol-num{font-size:17px}
.doc-cuenta{margin-left:auto;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;color:var(--rma-oro-osc);
  background:color-mix(in srgb,var(--rma-oro) 15%,transparent)}
/* Cada documento, un botón: su dibujo, su nombre que se entiende y sus botones. */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;margin:6px 0 10px}
@media (max-width:600px){.doc-grid{grid-template-columns:1fr}}
.app .doc-row.doc-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--k) 26%,var(--card-border));
  border-radius:14px;font-size:13px;
  background:linear-gradient(color-mix(in srgb,var(--k) 6%,transparent),color-mix(in srgb,var(--k) 6%,transparent)),var(--card);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s}
.app .doc-row.doc-tile:hover{transform:translateY(-2px);box-shadow:0 14px 26px -20px rgba(13,31,24,.5);
  background:linear-gradient(color-mix(in srgb,var(--k) 12%,transparent),color-mix(in srgb,var(--k) 12%,transparent)),var(--card)}
.doc-ic{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;padding:10px;box-sizing:border-box;border-radius:12px;
  color:color-mix(in srgb,var(--k) 76%,var(--ink));background:color-mix(in srgb,var(--k) 17%,transparent)}
.doc-ic svg{width:100%;height:100%}
.doc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.app .doc-row.doc-tile .doc-what{flex:none;font-size:14px;font-weight:600;color:var(--ink)}
.app .doc-row.doc-tile .doc-tit{flex:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}
.app .doc-row.doc-tile .doc-acts{flex:none;gap:6px}
.doc-person{margin:8px 0}
/* El buscador y los chips de Documentos. */
.doc-busca{position:sticky;top:0;z-index:3;margin:0 0 18px;padding:12px 0 8px;background:var(--bg,var(--rma-papel))}
.doc-q{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:99px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.doc-q:focus-within{border-color:var(--rma-oro-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--rma-oro) 22%,transparent)}
.doc-q svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--soft);stroke-width:1.8}
.doc-q input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);outline:0}
.doc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.doc-chip{font:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:7px 14px;border-radius:99px;color:var(--ink);
  background:var(--card);border:1px solid var(--card-border);transition:background .2s,border-color .2s,transform .2s}
.doc-chip b{font-weight:600;color:var(--soft);margin-left:2px}
.doc-chip:hover{transform:translateY(-1px);border-color:var(--rma-oro-line)}
.doc-chip[aria-pressed="true"]{background:var(--rma-noche);border-color:var(--rma-noche);color:var(--rma-lino)}
.doc-chip[aria-pressed="true"] b{color:var(--rma-oro-2)}
.doc-nada{margin:14px 4px 0;font-size:13px;color:var(--soft)}
/* El buscador de Asegurados sin resultados: el dibujo del giro, no una línea suelta. */
.zero.rv-vacio .rv-vacio-dib{width:96px;height:78px}
.zero.rv-vacio .rv-vacio-foto{width:120px;height:120px}
/* La pantalla de acceso: el fondo de fotos bajo el velo noche, que pasan una tras otra (cada una 6 s, ciclo de 30 s). */
.acceso.piel{position:relative;isolation:isolate}
.pl-fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--rma-noche)}
.pl-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
  animation:pl-pasa 30s linear infinite}
.pl-fondo img:nth-child(2){animation-delay:6s}.pl-fondo img:nth-child(3){animation-delay:12s}
.pl-fondo img:nth-child(4){animation-delay:18s}.pl-fondo img:nth-child(5){animation-delay:24s}
.pl-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,31,24,.95) 0%,rgba(13,31,24,.88) 42%,rgba(13,31,24,.7) 62%,rgba(13,31,24,.9) 100%)}
@keyframes pl-pasa{0%{opacity:0;transform:scale(1.08)}4%{opacity:1}20%{opacity:1}26%{opacity:0;transform:scale(1)}100%{opacity:0}}
.acceso.piel .der{background:color-mix(in srgb,var(--rma-noche) 72%,transparent);backdrop-filter:blur(6px)}
@media (max-width:700px){.pl-fondo::after{background:rgba(13,31,24,.9)}}
@media (prefers-reduced-motion: reduce){
  .pl-fondo img{animation:none;transform:none}.pl-fondo img:first-child{opacity:1}
  .app .doc-row.doc-tile,.doc-chip{transition:none}.app .doc-row.doc-tile:hover,.doc-chip:hover{transform:none}
}

/* (7) LOS LOGOS · 21/10/2026 (Rafa: «quiero que el logo de R Montalvo sea protagonista, junto con el del cliente»; «La
   barra lateral se ve muy bien pero algunos logos están mal acomodados y se ve "tight"»).
   En el encabezado: la firma conjunta, el cliente | raya de oro | el monograma del despacho con su nombre. */
.hero.rv-con-banda .hero-logo{display:flex;align-items:center;gap:18px}
.hero.rv-con-banda .hero-logo:not(:has(.lt)){opacity:1;transform:none}
.hl-x{flex:none;width:1px;height:46px;background:linear-gradient(transparent,var(--rma-oro),transparent)}
.hl-rma{display:flex;align-items:center;gap:10px;line-height:1}
.hl-rma img{display:block;height:38px;width:auto}
.hl-rma-t{font-family:var(--rma-serif);font-size:17px;line-height:1.05;color:var(--rma-lino);white-space:nowrap}
@media (max-width:700px){.hl-x{height:34px}.hl-rma img{height:30px}.hl-rma-t{font-size:14px}}
/* En la barra lateral: el despacho arriba, con su monograma y su nombre; luego, con aire, el cliente en grande. */
body.arm #chrome-top .marca{gap:0;padding:0;overflow:hidden;background:linear-gradient(180deg,var(--rma-bosque),color-mix(in srgb,var(--rma-bosque) 70%,var(--rma-noche)))}
body.arm #chrome-top .marca-lado.rma{order:-1;flex-direction:row;align-items:center;gap:10px;margin:0;padding:14px 16px 12px;
  border-top:0;border-bottom:1px solid var(--rma-linea-d);background:color-mix(in srgb,var(--rma-noche) 45%,transparent)}
body.arm #chrome-top .marca-lado .rma-img{height:32px;width:auto;flex:none}
body.arm #chrome-top .marca-lado.rma .txt{display:block}
body.arm #chrome-top .marca-lado.rma .txt .brand-name{font-family:var(--rma-serif);font-weight:400;font-size:17px;line-height:1.1;color:var(--rma-lino)}
body.arm #chrome-top .marca-lado:not(.rma){padding:18px 16px 16px;gap:10px}
body.arm #chrome-top .marca-lado .logo-chip:has(.lt.lista){padding:6px 0 4px;justify-content:center}
.marca-lado .logo-chip .lt-lado{--lt-h:52px;--lt-w:200px}
body.arm #chrome-top .marca-lado:not(.rma) .txt{text-align:center}
body.arm #chrome-top .marca-lado:not(.rma) .txt .brand-sub{font-size:12px}
/* La sesión al pie de la barra no se sale de ella: el papel largo de la cuenta («Recursos humanos · Administrador de
   riesgos») se recorta con puntos suspensivos en lugar de empujar la caja (21/10/2026). */
body.arm #chrome-top .sesion{min-width:0;max-width:100%;width:100%}
body.arm #chrome-top .sesion > *{min-width:0;max-width:100%;box-sizing:border-box}
body.arm #chrome-top .sesion *{overflow-wrap:anywhere}
/* La firma del despacho, protagonista en la entrada (21/10/2026). */
.pl-firma{display:flex;align-items:center;gap:16px;margin:0 0 34px;opacity:0;animation:cf-entra .7s cubic-bezier(.2,.7,.2,1) .1s forwards}
.pl-firma img{height:76px;width:auto;max-width:100%;display:block}
@media(max-width:860px){.pl-firma img{height:auto;width:100%;max-width:440px}}
@media (prefers-reduced-motion: reduce){.pl-firma{animation:none;opacity:1}}

/* (8) MI SEGURO, CLARO Y FÁCIL · 21/10/2026 (Figma «Mi seguro · claro», autorizado; Rafa: «se sigue viendo muy blanco,
   vacío y aburrido con textos muy difíciles de leer y muy largos»). */
/* El encabezado: «Hola» y la tarjeta de su póliza, como una credencial de oro. */
#portal-aseg .hero{align-items:center;flex-wrap:wrap}
/* En Mi seguro la firma de logos va arriba, en su propio renglón: a la derecha está la tarjeta de la póliza. */
#portal-aseg .hero.rv-con-banda .hero-logo{position:static;flex-basis:100%;margin:0 0 6px}
.a-cred{position:relative;z-index:1;flex:none;width:330px;max-width:100%;box-sizing:border-box;padding:18px 20px;border-radius:18px;color:var(--rma-noche);
  background:linear-gradient(135deg,color-mix(in srgb,var(--rma-oro) 35%,var(--rma-lino)),var(--rma-oro));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);transform:rotate(-1.5deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.a-cred:hover{transform:rotate(0) translateY(-3px)}
.a-cred-cab{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.a-cred-cab b{letter-spacing:0;text-transform:none;font-size:12px}
.a-cred-ramo{font-family:var(--rma-serif);font-size:24px;margin:8px 0 10px}
.a-cred-datos{display:flex;gap:18px;flex-wrap:wrap}
.a-cred-datos span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.a-cred-datos b{font-size:13.5px}
.a-cred-btn{margin-top:14px;width:100%;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:10px 14px;border-radius:99px;border:0;
  color:var(--rma-lino);background:var(--rma-noche)}
.a-cred-btn:hover{background:var(--rma-bosque)}
@media (max-width:700px){.a-cred{width:100%;transform:none;margin-top:14px}}
/* ¿Qué necesitas? — botones grandes por situación. */
.a-necs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.a-nec{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;font:inherit;cursor:pointer;padding:16px 18px;border-radius:16px;
  color:var(--ink);border:1px solid color-mix(in srgb,var(--k) 30%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--k) 9%,transparent),color-mix(in srgb,var(--k) 9%,transparent)),var(--card);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.a-nec:hover,.a-nec:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(13,31,24,.45);outline:none}
.a-nec:focus-visible{box-shadow:0 0 0 3px var(--rma-oro-line)}
.a-nec b{font-size:15px;font-weight:600}.a-nec > span:last-child{font-size:12.5px;color:var(--soft)}
.a-sit-ic{display:inline-grid;place-items:center;width:42px;height:42px;padding:10px;box-sizing:border-box;border-radius:14px;flex:none;
  color:color-mix(in srgb,var(--k) 76%,var(--ink));background:color-mix(in srgb,var(--k) 18%,transparent)}
.a-sit-ic svg{width:100%;height:100%}
/* Tu familia: tarjetas, no renglones. */
.a-gente{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:6px}
#portal-aseg .a-gente .a-persona{border:1px solid var(--card-border);border-radius:16px;padding:14px 16px;background:var(--card)}
#portal-aseg .a-gente .a-persona:first-of-type{border-top:1px solid var(--card-border)}
/* Lo que te cubre: cada ramo, una tarjeta de color. */
.a-ramos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.a-ramo-c{padding:16px 18px 14px;border-radius:16px;background:var(--card);border:1px solid var(--card-border);border-top:5px solid var(--k)}
.a-ramo-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.a-ramo-cab h3{margin:0;font-family:var(--rma-serif);font-weight:400;font-size:22px;color:var(--ink)}
.a-ramo-cab .a-pista{margin-left:auto;font-size:11px;color:color-mix(in srgb,var(--k) 72%,var(--ink));font-weight:600}
.a-ramo-dib{color:color-mix(in srgb,var(--k) 75%,var(--ink))}
#portal-aseg .a-ramo-c .a-fichat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0 0 10px}
#portal-aseg .a-ramo-c .a-fichat > div{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--k) 9%,transparent)}
#portal-aseg .a-ramo-c .a-fichat dt{font-size:11px;color:var(--soft)}
#portal-aseg .a-ramo-c .a-fichat dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.a-notaf{font-size:12px;color:var(--soft);margin:0 0 10px}
#portal-aseg .a-ramo-c .a-pago{margin:0 0 10px;padding:10px 12px;border-radius:12px;font-size:13px;background:color-mix(in srgb,var(--k) 7%,transparent)}
.a-puntos{list-style:none;padding:0 !important}
.a-puntos li{position:relative;padding:7px 0 7px 18px;line-height:1.45;margin:0 !important}
.a-puntos li + li{border-top:1px dashed var(--card-border)}
.a-puntos li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--k)}
.a-mas summary{cursor:pointer;font-size:13px;font-weight:600;margin-top:6px;color:color-mix(in srgb,var(--k) 72%,var(--ink))}
.a-palabras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.a-palabra{padding:12px 14px;border-radius:14px;border:1px solid var(--card-border);background:color-mix(in srgb,var(--rma-oro) 6%,var(--card))}
.a-palabra b{display:block;font-size:13.5px;color:var(--rma-oro-osc);margin-bottom:3px}.a-palabra span{font-size:12.5px;line-height:1.45}
/* Cómo usar tu seguro: cada situación en su tarjeta, con sus pasos numerados. */
.a-sits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.a-sit{scroll-margin-top:90px;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--k) 30%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--k) 8%,transparent),color-mix(in srgb,var(--k) 8%,transparent)),var(--card)}
.a-sit h3{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:16px;font-weight:600;color:var(--ink)}
.a-sit .a-pasos{list-style:none;padding:0;counter-reset:p}
.a-sit .a-pasos li{counter-increment:p;position:relative;padding:4px 0 4px 36px;margin:0 0 4px;line-height:1.45}
.a-sit .a-pasos li::before{content:counter(p);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--rma-blanco);background:color-mix(in srgb,var(--k) 82%,var(--ink))}
.a-resalta{animation:a-resalta 1.6s ease-out}
@keyframes a-resalta{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--k) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* Si tienes un siniestro: los plegables por ramo, con el contacto como botones y los rechazos con su alerta. */
#portal-aseg .a-plega{border:1px solid var(--card-border);border-radius:14px;padding:0 16px;margin-top:10px;background:var(--card)}
#portal-aseg .a-plega:first-of-type{border-top:1px solid var(--card-border)}
#portal-aseg .a-plega > summary{padding:14px 0;font-weight:600}
#portal-aseg .a-plega h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--rma-oro-osc);margin:16px 0 6px}
.a-rechazos{list-style:none;padding:0 !important}
.a-rechazos li{padding:8px 10px 8px 34px;position:relative;border-radius:10px;background:color-mix(in srgb,var(--k-rosa) 7%,transparent);margin-bottom:6px !important}
.a-rechazos li::before{content:"!";position:absolute;left:10px;top:8px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--rma-blanco);background:var(--k-rosa)}
#portal-aseg .a-contacto{display:flex;flex-wrap:wrap;gap:8px}
#portal-aseg :is(.a-contacto,.a-ficha) a{text-decoration:none;display:inline-flex;align-items:center;padding:6px 12px;border-radius:99px;font-weight:600;font-size:13px;
  color:var(--rma-bosque-2);background:color-mix(in srgb,var(--rma-bosque-2) 10%,transparent)}
#portal-aseg :is(.a-contacto,.a-ficha) a:hover{background:color-mix(in srgb,var(--rma-bosque-2) 18%,transparent)}
@media (prefers-reduced-motion: reduce){.a-cred,.a-nec{transition:none}.a-cred,.a-cred:hover{transform:none}.a-nec:hover{transform:none}.a-resalta{animation:none}}

/* (9) ENDOSOS, CLARO Y FÁCIL · 21/10/2026 (rediseño 2b2 j; Rafa: «se sigue viendo muy blanco, vacío y aburrido con textos
   muy difíciles de leer y muy largos»). Cómo va cada bloque, en pastillas de color; la bandeja, como caja para soltar. */
#view-end :is(#ban-resumen,#end-resumen,#cq-resumen){display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.est{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:500;
  color:var(--ink);background:var(--card);border:1px solid var(--card-border)}
.est-ok{color:color-mix(in srgb,var(--k-verde) 75%,var(--ink));background:color-mix(in srgb,var(--k-verde) 12%,var(--card));border-color:color-mix(in srgb,var(--k-verde) 30%,transparent)}
.est-camino{color:var(--rma-oro-osc);background:color-mix(in srgb,var(--k-oro) 14%,var(--card));border-color:color-mix(in srgb,var(--k-oro) 34%,transparent)}
.est-ojo{color:color-mix(in srgb,var(--k-rosa) 75%,var(--ink));background:color-mix(in srgb,var(--k-rosa) 10%,var(--card));border-color:color-mix(in srgb,var(--k-rosa) 30%,transparent)}
#view-end :is(#rev-resumen,#prop-resumen):not(:empty){display:inline-flex;padding:6px 12px;border-radius:99px;font-size:12.5px;
  color:var(--ink);background:var(--card);border:1px solid var(--card-border)}
/* La bandeja: la caja punteada que se ilumina al pasar el cursor, con el botón de subir en oro. */
#view-end #ban-form.ban-caja{padding:22px 24px;border-radius:20px;border:2px dashed color-mix(in srgb,var(--rma-oro) 45%,var(--card-border));
  background:linear-gradient(color-mix(in srgb,var(--rma-oro) 6%,transparent),color-mix(in srgb,var(--rma-oro) 6%,transparent)),var(--card);
  transition:border-color .25s,background .25s}
#view-end #ban-form.ban-caja:hover,#view-end #ban-form.ban-caja:focus-within{border-color:var(--rma-oro);
  background:linear-gradient(color-mix(in srgb,var(--rma-oro) 11%,transparent),color-mix(in srgb,var(--rma-oro) 11%,transparent)),var(--card)}
#view-end #ban-form.ban-caja label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--rma-oro-osc)}
/* La guía: lo que vale siempre, como lista con palomitas; cada aseguradora en su tarjeta. */
#guia-endosos .guia-siempre{list-style:none;padding:0;margin:10px 0 12px;display:flex;flex-direction:column;gap:6px}
#guia-endosos .guia-siempre li{position:relative;padding:9px 12px 9px 40px;border-radius:12px;font-size:13.5px;
  background:color-mix(in srgb,var(--k-verde) 7%,var(--card));border:1px solid color-mix(in srgb,var(--k-verde) 18%,transparent)}
#guia-endosos .guia-siempre li::before{content:"✓";position:absolute;left:12px;top:9px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--rma-blanco);background:var(--k-verde)}
#guia-endosos details.guia-aseg{border-radius:14px;margin-top:8px}
#guia-endosos details.guia-aseg > summary{padding:12px 14px;cursor:pointer}
@media (prefers-reduced-motion: reduce){#view-end #ban-form.ban-caja{transition:none}}

/* (10) ASEGURADOS, ALTAS Y BAJAS, CORREOS Y DAÑOS, CLARO Y FÁCIL · 21/10/2026 (rediseño 2b2, parte j7; Rafa: «Lo más
   posible de una»). Las cifras de Asegurados ya llevan la tarjeta de color de Programa (`pro-kpi k-*`); aquí lo demás.
   Ningún texto cambia. */
/* Altas y bajas: cada columna con su tono; la persona, en su círculo con sus iniciales. */
#view-mov .mv-col:first-child{--k:var(--k-verde)}
#view-mov .mv-col:last-child{--k:var(--k-salmon)}
#view-mov .mv-col{padding:16px 16px 8px;border-radius:var(--rma-radio);
  background:color-mix(in srgb,var(--k) 6%,var(--card));border:1px solid color-mix(in srgb,var(--k) 22%,var(--card-border))}
#view-mov .mv-col h3{color:color-mix(in srgb,var(--k) 55%,var(--ink))}
#view-mov .mv-item{justify-content:flex-start;gap:12px;border-left-width:1px;border-color:color-mix(in srgb,var(--k) 22%,var(--card-border));
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
#view-mov .mv-item:hover{transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(13,31,24,.45)}
#view-mov .mv-tx{flex:1;min-width:0}
#view-mov .mv-ini{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:color-mix(in srgb,var(--k) 50%,var(--ink));background:color-mix(in srgb,var(--k) 17%,transparent)}
#view-mov .mv-col .empty{background:var(--card)}
/* El saldo: lo que se paga en salmón, lo que se recupera en verde y el cierre en grande. */
#view-mov .saldo .sc{border-color:transparent}
#view-mov .saldo .sc:has(.n.contra){background:color-mix(in srgb,var(--k-salmon) 8%,var(--card))}
#view-mov .saldo .sc:has(.n.favor){background:color-mix(in srgb,var(--k-verde) 8%,var(--card))}
/* Las tres cifras con la misma letra y el mismo tamaño que las de Programa (Rafa, 21/10/2026: «Se ven de diferente
   fuente y tamaño», la del cierre); cuentan hasta su valor al verse (brillo.js). */
#view-mov .saldo .sc .n{font-family:var(--ff-display);font-weight:700;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Correos: el resumen en pastillas y el estado de cada titular con su tono. */
#view-cor #cor-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.cor-n{font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;
  color:color-mix(in srgb,var(--k) 52%,var(--ink));background:color-mix(in srgb,var(--k) 14%,transparent)}
#view-cor .cor-est{font-size:12.5px;color:var(--soft)}
.cor-p{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;
  color:color-mix(in srgb,var(--k) 52%,var(--ink));background:color-mix(in srgb,var(--k) 14%,transparent)}
/* Daños: la foto del ramo arriba, a sangre, como la póliza en Documentos. */
.dpol.rv-carta .rv-foto{height:96px;margin:0;border-radius:0}
/* La etiqueta en oro de la prima (también en Programa) no llegaba a AA: 3.76:1. */
.app .pro-kpi.k-oro .lab{color:color-mix(in srgb,var(--k) 52%,var(--ink))}
@media (max-width:600px){#view-mov .mv-col{padding:12px 10px 4px}.dpol.rv-carta .rv-foto{height:80px}}
@media (prefers-reduced-motion: reduce){#view-mov .mv-item{transition:none}#view-mov .mv-item:hover{transform:none}}

/* (11) OPERACIÓN, EL DISEÑO DE FIGMA · 21/10/2026 (rediseño 2b2, parte j8; «Hub · Operación», aprobado: «Sí, me gusta.
   Aprobado»). La misma información, cada pieza con su tono; el movimiento de «Elementos» lo pone brillo.js al entrar. */
#oper .op-ojo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.24em;color:var(--rma-oro-osc);margin-bottom:10px}
#oper .op-ic{display:inline-grid;flex:none;width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:11px;color:var(--rma-oro-osc);
  background:color-mix(in srgb,var(--rma-oro) 20%,transparent);border:1px solid color-mix(in srgb,var(--rma-oro) 45%,transparent)}
#oper .op-ic svg{width:100%;height:100%}
#oper .op-ojo-solo{font-family:var(--rma-serif);font-weight:400;font-size:30px;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:6px 0 14px}
#oper .op-card{border-radius:22px;padding:26px 28px;box-shadow:0 10px 30px -14px rgba(13,31,24,.14)}
#oper .op-card h3{font-size:28px;line-height:1.1}
/* Lo urgente: cuatro tarjetas con el degradado y la sombra de su color. */
#oper .op-urg{gap:14px}
#oper .op-urg button{border-radius:20px;padding:20px;border:1px solid color-mix(in srgb,var(--k) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 24%,var(--card)),color-mix(in srgb,var(--k) 4%,var(--card)));
  box-shadow:0 14px 28px -16px color-mix(in srgb,var(--k) 55%,transparent);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s}
#oper .op-urg button:hover,#oper .op-urg button:focus-visible{transform:translateY(-4px);border-color:var(--k)}
#oper .op-u-ic{display:grid;width:44px;height:44px;padding:10px;box-sizing:border-box;border-radius:50%;margin-bottom:12px;
  color:color-mix(in srgb,var(--k) 55%,var(--ink));background:color-mix(in srgb,var(--k) 22%,transparent)}
#oper .op-urg .n{font-family:var(--rma-serif);font-weight:400;font-size:54px;line-height:1;color:color-mix(in srgb,var(--k) 55%,var(--ink))}
#oper .op-urg .m{font-weight:600;font-size:14px;margin-top:6px;color:color-mix(in srgb,var(--k) 45%,var(--ink))}
#oper .op-urg .t{color:var(--ink);font-size:13px;line-height:1.4}
#oper .op-urg .ir{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:99px;letter-spacing:0;text-transform:none;font-size:12.5px;
  font-weight:600;color:color-mix(in srgb,var(--k) 55%,var(--ink));background:color-mix(in srgb,var(--k) 18%,transparent)}
/* Lo que dicen los datos: cada frase en su tarjeta de color, con su raya y la primera cifra grande. */
#oper .op-hall{gap:12px}
#oper .op-hall li{padding:16px;border-radius:16px;font-size:13.5px;border:1px solid color-mix(in srgb,var(--k) 30%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 13%,var(--card)),color-mix(in srgb,var(--k) 3%,var(--card)))}
#oper .op-hall li::before{position:static;display:block;width:44px;height:5px;border-radius:3px;margin-bottom:10px;background:var(--k);
  transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1) .2s}
.br-listo #oper .op-hall li.br-r:not(.br-ve)::before{transform:scaleX(0)}
#oper .op-hall li > b:first-of-type{font-family:var(--rma-serif);font-weight:400;font-size:26px;line-height:1.15;color:color-mix(in srgb,var(--k) 55%,var(--ink))}
#oper .op-hall .ojo{color:color-mix(in srgb,var(--rma-oro-osc) 72%,var(--ink));font-weight:500;margin-top:6px}
/* La cartera: la cifra grande, la comparación en pastilla y las barras con degradado; el promedio en oro. */
#oper .op-hero .n{font-family:var(--rma-serif);font-weight:400;font-size:64px;color:color-mix(in srgb,var(--k-verde) 70%,var(--ink))}
#oper .op-hero .d{padding:5px 12px;border-radius:99px;font-weight:600}
#oper .op-hero .d.sube{color:color-mix(in srgb,var(--k-verde) 60%,var(--ink));background:color-mix(in srgb,var(--k-verde) 14%,transparent)}
#oper .op-hero .d.baja{color:color-mix(in srgb,var(--k-salmon) 60%,var(--ink));background:color-mix(in srgb,var(--k-salmon) 14%,transparent)}
#oper .op-hero .d b{color:inherit}
#oper .op-svg-caja{padding:14px 12px 6px;border-radius:16px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
#oper .op-svg .g-act-1{stop-color:color-mix(in srgb,var(--k-verde) 70%,var(--rma-blanco))}
#oper .op-svg .g-act-2{stop-color:color-mix(in srgb,var(--k-verde) 80%,var(--ink))}
#oper .op-svg .g-ant-1{stop-color:color-mix(in srgb,var(--soft) 40%,var(--rma-blanco))}
#oper .op-svg .g-ant-2{stop-color:color-mix(in srgb,var(--soft) 22%,var(--rma-blanco))}
#oper .op-svg .barra{fill:url(#op-g-act)}
#oper .op-svg .barra.ant{fill:url(#op-g-ant)}
#oper .op-svg .barra.tenue{fill:url(#op-g-act);opacity:.4}
#oper .op-svg .val{fill:color-mix(in srgb,var(--k-verde) 70%,var(--ink));font-weight:700}
#oper .op-svg .prom{stroke:var(--rma-oro-osc);stroke-width:1.5;stroke-dasharray:6 5}
#oper .op-svg .prom-t{fill:var(--rma-oro-osc);font-weight:600}
#oper .op-svg path.barra{transform-box:fill-box;transform-origin:center bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .2s}
.br-listo #oper .op-svg.br-r:not(.br-ve) path.barra{transform:scaleY(0)}
/* Las barras horizontales: más gruesas, con degradado, y el porcentaje en pastilla. */
#oper .op-hb{gap:9px 12px}
#oper .op-hb .pista{height:14px;border-radius:8px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
#oper .op-hb .pista i{border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--k-verde) 55%,var(--rma-blanco)),color-mix(in srgb,var(--k-verde) 85%,var(--ink)))}
#oper .op-hb .v small{display:inline-block;padding:1px 8px;border-radius:99px;font-weight:600;color:color-mix(in srgb,var(--k-verde) 55%,var(--ink));
  background:color-mix(in srgb,var(--k-verde) 14%,transparent)}
/* Las donas: segmento tras segmento; el que se señala engorda. */
#oper .op-donay{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:4px}
#oper .op-dona{width:184px;height:184px;flex:none;overflow:visible}
#oper .op-dona circle{fill:none;stroke-width:6}
#oper .op-dona .fondo{stroke:color-mix(in srgb,var(--ink) 6%,transparent)}
#oper .op-dona .seg{outline:none;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1),stroke-width .2s}
#oper .op-dona .seg:hover,#oper .op-dona .seg:focus-visible{stroke-width:8.5}
.br-listo #oper .op-dona.br-r:not(.br-ve) .seg{stroke-dasharray:0 100}
#oper .op-dona .c{font-family:var(--rma-serif);font-size:6.6px;fill:var(--ink);text-anchor:middle}
#oper .op-dona .s{font-family:var(--rma-sans);font-size:2.7px;fill:var(--soft);text-anchor:middle}
#oper .op-leyd{display:grid;grid-template-columns:10px minmax(0,auto) auto;gap:9px 10px;align-items:center;font-size:13px;flex:1;min-width:200px}
#oper .op-leyd i{width:10px;height:10px;border-radius:50%}
#oper .op-leyd .et{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#oper .op-leyd .v{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#oper .op-leyd .v small{color:var(--soft);font-weight:400;margin-left:6px}
/* Los aros: cuánto de un todo, con su número al centro; se cierran al entrar. */
#oper .op-aros{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 18px}
#oper .op-aro{position:relative;width:108px;display:flex;flex-direction:column;align-items:center;gap:6px}
#oper .op-aro svg{width:108px;height:108px}
#oper .op-aro circle{fill:none;stroke-width:4.5}
#oper .op-aro .fondo{opacity:.16}
#oper .op-aro .seg{stroke-linecap:round;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)}
.br-listo #oper .op-aro.br-r:not(.br-ve) .seg{stroke-dasharray:0 100}
#oper .op-aro .c{position:absolute;top:0;left:0;right:0;height:108px;display:grid;place-items:center;font-family:var(--rma-serif);font-size:26px;filter:brightness(.8)}
#oper .op-aro .l{font-size:12px;color:var(--soft);text-align:center}
#oper .op-aroy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#oper .op-aroy .op-hb{flex:1;min-width:220px}
/* Las tiras apiladas, más gruesas; en retención, la tasa renovada a la derecha. */
#oper .op-pila .pila{height:32px;gap:3px}
#oper .op-pila .pila > span{border-radius:8px;background-image:linear-gradient(180deg,transparent,rgba(13,31,24,.12))}
#oper .op-pila-ren{grid-template-columns:minmax(90px,24%) minmax(0,1fr) auto}
#oper .op-ren{display:flex;flex-direction:column;align-items:center;padding:4px 12px;border-radius:12px;font-size:10.5px}
#oper .op-ren b{font-family:var(--rma-serif);font-weight:400;font-size:22px;line-height:1}
#oper .op-ren.bien{color:color-mix(in srgb,var(--k-verde) 60%,var(--ink));background:color-mix(in srgb,var(--k-verde) 14%,transparent)}
#oper .op-ren.mal{color:color-mix(in srgb,var(--k-salmon) 60%,var(--ink));background:color-mix(in srgb,var(--k-salmon) 14%,transparent)}
/* Las pólizas nuevas: columnas que suben desde su base; el año en curso, tenue. */
#oper .op-cols{display:flex;align-items:flex-end;gap:18px;height:230px;padding-top:6px}
#oper .op-cols .col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;outline:none}
#oper .op-cols b{font-family:var(--rma-serif);font-weight:400;font-size:24px;color:var(--ink)}
#oper .op-cols i{display:block;width:100%;height:calc(var(--h) * .72);min-height:4px;border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-verde) 70%,var(--rma-blanco)),color-mix(in srgb,var(--k-verde) 80%,var(--ink)));
  transform-origin:center bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
#oper .op-cols .hoy i{opacity:.45}
#oper .op-cols .hoy b{color:color-mix(in srgb,var(--k-verde) 70%,var(--ink))}
#oper .op-cols span{font-size:12px;color:var(--soft)}
.br-listo #oper .op-cols.br-r:not(.br-ve) i{transform:scaleY(0)}
/* Las listas: cada una con su tono; al pasar el cursor se llena. */
#oper .op-lista{margin:0 0 10px;border-radius:16px;border:1px solid color-mix(in srgb,var(--k) 35%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 15%,var(--card)),color-mix(in srgb,var(--k) 3%,var(--card)));transition:background .42s}
#oper .op-lista:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--k) 24%,var(--card)),color-mix(in srgb,var(--k) 8%,var(--card)))}
#oper .op-lista > summary{padding:14px 18px;font-size:14.5px;color:var(--ink)}
#oper .op-lista > summary::marker{color:color-mix(in srgb,var(--k) 60%,var(--ink))}
#oper .op-lista[open] > :not(summary){margin:0 14px 14px}
@media (max-width:600px){
  #oper .op-urg .n{font-size:40px}
  #oper .op-hero .n{font-size:46px}
  #oper .op-donay{justify-content:center}
  #oper .op-pila-ren{grid-template-columns:minmax(0,1fr) auto}
  #oper .op-pila-ren .et{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  #oper .op-urg button,#oper .op-hall li::before,#oper .op-svg path.barra,#oper .op-dona .seg,#oper .op-aro .seg,#oper .op-cols i,#oper .op-lista{transition:none}
  #oper .op-urg button:hover{transform:none}
}