/* Tamiz · pagina principale. Palette e logo da docs/logo/VERDETTO.md (proposta 3, la T che accoglie).
   Caratteri serviti dal sito stesso (fonts/LICENSE-fonts.txt), nessuna risorsa esterna.
   Tokens di colore: chiaro di default, scuro con prefers-color-scheme o data-theme="dark". */

@font-face {
  font-family: "Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/plex-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/plex-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;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces.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: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-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;
}

:root {
  color-scheme: light;
  --fondo: #fbf7f2;
  --fondo-2: #f3ebe2;
  --caja: #ffffff;
  --texto: #3b2a20;
  --texto-suave: #6b5a4e;
  --primario: #a3401c;
  --primario-oscuro: #8f3516;
  --primario-texto: #ffffff;
  --acento: #8a5200;
  --borde: #e4d7ca;
  --borde-fuerte: #8c7a6c;
  --borde-campo: #8c7a6c;
  --foco: #3b2a20;
  --trama: rgba(207, 106, 34, 0.24);
  --logo-cabeza: #b06a10;
  --logo-cuerpo: #a3401c;
  --sombra: 0 1px 2px rgba(59, 42, 32, 0.06), 0 4px 14px rgba(59, 42, 32, 0.06);
  --aviso-fondo: #f8ecd6;
  --aviso-texto: #6e4200;
  --encaja-fondo: #e3f0e6;
  --encaja-texto: #276b45;
  --falta-fondo: #f8ecd6;
  --falta-texto: #8a5200;
  --no-fondo: #f9e6e2;
  --no-texto: #b3261e;
  --info-fondo: #f3ebe2;
  --info-texto: #6b5a4e;
  --peligro: #b3261e;
  --rojo-aviso: #b3261e;
  --letra: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --letra-titulo: "Fraunces", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #1c1612; --fondo-2: #261e19; --caja: #2a211b; --texto: #f3ebe2; --texto-suave: #cdbdb0;
    --primario: #f0956d; --primario-oscuro: #f7b08f; --primario-texto: #1c1612; --acento: #e9b45a;
    --borde: #45372e; --borde-fuerte: #9c8a7c; --borde-campo: #9c8a7c; --foco: #f3ebe2; --trama: rgba(240, 149, 109, 0.16);
    --logo-cabeza: #e9b45a; --logo-cuerpo: #f0956d; --sombra: none;
    --aviso-fondo: #3a2c14; --aviso-texto: #f1d7a6; --encaja-fondo: #1f3326; --encaja-texto: #86d0a0;
    --falta-fondo: #3a2c14; --falta-texto: #e9b45a; --no-fondo: #3e211d; --no-texto: #f4a097;
    --info-fondo: #261e19; --info-texto: #cdbdb0; --peligro: #f4a097; --rojo-aviso: #f4a097;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #1c1612; --fondo-2: #261e19; --caja: #2a211b; --texto: #f3ebe2; --texto-suave: #cdbdb0;
  --primario: #f0956d; --primario-oscuro: #f7b08f; --primario-texto: #1c1612; --acento: #e9b45a;
  --borde: #45372e; --borde-fuerte: #9c8a7c; --borde-campo: #9c8a7c; --foco: #f3ebe2; --trama: rgba(240, 149, 109, 0.16);
  --logo-cabeza: #e9b45a; --logo-cuerpo: #f0956d; --sombra: none;
  --aviso-fondo: #3a2c14; --aviso-texto: #f1d7a6; --encaja-fondo: #1f3326; --encaja-texto: #86d0a0;
  --falta-fondo: #3a2c14; --falta-texto: #e9b45a; --no-fondo: #3e211d; --no-texto: #f4a097;
  --info-fondo: #261e19; --info-texto: #cdbdb0; --peligro: #f4a097; --rojo-aviso: #f4a097;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: break-word;
  /* Il pie resta in fondo alla finestra anche quando la sezione è corta. */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
body > main { flex: 1 0 auto; width: 100%; }
body > .cabecera, body > .pie { flex: 0 0 auto; }
.envoltorio { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .envoltorio { padding: 0 32px; } }
h1, h2, h3, h4 { line-height: 1.22; color: var(--texto); }
h1, h2 { font-family: var(--letra-titulo); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 2rem; margin: 0.4rem 0 0.6rem; }
h2 { font-size: 1.45rem; margin: 2.2rem 0 0.7rem; }
h3 { font-size: 1.12rem; margin: 0; font-weight: 650; }
h4 { font-size: 1.08rem; margin: 0; font-weight: 650; }
@media (min-width: 1024px) { h1 { font-size: 2.6rem; } h2 { font-size: 1.65rem; } }
p { margin: 0.5rem 0; }
a { color: var(--primario); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primario-oscuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
/* Il titolo di sezione riceve il focus per la lettura da schermo, non per la tastiera: niente riquadro. */
h1[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.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;
}
.saltar {
  position: absolute; left: 16px; top: -60px; background: var(--primario); color: var(--primario-texto);
  padding: 10px 14px; border-radius: 8px; z-index: 10; font-weight: 600;
}
.saltar:focus { top: 8px; }
.pequeno, .etiqueta-pequena, .fuente, .fecha-lectura, .fecha-revision { font-size: 0.92rem; color: var(--texto-suave); }
/* testo d'aiuto nelle domande (classe usata da cuestionario.js) */
.ayuda { font-size: 0.95rem; color: var(--texto-suave); }

/* Il simbolo (la T che accoglie): colori dai token, così si legge in chiaro e in scuro. */
.simbolo .simbolo-cabeza { fill: var(--logo-cabeza); }
.simbolo .simbolo-brazos { fill: none; stroke: var(--logo-cuerpo); stroke-width: 10; stroke-linecap: round; }
.simbolo .simbolo-cuerpo { fill: var(--logo-cuerpo); }

/* Cabecera, menu, pie */
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.cabecera-interna { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 4px; }
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; align-self: flex-start;
  color: var(--texto); text-decoration: none; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em;
}
.marca:hover { color: var(--texto); }
.simbolo-marca { width: 36px; height: 36px; flex: 0 0 auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.menu a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--texto); text-decoration: none; font-weight: 500; }
.menu a[aria-current="page"] { color: var(--primario); font-weight: 700; box-shadow: inset 0 -3px 0 var(--primario); }
.menu a:hover { color: var(--primario); }
main { padding-top: 24px; padding-bottom: 56px; outline: none; }
.pie { border-top: 1px solid var(--borde); background: var(--fondo-2); padding: 20px 0 32px; color: var(--texto-suave); font-size: 0.95rem; }
.menu-pie { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.menu-pie a { display: inline-block; min-height: 44px; line-height: 44px; }
.hecho-por { margin-top: 10px; color: var(--texto); }
.hecho-por a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 600; }
.cargando { padding: 40px 0; }

