/* Diseño: archivo de Figma "Gariol Ayudas – Rediseño". Perfil en 3 pasos, resultados con resumen, filtros y tarjetas. */
/* Fuentes alojadas en el propio dominio (sin hoja de Google bloqueando el primer pintado). Solo subconjunto latino. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2")}
:root{
  --bg:#F8F9FB; --surface:#FFFFFF; --ink:#0B3558; --muted:#476788; --line:#D4E0ED; --line-ui:#7189A3;
  --accent:#1D4ED8; --accent-soft:#E8EEFD; --accent-ink:#FFFFFF;
  --ok:#137A4B; --ok-bg:#E6F4EC; --warn:#9A5B00; --warn-bg:#FDF2DD; --no:#B42318; --no-bg:#FDECEA;
  /* Una sola familia (Manrope, sustituto libre de Gilroy) para títulos y texto */
  --f-display:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* Escala tipográfica (px): 14 · 16 · 18 · 20 · 24 · 28 · 32 · 38 · 48. Nada fuera de ella. */
  --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.75rem; --text-3xl:2rem; --text-4xl:2.375rem; --text-5xl:3rem;
  /* Espaciado: escala de 8 px (CLAUDE.md). 4 y 12 solo dentro de componentes (iconos, insignias, huecos entre líneas). */
  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-24:24px; --spacing-32:32px; --spacing-40:40px;
  --spacing-48:48px; --spacing-56:56px; --spacing-64:64px; --spacing-72:72px; --spacing-96:96px;
  /* Radios: detalles 4 · botones y campos 8 · tarjetas 16 · paneles 24 · insignias y chips en píldora */
  --radius-sm:4px; --radius-control:8px; --radius-card:16px; --radius-panel:24px; --radius-pill:9999px;
  /* Sombras con tinte azul (nunca negro neutro): tarjeta con enlace, superficie elevada (menús, avisos) y botón */
  --shadow-card:rgba(71,103,136,.04) 0 4px 5px 0,rgba(71,103,136,.03) 0 4px 10px 0,rgba(71,103,136,.05) 0 10px 20px 0;
  --shadow-elevated:rgba(71,103,136,.04) 0 4px 5px 0,rgba(71,103,136,.03) 0 8px 15px 0,rgba(71,103,136,.08) 0 30px 50px 0;
  --shadow-button:rgba(71,103,136,.04) 0 4px 5px 0,rgba(71,103,136,.03) 0 8px 15px 0,rgba(71,103,136,.06) 0 15px 30px 0;
  /* Relleno de cajas (tarjetas, avisos, columna lateral) y bordes: cajas 1 px, controles 1,5 px */
  --card-padding:var(--spacing-24); --b-caja:1px solid var(--line); --b-control:1.5px solid var(--line-ui);
  --toque:48px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1420; --surface:#161E2E; --ink:#E6EBF3; --muted:#9AA6B8; --line:#2A3448; --line-ui:#66738C;
  --accent:#7AA2FF; --accent-soft:#1B2747; --accent-ink:#0E1420;
  --ok:#5FD39A; --ok-bg:#12291F; --warn:#F2B860; --warn-bg:#2E2412; --no:#FF8A80; --no-bg:#311816;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1420; --surface:#161E2E; --ink:#E6EBF3; --muted:#9AA6B8; --line:#2A3448; --line-ui:#66738C;
  --accent:#7AA2FF; --accent-soft:#1B2747; --accent-ink:#0E1420;
  --ok:#5FD39A; --ok-bg:#12291F; --warn:#F2B860; --warn-bg:#2E2412; --no:#FF8A80; --no-bg:#311816;
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
a{color:var(--accent)}
.wrap{max-width:1200px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px))}
main.wrap{padding-top:var(--spacing-24);padding-bottom:var(--spacing-32);display:flex;flex-direction:column;gap:var(--spacing-24)}
.muted{color:var(--muted);margin:0}
.h1{display:block;font:700 clamp(var(--text-2xl),5vw,var(--text-4xl))/1.2 var(--f-display);margin:0;text-wrap:balance}

