/* Safe House Client Center — estilos. Movil primero; el mismo lenguaje visual
   de las paginas del cliente del AMS (functions/collect-payment.js): azul
   cobalto, degradado de la marca, Plus Jakarta Sans servida desde aqui (ningun
   tercero se entera de quien abre la pagina). Sin estilos en linea: la CSP no
   los permite. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
src:url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
src:url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box}
:root{
  --ink:#0B1B3A;--ink2:#3C4C69;--mut:#5B6B86;--mut2:#64748B;--faint:#98A2B3;
  --blue:#1B4FD8;--blued:#12326E;--bluebg:#EEF3FC;
  --line:rgba(11,27,58,.12);--line2:rgba(11,27,58,.08);
  --bg:#F4F7FB;--card:#FFFFFF;
  --ok:#027A48;--okbg:#ECFDF3;--okline:#A6F4C5;
  --warn:#B54708;--warnbg:#FFFAEB;--warnline:#FEDF89;
  --bad:#B42318;--badbg:#FEF3F2;--badline:#FECDCA;
  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:16px;--shadow:0 1px 2px rgba(11,27,58,.05),0 8px 24px rgba(11,27,58,.06);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 15px/1.55 var(--f);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:var(--blue);font-weight:700;text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.015em}
p{margin:0}
.hide{display:none!important}
/* (Ronda 9) El atributo hidden ESCONDE aunque la clase diga display (el .btn es inline-flex:
   "Verificar" seguia a la vista con el codigo muerto). */
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* El "saltar al contenido" se VE cuando recibe el foco (teclado). */
.skip:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;margin:0;padding:12px 16px;clip:auto;overflow:visible;white-space:normal;
  z-index:100;background:#fff;color:var(--blue);border-radius:12px;box-shadow:var(--shadow);font:800 14px var(--f)}
/* El titulo y <main> reciben el foco al cambiar de pantalla / "saltar al
   contenido" (lectores de pantalla): sin aro. */