/* Pulsanti: pieno per l'azione principale, contorno per le altre */
.principal, .secundario, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border-radius: 999px; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 2px solid var(--primario); line-height: 1.25; text-align: center;
}
.principal { background: var(--primario); color: var(--primario-texto); }
.principal:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); color: var(--primario-texto); }
.principal.grande { min-height: 56px; padding: 12px 36px; font-size: 1.15rem; }
.secundario, .boton.secundario { background: var(--caja); color: var(--texto); border-color: var(--borde-fuerte); }
.secundario:hover { border-color: var(--primario); color: var(--texto); }
.peligro, .secundario.peligro { color: var(--peligro); }
.enlace {
  background: none; border: 0; padding: 0; font: inherit; color: var(--primario); text-decoration: underline;
  text-underline-offset: 0.18em; cursor: pointer; text-align: left; min-height: 44px;
}
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; align-items: center; }
label.boton { position: relative; }
label.boton:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Apertura */
/* Il titolo di ogni sezione (preguntas, resultados, perfil, ayuda, empleo) sta alla stessa altezza di quello
   della home: lo spazio sopra è quello del .portada (28px, 48px dal tablet in su). */
#preguntas, #resultados, #perfil, #ayuda, #empleo { padding-top: 28px; }
@media (min-width: 768px) { #preguntas, #resultados, #perfil, #ayuda, #empleo { padding-top: 48px; } }
.cabecera-seccion { margin: 0 0 12px; }
:is(#preguntas, #resultados, #perfil, #ayuda, #empleo) > :is(h1, header.cabecera-seccion):first-child,
.cabecera-seccion h1 { margin-top: 0; }
.lema { font-size: 1.1rem; color: var(--texto-suave); margin: 0 0 8px; }
.intro { font-size: 1rem; color: var(--texto-suave); }
.portada {
  position: relative; display: grid; gap: 8px; align-items: center;
  padding: 28px 0 8px; margin-bottom: 8px;
}
.antetitulo {
  display: inline-block; margin: 0 0 4px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--acento);
}
.portada h1 { font-size: 2.15rem; max-width: 18ch; margin-top: 0; }
.frase { font-size: 1.2rem; max-width: 44ch; margin: 0 0 8px; }
.acciones-portada { margin: 22px 0 10px; }
.ejemplos { margin-top: 18px; }
.ejemplos-titulo { font-size: 0.95rem; color: var(--texto-suave); margin: 0; }
.ejemplos .acciones { margin-top: 8px; }
/* La figura: il simbolo dentro un disco con la trama del setaccio (dalla proposta 1), solo decorazione. */
.portada-figura {
  position: absolute; top: 18px; right: -8px; width: 112px; height: 112px; border-radius: 50%; z-index: -0;
  background:
    repeating-linear-gradient(45deg, var(--trama) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(-45deg, var(--trama) 0 1.5px, transparent 1.5px 11px),
    var(--fondo-2);
  display: grid; place-items: center; opacity: 0.9;
}
.portada-texto { position: relative; z-index: 1; }
.portada-texto h1, .portada-texto .antetitulo { padding-right: 104px; }
.simbolo-portada { width: 56%; height: 56%; }
@media (min-width: 768px) {
  .portada { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding: 48px 0 24px; }
  .portada-figura { position: relative; top: auto; right: auto; width: 320px; height: 320px; }
  .portada-texto h1, .portada-texto .antetitulo { padding-right: 0; }
  .portada h1 { font-size: 3rem; }
  .simbolo-portada { width: 52%; height: 52%; }
}
@media (min-width: 1200px) {
  .portada { grid-template-columns: minmax(0, 1fr) 380px; }
  .portada-figura { width: 380px; height: 380px; }
  .portada h1 { font-size: 3.4rem; }
}
.pasos h2 { margin-top: 1.6rem; }
.lista-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-pasos li {
  counter-increment: paso; position: relative; background: var(--caja); border: 1px solid var(--borde);
  border-radius: 16px; padding: 16px 18px 16px 64px; box-shadow: var(--sombra);
}
.lista-pasos li::before {
  content: counter(paso); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fondo-2); color: var(--primario); font-weight: 700;
  font-family: var(--letra-titulo); font-size: 1.1rem;
}
@media (min-width: 900px) { .lista-pasos { grid-template-columns: repeat(3, 1fr); } }

.caja { background: var(--caja); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 20px; margin: 20px 0; box-shadow: var(--sombra); }
.caja h2 { margin-top: 0.2rem; }
.caja ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.aviso, .caja.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border-color: transparent; box-shadow: none; }
.aviso:not(.caja) { border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.caja.aviso h2 { color: var(--aviso-texto); font-size: 1.2rem; }
.aviso-ejemplo { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: 12px; padding: 12px 16px; }
.aviso-vacio, .vacio, .ocultas { color: var(--texto-suave); }
.fecha-datos { font-size: 1.05rem; margin: 22px 0 6px; }
.fecha-datos strong { font-size: 1.2rem; }
.fecha-datos.vieja strong, .aviso-vieja { color: var(--rojo-aviso); font-weight: 700; }

/* Próximos plazos */
.caja.plazos ul.lista-plazos { list-style: none; padding: 0; margin: 10px 0 0; }
.plazo-item {
  display: grid; grid-template-columns: 1fr; gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--borde);
}
.plazo-item:first-child { border-top: 0; }
.plazo-nombre { font-weight: 600; }
.plazo-fecha { color: var(--texto-suave); font-size: 0.95rem; }
.etiqueta-area {
  justify-self: start; display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--acento); background: var(--fondo-2); border-radius: 999px; padding: 2px 10px;
}
@media (min-width: 768px) {
  .plazo-item { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 19rem); align-items: baseline; }
  .etiqueta-area { justify-self: start; }
}