/* Cabecera */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar-in{max-width:1200px;margin:0 auto;padding:12px max(20px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.secciones{display:flex;gap:var(--spacing-4);margin-left:auto;align-items:center}
.secciones a,.menu summary{color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--text-base);padding:0 var(--spacing-12);min-height:var(--toque);display:inline-flex;align-items:center;border-radius:var(--radius-control);white-space:nowrap}
.secciones a:hover,.menu summary:hover{background:var(--accent-soft)}
.secciones a[aria-current="page"],.menu summary.actual{background:var(--accent-soft);color:var(--accent)}
/* Desplegable de Ayudas (details/summary: funciona con teclado y sin JS; public/nav.js lo cierra al pulsar fuera o Escape) */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;gap:8px}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg)}
.menu[open] summary::after{transform:translateY(25%) rotate(225deg)}
.menu-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;display:flex;flex-direction:column;padding:var(--spacing-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-elevated);z-index:6}
.menu-panel a{border-radius:var(--radius-control)}
.corto{display:none}
@media (max-width:720px){.topbar-in{padding:8px 16px;row-gap:0}.secciones{margin:0 -8px;width:calc(100% + 16px);justify-content:space-between;gap:0}
  .secciones a,.menu summary{padding:0 var(--spacing-8);font-size:var(--text-sm)}
  .largo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.corto{display:inline}
  .menu{position:static}.menu-panel{left:0;right:0;top:100%;border-width:0 0 1px;border-radius:0 0 var(--radius-card) var(--radius-card);padding:var(--spacing-4) 8px}.menu-panel a{font-size:var(--text-base)}}
.brand{display:flex;align-items:center;min-height:48px;gap:var(--spacing-8);font:700 1.25rem var(--f-display);color:var(--ink);text-decoration:none}
.mark{flex:none}.mk-l{stroke:var(--accent)}.mk-c{stroke:var(--ok)}
.brand-txt{line-height:1}
#entrar{margin-left:auto}

/* Botones */
.btn{background:var(--accent);color:var(--accent-ink);border:1.5px solid transparent;border-radius:var(--radius-control);padding:var(--spacing-12) var(--spacing-24);font:600 var(--text-base) var(--f-body);cursor:pointer;min-height:var(--toque)}
.btn.grow{flex:1}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-ui)}
.btn.soft{background:var(--accent-soft);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0}
/* Enlaces y botones de texto sueltos: zona de toque de 48px sin mover el texto */
.linkbtn,.miga a,.card-links a,.lado-link,.calc-nav a{position:relative}
:is(.linkbtn,.miga a,.card-links a,.lado-link,.calc-nav a)::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:max(100%,48px);transform:translateY(-50%)}
:is(button,input,select,textarea,summary,a,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Campos a 16px como mínimo: evita el zoom automático en el móvil */
input,select,textarea{font-size:max(16px,1em)}
::placeholder{color:var(--muted);opacity:1}

/* Acceso */

/* Pasos */
.progress{height:8px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;width:14%;border-radius:var(--radius-pill);background:var(--accent);transition:width .25s}
.step-label{margin:-12px 0 0;font-weight:600;font-size:var(--text-sm);color:var(--accent)}
#form{display:flex;flex-direction:column;gap:var(--spacing-32)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-24);min-width:0}
legend{padding:0;display:flex;flex-direction:column;gap:var(--spacing-8);margin-bottom:var(--spacing-24)}
.lead{color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--spacing-24)}
.field,.group{display:flex;flex-direction:column;gap:var(--spacing-8);min-width:0}
.lbl{font-weight:600;font-size:var(--text-base)}
.hint{color:var(--muted);font-size:var(--text-base)}
.box{display:flex;align-items:center;gap:var(--spacing-8);background:var(--surface);border:var(--b-control);border-radius:var(--radius-control);padding:0 var(--spacing-16);min-height:54px;transition:border-color .15s,box-shadow .15s}
/* Foco de campo: un solo indicador, el borde de la caja engrosado (2,5px) en color de acento */
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.box input,.box select{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:14px 0}
.box :is(input,select):focus-visible{outline:none}
.box select{appearance:none;background:no-repeat right center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23476788' stroke-width='2'/%3E%3C/svg%3E");padding-right:20px}
.suf{color:var(--muted);font-size:var(--text-base)}
.chips{display:flex;flex-wrap:wrap;gap:var(--spacing-12)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:var(--toque);padding:0 var(--spacing-16);border:var(--b-control);border-radius:var(--radius-pill);background:var(--surface);font-weight:600;font-size:var(--text-base)}
.chip input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip input:focus-visible+span,.check:has(input:focus-visible),.ficha .checklist label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.check{display:flex;gap:var(--spacing-12);align-items:flex-start;background:var(--surface);border:var(--b-control);border-radius:var(--radius-control);padding:var(--spacing-16);min-height:54px;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.check:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
/* Casillas agrupadas: una sola caja con filas separadas por una línea de 1 px (el hueco de 1 px deja ver --line) */
.checks{display:flex;flex-direction:column;gap:1px;background:var(--line);border:var(--b-control);border-radius:var(--radius-card);overflow:hidden}
.checks .check{border:0;border-radius:0;min-height:var(--toque)}
.checks .check:hover{background:var(--bg)}
.checks .check:has(input:checked){background:var(--accent-soft)}
.checks .check:has(input:focus-visible){outline-offset:-3px}
.actions{display:flex;gap:var(--spacing-12)}
.status{color:var(--muted);font-size:var(--text-base);margin:0}
.status:empty{display:none}
.skip{margin:-8px 0 0;font-size:var(--text-base)}

/* Resultados */
.res-head{display:flex;flex-direction:column;gap:var(--spacing-8)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-12)}
.stat{border-radius:var(--radius-card);padding:var(--spacing-12) var(--spacing-16);display:flex;flex-direction:column;border:0;text-align:left;font:inherit;cursor:pointer}
.stat b{font:700 var(--text-3xl)/1.1 var(--f-display)}
.stat span{font-weight:600;font-size:var(--text-sm)}
.stat.ok{background:var(--ok-bg);color:var(--ok)} .stat.warn{background:var(--warn-bg);color:var(--warn)} .stat.no{background:var(--no-bg);color:var(--no)}
.filters{display:flex;gap:var(--spacing-8);overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:5px 20px}
.filters button{flex:none;border:1.5px solid var(--line-ui);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:0 var(--spacing-16);min-height:var(--toque);font:600 var(--text-base) var(--f-body);cursor:pointer}
/* Seleccionado: mismo estilo que los chips del buscador */
.filters button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ambito{color:var(--muted);font-size:var(--text-sm)}
.amount{font-family:var(--f-mono);font-size:.95rem;color:var(--accent)}
.why{margin:var(--spacing-4) 0 0;padding:var(--spacing-12);list-style:none;background:var(--bg);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:var(--spacing-8);font-size:var(--text-base)}
.why li::before{content:"✕ ";color:var(--no);font-weight:700}
.tarjeta.warn .why li::before{content:"? ";color:var(--warn)}
.why .val{display:block;font-family:var(--f-mono);font-size:var(--text-sm);color:var(--muted)}
.empty{background:var(--surface);border:1px dashed var(--line-ui);border-radius:var(--radius-card);padding:var(--card-padding);color:var(--muted)}
.notice{margin:0;font-size:var(--text-base);color:var(--muted)}

/* Pie: al final de la página e igual en todas; los enlaces saltan de línea y miden 32 px de alto */
.foot{background:var(--surface);border-top:var(--b-caja);padding:var(--spacing-24) 0 max(var(--spacing-24),env(safe-area-inset-bottom,0px));color:var(--muted);font-size:var(--text-base);line-height:1.5}
.foot .wrap{display:flex;flex-direction:column;gap:var(--spacing-12)}
.foot p{margin:0}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--spacing-16);margin:0;padding:0;list-style:none}
.foot-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Las opciones del desplegable usan la paleta del tema (en oscuro salían blanco sobre blanco) */
select{color-scheme:inherit}
.box select option{background:var(--surface);color:var(--ink)}
/* Edades de hijos y plazo de cada ayuda */
.ages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-12)}
/* Estados: una sola escala en todo el sitio.
   Plazo: abierta (verde), cierra pronto (rojo), abre pronto (azul), cerrada (gris).
   Resultado con tu perfil: te corresponde (verde), faltan datos (ámbar), no te corresponde (rojo). */