#titulo:focus,main:focus{outline:none}
/* El texto de respaldo mientras carga la pagina (y si algo falla): con el telefono. */
.fallback{max-width:460px;margin:48px auto;padding:0 20px;text-align:center;color:var(--ink2);font:600 15px/1.6 var(--f)}
.fallback .btn{margin-top:16px}
/* El enlace de volver queda sobre el degradado oscuro: blanco. */
.volver{color:#fff;min-height:44px;display:inline-flex;align-items:center}
/* Listas de enlaces (legales): uno por renglon, con area de toque de 44 px. */
.links{list-style:none;margin:0;padding:0}
.links li a{display:flex;align-items:center;min-height:44px}
/* Una tarjeta que pide algo al cliente (confirmar el correo nuevo). */
.card.attn{border:1.5px solid var(--warnline);background:var(--warnbg)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
/* Sobre el degradado oscuro, el aro claro (el azul no se ve ahi). #7AA2FF sobre
   blanco daba ~2.5:1 (el minimo es 3:1): cada fondo con el suyo. */
.top :focus-visible{outline-color:#A8C1FF}
/* Enlaces de texto sueltos ("¿Olvidaste tu contraseña?", "Atras"…): area de toque de 44 px. */
.lnk{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Barra y encabezado ── */
.top{position:relative;background:linear-gradient(150deg,#1546A8 0%,#0B1B3A 72%);color:#fff;overflow:hidden}
.top:before{content:'';position:absolute;inset:-130px -60px auto;height:330px;pointer-events:none;
  background:radial-gradient(50% 60% at 60% 0%,rgba(90,141,239,.46) 0%,rgba(11,27,58,0) 74%)}
.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1080px;margin:0 auto;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;min-height:44px}
.brand:hover{text-decoration:none}
.brand img{width:118px;height:auto;display:block;filter:brightness(0) invert(1)}
.brand .cc{font:700 11px var(--f);letter-spacing:.14em;text-transform:uppercase;opacity:.85;border-left:1px solid rgba(255,255,255,.35);padding-left:10px}
/* A 360 px (el Android mas comun) logo + "CLIENT CENTER" + EN/ES + ☰ no caben:
   el boton del menu quedaba cortado (.top esconde el desborde). */
@media (max-width:399px){.brand .cc{display:none}}
.barr{display:flex;align-items:center;gap:8px}
.lang{display:flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.34);border-radius:999px}
.lang button{border:0;border-radius:999px;min-width:44px;min-height:44px;padding:0 10px;font:700 11.5px var(--f);letter-spacing:.05em;cursor:pointer;background:transparent;color:rgba(255,255,255,.92)}
.lang button[aria-pressed="true"]{background:#fff;color:var(--blue)}
.menubtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.menubtn svg{width:22px;height:22px}
.nav{display:none;position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 12px 10px;gap:4px;flex-wrap:wrap}
.nav.open{display:flex;flex-direction:column}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:rgba(255,255,255,.9);font:700 14px var(--f)}
.nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav a[aria-current="page"]{background:#fff;color:var(--blue)}
.nav .out{color:#FFD6D1}
.hero{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:6px 20px 64px}
.hero .eyebrow{font:800 10.5px var(--f);letter-spacing:.2em;text-transform:uppercase;color:#A8C1FF}
.hero h1{margin-top:6px;font:800 26px/1.2 var(--f);color:#fff}
/* (Ronda 12, UX B8) Con el texto al doble, una palabra larga ("Consentimiento", "documentos") ya no se corta en el
   borde (.top esconde el desborde) ni se sale de la tarjeta: se parte con guion. */
/* (Ronda 13, UX B3) …pero sin partir palabras normales en dos letras ("códi-go", "contrase-ña"): solo palabras de 10+
   letras, con 4 de cada lado; la marca nunca ("Safe House Insu-rance"). */
/* (Ronda 14, UX B7) 6 3 3: con 10 4 4 una palabra de 6-9 letras que no cabia (texto al doble, 280 px) se cortaba SIN
   guion donde cayera ("mandam|os"); con 3 de cada lado siguen sin salir "códi-go" ni "contrase-ña". */
.hero h1,.card h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3}
.marca,[lang="en"].marca{-webkit-hyphens:manual;hyphens:manual}
.hero p{margin-top:6px;color:rgba(255,255,255,.82);font-size:14.5px;max-width:560px}
.wm{position:absolute;right:-40px;top:-30px;width:220px;opacity:.1;pointer-events:none;user-select:none;z-index:0}

/* ── Contenido ── */
main{position:relative;z-index:3;max-width:1080px;margin:-44px auto 0;padding:0 14px 48px}
/* (Ronda 5, UX) minmax(0,1fr): la columna NO crece con el contenido — el
   calendario de pagos (montos sin partir) empujaba la pagina a 290 px en 280 y a
   515 en 360 con el texto al doble; ahora se desplaza DENTRO de su caja. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* En el telefono las dos columnas se apilan: el mismo espacio entre ellas que entre tarjetas. */
.cols>*+*{margin-top:14px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card h2{font:800 17px/1.3 var(--f)}
.card h3{font:800 15px/1.3 var(--f)}
.card .sub{color:var(--mut);font-size:13.5px;margin-top:4px}
.narrow{max-width:460px;margin:0 auto}
.stack>*+*{margin-top:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.center{justify-content:center}
/* flex-wrap: a 280 px la etiqueta ("Renovación pendiente") baja de renglon en vez de salirse. */
.between{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.muted{color:var(--mut)}
.small{font-size:12.5px}
.sec-title{font:800 12px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:22px 4px 10px}

/* ── Formularios ── */
label.f{display:block;font:700 13px var(--f);color:var(--ink2);margin-bottom:6px}
.in{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:16px;transition:border-color .15s}
.in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,79,216,.14)}
.in[aria-invalid="true"]{border-color:var(--bad)}
.pw{position:relative}
.pw .in{padding-right:84px}
.pw button{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:44px;min-width:60px;padding:0 10px;border:0;border-radius:8px;background:var(--bluebg);color:var(--blue);font:700 12px var(--f);cursor:pointer}
.otp{letter-spacing:.5em;text-align:center;font:800 26px var(--f);padding-left:.5em}
@media (max-width:399px){.otp{letter-spacing:.3em;padding-left:.3em}}
.chk{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-size:14px;color:var(--ink2)}
.chk input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--blue)}
/* (Ronda 9, UX B12) A 280 px con texto x2 "(consentimien|to E-SIGN)" se cortaba donde caia:
   con guion (la pagina pone lang). */
.chk span{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.hint{font-size:12.5px;color:var(--mut);margin-top:6px}
.req{list-style:none;padding:0;margin:8px 0 0;font-size:12.5px;color:var(--mut)}
.req li:before{content:'○ ';color:var(--faint)}
.req li.ok{color:var(--ok)}
.req li.ok:before{content:'● ';color:var(--ok)}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;max-width:100%;text-align:center;overflow-wrap:anywhere;border-radius:12px;border:1.5px solid transparent;font:800 14.5px var(--f);cursor:pointer;text-decoration:none;transition:filter .15s,background .15s}
.btn:hover{text-decoration:none;filter:brightness(1.04)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(27,79,216,.25)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--blue)}
.btn.danger{background:var(--bad);color:#fff}
.btn.block{width:100%}
.btn.sm{min-height:44px;padding:0 14px;font-size:13.5px}
.linkbtn{background:none;border:0;padding:10px 4px;min-height:44px;color:var(--blue);font:700 14px var(--f);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
/* (Ronda 5, UX) Tantas columnas como QUEPAN: con el texto al doble, una sola —
   con "1fr 1fr" el telefono (que no se parte) se comia la otra columna y el
   texto quedaba letra por letra. Con texto normal: 2 a 360/390 y 4 a 768. */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5em),1fr));gap:8px;margin-top:14px}
.actions .btn{min-height:46px;font-size:13px;padding:0 10px;text-align:center}

/* ── Avisos ── */
.msg{padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5;border:1px solid;overflow-wrap:break-word}
/* (Ronda 8, UX B2) Un correo largo no se sale de la tarjeta con el texto grande. */
.card p{overflow-wrap:break-word}
.msg.err{background:var(--badbg);border-color:var(--badline);color:var(--bad)}
.msg.ok{background:var(--okbg);border-color:var(--okline);color:var(--ok)}
.msg.info{background:var(--bluebg);border-color:rgba(27,79,216,.2);color:var(--blued)}
.msg.warn{background:var(--warnbg);border-color:var(--warnline);color:var(--warn)}
.offline{position:sticky;top:0;z-index:50;background:#101828;color:#fff;text-align:center;padding:8px 12px;font:700 13px var(--f)}
/* La region viva existe siempre; sin texto no se ve (con texto, se anuncia). */
.offline:empty{display:none}
/* Un aviso arriba del contenido (salir sin red, algo inesperado). */
.arriba{margin-bottom:14px}

/* ── Polizas ── */
.pol{position:relative}
.pol .carrier{font:800 18px/1.25 var(--f)}
.pol .lob{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f);color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.pill{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;font:800 11.5px var(--f);white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okline)}
.pill.warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnline)}
.pill.bad{background:var(--badbg);color:var(--bad);border:1px solid var(--badline)}
.pill.gray{background:#F2F4F7;color:var(--mut);border:1px solid var(--line2)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5em),1fr));gap:10px 14px;margin-top:14px}
.kv div{min-width:0}
.kv .full{grid-column:1/-1}
/* (Ronda 4, UX: con el texto grande del telefono, "(COMPREHENSIVE)" y los montos
   se salian y se cortaban.) (Ronda 6, UX B13: con dos columnas FIJAS y "anywhere"
   se partian a media palabra — "DEDUCIB/LE": las columnas bajan a una cuando no
   caben y solo se parte una palabra que de verdad no cabe.) */
.kv dt,.kv .k{font:700 11px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.kv dd,.kv .v{margin:2px 0 0;font:700 14px var(--f);color:var(--ink);overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.alert{border-radius:var(--r);padding:16px;border:1px solid var(--warnline);background:var(--warnbg)}
.alert.bad{border-color:var(--badline);background:var(--badbg)}
.alert h3,.alert h2.alert-t{font:800 15.5px/1.3 var(--f);color:var(--warn);margin:0}
.alert.bad h3,.alert.bad h2.alert-t{color:var(--bad)}
.alert ul{margin:8px 0 0;padding-left:18px;color:var(--ink2);font-size:14px}
.alert p{margin-top:6px;color:var(--ink2);font-size:14px}
/* Informativa (el cliente pidio cancelar, o la poliza se reemplaza): azul, nunca rojo. */
.alert.info{border-color:rgba(27,79,216,.2);background:var(--bluebg)}
.alert.info h3,.alert.info h2.alert-t{color:var(--blued)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:700 11px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:8px 6px;border-bottom:1px solid var(--line2);overflow-wrap:break-word}
/* (Ronda 5, UX) break-word, no anywhere: "anywhere" (ronda 4) partia montos y
   dias ("$220.0 / 0", "Marte/s") ya a 280 px. */
.tbl td{padding:10px 6px;border-bottom:1px solid var(--line2);vertical-align:top;overflow-wrap:break-word}
/* El calendario de pagos (3 columnas) se desplaza DENTRO de su caja con texto muy grande. */
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblscroll:focus-visible{outline:3px solid var(--focus,#1B4FD8);outline-offset:2px}
/* Un numero de telefono no se parte en dos renglones ("(877) 996-" / "2874"). */
.nw{white-space:nowrap}
/* La linea de impresion (fecha y "no sustituye…"): solo en papel. */
.print-note{display:none}
.tbl td:last-child{text-align:right;font-weight:800}
/* El encabezado de la ultima columna, alineado con sus montos (ronda 3). */
.tbl th:last-child{text-align:right}
.veh{border:1px solid var(--line2);border-radius:14px;padding:14px}
.veh+.veh{margin-top:10px}
.veh .ic{flex:none;display:inline-flex;width:24px;height:24px;color:var(--blue)}
.veh .ic svg{width:24px;height:24px}
.vic{margin-top:12px}
/* flex-wrap: en un telefono chico el boton baja de renglon (antes el titulo
   quedaba en ~65 px: "Progressi/ve"). */
.doc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line2)}
.doc>.btn{margin-left:auto}
.doc:last-child{border-bottom:0}
.doc .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--bluebg);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.doc .ic svg{width:20px;height:20px}
.doc .t{flex:1 1 140px;min-width:0}
.doc .t b{display:block;font:800 14px/1.35 var(--f);overflow-wrap:break-word}
.doc .t span{font-size:12.5px;color:var(--mut)}
.doc .t .tel{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13.5px;color:var(--ink2)}
.doc .t .tel a{display:inline-flex;align-items:center;min-height:44px}
.empty{text-align:center;padding:26px 12px;color:var(--mut)}
.empty b{display:block;color:var(--ink);font:800 16px var(--f);margin-bottom:4px}
.skel{border-radius:12px;background:linear-gradient(90deg,#EEF2F7 25%,#F7F9FC 50%,#EEF2F7 75%);background-size:200% 100%;animation:sk 1.2s infinite;height:120px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.foot{max-width:1080px;margin:0 auto;padding:10px 20px 36px;color:var(--mut);font-size:12.5px;text-align:center}
.foot a{font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.foot .tel{white-space:nowrap}
/* "Polizas anteriores": area de toque de 44 px. */
summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:800}
.center{text-align:center}
.draftbar{background:#FEF0C7;color:#93370D;border:1px solid #FEC84B;border-radius:12px;padding:10px 12px;font:700 13px var(--f)}
.legal h2{font:800 16px var(--f);margin:18px 0 6px}
.legal>.row{margin-bottom:12px}
.legal p,.legal li{font-size:14.5px;line-height:1.65;color:var(--ink2);overflow-wrap:anywhere}
.legal p+p{margin-top:8px}
.ts{min-height:65px}

/* ── Fase 2: solicitudes, novedades y perfil ── */
.pill.blue{background:var(--bluebg);color:var(--blued);border:1px solid rgba(27,79,216,.2)}
/* La campana (a lo ancho) y su numero; en el telefono, un punto en el ☰. */
.bell{position:relative;display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff}
.bell:hover{text-decoration:none}
.bell .ic{display:inline-flex}
.bell svg{width:21px;height:21px}
.bell .cnt,.nav .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#F04438;color:#fff;font:800 11px var(--f)}
.bell .cnt{position:absolute;top:-6px;right:-6px}
.bell .cnt:empty,.nav .cnt:empty{display:none}
.nav a .cnt{margin-left:8px}
.menubtn{position:relative}
.menubtn.dot:after{content:'';position:absolute;top:7px;right:7px;width:10px;height:10px;border-radius:50%;background:#F04438;border:2px solid #0B1B3A}
@media (min-width:400px){.bell{display:inline-flex}}
/* Una solicitud en la lista: la tarjeta entera es el enlace. */
a.card.rq{display:block;color:var(--ink);font-weight:500}
a.card.rq:hover{text-decoration:none;border-color:rgba(27,79,216,.35)}
a.card.rq h3{font:800 16px/1.3 var(--f);margin-top:2px;overflow-wrap:break-word}
a.card.rq .lob{font:700 12px var(--f);color:var(--mut);letter-spacing:.06em}
.need{margin-top:8px;color:var(--warn);font:800 13.5px var(--f)}
.need:before{content:'● '}
/* Las novedades. */
.nf{list-style:none;margin:0;padding:0}
.nf li{border-bottom:1px solid var(--line2);padding:8px 0}
.nf li:last-child{border-bottom:0}
.nf li a{display:flex;flex-direction:column;min-height:44px;justify-content:center;color:var(--ink)}
.nf li a b{font:800 14px var(--f)}
.nf li a span{font-size:13px;color:var(--mut);font-weight:600}
.nf li.fresh a b:before{content:'● ';color:var(--blue)}
/* Un documento pedido. */
.rqdoc{border:1px solid var(--line2);border-radius:14px;padding:14px}
.rqdoc>*+*{margin-top:10px}
.rqdoc h3{overflow-wrap:break-word;min-width:0;flex:1 1 12em}
.files{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2)}
.files li{overflow-wrap:anywhere}
.files li+li{margin-top:4px}
/* La historia: la mas reciente arriba. */
.hist{list-style:none;margin:0;padding:0}
.hist li{position:relative;padding:0 0 14px 18px;border-left:2px solid var(--line)}
.hist li:last-child{padding-bottom:0}
.hist li:before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.hist li.yo:before{background:var(--ok)}
.hist .when{display:block;font-size:12px;color:var(--mut);font-weight:600}
.hist b{display:block;font:800 14px/1.4 var(--f);overflow-wrap:break-word}
.cita{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
/* El asistente: opciones grandes (44 px o mas), un paso por pantalla. */
.eyebrow-step{font:800 11px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
fieldset.opts{border:0;margin:0;padding:0;min-width:0}
fieldset.opts legend{font:800 12px var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:0;margin:14px 0 6px}
.opt{display:flex;gap:12px;align-items:flex-start;min-height:52px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}
.opt+.opt{margin-top:8px}
.opt input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--blue)}
.opt span{min-width:0;overflow-wrap:break-word}
.opt b{display:block;font:800 14.5px/1.35 var(--f)}
.opt .sub{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
.opt:has(input:checked){border-color:var(--blue);background:var(--bluebg)}
.between-row{justify-content:space-between}
.kv.lista{grid-template-columns:minmax(0,1fr)!important}
.between-row .btn.primary:only-child{margin-left:auto}
textarea.in{min-height:96px;resize:vertical;line-height:1.5}
select.in{appearance:auto}
.ferr{margin-top:6px;color:var(--bad);font:700 13px var(--f)}
.ferr:before{content:'⚠ '}
.btn.danger-t{color:var(--bad);border-color:var(--badline)}
details>summary+*{margin-top:8px}

/* (Fase 3) El chat: burbujas (las mias a la derecha, en azul), avisos del sistema al centro, la lista con su propio
   scroll (la pagina no salta) y lo que se escribe abajo. El texto del cliente y del agente se parte donde haga falta
   (un enlace largo no saca la burbuja de la pantalla) y conserva sus saltos de linea. */
.chat{min-width:0}
.chat-box{position:relative;border:1px solid var(--line2);border-radius:14px;background:#FBFCFE;padding:10px}
.chat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(62vh,540px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto}
.chat-list li{max-width:86%;min-width:0;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line2);color:var(--ink);align-self:flex-start;overflow-wrap:anywhere}
.chat-list li.yo{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--blue);border-color:var(--blue);color:#fff}
.chat-list li.sys{align-self:center;max-width:100%;background:transparent;border:0;color:var(--mut);font-size:12.5px;text-align:center;padding:4px 8px}
.chat-list li.pend{opacity:.72}
.chat-list li.fallo{background:var(--badbg);border-color:var(--badline);color:var(--bad)}
.chat-list .quien{display:block;font-size:12px;font-weight:800;margin-bottom:2px}
.chat-list li.yo .quien{color:rgba(255,255,255,.88)}
.chat-list .txt{white-space:pre-wrap;margin:0}
.chat-list .cuando{display:block;font-size:11.5px;margin-top:4px;opacity:.78}
.chat-list li.sys .cuando{margin-top:0}
.chat-list li .btn{margin-top:8px}
.chat-list li.yo .btn.ghost{color:var(--blue)}
.chat-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chat-file .ic{width:20px;height:20px;flex:0 0 auto}
.chat-file .fn{flex:1 1 140px;min-width:0;overflow-wrap:anywhere;font-weight:700}
.chat-list li.yo .chat-file .msg{color:var(--ink)}
.chat-empty{margin:6px 2px;font-size:14px}
.chat-st{margin:0}
.chat-typing{min-height:18px;margin:0;font-size:13px;color:var(--mut)}
.chat-comp textarea.in{min-height:96px;resize:vertical;line-height:1.45}
@media (min-width:720px){
  .hero{padding:10px 24px 70px}
  .hero h1{font-size:32px}
  main{padding:0 24px 56px}
  .kv{grid-template-columns:repeat(auto-fit,minmax(min(100%,11em),1fr))}
}
@media (min-width:1024px){
  .menubtn{display:none}
  .nav{display:flex!important;flex-direction:row;padding:0 12px 12px}
  .nav a{min-height:40px}
  .cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
  .cols>*+*{margin-top:0}
  .kv{grid-template-columns:repeat(auto-fit,minmax(min(100%,11em),1fr))}
}
@media (max-width:479px){
  /* El calendario de pagos: cada pago en su renglon (el encabezado solo para el lector). */
  .tbl.sched thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.sched,.tbl.sched tbody{display:block}
  .tbl.sched tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;border-bottom:1px solid var(--line2);padding:8px 0}
  .tbl.sched td{border:0;padding:2px 0}
  .tbl.sched td:last-child{margin-left:auto}
  .tbl.kvt,.tbl.kvt tbody{display:block}
  .tbl.kvt tr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:12px;border-bottom:1px solid var(--line2);padding:8px 0}
  .tbl.kvt td{border:0;padding:2px 0;min-width:0}
  .tbl.kvt td:last-child{margin-left:auto}
}
@media (max-width:359px){
  /* A 280 px (Fold cerrado) logo + EN/ES + ☰ con 16 px de margen no cabian (288 px). */
  .bar{padding:10px;gap:8px}
  main{padding:0 10px 40px}
  .card{padding:14px}
  .brand img{width:96px}
  .brand .cc{display:none}
  .kv{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:23px}
}
/* Mas angosto que un Fold cerrado (360 dp con la pagina al 150 %): la barra se
   parte en dos renglones antes que cortar el ☰ (ronda 4, UX). */
@media (max-width:279px){
  .bar{flex-wrap:wrap}
  .barr{margin-left:auto}
}
/* Impresion: la poliza impresa lleva la aseguradora, el numero y la vigencia
   (el encabezado, en tinta oscura); la barra, el menu, los botones y el "← Inicio"
   (blanco sobre blanco) no — ronda 3. */
@media print{
  .top{background:none;color:#000;overflow:visible}
  .top:before,.wm,.bar,.nav,.foot,.actions,.volver,.skip,.offline{display:none}
  .hero{padding:0 0 12px}
  .hero .eyebrow,.hero p{color:#333}
  .hero h1{color:#000}
  main{margin:0;padding:0}
  .card{box-shadow:none;break-inside:avoid}
  /* (Ronda 4, UX: salian los botones de descarga; y la hoja no decia de cuando era.) */
  .btn,.linkbtn,.lnk,.lang,.menubtn{display:none!important}
  /* (Ronda 7, UX B11) Los campos de contraseña y sus "Ver" no van al papel. */
  .pw,.noprint{display:none!important}
  /* (Ronda 8, UX B5) El telefono y el correo de la agencia SI van al papel (como texto). */
  a.btn[href^="tel:"],a.btn[href^="mailto:"]{display:block!important;min-height:0;padding:2px 0;border:0;background:none;color:#000;font-weight:700;text-align:left}
  .print-note{display:block;margin-top:18px;font-size:11px;color:#333}
}
/* (Fase 4) La propuesta dentro de la solicitud */
.prop-t{font:800 17px/1.35 var(--f);overflow-wrap:break-word}
.prop-h{font:800 13px var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.prop-sum{white-space:pre-wrap;overflow-wrap:break-word}
.prop-chg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;overflow-wrap:break-word}
.prop-chg>b{display:block;font:800 14px/1.35 var(--f)}
.prop-ba{font-size:14px;margin-top:2px}
.prop-money{margin-top:4px}
.prop-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.prop-steps li{padding:9px 12px;border-radius:10px;background:#F9FAFB;border:1px solid var(--line);font-weight:700;font-size:14px}
.prop-steps li.hecho{background:var(--okbg);border-color:var(--okline);color:var(--ok)}
.prop-conf{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;min-width:0}
fieldset.prop-conf legend{padding:0 4px}