/* Accesos a otras páginas */
.accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .accesos { grid-template-columns: repeat(3, 1fr); } }
.acceso {
  display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 52px; padding: 16px 18px 16px 18px;
  background: var(--caja); border: 1px solid var(--borde); border-left: 5px solid var(--primario); border-radius: 14px;
  text-decoration: none; color: var(--texto); box-shadow: var(--sombra);
}
.acceso:hover { border-color: var(--primario); color: var(--texto); }
.acceso-titulo { font-weight: 700; font-size: 1.08rem; color: var(--primario); text-decoration: underline; text-underline-offset: 0.18em; }
.acceso-texto { font-size: 0.95rem; color: var(--texto-suave); }

/* Domande */
.pregunta-form { margin-top: 10px; }
.barra-paso { font-size: 0.92rem; color: var(--texto-suave); }
.porque { background: var(--fondo-2); border-left: 4px solid var(--primario); padding: 12px 16px; border-radius: 8px; }
.control { margin: 20px 0; }
.campo-etiqueta, legend.campo-etiqueta { display: block; font-weight: 600; margin: 0 0 8px; padding: 0; }
legend.campo-etiqueta { font-size: 1.08rem; margin-bottom: 10px; }
.grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.fila { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fila-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input[type="text"], input[type="number"], select {
  font: inherit; color: var(--texto); background: var(--caja); border: 2px solid var(--borde-campo);
  border-radius: 10px; padding: 8px 12px; min-height: 48px; max-width: 100%;
}
input[type="text"], input[type="number"] { width: 100%; max-width: 280px; }
select { min-width: 0; }
input:disabled { opacity: 0.6; }
.opcion {
  display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--borde-campo); border-radius: 12px; background: var(--caja); margin: 8px 0; cursor: pointer;
}
.opcion:hover { border-color: var(--primario); }
.opcion:has(input:checked) { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); }
.opcion input, .nls input, .hijo input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primario); }
.nls { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; cursor: pointer; }
.ayuda-ong { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: 10px; padding: 10px 14px; margin-top: 10px; }
.error-control { color: var(--peligro); font-weight: 600; margin: 6px 0 0; }
.error-control:empty { display: none; }
.error-form { color: var(--peligro); font-weight: 700; margin: 10px 0; }
.error-form:empty { display: none; }
.chips { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--caja); border: 1px solid var(--borde-campo); border-radius: 999px; padding: 4px 6px 4px 12px; }
.chip .quitar { min-width: 36px; min-height: 36px; border: 0; background: none; font-size: 1.2rem; color: var(--texto); cursor: pointer; }
.hijos { margin: 6px 0; display: grid; gap: 10px; }
.hijo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--caja); border: 1px solid var(--borde); border-radius: 10px; padding: 8px; }
.hijo input[type="number"] { max-width: 120px; }
.hijo select { min-width: 140px; }

