/*
| Web pública de cita previa. Se usa en casa, con el móvil y a la luz del día: fondo claro,
| texto grande, objetivos táctiles de 48 px y contraste AA (WCAG 2.1, RD 1112/2018).
| Misma tinta y acento que el kiosco y la pantalla, para que el ciudadano reconozca el sistema.
*/
:root {
    --tinta: #0b1b2b;
    --tinta-suave: #3d4c5c;     /* 8.9:1 sobre --papel */
    --papel: #f6f4ef;
    --superficie: #ffffff;
    --linea: #cfd6dd;
    --acento: #ffd23f;
    --acento-tinta: #5c4400;    /* texto sobre fondos de acento */
    --elegido: #e7eef6;
    --peligro: #a3141c;         /* 7.1:1 sobre blanco */
    --exito: #14632f;
    --radio: .5rem;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.125rem;
    line-height: 1.55;
}

::selection { background: var(--acento); color: var(--tinta); }

a { color: var(--tinta); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .16em; }

:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 3px;
    box-shadow: 0 0 0 7px var(--acento);
    border-radius: 2px;
}

.saltar { position: absolute; left: 1rem; top: -4rem; padding: .75rem 1rem; background: var(--tinta); color: #fff; z-index: 10; }
.saltar:focus { top: 1rem; }

/* ---------- Estructura ---------- */

.cabecera { background: var(--tinta); padding: 1rem; }
.marca { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.marca:hover { text-decoration: underline; }
.marca:focus-visible { outline-color: #fff; }

.contenido { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.contenido:focus { outline: none; }

h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem); line-height: 1.15; margin: .5rem 0 .5rem; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 2.25rem 0 .75rem; text-wrap: balance; }
.intro { margin: 0 0 1.5rem; color: var(--tinta-suave); }
.ayuda { color: var(--tinta-suave); font-size: 1rem; margin: .25rem 0 .75rem; }
.enlace-secundario { margin-top: 2.5rem; }

.migas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 1rem; color: var(--tinta-suave); }
.migas li + li::before { content: "›"; margin-right: .5rem; color: var(--tinta-suave); }
.migas [aria-current] { font-weight: 600; color: var(--tinta); }

/* ---------- Listas de opciones (oficinas, trámites) ---------- */

.opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.opcion {
    display: flex; flex-direction: column; gap: .125rem;
    min-height: 3.5rem; padding: .875rem 3rem .875rem 1rem;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
    text-decoration: none; position: relative;
    box-shadow: 0 1px 2px rgb(11 27 43 / .06);
}
.opcion::after {
    content: ""; position: absolute; right: 1.25rem; top: 50%;
    width: .6rem; height: .6rem; border: solid var(--tinta); border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
}
.opcion:hover { border-color: var(--tinta); }
.opcion-titulo { font-weight: 600; }
.opcion-detalle { color: var(--tinta-suave); font-size: 1rem; }
.grupo h2 { margin-top: 2rem; }

/* ---------- Días y horas ---------- */

.dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.dia {
    display: flex; flex-direction: column; min-height: 5.25rem; padding: .625rem .75rem;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
    text-decoration: none; line-height: 1.3;
}
.dia:hover { border-color: var(--tinta); }
.dia[aria-current] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dia-semana { font-size: .95rem; text-transform: capitalize; }
.dia-fecha { font-weight: 700; }
.dia-libres { font-size: .95rem; color: var(--exito); margin-top: auto; }
.dia[aria-current] .dia-libres { color: #fff; }
.dia-completo .dia-libres { color: var(--tinta-suave); }
.paginas { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 0; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
legend h2 { margin-bottom: .75rem; }

.rejilla-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.hora { position: relative; display: block; }
.hora input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hora span {
    display: flex; align-items: center; justify-content: center; min-height: 3rem;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.hora input:hover + span { border-color: var(--tinta); }
.hora input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hora input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 7px var(--acento); }

/* ---------- Formularios ---------- */

.formulario label, .contacto label { display: block; font-weight: 600; margin: 1.25rem 0 .375rem; }
input[type="email"], input[type="tel"], input[type="text"] {
    width: 100%; min-height: 3rem; padding: .625rem .75rem;
    font: inherit; color: var(--tinta); background: var(--superficie);
    border: 2px solid var(--tinta-suave); border-radius: var(--radio);
    caret-color: var(--tinta);
}
input[aria-invalid="true"] { border-color: var(--peligro); }
.campo-localizador { text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; max-width: 18rem; }

.sin-correo { margin-top: 1.25rem; }
summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; min-height: 2.75rem; display: flex; align-items: center; }
summary:hover { text-decoration-thickness: .16em; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.boton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3.25rem; padding: .75rem 1.5rem; margin-top: 2rem;
    font: inherit; font-weight: 700; color: #fff; background: var(--tinta);
    border: 2px solid var(--tinta); border-radius: var(--radio); cursor: pointer; text-decoration: none;
}
.boton:hover { background: #1d3550; }
.boton-secundario { color: var(--tinta); background: var(--superficie); }
.boton-secundario:hover { background: var(--elegido); }
.boton-peligro { background: var(--peligro); border-color: var(--peligro); margin-top: .5rem; }
.boton-peligro:hover { background: #7f0f15; }

/* ---------- Errores ---------- */

.errores {
    margin: 0 0 1.5rem; padding: 1rem 1.25rem;
    background: #fff4f4; border: 2px solid var(--peligro); border-radius: var(--radio);
}
.errores h2 { margin: 0 0 .25rem; font-size: 1.1rem; color: var(--peligro); }
.errores ul { margin: 0; padding-left: 1.25rem; }
.error-campo { color: var(--peligro); font-weight: 600; margin: .375rem 0 0; }

/* ---------- Resguardo de la cita ---------- */

.resguardo {
    margin-top: 1rem; padding: 1.25rem; background: var(--superficie);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: 0 2px 8px rgb(11 27 43 / .07);
}
.localizador-etiqueta { margin: 0; font-weight: 600; color: var(--tinta-suave); }
.localizador {
    margin: .125rem 0 .5rem; font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem); font-weight: 800;
    letter-spacing: .12em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.datos { margin: 1.25rem 0 0; display: grid; gap: .875rem; }
.datos dt { font-size: 1rem; color: var(--tinta-suave); }
.datos dd { margin: 0; font-weight: 600; }
.llegada { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); }

.acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1rem; }
.acciones .boton-secundario { margin-top: 1rem; }
.cancelar p { margin: .5rem 0 0; }

/* ---------- Protección de datos ---------- */

.info-privacidad { margin: 1.5rem 0 0; font-size: .95rem; color: var(--tinta-suave); max-width: 65ch; }
.aviso-borrador { padding: .75rem 1rem; background: #fff8e0; border: 1px solid #c9a227; border-radius: var(--radio); color: var(--acento-tinta); font-weight: 600; }
.texto-legal { max-width: 65ch; }
.texto-legal h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.texto-legal p { margin: 0 0 .75rem; }
.pie { max-width: 42rem; margin: 0 auto; padding: 0 1rem 2rem; font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) {
    .opcion, .dia, .hora span, .boton { transition: border-color .15s ease-out, background-color .15s ease-out; }
}