.insignia{display:inline-flex;align-items:center;align-self:flex-start;border-radius:var(--radius-pill);padding:2px 10px;font-weight:600;font-size:var(--text-sm);white-space:nowrap;background:var(--bg);color:var(--muted)}
.insignia.urgente,.insignia.no{background:var(--no-bg);color:var(--no)}
.insignia.abierta,.insignia.si{background:var(--ok-bg);color:var(--ok)}
.insignia.proxima{background:var(--accent-soft);color:var(--accent)}
.insignia.quiza{background:var(--warn-bg);color:var(--warn)}
/* Total estimado */
.total{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-panel);padding:var(--card-padding);display:flex;flex-direction:column;gap:var(--spacing-4)}
.total b{font:700 var(--text-3xl)/1.1 var(--f-display)}
.total-lbl{font-weight:600;font-size:var(--text-sm);opacity:.9}
.total-sub{font-size:var(--text-base);opacity:.85}
/* Escritorio: más ancho; el formulario conserva un ancho cómodo y los resultados van en dos columnas */
#panel-perfil{max-width:820px;width:100%}
@media (min-width:1000px){.wrap,.topbar-in{padding-left:32px;padding-right:32px}}
@media (min-width:900px){.stats{max-width:720px}}

/* Tarjetas de ayudas (buscador, comunidades y guías): rejilla de 1 a 3 columnas, color e icono por categoría */
:root{--c-familia:#C2410C;--c-vivienda:#4338CA;--c-ingresos:#047857;--c-educacion:#7C3AED;--c-energia:#A16207;--c-transporte:#0E7490;--c-discapacidad:#BE185D;--c-otras:#476788}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-familia:#FB923C;--c-vivienda:#A5B4FC;--c-ingresos:#34D399;--c-educacion:#B794F6;--c-energia:#FACC15;--c-transporte:#22D3EE;--c-discapacidad:#F472B6;--c-otras:#9AA6B8}}
:root[data-theme="dark"]{--c-familia:#FB923C;--c-vivienda:#A5B4FC;--c-ingresos:#34D399;--c-educacion:#B794F6;--c-energia:#FACC15;--c-transporte:#22D3EE;--c-discapacidad:#F472B6;--c-otras:#9AA6B8}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--spacing-24);align-items:stretch}
.tarjetas>.empty{grid-column:1/-1}
.tarjeta[data-nobusca],[data-sinbusqueda]{display:none!important}
.buscar{max-width:520px}
.tarjetas>.sub-grupo{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--spacing-4);margin-top:var(--spacing-12)}
.sub-grupo h2{font:600 var(--text-lg)/1.25 var(--f-display);margin:0}
.tarjeta{--cat:var(--c-otras);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--cat);border-radius:var(--radius-card);padding:var(--card-padding);display:flex;flex-direction:column;gap:var(--spacing-12);min-width:0;box-shadow:var(--shadow-card)}
.tarjeta[data-cat="familia"]{--cat:var(--c-familia)} .tarjeta[data-cat="vivienda"]{--cat:var(--c-vivienda)} .tarjeta[data-cat="ingresos"]{--cat:var(--c-ingresos)}
.tarjeta[data-cat="educacion"]{--cat:var(--c-educacion)} .tarjeta[data-cat="energia"]{--cat:var(--c-energia)} .tarjeta[data-cat="transporte"]{--cat:var(--c-transporte)}
.tarjeta[data-cat="discapacidad"]{--cat:var(--c-discapacidad)}
/* Autónomos y empresas: tipos de ayuda con los mismos colores */
.tarjeta[data-cat="alta"]{--cat:var(--c-ingresos)} .tarjeta[data-cat="contratacion"]{--cat:var(--c-familia)} .tarjeta[data-cat="conciliacion"]{--cat:var(--c-discapacidad)}
.tarjeta[data-cat="digitalizacion"]{--cat:var(--c-transporte)} .tarjeta[data-cat="financiacion"]{--cat:var(--c-vivienda)} .tarjeta[data-cat="inversion"]{--cat:var(--c-energia)}
.t-top{display:flex;align-items:center;gap:var(--spacing-8) var(--spacing-12);flex-wrap:wrap;font-size:var(--text-sm)}
/* El color de categoría solo va en el borde superior y el icono; el verde, el ámbar y el rojo del texto quedan para el estado del plazo. */
.t-cat{display:inline-flex;align-items:center;gap:var(--spacing-8);font-weight:600;color:var(--ink)}
.t-cat svg{color:var(--cat)}
.t-cat svg{flex:none;width:28px;height:28px;padding:5px;border-radius:var(--radius-control);background:color-mix(in srgb,var(--cat) 13%,var(--surface))}
.t-amb{color:var(--muted)}
.t-amb::before{content:"·";margin-right:var(--spacing-12)}
.t-estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-8) var(--spacing-12)}
.tarjeta .t-tit{margin:0;font:600 var(--text-md)/1.3 var(--f-display);color:var(--ink);text-wrap:balance}
.tarjeta p{margin:0}
.t-cuantia{font:600 var(--text-base)/1.4 var(--f-display);color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.t-desc{color:var(--muted);font-size:var(--text-base);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.t-plazo{font-weight:600;font-size:var(--text-base);color:var(--muted)}
.t-plazo.abierta{color:var(--ok)} .t-plazo.proxima{color:var(--accent)}
.t-ver{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;text-decoration:none}
.tarjeta .why{margin:0}
.tarjeta.no .t-cuantia{color:var(--muted)}
.ficha .tarjetas{margin:var(--spacing-4) 0 var(--spacing-8)}
/* Resultados del buscador: separación entre resumen, contadores, filtros y tarjetas */
#panel-ayudas{display:flex;flex-direction:column;gap:var(--spacing-24)}
.res-head{gap:var(--spacing-12)}
@media (max-width:600px){
  .tarjeta{gap:var(--spacing-12)}
  .t-ver{margin-top:var(--spacing-4)}
  .ficha .tarjetas{margin:var(--spacing-8) 0 var(--spacing-16)}
}
/* Filtro por categoría: en el móvil se desliza como los demás filtros; en escritorio pasa a varias líneas */
.cat-filtros button{display:inline-flex;align-items:center;gap:var(--spacing-8)}
.cat-filtros svg{flex:none}
@media (min-width:721px){.cat-filtros{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.ficha .cat-filtros{margin-top:4px}