/* Risultati */
.utiles { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; }
.utiles p { margin: 0; }
.disposicion-resultados { display: block; }
/* Due colonne solo quando c'è la colonna dei filtri (più di un'area): con un'area sola le schede usano tutta la larghezza. */
@media (min-width: 1024px) {
  .disposicion-resultados.con-filtros { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
  .columna-filtros { position: sticky; top: 16px; }
}
.filtros { margin: 8px 0 4px; }
.filtros-titulo { font-weight: 700; margin: 0 0 8px; font-size: 0.95rem; }
.filtros-lista { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) { .filtros-lista { flex-direction: column; align-items: stretch; } }
.filtro {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--caja);
  color: var(--texto); font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; text-align: left;
}
.filtro:hover { border-color: var(--primario); }
.filtro > span:first-of-type { flex: 1 1 auto; }
.filtro-n {
  min-width: 28px; padding: 1px 8px; border-radius: 999px; background: var(--fondo-2); color: var(--texto);
  font-size: 0.85rem; font-weight: 700; text-align: center;
}
/* Il filtro scelto si riconosce dal pieno e dal segno ✓, non solo dal colore. */
.filtro[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: 700; }
.filtro[aria-pressed="true"]::before { content: "✓"; margin-right: -2px; }
.filtro[aria-pressed="true"] .filtro-n { background: var(--caja); color: var(--texto); }

