/* Portal de familias: mismo diseno que gestion, sin barra inferior */
body.portal { padding-bottom: 0; display: flex; flex-direction: column; min-height: 100dvh; background: var(--fondo) linear-gradient(180deg, color-mix(in srgb, var(--p) 12%, #fff) 0, var(--fondo) 280px) no-repeat; }
.marca-mini { width: 36px; height: 36px; border-radius: 10px; }
.portada { text-align: center; padding: 1rem 0 1.25rem; }
.portada h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.portada .logo { max-width: 320px; width: 88%; margin-bottom: 1.25rem; }
.lienzo-firma { width: 100%; height: 170px; display: block; background: #fff; border: 2px dashed #CBD5DD; border-radius: 13px; touch-action: none; }
.lienzo-firma.falta { border-color: var(--r); }
details > summary { cursor: pointer; }
[hidden] { display: none !important; }

.pagina { width: 100%; flex: 1 0 auto; }
/* La portada queda centrada en el alto que deja el pie */
.pagina.centrada { display: flex; flex-direction: column; justify-content: center; padding-top: 1rem; }
.pagina.centrada .eleccion { width: 100%; }
.saltar { position: absolute; left: -999px; z-index: 100; background: #fff; padding: .5rem 1rem; }
.saltar:focus { left: .5rem; top: .5rem; }

/* Eleccion en dos botones grandes: uno junto a otro en PC, uno sobre otro en movil */
.eleccion { display: grid; gap: .85rem; grid-template-columns: 1fr; max-width: 820px; margin: 0 auto 1.25rem; }
@media (min-width: 768px) { .eleccion { grid-template-columns: 1fr 1fr; } }
.eleccion-boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 170px; padding: 1.25rem; border-radius: var(--radio); text-align: center; text-decoration: none; color: #fff; cursor: pointer; box-shadow: var(--sombra); transition: transform .12s; }
.eleccion-boton:hover { color: #fff; transform: translateY(-2px); }
.eleccion-boton:has(input:focus-visible), .eleccion-boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.eleccion-boton:has(input:checked) { outline: 3px solid var(--tinta); outline-offset: 2px; }
.eleccion-boton.azul { background: #0079A8; }
.eleccion-boton.verde { background: #3E8A32; }
.eleccion-boton > i { font-size: 2.2rem; line-height: 1; }
.eleccion-boton b { font-size: 1.3rem; font-weight: 800; }
.eleccion-boton small { font-size: .98rem; opacity: .96; }
.eleccion-pie { margin-top: .35rem; padding: .15rem .7rem; border-radius: 999px; background: rgba(255,255,255,.2); font-size: .85rem; font-weight: 700; }
.pregunta { text-align: center; margin: .75rem 0 .35rem; }
.entrada { max-width: 480px; margin: 1rem auto; }

/* Contacto y pie */
.contacto { text-align: center; margin-bottom: 1rem; }
.contacto h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.contacto-botones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.contacto-botones a { display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: 0 1rem; border-radius: 14px; background: #fff; box-shadow: var(--sombra); color: var(--tinta); font-weight: 700; text-decoration: none; }
.contacto-botones .bi-whatsapp { color: #1B8A4B; }
.pie { padding: .9rem 1rem; text-align: center; font-size: .9rem; color: var(--suave); border-top: 1px solid #E4E9EE; background: #fff; }
.pie p { margin: 0; }
.pie a { color: var(--tinta); }
.pie-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-bottom: .6rem; }
.pie-redes a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fondo); font-size: 1.15rem; text-decoration: none; }
.pie-legal { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center; margin-bottom: .35rem !important; }

/* Flotantes y accesibilidad */
.flotante { position: fixed; z-index: 40; width: 50px; height: 50px; border: 0; border-radius: 50%; color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(30,42,53,.3); }
.flotante-accesibilidad { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); background: #1E2A35; }
.flotante-arriba { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); background: #0079A8; }
.panel-accesibilidad { position: fixed; z-index: 41; left: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: min(290px, calc(100vw - 28px)); max-height: calc(100dvh - 100px); overflow-y: auto; padding: .85rem; border-radius: var(--radio); background: #fff; color: var(--tinta); box-shadow: 0 12px 34px rgba(30,42,53,.3); }
.opcion-accesibilidad { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 46px; padding: 0 .75rem; margin-bottom: .3rem; border: 2px solid #DDE3E9; border-radius: 12px; background: #fff; color: var(--tinta); font-weight: 700; text-align: left; }
.opcion-accesibilidad[aria-pressed=true] { border-color: #0079A8; background: #E3F3FA; }
.aviso-cookies { position: fixed; z-index: 39; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 88px)); display: flex; flex-direction: column; gap: .6rem; padding: .9rem; border-radius: var(--radio); background: #fff; box-shadow: 0 10px 30px rgba(30,42,53,.24); font-size: .85rem; line-height: 1.4; }
.aviso-cookies p { margin: 0; }
.aviso-cookies .btn { width: 100%; }
/* El aviso ocupa la esquina del boton de volver arriba */
body:has(#avisoCookies:not([hidden])) .flotante-arriba { display: none; }
.grupo-accesibilidad { margin-bottom: .55rem; font-weight: 700; }
.grupo-accesibilidad > span { display: block; margin-bottom: .25rem; }
.niveles-accesibilidad { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; }
.opcion-accesibilidad.nivel { justify-content: center; min-height: 42px; margin: 0; padding: 0 .2rem; font-size: .85rem; text-align: center; }
@media (max-width: 767px) {
  /* Deja sitio al boton redondo de accesibilidad */
  .pie > p:last-child { padding: 0 58px; }
  .pagina.centrada .eleccion-boton { min-height: 130px; padding: .9rem; }
  .pagina.centrada .eleccion-boton > i { font-size: 1.8rem; }
}

/* Asistente */
.asistente { max-width: 900px; margin: 0 auto; }
.asistente-cabeza { margin-bottom: .75rem; }
.progreso { height: 8px; border-radius: 999px; background: #DDE3E9; overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; border-radius: 999px; background: #0079A8; transition: width .2s; }
.paso-texto { margin: .35rem 0 0; font-weight: 700; color: var(--suave); }
.paso h2:focus { outline: none; }
.paso h3 { font-size: 1rem; font-weight: 800; margin-bottom: .4rem; }
.asistente-nav { display: flex; gap: .6rem; margin-bottom: .35rem; }
.asistente-nav [data-seguir], .asistente-nav [data-enviar-alta] { flex: 1; }
.leyenda { font-size: .88rem; color: var(--suave); margin-bottom: .6rem; }

/* Lo obligatorio se ve de un vistazo */
.ob-marca, label.ob::after, legend.ob::after { color: #C4281C; font-weight: 800; }
label.ob::after, legend.ob::after { content: ' *'; }
.form-label.ob { font-weight: 700; }
.form-control:required:not(.is-valid):not(.is-invalid), .form-select:required:not(.is-valid):not(.is-invalid) { border-left: 4px solid #0079A8; }
.aviso-campo { margin-top: .25rem; font-size: .88rem; font-weight: 700; color: #B3261E; }
.aviso-campo::before { content: '\26A0\FE0F  '; }

/* Foto */
.foto-carnet { display: flex; gap: 1rem; align-items: center; padding: .75rem; margin-bottom: .85rem; border-radius: 14px; background: color-mix(in srgb, var(--p) 8%, #fff); }
.foto-marco { position: relative; flex: none; width: 96px; height: 128px; border: 2px dashed #9DB1C0; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; color: #7C93A5; font-size: 2.2rem; }
.foto-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-texto small { display: block; color: var(--suave); }

/* Salud */
.opciones-salud { max-height: 300px; overflow-y: auto; padding: .6rem; border: 1px solid #DDE3E9; border-radius: 13px; }
.opciones-salud h3 { margin-top: .4rem; }
.opcion-salud { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .1rem .7rem; margin: 0 .3rem .35rem 0; border: 1px solid #DDE3E9; border-radius: 999px; cursor: pointer; }
.opcion-salud:has(input:checked) { border-color: #0079A8; background: #E3F3FA; font-weight: 700; }
.opcion-salud input { margin: 0; }
.marcadas { display: flex; flex-wrap: wrap; gap: .35rem; }
.marcada { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .1rem .75rem; border: 0; border-radius: 999px; background: #0079A8; color: #fff; font-weight: 700; }
.nota-info { padding: .6rem .75rem; border-radius: 12px; background: #FFF6DD; font-size: .92rem; }

/* Textos legales */
.texto-legal { max-height: 220px; overflow-y: auto; padding: .7rem .8rem; margin-bottom: .5rem; border-radius: 12px; background: var(--fondo); white-space: pre-wrap; font-size: .94rem; }
.aceptacion { margin-bottom: 1rem; }
.opcion-si-no { display: flex; gap: .6rem; align-items: center; min-height: 54px; padding: .5rem .8rem; border: 2px solid #DDE3E9; border-radius: 14px; cursor: pointer; font-weight: 700; }
.opcion-si-no:has(input:checked) { border-color: #0079A8; background: #E3F3FA; }
.opcion-si-no input { flex: none; margin: 0; }

/* Preferencias de accesibilidad */
html.ac-letra-1 { font-size: 115%; }
html.ac-letra-2 { font-size: 135%; }
html.ac-letra-3 { font-size: 160%; }
/* app.css fija 16 px: asi el texto sigue el tamano elegido */
html[class*="ac-letra-"] body, html[class*="ac-letra-"] .form-control, html[class*="ac-letra-"] .form-select { font-size: 1rem; }
html.ac-linea-1 body, html.ac-linea-1 p, html.ac-linea-1 label, html.ac-linea-1 small { line-height: 1.75; }
html.ac-linea-2 body, html.ac-linea-2 p, html.ac-linea-2 label, html.ac-linea-2 small { line-height: 2.1; }
html.ac-linea-3 body, html.ac-linea-3 p, html.ac-linea-3 label, html.ac-linea-3 small { line-height: 2.5; }
html.ac-gris { filter: grayscale(1); }
html.ac-enlaces a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px solid #FECC27; outline-offset: 1px; }
html.ac-contraste { --tinta: #000; --suave: #1E2A35; --fondo: #fff; }
html.ac-contraste body { background: #fff; color: #000; }
html.ac-contraste .tarjeta, html.ac-contraste .form-control, html.ac-contraste .form-select, html.ac-contraste .opcion-si-no { border: 2px solid #000; }
html.ac-contraste .text-muted { color: #000 !important; }
html.ac-contraste .eleccion-boton { background: #003B55; }
html.ac-negro { --tinta: #FFF; --suave: #FFE680; --fondo: #000; }
html.ac-negro body, html.ac-negro .pie, html.ac-negro .barra, html.ac-negro .tarjeta, html.ac-negro .contacto-botones a, html.ac-negro .aviso-cookies, html.ac-negro .panel-accesibilidad, html.ac-negro .opcion-accesibilidad, html.ac-negro .texto-legal, html.ac-negro .modal-content, html.ac-negro .foto-marco, html.ac-negro .foto-carnet { background: #000 !important; color: #fff !important; }
html.ac-negro .tarjeta, html.ac-negro .contacto-botones a, html.ac-negro .opcion-accesibilidad, html.ac-negro .opcion-si-no { border: 2px solid #FFE680; }
html.ac-negro a { color: #FFE680; }
html.ac-negro .text-muted { color: #FFE680 !important; }
html.ac-negro .form-control, html.ac-negro .form-select { background-color: #000; color: #fff; border: 2px solid #FFE680; }
html.ac-negro .eleccion-boton { background: #000; border: 3px solid #FFE680; color: #FFE680; }
html.ac-negro .opcion-si-no:has(input:checked), html.ac-negro .opcion-accesibilidad[aria-pressed=true], html.ac-negro .opcion-salud:has(input:checked) { background: #3A3200 !important; }
html.ac-negro .btn-close { filter: invert(1); }
html.ac-negro .pie-redes a { background: #000; border: 1px solid #FFE680; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }