/* JSNH Asistente de Ayudas IA — el expediente, reconquistado. Papel de oficina, tinta, boli azul y sellos de caucho para el tri-estado. ⭐ 26-sep-2026 — REDISEÑO (Jagoba: «el modo oscuro es un poco feo; más bonito, más organizado, más detalle»). Lo que había: tres tokens usados y nunca definidos (--linea, --papel-2, --aviso: sus bordes y fondos NO se pintaban), colores fijos que solo valían en claro (las rayas de lo bloqueado en #F6F6F3 eran barras blancas en oscuro), reglas de 2,5 px en --tinta que en oscuro se volvían líneas blancas, y ninguna elevación: todo el oscuro era un gris plano. Cómo está ordenado ahora: 1. tokens (claro) · 2. oscuro (solo tokens) · 3. base 4. cabecera · 5. conversación · 6. respuestas · 7. panel · 8. diálogos 9. piezas sueltas · 10. portada, cuenta y datos · 11. móvil Reglas del sistema: - Ningún color fuera de los tokens. Un componente nunca se colorea dentro de un bloque de tema: el tema solo redefine tokens. - Elevación por capas (Material, dark theme): papel < alzado < campo. En oscuro la capa de arriba es MÁS CLARA, porque la sombra no se ve. - Acentos desaturados en oscuro (el azul saturado vibra sobre negro). - Radios: 6 (pequeño) · 10 (tarjetas, botones) · 16 (diálogos). El contraste de los dos temas lo mide `ReglaElModoOscuroSeLee`. */ /* ========== 1. TOKENS — tema claro ========== */ :root{ --papel:#F4F4F2; --alzado:#FDFDFB; --campo:#FFFFFF; --tinta:#14181D; --suave:#575C64; --boli:#1B3FAE; --ok:#106B34; --ambar:#8A5D06; --gris:#5A5F66; --rojo:#A3302A; --regla:#E2E2DD; --regla2:#C9CAC3; --trazo:#14181D; --accion:#1B3FAE; --sobre-accion:#FFFFFF; /* ⛔ 22-sep-2026: el botón ENVIAR llevaba `color:#fff` fijo y en oscuro quedaba blanco sobre azul claro (2,24:1). El texto de un botón de color es parte del tema: por eso existe --sobre-accion. */ --sobre-boli:#FFFFFF; --tinte-boli:color-mix(in srgb, var(--boli) 8%, var(--alzado)); --tinte-ok:color-mix(in srgb, var(--ok) 8%, var(--alzado)); --tinte-ambar:color-mix(in srgb, var(--ambar) 9%, var(--alzado)); --sombra-1:0 1px 2px rgba(20,24,29,.06), 0 1px 1px rgba(20,24,29,.03); --sombra-2:0 18px 48px -12px rgba(20,24,29,.28), 0 2px 6px rgba(20,24,29,.06); --velo:rgba(20,24,29,.42); --r-s:6px; --r-m:10px; --r-l:16px; --serif:"Newsreader",Georgia,serif; --grot:"Archivo","Helvetica Neue",Arial,sans-serif; --mono:"Spline Sans Mono","Courier New",monospace; /* alias de nombres viejos que aún usan algunas reglas y el dosier */ --linea:var(--regla2); --papel-2:var(--papel); --aviso:var(--ambar); } /* ========== 2. OSCURO — «azul noche» (27-sep-2026: a juego con el logo) ========== Suelo casi negro con un punto de azul tinta (no gris neutro: el neutro puro es lo que lo hacía parecer apagado). Texto hueso, no blanco: el blanco puro sobre negro vibra. Las capas suben de claridad: papel → alzado → campo. */ :root{color-scheme:light} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --papel:#0B1120; --alzado:#121A2C; --campo:#18223A; --tinta:#EEF1F7; --suave:#A3ADC2; --boli:#8FB0FF; --ok:#6FD6A0; --ambar:#F2C46B; --gris:#98A2B8; --rojo:#F49A90; --regla:#1E2940; --regla2:#2B3854; --trazo:#3D4B6B; --accion:#3F6AE6; --sobre-accion:#FFFFFF; --sobre-boli:#0B1120; --sombra-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4); --sombra-2:0 24px 64px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04); --velo:rgba(3,6,16,.68); } } :root[data-theme="dark"]{ color-scheme:dark; --papel:#0B1120; --alzado:#121A2C; --campo:#18223A; --tinta:#EEF1F7; --suave:#A3ADC2; --boli:#8FB0FF; --ok:#6FD6A0; --ambar:#F2C46B; --gris:#98A2B8; --rojo:#F49A90; --regla:#1E2940; --regla2:#2B3854; --trazo:#3D4B6B; --accion:#3F6AE6; --sobre-accion:#FFFFFF; --sobre-boli:#0B1120; --sombra-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4); --sombra-2:0 24px 64px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04); --velo:rgba(3,6,16,.68); } :root[data-theme="light"]{color-scheme:light} /* ========== 3. BASE ========== */ /* ⛔ 22-sep-2026 («en algunos sale el texto en negro y no se ve»): los controles declaraban `background` y NO `color`, y el navegador ponía su negro sobre el fondo oscuro (1:1). La red va aquí: todo control hereda la tinta del tema. */ input,select,textarea,button{color:var(--tinta)} input::placeholder,textarea::placeholder{color:var(--suave); opacity:1} *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--papel); color:var(--tinta); font-family:var(--serif); font-size:16px; line-height:1.5; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } button{font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent} a{color:var(--boli); text-underline-offset:.18em; text-decoration-thickness:1px} :focus-visible{outline:2.5px solid var(--boli); outline-offset:2px; border-radius:4px} ::selection{background:color-mix(in srgb, var(--boli) 26%, transparent)} /* ⛔ 25-sep-2026: `hidden` lo gana cualquier `display` de una clase (.wizard es grid): el paso del código de «Entrar» se veía antes de mandar nada. */ [hidden]{display:none!important} .visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* botones: una sola familia, tres pesos */ .btn-desbloquear,.btn-informe,.btn-sec,.btn-cerrar,.btn-enviar{ font-family:var(--grot); font-weight:700; letter-spacing:.01em; border-radius:var(--r-m); min-height:44px; padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background-color .15s, border-color .15s, box-shadow .15s, transform .08s; } .btn-desbloquear,.btn-enviar{ background:var(--accion); color:var(--sobre-accion); border:1px solid transparent; font-size:.9rem; box-shadow:var(--sombra-1); } .btn-desbloquear:hover,.btn-enviar:hover{background:color-mix(in srgb, var(--accion) 88%, var(--tinta))} .btn-informe{ background:var(--alzado); color:var(--tinta); border:1px solid var(--regla2); font-size:.88rem; box-shadow:var(--sombra-1); } .btn-informe:hover{border-color:var(--boli); background:var(--tinte-boli)} .btn-sec,.btn-cerrar{ background:transparent; color:var(--tinta); border:1px solid var(--regla2); font-size:.86rem; font-weight:600; } .btn-sec:hover,.btn-cerrar:hover{border-color:var(--tinta)} .btn-cerrar{min-height:38px; padding:7px 14px; font-size:.8rem} .btn-desbloquear:active,.btn-informe:active,.btn-sec:active,.btn-enviar:active,.chip:active{transform:scale(.98)} .btn-desbloquear[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none} /* ========== 4. CABECERA ========== */ .cabecera{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 18px; background:var(--papel); border-bottom:2px solid var(--trazo); flex:none; position:relative; z-index:5; } .wordmark{font-family:var(--grot); font-weight:800; font-size:1.02rem; line-height:1.05; letter-spacing:.01em} .wordmark small{display:block; font-weight:600; font-size:.56rem; margin-top:2px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave)} .cab-der{display:flex; align-items:center; gap:8px} /* los cuatro controles de la cabecera miden lo mismo y se leen como un grupo */ .idioma-sel select,.btn-tema,.privacidad,.btn-cuenta{ height:34px; border-radius:999px; border:1px solid var(--regla2); background:var(--alzado); color:var(--tinta); font-family:var(--grot); } .idioma-sel select{font-size:.82rem; font-weight:600; padding:0 10px} .btn-tema{font-weight:700; font-size:.8rem; padding:0 11px; line-height:1; display:flex; align-items:center; gap:6px; cursor:pointer} .btn-tema .t-txt{font-size:.68rem; letter-spacing:.06em} .btn-tema:hover,.btn-cuenta:hover,.idioma-sel select:hover{border-color:var(--boli)} .privacidad{ font-weight:700; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, var(--regla2)); background:var(--tinte-ok); padding:0 12px; display:flex; align-items:center; gap:7px; } .privacidad .punto{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent)} button.privacidad{cursor:pointer} button.privacidad:hover{border-color:var(--ok)} .btn-cuenta{font-size:.8rem; font-weight:600; padding:0 12px; white-space:nowrap} /* ========== 5. CONVERSACIÓN ========== */ .app{flex:1; display:flex; min-height:0} .chat{flex:1 1 55%; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--regla)} .panel{flex:1 1 45%; min-width:0; overflow-y:auto; padding:18px 20px 40px; background:var(--papel)} /* barra, hitos y dinero (1-5): fina y pegada arriba, sin robarle alto al hilo */ .progreso{flex:none; position:relative; padding:9px 18px 8px; border-bottom:1px solid var(--regla); background:var(--alzado)} .prog-cab{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:7px} .hitos{display:flex; gap:14px; list-style:none; margin:0; padding:0; font-family:var(--grot); font-size:.74rem; font-weight:600; color:var(--gris)} .hito{display:flex; align-items:center; gap:5px} .hito::before{content:""; width:6px; height:6px; border-radius:50%; border:1.5px solid currentColor; flex:none} .hito.actual{color:var(--tinta)} .hito.actual::before{background:var(--boli); border-color:var(--boli)} .hito.hecho{color:var(--ok)} .hito.hecho::before{display:none} /* el hecho ya lleva su «✓» en el texto */ .prog-eur{font-family:var(--grot); font-size:.84rem; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap} .barra{height:5px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--tinta) 10%, transparent)} .barra-llena{height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--boli), color-mix(in srgb, var(--boli) 70%, var(--ok)))} .prog-nota{font-size:.78rem; color:var(--tinta); min-height:0; margin-top:5px} .prog-nota:empty{display:none} .prog-mas{position:absolute; right:18px; top:-2px; font-family:var(--grot); font-size:.8rem; font-weight:700; color:var(--ok); pointer-events:none} @media (prefers-reduced-motion:no-preference){ .barra-llena{transition:width .5s cubic-bezier(.2,.7,.2,1)} .prog-mas{animation:prog-sube 1.8s ease-out forwards} } @keyframes prog-sube{from{opacity:1; transform:translateY(8px)} to{opacity:0; transform:translateY(-10px)}} /* el hilo */ .mensajes{flex:1; overflow-y:auto; padding:22px 18px 10px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth} .msg{max-width:54ch; padding:12px 16px; font-size:.98rem; line-height:1.55; border:1px solid var(--regla); background:var(--alzado); box-shadow:var(--sombra-1)} /* el asistente escribe a máquina en su hoja: filo de tinta a la izquierda */ .msg.asistente{align-self:flex-start; border-left:3px solid var(--trazo); border-radius:3px var(--r-m) var(--r-m) 3px} /* el usuario escribe con boli */ .msg.usuario{ align-self:flex-end; color:var(--boli); background:var(--tinte-boli); border-color:color-mix(in srgb, var(--boli) 30%, var(--regla)); border-radius:var(--r-m) var(--r-m) 3px var(--r-m); font-family:var(--grot); font-weight:600; font-size:.9rem; white-space:pre-line; /* la burbuja de los datos del cuestionario conserva sus saltos */ } .msg .sistema{font-family:var(--grot); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); display:block; margin-bottom:5px} .msg.asistente p{margin:.2rem 0} .msg.asistente ul{margin:.25rem 0 .25rem 1.1rem; padding:0} .msg.asistente li{margin:.15rem 0} .msg.asistente blockquote{margin:.5rem 0; padding:.4rem .8rem; border-left:3px solid var(--regla2); background:color-mix(in srgb, var(--tinta) 5%, transparent); border-radius:0 var(--r-s) var(--r-s) 0} .msg.asistente blockquote p{margin:.2rem 0} /* ⛔ 22-sep-2026: el fade arrancaba en `opacity:0` y, si el navegador congelaba los frames (pestaña en segundo plano, ahorro de batería), el mensaje se quedaba invisible. Se anima solo el desplazamiento: el texto se lee siempre. */ @media (prefers-reduced-motion:no-preference){ .msg{animation:aparecer .2s ease-out} @keyframes aparecer{from{transform:translateY(5px)} to{transform:none}} } .msg.pensando{color:var(--suave); font-style:italic} .msg.pensando .reloj{font-style:normal; font-size:.8em; opacity:.7; margin-left:.4em} @media (prefers-reduced-motion:no-preference){ .msg.pensando{animation:latido 1.4s ease-in-out infinite} @keyframes latido{0%,100%{opacity:.55} 50%{opacity:1}} } .cursor-escribe{display:inline-block; width:.5em; height:1em; background:var(--boli); vertical-align:-.15em; margin-left:.1em; animation:parpadeo 1s steps(2,start) infinite} @keyframes parpadeo{to{visibility:hidden}} /* ========== 6. RESPUESTAS (chips) y caja de texto ========== */ /* ⭐ 22-sep-2026 (Jagoba): «las burbujas en filas organizadas, no a lo loco». Rejilla: mismo alto, alineadas, y lo que no es una opción más (el atajo, el número, «no lo sé») ocupa su propia fila entera. */ .zona-chips{ padding:8px 18px 12px; flex:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(138px, 1fr)); align-items:stretch; gap:8px; } .chip{ font-family:var(--grot); font-weight:600; font-size:.86rem; letter-spacing:.005em; line-height:1.25; color:var(--tinta); background:var(--alzado); border:1px solid var(--regla2); border-radius:var(--r-m); padding:10px 14px; box-shadow:var(--sombra-1); transition:background-color .15s, border-color .15s, color .15s, transform .08s; } .chip:hover{border-color:var(--boli); background:var(--tinte-boli); color:var(--tinta)} .chip.secundario{background:transparent; box-shadow:none; color:var(--suave); border-style:dashed} .chip.secundario:hover{color:var(--tinta); border-color:var(--tinta); background:transparent} .chip.destacado{border-color:var(--boli); color:var(--boli); font-weight:700; background:var(--tinte-boli)} .zona-chips > .chip{display:flex; align-items:center; justify-content:center; text-align:center; min-height:46px; width:100%; margin:0; hyphens:auto; overflow-wrap:anywhere} .zona-chips > .chip-num, .zona-chips > .chip.ancho, .zona-chips > .chip.secundario{grid-column:1 / -1} .chip-num{display:flex; gap:8px; align-items:center} .chip-num input{ font-family:var(--mono); font-size:1rem; width:130px; padding:10px 12px; border:1px solid var(--regla2); background:var(--campo); border-radius:var(--r-m); color:var(--tinta); min-height:46px; } .chip-num input:focus{border-color:var(--boli); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--boli) 22%, transparent)} .zona-chips > .chip-num input{flex:1 1 auto; width:auto; min-width:0} .zona-chips > .chip-num .chip{min-height:46px; flex:0 0 auto} .chip-num .unidad{font-family:var(--grot); font-size:.75rem; color:var(--suave); font-weight:700} /* ⛔ 22-sep-2026: «Vale» con el campo vacío no daba ninguna señal */ .chip-num.pide-dato{animation:pide-dato .45s ease-out} .chip-num.pide-dato input{border-color:var(--ambar); box-shadow:0 0 0 3px color-mix(in srgb, var(--ambar) 30%, transparent)} @keyframes pide-dato{0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}} @media (min-width:560px){ .zona-chips{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))} } /* en pantallas cortas la zona de respuestas tiene techo: el hilo siempre se ve */ @media (max-height:720px){ .zona-chips{max-height:38vh; overflow-y:auto} } .entrada{display:flex; gap:8px; padding:10px 18px 14px; border-top:1px solid var(--regla); background:var(--papel); flex:none} .entrada input{ /* ⛔ min-width:0 NO es opcional: sin él, en 375 px el input empujaba ENVIAR fuera */ flex:1 1 0; min-width:0; font-family:var(--serif); font-size:1rem; padding:11px 14px; border:1px solid var(--regla2); background:var(--campo); border-radius:var(--r-m); color:var(--tinta); } .entrada input:focus{border-color:var(--boli); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--boli) 22%, transparent)} .btn-enviar{font-weight:800; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; padding:0 18px; flex:none; white-space:nowrap} .btn-adjuntar{ display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.2rem; width:46px; border:1px solid var(--regla2); background:var(--alzado); border-radius:var(--r-m); flex:none; } .btn-adjuntar:hover{border-color:var(--boli)} /* 19-sep: el texto libre es del asistente, que va con suscripción */ body:not(.con-asistente) .entrada{display:none} /* ========== 7. PANEL (resultados) ========== */ .contadores{ display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:16px; background:var(--alzado); border:1px solid var(--regla2); border-top:3px solid var(--trazo); border-radius:var(--r-s) var(--r-s) var(--r-m) var(--r-m); box-shadow:var(--sombra-1); } .contadores .c{padding:12px 14px; border-right:1px solid var(--regla)} .contadores .c:last-child{border-right:0} .contadores .n{font-family:var(--mono); font-weight:600; font-size:1.55rem; line-height:1.1; font-variant-numeric:tabular-nums} .contadores .n small{font-size:.55em} .contadores .l{font-family:var(--grot); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); margin-top:4px} .contadores .c.dinero .n{color:var(--ok)} .grupo{margin-bottom:22px} /* la pestaña del expediente: un filo de tinta y el rótulo en versalitas */ .grupo>h2, #subvenciones>h2{ font-family:var(--grot); font-weight:800; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--suave); border-top:2px solid var(--trazo); padding-top:9px; margin:0 0 12px; display:flex; justify-content:space-between; gap:10px; } #subvenciones>.detalle-txt{font-size:.8rem; color:var(--suave); margin:0 0 10px} .tarjetas{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)} /* 5-oct: una tarjeta ancha ensanchaba todas (revisión B, B2) */ .tarjeta{ border:1px solid var(--regla2); background:var(--alzado); padding:13px 15px; display:grid; gap:7px; cursor:pointer; text-align:left; width:100%; font-family:var(--serif); border-radius:var(--r-m); box-shadow:var(--sombra-1); transition:border-color .15s, transform .12s, box-shadow .15s; } .tarjeta:hover{border-color:var(--boli)} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .tarjeta:not(.subv):hover{transform:translateY(-1px)} } .tarjeta .fila{display:flex; justify-content:space-between; gap:12px; align-items:baseline} .tarjeta h3{margin:0; font-size:1rem; font-weight:600; line-height:1.3; text-wrap:pretty} .tarjeta .importe{font-family:var(--mono); font-weight:600; white-space:nowrap; font-size:.98rem; font-variant-numeric:tabular-nums} .tarjeta .importe small{color:var(--suave); font-weight:500} .tarjeta .detalle-txt{font-size:.84rem; color:var(--suave); margin:0; line-height:1.45} .tarjeta .fuente{font-family:var(--grot); font-size:.72rem; color:var(--suave); border-top:1px dotted var(--regla2); padding-top:6px} /* 7-oct-2026 (J-0075): «Comprobada contra · », discreta, bajo la fuente */ .tarjeta .comprobada{font-family:var(--grot); font-size:.68rem; color:var(--suave); margin-top:-4px} .detalle .fuente-d .comprobada a{color:var(--boli)} .tarjeta .no-suma{font-family:var(--grot); font-size:.66rem; font-weight:700; color:var(--ambar)} .tarjeta .bases{font-family:var(--grot); font-weight:700; font-size:.74rem; color:var(--boli); display:inline-block; padding-block:10px} /* 5-oct: 18 px de alto era poco para un dedo (revisión D, M6) */ .tarjeta.subv{cursor:default} .tarjeta.subv:hover{border-color:var(--regla2); transform:none} .tarjeta.subv.apagada{opacity:.62} /* lo bloqueado: rayado muy tenue, que se lea «cerrado» sin gritar */ .tarjeta.bloqueada{border-style:dashed; box-shadow:none; background:repeating-linear-gradient( -45deg, var(--alzado), var(--alzado) 12px, color-mix(in srgb, var(--tinta) 4%, var(--alzado)) 12px, color-mix(in srgb, var(--tinta) 4%, var(--alzado)) 13px)} .tarjeta.bloqueada h3{color:var(--suave); letter-spacing:.02em} /* el sello de caucho: tinta del color, un poco torcido, con su huella de fondo */ .sello{ display:inline-block; font-family:var(--grot); font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; line-height:1; border:2px solid currentColor; border-radius:4px; padding:5px 8px 4px; box-shadow:inset 0 0 0 1px currentColor; transform:rotate(-2deg); background:color-mix(in srgb, currentColor 7%, transparent); white-space:nowrap; justify-self:start; } .sello.ok{color:var(--ok)} .sello.posible{color:var(--boli)} .sello.alcance{color:var(--ambar)} .sello.no{color:var(--gris)} .ventana-txt{color:var(--ambar)} .ventana-txt b{font-family:var(--mono); font-weight:600} details.descartadas{border:1px dashed var(--regla2); border-radius:var(--r-m); background:transparent} details.descartadas summary{ cursor:pointer; padding:12px 14px; font-family:var(--grot); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--suave); list-style:none; } details.descartadas summary::-webkit-details-marker{display:none} details.descartadas summary::before{content:"▸ "; display:inline-block; transition:transform .15s} details.descartadas[open] summary::before{transform:rotate(90deg)} details.descartadas .tarjetas{padding:0 10px 10px} details.descartadas .tarjeta{opacity:.75; box-shadow:none} /* B7 (21-sep): posibles agrupadas por el dato que falta */ .subgrupo{margin:.7rem 0 .3rem} .subgrupo h4{font-size:.84rem; font-weight:500; color:var(--suave); margin:.5rem 0 .4rem; display:flex; justify-content:space-between; gap:.5rem; border-bottom:1px dashed var(--regla2); padding-bottom:.25rem} .subgrupo h4 b{font-weight:600; color:var(--tinta)} .subgrupo h4 span{font-family:var(--grot); font-size:.72rem; white-space:nowrap} /* acciones del panel: pagar, dosier, calendario, ¿y si…? */ /* flex y no rejilla: un botón que se queda solo en su fila ocupa la fila entera */ #acciones-panel{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px} #acciones-panel:empty{display:none} #acciones-panel > *{flex:1 1 calc(50% - 4px)} #acciones-panel > .btn-informe:first-child, #acciones-panel > .btn-desbloquear{flex-basis:100%} /* ⛔ 2-oct-2026, visto a 375 px tras pagar: «¿Y si…?» era una casilla más de la fila y estiraba la «Versión corta» a 190 px de alto, con las opciones una debajo de otra. Va en su propia fila. */ #acciones-panel > .y-si{flex:1 1 100%} #acciones-panel > *{align-self:flex-start} #acciones-panel .btn-desbloquear{min-height:48px; font-size:.92rem} #acciones-panel .btn-sec{margin-top:.2rem} .btn-informe.sec{font-size:.82rem; color:var(--suave)} .gratis-auto{font-family:var(--grot); font-size:.66rem; font-weight:700; color:var(--ok)} .y-si{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; width:100%; margin-top:.4rem; grid-column:1 / -1} /* 23-sep: en la rejilla de 2 columnas estiraba a «Versión corta» */ .y-si-t{font-family:var(--grot); font-size:.78rem; font-weight:600; color:var(--suave); margin-right:.2rem} .chip-ysi{font-size:.8rem; padding:7px 12px; min-height:0} .cambio ul{margin:.2rem 0 .2rem 1rem; padding:0} /* suscripción al asistente */ .sus .sus-intro{font-size:.96rem; line-height:1.55; margin:.4rem 0 .9rem} .sus-lista{list-style:none; padding:0; margin:0 0 .9rem; display:flex; flex-direction:column; gap:.5rem} .sus-lista li{border:1px solid var(--regla2); background:var(--alzado); padding:.65rem .8rem; display:flex; flex-direction:column; gap:.15rem; border-radius:var(--r-m)} .sus-lista li b{font-size:.96rem} .sus-lista li span{font-size:.86rem; color:var(--suave); line-height:1.45} .sus-pie{font-family:var(--grot); font-size:.74rem; letter-spacing:.02em; color:var(--suave); margin-bottom:.7rem} /* la casa (unidad familiar por tarjetas, 19-sep) */ .grupo.casa{border-top:2px solid var(--trazo)} .grupo.casa .cuenta{font-family:var(--grot); font-size:.68rem; color:var(--suave); margin-left:.5rem; text-transform:none; letter-spacing:.04em} .casa-yo{font-family:var(--grot); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); margin:.3rem 0 .4rem} .casa-lista{display:flex; flex-direction:column; gap:.5rem} .casa-t{border:1px solid var(--regla2); background:var(--alzado); padding:.65rem .8rem; border-radius:var(--r-m); box-shadow:var(--sombra-1)} .casa-t.fuera{border-style:dashed; box-shadow:none} .casa-cab{display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:baseline; margin-bottom:.4rem} .casa-cab .casa-dato{font-weight:600; font-size:.92rem} .casa-vinc,.casa-fuera{font-family:var(--grot); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)} .casa-datos{display:flex; flex-wrap:wrap; gap:.35rem} .casa-dato{font:inherit; font-size:.8rem; background:var(--papel); border:1px solid var(--regla2); border-radius:999px; padding:.2rem .65rem; cursor:pointer; color:var(--tinta)} .casa-dato:hover{border-color:var(--boli); color:var(--boli)} .casa-dato.vacio{border-style:dashed; color:var(--suave); background:transparent} .casa-pie{margin-top:.5rem} .casa-pie .lnk{font:inherit; font-size:.82rem; background:none; border:0; padding:0; color:var(--boli); text-decoration:underline; cursor:pointer} /* el plan: qué hacer, en qué orden, con qué papeles */ .grupo.plan{border-top:2px solid var(--trazo)} .plan-res{font-size:.96rem; font-weight:600; margin:.4rem 0 1rem} .plan-pasos{list-style:none; padding:0; margin:.3rem 0 1.1rem} .plan-pasos > li{margin-bottom:.8rem; line-height:1.5; font-size:.92rem} .plan-pasos > li.paso{border:1px solid var(--regla2); background:var(--alzado); padding:.85rem .95rem; margin-bottom:.65rem; border-radius:var(--r-m); box-shadow:var(--sombra-1)} .plan-pasos .auto{font-family:var(--grot); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); border:1px solid var(--regla2); padding:.1rem .4rem; border-radius:4px} .paso-cab{display:flex; gap:.65rem; align-items:flex-start} .paso-n{flex:none; width:1.65rem; height:1.65rem; border-radius:50%; background:var(--tinta); color:var(--papel); font-family:var(--grot); font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; justify-content:center} .paso-tit{flex:1; display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:baseline} .paso-imp{font-family:var(--mono); font-weight:600; color:var(--ok); font-size:.9rem} .paso-l{font-size:.85rem; line-height:1.45; margin-top:.5rem; padding-left:.6rem; border-left:2px solid var(--regla2)} .paso-l.bien{border-left-color:var(--ok)} .paso-acc{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.6rem; font-size:.8rem} .paso-acc a,.paso-acc .lnk{font-family:var(--grot); font-weight:600; letter-spacing:.02em; color:var(--boli); background:none; border:0; padding:0; cursor:pointer; font-size:.8rem; text-decoration:underline} .paso-est{display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; font-size:.85rem; color:var(--suave)} .paso-est select,.paso-est input{font-size:.85rem; padding:4px 8px; background:var(--campo); border:1px solid var(--regla2); border-radius:var(--r-s)} .pq{font-size:.86rem; line-height:1.45; margin-top:.3rem; padding-left:.6rem; border-left:2px solid var(--regla2); color:var(--tinta)} .donde{font-size:.8rem; color:var(--suave); margin-top:.25rem} .plan-sub{font-size:.8rem; color:var(--suave); margin:.2rem 0 .35rem} .plan-docs{list-style:none; padding:0; margin:.3rem 0 .8rem} .plan-docs > li{padding:.55rem .7rem; border:1px solid var(--regla2); background:var(--alzado); margin-bottom:.4rem; font-size:.9rem; border-radius:var(--r-s)} .plan-docs > li.caduca{border-left:3px solid var(--ambar)} .plan-docs > li.opcional > b{font-weight:500; color:var(--suave)} .plan-docs .vale{font-family:var(--grot); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; background:var(--tinta); color:var(--papel); padding:.12rem .4rem; margin-left:.35rem; border-radius:3px} .dm{font-size:.8rem; color:var(--suave); margin-top:.2rem; line-height:1.4} .plan-grupo{border:1px solid var(--regla2); border-radius:var(--r-m); margin-bottom:.45rem; background:var(--alzado)} .plan-grupo summary{cursor:pointer; padding:.6rem .75rem; font-size:.88rem} .plan-grupo .cuenta{font-family:var(--grot); font-size:.68rem; color:var(--suave); margin-left:.3rem} .plan-grupo .plan-docs{margin:0 .5rem .5rem} .aviso-cad{color:var(--ambar)} /* atribución de la BDNS — no es decoración: el aviso legal del SNPSAP obliga */ .atribucion{margin-top:.9rem; padding-top:.6rem; border-top:1px solid var(--regla2); font-size:.78rem; line-height:1.5; color:var(--suave)} /* lectura de bases reguladoras: aquí el sello dice «cumples 3 de 3», nunca «te corresponde» */ .lectura{margin:.6rem 0 .4rem; padding:.6rem .75rem; background:var(--papel); border-left:3px solid var(--regla2); border-radius:0 var(--r-s) var(--r-s) 0} .lectura .sello{font-size:.64rem; padding:.2rem .45rem; border-width:1px; box-shadow:none} .lectura .sello.si{color:var(--ok)} .lectura .sello.no{color:var(--suave)} .lectura .sello.falta{color:var(--ambar)} .l-no,.l-falta{font-size:.85rem; line-height:1.45; margin:.4rem 0 0} .l-mas{margin-top:.4rem; font-size:.85rem} .l-mas summary{cursor:pointer; color:var(--suave)} .l-mas ul{margin:.3rem 0 0 .2rem; padding-left:1rem; line-height:1.5} .l-aviso{font-size:.76rem; color:var(--suave); margin-top:.5rem; line-height:1.45} /* ========== 8. DIÁLOGOS ========== */ .detalle{ border:1px solid var(--regla2); background:var(--alzado); color:var(--tinta); max-width:640px; width:calc(100vw - 32px); padding:0; max-height:86vh; border-radius:var(--r-l); box-shadow:var(--sombra-2); } .detalle::backdrop{background:var(--velo); backdrop-filter:blur(2px)} .detalle .cuerpo-d{padding:22px 22px 26px; overflow-y:auto; max-height:calc(86vh - 2px)} /* -2px: el borde; sin eso, dos scrolls */ .detalle h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.25; margin:8px 0 4px; text-wrap:balance} .detalle .org{font-family:var(--grot); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)} .detalle .req{list-style:none; margin:14px 0; padding:0; display:grid; gap:8px} .detalle .req li{display:grid; grid-template-columns:20px 1fr; gap:9px; font-size:.92rem; align-items:baseline} .detalle .req .e{font-family:var(--mono); font-weight:600} .detalle .req .e.si{color:var(--ok)} .detalle .req .e.no{color:var(--rojo)} .detalle .req .e.falta{color:var(--ambar)} .detalle .trampa{border:1px solid var(--regla2); border-radius:var(--r-s); margin-bottom:8px} .detalle .trampa summary{cursor:pointer; padding:10px 12px; font-size:.86rem; font-weight:600; list-style:none} .detalle .trampa div{padding:0 12px 10px; font-size:.86rem; color:var(--suave)} .detalle .fuente-d{font-family:var(--grot); font-size:.66rem; color:var(--suave); border-top:1px dotted var(--regla2); padding-top:10px; margin-top:16px} .detalle .acciones{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center} .detalle .acciones a{font-family:var(--grot); font-weight:700; font-size:.8rem; color:var(--boli)} .sub-d{font-family:var(--grot); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); margin:18px 0 8px} .pasos{margin:0 0 12px; padding-left:20px; font-size:.92rem; display:grid; gap:6px} .pasos a{font-family:var(--grot); font-weight:700; font-size:.8rem} /* expediente en el detalle */ .expediente{border:1px solid var(--regla2); border-radius:var(--r-m); margin:6px 0 14px; overflow:hidden} .expediente .exp-fila{display:grid; grid-template-columns:1fr; gap:2px; padding:10px 12px; border-bottom:1px dotted var(--regla2); font-size:.87rem} .expediente .exp-fila:last-child{border-bottom:0} .expediente .exp-doc{font-weight:600} .expediente .exp-meta{font-family:var(--grot); font-size:.7rem; color:var(--suave)} .expediente .exp-meta b{color:var(--boli)} .expediente .exp-fila.opcional .exp-doc{font-weight:500; color:var(--suave)} .expediente .exp-opc{font-style:italic; font-weight:400; font-size:.78rem; color:var(--suave)} .expediente .exp-impreso a{color:var(--boli)} /* el impreso relleno va por POST: se pinta igual que el enlace de al lado */ .expediente .exp-impreso .impreso-lleno{background:none; border:0; padding:0; font:inherit; color:var(--boli); cursor:pointer; text-decoration:underline} .expediente .exp-impreso .impreso-lleno.bajando{opacity:.55} .expediente .ojo-t{color:var(--ambar)} .expediente.trampas-t .exp-doc{color:var(--ambar)} /* plazos de forma: caducidad de certificados y sentido del silencio */ .forma{display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 .9rem} .forma-l{font-size:.88rem; line-height:1.5; padding:.6rem .75rem; border-left:3px solid var(--regla2); background:var(--papel); border-radius:0 var(--r-s) var(--r-s) 0} .forma-l.bien{border-left-color:var(--ok)} .forma-l.ojo{border-left-color:var(--ambar)} .forma-l b{font-weight:600} /* doble consentimiento: casillas SIN marcar y botón deshabilitado de nacimiento */ .consentimiento{max-width:32rem} /* ⭐ 2-oct-2026 — avisar de un fallo: discreto en «Tus datos», claro una vez abierto */ .td-reportar{margin:4px 0 0; text-align:center} .enlace-discreto{background:none; border:0; padding:6px 4px; color:var(--suave); font:inherit; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:0} .enlace-discreto:hover,.enlace-discreto:focus-visible{color:var(--tinta)} .reporte .rp-tipos{border:0; padding:0; margin:8px 0 12px; display:flex; flex-wrap:wrap; gap:6px} .reporte .rp-tipos legend{font-family:var(--grot); font-size:.78rem; font-weight:700; color:var(--suave); margin-bottom:6px; padding:0} .reporte .rp-tipo{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--regla2); border-radius:999px; padding:7px 12px; font-size:.86rem; cursor:pointer; background:var(--campo)} .reporte .rp-tipo:has(input:checked){border-color:var(--accion); background:color-mix(in srgb, var(--accion) 10%, var(--campo))} .reporte .rp-tipo input{width:auto; min-height:0; margin:0} .reporte .rp-txt-l{display:block; font-family:var(--grot); font-size:.78rem; font-weight:700; color:var(--suave); margin-bottom:6px} .reporte textarea{width:100%; box-sizing:border-box; min-height:110px; resize:vertical; font:inherit; font-size:.95rem; padding:10px 12px; border:1px solid var(--regla2); border-radius:var(--r-s); background:var(--campo); color:var(--tinta)} .reporte textarea:focus{border-color:var(--boli); outline:none} .reporte .rp-cuenta{text-align:right; font-size:.74rem; color:var(--suave); margin-top:2px; font-variant-numeric:tabular-nums} .reporte .rp-anonimo{border:1px solid var(--regla); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:.84rem; line-height:1.45; background:color-mix(in srgb, var(--ok) 6%, transparent)} .reporte .rp-anonimo ul{margin:6px 0; padding-left:18px} .reporte .rp-anonimo p{margin:6px 0 0; color:var(--suave)} .reporte .rp-anonimo code{font-size:.8rem} .rp-gracias{text-align:center} .rp-gracias .acciones{justify-content:center} .rp-gracias .rp-check{width:56px; height:56px; border-radius:50%; margin:6px auto 10px; display:grid; place-items:center; font-size:1.6rem; color:var(--sobre-accion); background:var(--ok)} /* ⛔ 2-oct-2026, visto a 375 px: este diálogo no lleva `.cuerpo-d` y el texto, las casillas y el botón de pagar tocaban los bordes de la pantalla */ .detalle.consentimiento{padding:20px 20px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; max-height:92dvh} .cons{display:flex; gap:.65rem; align-items:flex-start; margin:.6rem 0; padding:.65rem .75rem; font-size:.92rem; line-height:1.45; cursor:pointer; border:1px solid var(--regla2); border-radius:var(--r-m); background:var(--papel)} .cons:has(input:checked){border-color:var(--boli); background:var(--tinte-boli)} .cons input{margin-top:.2rem; width:1.1rem; height:1.1rem; flex:none; accent-color:var(--accion)} .cons-btn{display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1.1rem} /* 27-sep-2026: la casilla que falta se señala al pulsar pagar (antes el botón iba apagado y no se notaba) */ .cons.falta{border-color:var(--rojo); box-shadow:0 0 0 1px var(--rojo)} /* 7-oct-2026 (J-0077): elegir plan del asistente (mensual o anual) */ .planes{border:0; margin:.4rem 0 .2rem; padding:0} .planes legend{font-size:.85rem; color:var(--suave); padding:0; margin-bottom:.2rem} .planes .cons{margin:.35rem 0} .cons-falta{color:var(--rojo); font-size:.88rem; margin:.6rem 0 0; text-align:right} /* checklist de sí/no: filas altas para el dedo, la casilla siempre en el mismo sitio */ .cl-lista{max-height:56vh; overflow-y:auto; margin:14px 0; padding-right:6px} .cl-grupo{border:0; border-top:1px solid var(--regla2); margin:0 0 6px; padding:12px 0 4px} .cl-grupo:first-child{border-top:0} .cl-grupo legend{font-family:var(--grot); font-size:.64rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--suave); padding:0 8px 0 0} .cl-fila{display:flex; align-items:flex-start; gap:11px; padding:10px 8px; border-radius:var(--r-s); cursor:pointer; line-height:1.35} .cl-fila:hover{background:var(--papel)} .cl-fila:has(input:checked){background:var(--tinte-boli)} .cl-fila input{margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--accion)} .cl-txt{flex:1 1 auto; min-width:0; font-size:.92rem} .cl-n{flex:0 0 auto; font-family:var(--grot); font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--boli); border:1px solid color-mix(in srgb, var(--boli) 50%, transparent); border-radius:4px; padding:2px 6px; white-space:nowrap} /* ⛔ 22-sep: los botones estaban al final de 64 preguntas; se quedan pegados abajo */ .cl-acciones{position:sticky; bottom:0; z-index:2; background:var(--alzado); margin:0 -22px; padding:12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--regla2); display:flex; flex-wrap:wrap; gap:8px; box-shadow:0 -10px 18px -12px rgba(0,0,0,.35)} /* ⛔ 25-sep: la lista tenía su propio scroll dentro del del diálogo. Uno solo. */ .detalle .cl-lista{max-height:none; overflow:visible} .detalle .cuerpo-d:has(.cl-lista){padding-bottom:0} /* ========== 9. PIEZAS SUELTAS ========== */ /* wizard (arranque y tarjeta de miembro) */ .wizard{ border:1px solid var(--regla2); background:var(--alzado); padding:16px 18px; display:grid; gap:13px; max-width:54ch; border-radius:var(--r-m); box-shadow:var(--sombra-1); border-top:3px solid var(--trazo); /* ⛔ 2-oct-2026, visto a 375 px: la columna crecía hasta el ancho mínimo del desplegable más largo de la casa («Pareja de hecho registrada») y el formulario se salía 13 px por la derecha */ grid-template-columns:minmax(0, 1fr); } .wizard h3{margin:0; font-family:var(--grot); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--suave)} .wizard label{display:grid; gap:6px; font-family:var(--grot); font-weight:700; font-size:.8rem} .wizard select,.wizard input{ min-width:0; max-width:100%; font-family:var(--serif); font-size:1rem; padding:10px 12px; min-height:44px; border:1px solid var(--regla2); background:var(--campo); border-radius:var(--r-s); color:var(--tinta); } .wizard select:focus,.wizard input:focus{border-color:var(--boli); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--boli) 22%, transparent)} .wizard-botones{display:flex; gap:8px; flex-wrap:wrap} /* el botón que confirma el formulario es la acción principal, no una opción más */ .wizard-botones .chip:not(.secundario){background:var(--accion); color:var(--sobre-accion); border-color:transparent; font-weight:700; padding-inline:20px} .wizard-botones .chip:not(.secundario):hover{background:color-mix(in srgb, var(--accion) 88%, var(--tinta))} .wizard-ramas{display:grid; gap:7px} .rama{display:flex; align-items:center; gap:9px; border:1px solid var(--regla2); background:var(--campo); padding:10px 12px; border-radius:var(--r-s); cursor:pointer; font-family:var(--grot); font-weight:600; font-size:.88rem} .rama:has(input:checked){border-color:var(--boli); background:var(--tinte-boli); box-shadow:inset 0 0 0 1px var(--boli)} .rama input{accent-color:var(--accion)} /* ⛔ 22-sep: `.wizard label{display:grid}` convertía también los radios en rejilla */ .wizard label.rama{display:flex; align-items:center; gap:10px; padding:11px 12px} .wizard label.rama input[type=radio]{width:auto; min-width:0; min-height:0; flex:0 0 auto; padding:0; margin:0; transform:scale(1.15)} .wizard label.rama span{font-size:.92rem; line-height:1.3} .wizard.miembro .m-campos{display:grid; gap:8px; margin-top:8px} .wizard.miembro label.casilla{display:flex; gap:8px; align-items:flex-start; font-weight:500; text-transform:none; letter-spacing:0; font-family:inherit; font-size:.88rem; line-height:1.4} .wizard.miembro label.casilla input{margin-top:.2rem; min-height:0} .wizard.miembro [hidden]{display:none!important} /* el «¿qué es esto?» de cada pregunta (1-9). ⚠️ En --tinta, no --suave: una explicación en gris claro es justo la que no se lee en un móvil al sol. */ .ayuda-q{margin-top:9px; font-size:.87rem} .ayuda-q > summary{cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:var(--tinta); border-bottom:1px dashed var(--tinta); padding:1px 0; list-style:none; user-select:none} .ayuda-q > summary::-webkit-details-marker{display:none} .ayuda-q > summary::before{content:"?"; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-family:var(--grot); font-size:.66rem; font-weight:800; background:var(--tinta); color:var(--alzado)} .ayuda-q > summary:focus-visible{outline:2px solid var(--tinta); outline-offset:2px} /* ⛔ Medido a 375 px en oscuro: con --papel de fondo no se distinguía de la burbuja. Un tinte sobre lo que haya funciona en los dos temas. */ .ayuda-q-txt{margin-top:7px; padding:10px 12px; color:var(--tinta); background:color-mix(in srgb, var(--tinta) 7%, transparent); border-left:3px solid var(--trazo); border-radius:0 var(--r-s) var(--r-s) 0; line-height:1.5} .ayuda-cl{margin:0 0 10px 30px} /* la tercera pantalla: el asistente. ⛔⛔ 23-sep: esta regla, escrita como `.asistente{display:none}`, escondía TODAS las preguntas del cuestionario (`asistente` es también la clase de cada burbuja). Una clase genérica no puede nombrar una pantalla: se apunta por id. */ #asistente{display:none; flex:1 1 0; min-width:0; flex-direction:column; border-right:1px solid var(--regla); background:var(--papel)} body.vista-asistente #asistente{display:flex} body.vista-asistente .chat{display:none} .asist-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 18px; border-bottom:1px solid var(--regla); background:var(--alzado); flex:none} .asist-tit{font-family:var(--grot); font-weight:800; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase} .asist-estado{font-family:var(--grot); font-size:.68rem; color:var(--suave)} .asist-estado.abierto{color:var(--ok); font-weight:700} /* con el asistente cerrado el hilo está vacío: la explicación ocupa el sitio */ body:not(.con-asistente) #mensajes-asistente{display:none} .asist-cerrado{padding:20px 18px; overflow-y:auto; flex:1 1 auto} .asist-cerrado h3{font-family:var(--serif); font-weight:600; font-size:1.2rem; margin:0 0 8px} .asist-cerrado p{margin:0 0 12px; color:var(--suave); font-size:.93rem} .asist-cerrado ul{margin:0 0 16px; padding-left:18px; font-size:.92rem} .asist-cerrado li{margin-bottom:8px} .asist-cerrado li b{font-weight:600} .asist-pasos{border:1px solid var(--regla2); border-radius:var(--r-m); padding:13px 15px; margin-bottom:14px; background:var(--alzado)} .asist-pasos .paso{display:flex; gap:10px; align-items:baseline; font-size:.9rem; margin-bottom:8px} .asist-pasos .paso:last-child{margin-bottom:0} .asist-pasos .marca{font-family:var(--mono); font-weight:600; flex:none} .asist-pasos .paso.hecho{color:var(--suave)} .asist-pasos .paso.hecho .marca{color:var(--ok)} .asist-pasos .paso.toca .marca{color:var(--ambar)} .aviso-ia{border-left:3px solid var(--boli); padding:8px 12px; background:var(--tinte-boli); font-size:.9rem; border-radius:0 var(--r-s) var(--r-s) 0} /* avisos con marco de color: impresos listos, datos detectados, ficha, diagnóstico */ .impresos-listos,.aviso-datos,.ficha-aviso{border:1px solid var(--regla2); border-radius:var(--r-m); padding:12px 14px; margin:4px 0 10px; background:var(--alzado)} .aviso-datos,.ficha-aviso{border-color:color-mix(in srgb, var(--ambar) 55%, var(--regla2)); background:var(--tinte-ambar)} .imp-tit,.aviso-datos .ad-tit,.ficha-aviso b{font-family:var(--grot); font-weight:800; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; display:block} .imp-tit{color:var(--suave)} .aviso-datos .ad-tit,.ficha-aviso b{color:var(--ambar)} .aviso-datos p{margin:0 0 9px; font-size:.86rem; color:var(--tinta); line-height:1.5} .ficha-aviso{font-size:.86rem; margin-bottom:14px} .ficha-aviso ul{margin:0; padding-left:17px; color:var(--tinta); line-height:1.5} .ficha-aviso li{margin-bottom:5px} .imp-btn{display:flex; flex-direction:column; gap:2px; text-decoration:none; border:1px solid var(--regla2); border-radius:var(--r-s); padding:10px 12px; margin-bottom:7px; color:var(--tinta); background:var(--papel)} .imp-btn:hover{border-color:var(--boli)} .imp-btn.bajando{opacity:.6} .imp-doc{font-weight:600; font-size:.9rem} .imp-n{font-family:var(--grot); font-size:.7rem; color:var(--suave)} .imp-pie{font-family:var(--grot); font-size:.68rem; color:var(--suave); line-height:1.45; border-top:1px dotted var(--regla2); padding-top:8px; margin-top:4px} .ficha-d .ficha-intro{margin:0 0 12px; color:var(--suave); font-size:.93rem} .ficha-campos{display:grid; gap:10px; border:0; padding:0} @media (min-width:560px){ .ficha-campos{grid-template-columns:1fr 1fr} .ficha-campos .wizard-botones{grid-column:1 / -1} } .imp-ficha{margin-top:9px; width:100%} /* el diagnóstico de una carta (3-5): el color dice la decisión antes que el texto */ .diagnostico{align-self:stretch; max-width:60ch; border:1px solid var(--regla2); border-left:5px solid var(--gris); background:var(--alzado); padding:13px 15px; border-radius:3px var(--r-m) var(--r-m) 3px; font-size:.95rem; box-shadow:var(--sombra-1)} .diagnostico.dg-recurrir{border-left-color:var(--ok)} .diagnostico.dg-esperar,.diagnostico.dg-dudoso{border-left-color:var(--ambar)} .diagnostico.dg-elegir{border-left-color:var(--boli)} .dg-tit{font-weight:700; margin-bottom:2px} .dg-ayuda{font-size:.85rem; color:var(--gris); margin-bottom:6px} .diagnostico p{margin:.35rem 0} .dg-motivo{font-size:.86rem; font-style:italic} .dg-botones{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px} .dg-botones .chip{text-align:left} .aviso-idioma{font-size:.84rem; color:var(--suave); padding:.4rem .7rem; border-left:3px solid var(--ambar); margin:.4rem 0; background:var(--tinte-ambar); border-radius:0 var(--r-s) var(--r-s) 0} /* ========== 10. PORTADA, CUENTA Y DATOS ========== */ /* ⭐ 25-sep (plan 12.15): la portada tapa la app la primera vez, mientras el motor carga detrás. */ .portada{position:fixed; inset:0; z-index:9000; overflow-y:auto; background:var(--papel); display:flex; align-items:flex-start; justify-content:center; padding:32px 16px 40px} .portada-caja{max-width:34rem; width:100%; /* 2-oct-2026: que el pie («Aviso legal y privacidad») se pueda subir por encima del «?» flotante */ padding-bottom:84px} .portada .wordmark{margin-bottom:26px; padding-bottom:12px; border-bottom:2px solid var(--trazo)} .portada .wordmark small{display:block} .portada h1{font-family:var(--serif); font-weight:500; font-size:clamp(1.75rem, 6.4vw, 2.3rem); line-height:1.14; letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance} /* la firma del producto: el tri-estado, en sellos */ .portada-sellos{display:flex; flex-wrap:wrap; gap:10px 12px; margin:0 0 18px; padding:0; list-style:none} .portada-sellos .sello{font-size:.66rem; padding:6px 10px 5px} .portada-sellos li:nth-child(2) .sello{transform:rotate(1.5deg)} .portada-sellos li:nth-child(3) .sello{transform:rotate(-1deg)} .portada-sub{color:var(--suave); font-size:1.02rem; line-height:1.55; margin:0 0 22px; text-wrap:pretty} /* 7-oct-2026 (J-0075): cifras medidas + «no representa a ninguna administración» */ .portada-cifras{font-family:var(--grot); font-size:.86rem; line-height:1.5; color:var(--suave); margin:-10px 0 22px} .portada-cifras b{color:var(--tinta, inherit); font-weight:700} .portada-puntos{list-style:none; padding:0; margin:0 0 22px; background:var(--alzado); border:1px solid var(--regla2); border-radius:var(--r-l); box-shadow:var(--sombra-1); overflow:hidden} .portada-puntos li{padding:13px 16px; border-top:1px solid var(--regla); line-height:1.5; font-size:.97rem} .portada-puntos li:first-child{border-top:0} .portada-puntos b{font-family:var(--grot); font-weight:700} .portada-puntos li:last-child{background:var(--tinte-ok)} .portada-puntos li:last-child b{color:var(--ok)} .portada-empezar{width:100%; font-size:1.05rem; min-height:54px; border-radius:var(--r-m)} .portada-carga{min-height:1.3em; color:var(--gris); font-size:.84rem; margin:12px 0 0; font-family:var(--mono); text-align:center} .portada-nota{color:var(--gris); font-size:.84rem; line-height:1.5; margin-top:20px; padding-top:14px; border-top:1px solid var(--regla)} .portada-nota a{color:var(--boli)} /* cuenta y pago de la app pública (plan 2.8) */ .entrar-o{text-align:center; color:var(--gris); font-size:.85rem; margin:16px 0 8px; display:flex; align-items:center; gap:10px} .entrar-o::before,.entrar-o::after{content:""; flex:1; border-top:1px solid var(--regla2)} .entrar-prov{justify-content:center} .entrar-error,.cuenta-msg{color:var(--ambar); min-height:1.2em; font-size:.9rem} .cuenta-estado{list-style:none; padding:0; margin:0 0 16px; border:1px solid var(--regla2); border-radius:var(--r-m); overflow:hidden} .cuenta-estado li{padding:10px 13px; border-top:1px solid var(--regla); background:var(--papel)} .cuenta-estado li:first-child{border-top:0} .cuenta-botones{flex-direction:column; align-items:stretch} .cuenta-botones button{justify-content:flex-start; text-align:left} #turnstile{margin:10px 0} /* ⭐ 26-sep (Jagoba: «que dé confianza»): qué sale y qué no, junto a la casilla de salud */ .que-sale{border:1px solid color-mix(in srgb, var(--ok) 40%, var(--regla2)); background:var(--tinte-ok); border-radius:var(--r-m); padding:11px 13px; margin:4px 0 10px; font-size:.86rem; line-height:1.5} .que-sale b{display:block; font-family:var(--grot); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ok); margin-bottom:5px} .que-sale p{margin:4px 0} /* 1-oct-2026: «Tus datos» es también el sitio desde el que se gestionan (perfil, ficha, cuenta, borrar) */ .td-mandos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 14px} .td-mando{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:10px 12px; min-height:58px; font-weight:600; font-size:.86rem; line-height:1.25} .td-mando small{font-weight:400; font-size:.72rem; opacity:.8; line-height:1.3} .td-peligro{border-color:var(--rojo, #b3261e)} .td-confirmar{border:1px solid var(--rojo, #b3261e); border-radius:10px; padding:10px 12px; margin:0 0 14px} .td-pie{font-size:.74rem; color:var(--suave); line-height:1.5; margin:4px 0 10px} .td-pie a{color:var(--suave)} .td-confirmar p{margin:0 0 8px; font-size:.9rem; line-height:1.45} @media (max-width:400px){ .td-mandos{grid-template-columns:1fr} } .tus-datos .td-fila{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--regla)} .tus-datos .td-fila:first-of-type{border-top:0} .tus-datos .td-ico{font-size:1.15rem; line-height:1; flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-m); background:var(--papel); border:1px solid var(--regla)} .tus-datos .td-fila b{font-family:var(--grot); font-size:.86rem} .tus-datos .td-fila p{margin:3px 0 0; font-size:.92rem; line-height:1.45} /* páginas de texto (aviso legal, condiciones, cookies): mismo papel que la app. Cada página trae su