.resumen-estados { list-style: none; margin: 8px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.resumen-estado > a, .resumen-estado > .resumen-caja {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 14px; text-decoration: none; border: 1px solid transparent;
}
.resumen-estado a:hover { border-color: currentColor; }
.resumen-encaja > * { background: var(--encaja-fondo); color: var(--encaja-texto); }
.resumen-falta_dato > * { background: var(--falta-fondo); color: var(--falta-texto); }
.resumen-no_encaja > * { background: var(--no-fondo); color: var(--no-texto); }
.resumen-n { font-family: var(--letra-titulo); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.resumen-t { font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
.resumen-estado .icono-estado { width: 22px; height: 22px; font-size: 0.8rem; }

/* Segno di stato: forma e lettera diverse per ogni esito, oltre al colore. */
.icono-estado {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  font-family: var(--letra); font-weight: 800; font-size: 0.95rem; line-height: 1;
}
.icono-encaja { background: var(--encaja-texto); color: var(--caja); border-radius: 50%; }
.icono-falta_dato { background: var(--falta-texto); color: var(--caja); border-radius: 6px; }
.icono-no_encaja { background: transparent; color: var(--no-texto); border: 2px solid var(--no-texto); border-radius: 50%; }
.icono-cerrada { background: transparent; color: var(--texto-suave); border: 2px dashed var(--texto-suave); border-radius: 50%; }
.icono-info { background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 50%; font-family: var(--letra-titulo); font-style: italic; }

.estado-seccion { margin: 28px 0 8px; }
.titulo-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.titulo-estado .cuenta, .titulo-area .cuenta { color: var(--texto-suave); font-weight: 400; font-family: var(--letra); font-size: 0.95em; }
.titulo-area {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento);
  margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--borde);
}
.titulo-area .cuenta { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.grupo-area:first-of-type .titulo-area { margin-top: 8px; }

details.plegable {
  border: 1px solid var(--borde); border-radius: 16px; background: var(--fondo-2); padding: 0 16px; margin: 20px 0;
}
details.plegable > summary { list-style: none; cursor: pointer; padding: 12px 0; min-height: 52px; display: flex; align-items: center; gap: 8px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: "Mostrar"; margin-left: auto; font-weight: 600; color: var(--primario); text-decoration: underline; text-underline-offset: 0.18em; flex: 0 0 auto; }
details.plegable[open] > summary::after { content: "Ocultar"; }
details.plegable > summary .titulo-estado { margin: 0; font-size: 1.3rem; }
details.plegable[open] { padding-bottom: 12px; }

.ficha {
  background: var(--caja); border: 1px solid var(--borde); border-left-width: 6px; border-radius: 16px;
  padding: 16px 18px 12px; margin: 12px 0; box-shadow: var(--sombra);
}
/* Bordo sinistro per esito: pieno, tratteggiato, punteggiato. Si distinguono anche senza colore. */
.ficha-estado-encaja { border-left: 6px solid var(--encaja-texto); }
.ficha-estado-falta { border-left: 6px dashed var(--falta-texto); }
.ficha-estado-no { border-left: 6px dotted var(--no-texto); }
.ficha-cerrada { border-left: 6px double var(--borde-fuerte); }
.ficha-info { border-left: 6px solid var(--borde-fuerte); background: var(--caja); }
.ficha-cabecera { display: flex; flex-direction: column; gap: 8px; }
.ficha-titulo { font-size: 1.12rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-tipo, .etiqueta-estado, .etiqueta-revisar, .etiqueta-cerrada {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; border: 1px solid transparent;
}
.etiqueta-tipo, .etiqueta-cerrada { background: var(--caja); border-color: var(--borde-fuerte); color: var(--texto); font-weight: 600; }
.etiqueta-cerrada { color: var(--texto-suave); }
.estado-encaja { background: var(--encaja-fondo); color: var(--encaja-texto); }
.estado-falta { background: var(--falta-fondo); color: var(--falta-texto); }
.estado-no { background: var(--no-fondo); color: var(--no-texto); }
.etiqueta-estado.estado-encaja::before { content: "✓"; }
.etiqueta-estado.estado-falta::before { content: "?"; }
.etiqueta-estado.estado-no::before { content: "✕"; }
.etiqueta-revisar { background: var(--aviso-fondo); color: var(--aviso-texto); }
.ficha .resumen { margin-top: 10px; }
.etiqueta-bloque { font-weight: 700; margin: 14px 0 4px; }
.requisitos { list-style: none; margin: 0; padding: 0; }
.requisito { padding: 8px 0; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 2px; }
.resultado { font-size: 0.95rem; }
.resultado-si { color: var(--encaja-texto); font-weight: 600; }
.resultado-si::before { content: "✓ "; }
.resultado-no { color: var(--no-texto); font-weight: 600; }
.resultado-no::before { content: "✕ "; }
.resultado-falta { color: var(--falta-texto); font-weight: 600; }
.resultado-falta::before { content: "? "; }
.lista-enlaces { padding-left: 1.2rem; margin: 0; }
/* Il pulsante è allineato in alto (vertical-align: top): la sua linea di base sarebbe quella dell'ultima riga,
   e il pallino scenderebbe sull'ultima riga quando il testo va a capo. Il bersaglio da toccare è il pulsante
   stesso, alto almeno 44 px (il padding del li non è cliccabile, quindi il li non ne ha). */
.lista-enlaces li { padding: 0; }
.lista-enlaces .enlace { display: inline-flex; align-items: flex-start; vertical-align: top; max-width: 100%; min-height: 44px; padding: 0; line-height: inherit; text-align: left; }
.comprueba ul { padding-left: 1.2rem; margin: 0 0 8px; }
.ficha-pie { border-top: 1px solid var(--borde); margin-top: 12px; padding-top: 10px; font-size: 0.95rem; }
.ficha-pie p { margin: 4px 0; }
.aviso-revisar { color: var(--falta-texto); font-weight: 600; }
.mas { margin: 10px 0; }
.mas > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primario); font-weight: 600; }

/* Perfil, ayuda, empleo */
.resumen-perfil { list-style: none; padding: 0; margin: 12px 0; border-top: 1px solid var(--borde); }
.resumen-perfil li { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.linea-etiqueta { color: var(--texto-suave); }
.mensaje { min-height: 1.4em; font-weight: 600; }
.lista-ayuda { list-style: none; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .lista-ayuda { grid-template-columns: repeat(2, 1fr); } }
.tarjeta-ayuda { background: var(--caja); border: 1px solid var(--borde); border-radius: 16px; padding: 16px 18px; margin: 0; box-shadow: var(--sombra); }
.tarjeta-ayuda h2 { font-size: 1.15rem; margin: 0 0 6px; }
.lista-enlaces-grandes { list-style: none; padding: 0; display: grid; gap: 10px; }
.lista-enlaces-grandes a {
  display: flex; align-items: center; min-height: 56px; padding: 12px 18px; background: var(--caja);
  border: 1px solid var(--borde); border-left: 5px solid var(--primario); border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--texto);
}
.lista-enlaces-grandes a:hover { border-color: var(--primario); }

/* Pagine interne (domande, profilo, ayuda): colonna di lettura. */
#preguntas, #perfil, #ayuda, #empleo { max-width: 780px; }

@media (min-width: 1024px) {
  .cabecera-interna { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
  .ficha { padding: 22px 26px 16px; }
}

/* Risultati: priorità in cima, domande che sbloccano schede, ordine scelto, schede compatte. */
.barra-orden { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.barra-orden label { font-weight: 700; }
.orden-select {
  min-height: 44px; font: inherit; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--borde-fuerte);
  background: var(--caja); color: var(--texto);
}
.destacadas, .responder { margin: 18px 0 8px; }
.titulo-destacadas, .titulo-responder { font-size: 1.3rem; margin: 0 0 4px; }
.responder { background: var(--caja); border: 1px solid var(--borde); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra); }
.lista-responder { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.responder-boton {
  width: 100%; min-height: 56px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--borde-fuerte); border-left: 5px solid var(--falta-texto); border-radius: 12px;
  background: var(--caja); color: var(--texto); font: inherit; cursor: pointer;
}
.responder-boton:hover { border-color: var(--primario); }
.responder-frase { font-weight: 700; }
.responder-pregunta { color: var(--texto-suave); font-size: 0.92rem; }
.datos-ficha { display: grid; grid-template-columns: 1fr; gap: 6px 16px; margin: 10px 0 0; }
@media (min-width: 560px) { .datos-ficha { grid-template-columns: 1fr 1fr; } }
.datos-ficha dt { font-size: 0.85rem; color: var(--texto-suave); font-weight: 600; }
.datos-ficha dd { margin: 0; font-weight: 600; }
.ficha-compacta .faltan { margin-top: 10px; }
.ficha-compacta .faltan .etiqueta-bloque { margin-top: 0; }
.detalle { margin-top: 10px; border-top: 1px solid var(--borde); }
.detalle > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primario); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.18em; list-style: none;
}
.detalle > summary::-webkit-details-marker { display: none; }
.detalle[open] > summary { margin-bottom: 4px; }
.responder-boton:focus-visible, .orden-select:focus-visible, .detalle > summary:focus-visible, .filtro:focus-visible {
  outline: 3px solid var(--primario); outline-offset: 2px;
}
.grupo-lista { display: block; }