/* =============================================================================
   campus.adenaformacion.es · hoja de estilo principal
   -----------------------------------------------------------------------------
   Mobile-first. Objetivo de accesibilidad: WCAG 2.2 AA.
   Identidad visual: paleta oficial del manual de Adena. El terracota y el
   dorado son los colores principales; el negro se reserva para el pie.

   Nota sobre tipografía: la CSP no permite recursos externos, así que no se
   carga Roboto desde ningún CDN. Se declara la familia por si está instalada y
   se cae a la pila del sistema. PENDIENTE: alojar los .woff2 de Roboto y
   Roboto Slab en /assets/fonts para fijar la identidad tipográfica.
   ========================================================================== */

:root {
    /* --- Paleta oficial de marca -------------------------------------------
       Los siete colores del manual de Adena (CÓDIGOS DE COLORES.pdf).
       El terracota y el dorado mandan; el negro se reserva para el pie. */
    --crema: #F4EEE8;        /* fondo principal */
    --arena: #EED9C5;        /* superficie alterna */
    --dorado: #CBBD5D;       /* acento, el del isotipo y el eslogan */
    --terracota: #C06453;    /* color de marca */
    --carbon: #302F2B;       /* texto y fondos oscuros */
    --rojo: #C42532;         /* alertas */
    --azul: #28559E;         /* enlaces e información */

    /* Variantes derivadas para cumplir el contraste AA con texto pequeño: el
       terracota y el dorado de marca no llegan como fondo de texto claro. */
    --terracota-oscuro: #94402F;
    --carbon-suave: #4A4842;

    /* --- Colores funcionales --- */
    --fondo: var(--crema);
    --fondo-suave: #FBF7F3;
    --fondo-tarjeta: #FFFFFF;
    --texto: var(--carbon);
    --texto-suave: var(--carbon-suave);
    --borde: #E2D6C9;
    --borde-fuerte: #C3B2A4;
    --foco: var(--azul);

    --exito: #1F6B4A;
    --exito-fondo: #E6F2EC;
    --atencion: #8A5A00;
    --atencion-fondo: #FBF1DC;
    --error: var(--rojo);
    --error-fondo: #FBE9EA;

    /* --- Tipografía --- */
    --fuente-texto: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fuente-titulo: "Roboto Slab", Georgia, "Times New Roman", serif;

    /* --- Medidas --- */
    --ancho-maximo: 46rem;
    --radio: 14px;
    --radio-pequeno: 8px;
    --espacio: 1rem;
    --sombra: 0 8px 24px rgba(48, 47, 43, 0.10);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Nunca se fija el tamaño base en px: respeta el ajuste del navegador. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Accesibilidad ------------------------------------------------------- */

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--terracota-oscuro);
    color: var(--crema);
    padding: 0.75rem 1rem;
    z-index: 100;
}

.salto-contenido:focus {
    left: 0;
}

/* Foco siempre visible, en todos los elementos interactivos. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

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

.contenedor {
    width: 100%;
    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--espacio);
}

.principal {
    padding-block: 1.5rem 3rem;
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
    /* Terracota, el color principal de la marca. El filo dorado inferior es el
       segundo color del manual y separa la cabecera del resto.

       Encima va la versión monocroma en crema del manual de marca (LOGO
       HORIZONTAL CREMA), que es la prevista para fondos de color: el escudo va
       perfilado en lugar de relleno, así que no compite con el terracota del
       fondo. */
    background: var(--terracota);
    border-bottom: 4px solid var(--dorado);
    padding-block: 1rem;
}

.cabecera__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 1rem;
}

.cabecera__marca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
}

.cabecera__logo {
    height: 2rem;
    width: auto;
}

/* Teléfono de contacto: quien duda a mitad de la matrícula tiene a mano a
   quién preguntar sin salirse del formulario. */
.cabecera__telefono {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #FFFFFF;
    text-decoration: none;
    /* Área táctil cómoda en móvil. */
    min-height: 40px;
}

.cabecera__telefono:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #FFFFFF;
}

.cabecera__telefono-icono {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

.cabecera__telefono-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.cabecera__telefono-rotulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.cabecera__telefono-numero {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

/* En móvil la cabecera cabe en una sola línea: el rótulo "Matrícula online"
   se retira —el contexto ya lo da la propia página— y el teléfono se queda
   con su icono y el número.

   Nada de envolver: el teléfono conserva su tamaño y es el logo el que cede
   ancho, porque bajarlo a la línea siguiente rompía el bloque de la marca. */
@media (max-width: 40rem) {
    .cabecera__interior {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .cabecera__rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .cabecera__marca {
        /* Sin esto un elemento flexible no baja de su tamaño intrínseco. */
        min-width: 0;
        flex: 0 1 auto;
    }

    /* El logo se encoge dentro de su caja sin deformarse: object-fit conserva
       la proporción y object-position lo mantiene pegado a la izquierda. */
    .cabecera__logo {
        height: 1.75rem;
        width: 100%;
        max-width: 11.25rem;
        object-fit: contain;
        object-position: left center;
    }

    .cabecera__telefono {
        flex: none;
        padding: 0.35rem 0.625rem;
        gap: 0.375rem;
    }

    .cabecera__telefono-rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .cabecera__telefono-numero {
        font-size: 0.9rem;
    }
}

.cabecera__rotulo {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--fuente-titulo);
    /* Tamaño y peso de "texto grande": sobre terracota, el contraste exigido
       baja de 4.5:1 a 3:1 y así el rótulo cumple AA sin oscurecer la marca. */
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* --- Títulos ------------------------------------------------------------- */

.titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: var(--carbon);
}

.subtitulo {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
    color: var(--carbon);
}

.familia__titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    margin: 0 0 0.875rem;
    color: var(--terracota-oscuro);
}

/* Línea que continúa tras el rótulo, para separar bloques sin recargar. */
.familia__titulo::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--dorado);
    opacity: 0.5;
}

.parrafo {
    margin: 0 0 1rem;
    color: var(--texto-suave);
}

.etiqueta {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terracota-oscuro);
}

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra);
}

.tarjeta--destacada {
    border-left: 6px solid var(--terracota);
}

.tarjeta--error {
    border-left: 6px solid var(--error);
}

.error__codigo {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--error);
}

/* --- Listas de datos ----------------------------------------------------- */

.datos {
    margin: 1rem 0 0;
    display: grid;
    gap: 0.5rem;
}

/* En pantalla estrecha, cada dato ocupa dos líneas: rótulo arriba y valor
   debajo, ambos alineados a la izquierda. Forzar dos columnas hace que un
   valor largo (un email) salte de línea y quede descolgado. */
.datos__par {
    display: grid;
    gap: 0.125rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--borde);
}

.datos__par:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.datos dt {
    font-size: 0.875rem;
    color: var(--texto-suave);
}

.datos dd {
    margin: 0;
    font-weight: 500;
    /* Un IBAN o un email largo se parten en lugar de desbordar la tarjeta. */
    overflow-wrap: anywhere;
}

@media (min-width: 30rem) {
    .datos__par {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        gap: 0.25rem 1rem;
        align-items: baseline;
    }

    .datos dd {
        text-align: right;
    }
}

.datos__precio {
    font-weight: 700;
    color: var(--terracota-oscuro);
}

/* Casillas en columnas: una lista larga de asignaturas cabe de un vistazo. */
.casillas-rejilla {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 30rem) {
    .casillas-rejilla {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Catálogo de cursos -------------------------------------------------- */

.cursos {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

/* Tarjeta seleccionable completa: se puede pulsar en cualquier punto.
   La casilla real queda invisible pero sigue existiendo para el teclado y los
   lectores de pantalla; lo que se ve es la casilla dibujada en ::before. */
.curso {
    position: relative;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.curso:hover {
    border-color: var(--terracota);
}

.curso__control {
    position: absolute;
    top: 1.05rem;
    left: 1rem;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    opacity: 0;
}

.curso__etiqueta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.375rem;
    /* Hueco a la izquierda para la casilla dibujada. */
    padding: 1rem 1rem 1rem 3.25rem;
    cursor: pointer;
}

.curso__etiqueta::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 1rem;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--borde-fuerte);
    border-radius: 5px;
    background: var(--fondo-tarjeta);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* La marca de verificación: un ángulo girado. Al ser una forma y no un color,
   el estado sigue siendo perceptible sin distinguir colores. */
.curso__etiqueta::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 1.45rem;
    width: 0.45rem;
    height: 0.8rem;
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.curso__control:checked + .curso__etiqueta::before {
    background: var(--terracota);
    border-color: var(--terracota);
}

.curso__control:checked + .curso__etiqueta::after {
    transform: rotate(45deg) scale(1);
}

.curso__control:focus-visible + .curso__etiqueta {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: var(--radio);
}

.curso--elegido {
    border-color: var(--terracota-oscuro);
    box-shadow: 0 0 0 1px var(--terracota-oscuro);
}

.curso__datos {
    display: block;
    min-width: 0;
}

.curso__nombre {
    display: block;
    font-weight: 500;
    line-height: 1.35;
}

.curso__carga {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--texto-suave);
}

.curso__precio {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--carbon);
    white-space: nowrap;
}

.curso__periodo {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

/* A partir de una anchura cómoda, el precio se alinea a la derecha. */
@media (min-width: 26rem) {
    .curso__etiqueta {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.25rem 1rem;
    }

    .curso__precio {
        text-align: right;
    }
}

/* --- Avisos -------------------------------------------------------------- */

.aviso {
    border-radius: var(--radio);
    padding: 0.875rem 1rem;
    margin: 1.5rem 0;
    border: 1px solid var(--borde);
    background: var(--fondo-tarjeta);
}

.aviso p {
    margin: 0;
}

.aviso--atencion {
    background: var(--atencion-fondo);
    border-color: var(--atencion);
    color: #4A3200;
}

.aviso--error {
    background: var(--error-fondo);
    border-color: var(--error);
    color: #6B1414;
}

.aviso--exito {
    background: var(--exito-fondo);
    border-color: var(--exito);
    color: #10402C;
}

/* --- Botones ------------------------------------------------------------- */

.boton {
    display: inline-block;
    /* Área táctil mínima cómoda en móvil. */
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--radio);
    background: var(--terracota-oscuro);
    color: #FFFFFF;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.boton:hover {
    background: #6E2417;
}

.boton--secundario {
    background: transparent;
    color: var(--carbon);
    border-color: var(--carbon);
}

.boton--secundario:hover {
    background: rgba(48, 47, 43, 0.08);
}

/* --- Pie ----------------------------------------------------------------- */

.pie {
    background: var(--carbon);
    color: var(--crema);
    border-top: 4px solid var(--dorado);
    padding-block: 2.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 60rem) {
    .pie {
        padding-bottom: 1.5rem;
    }
}

.pie__principal {
    display: grid;
    gap: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(244, 238, 232, 0.18);
}

/* Logotipo y eslogan oficiales, sobre fondo oscuro como manda la guía.
   El logotipo manda y el eslogan lo acompaña algo menor: los dos alineados a
   la izquierda y con anchuras que dejan el bloque equilibrado. */
.pie__logo {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: auto;
    margin-bottom: 1.25rem;
}

.pie__slogan {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
}

@media (min-width: 40rem) {
    .pie__logo {
        max-width: 18rem;
    }

    .pie__slogan {
        max-width: 17rem;
    }
}

.pie__titulo {
    margin: 0 0 0.875rem;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    color: var(--dorado);
}

.pie__datos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.pie__dato {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.pie__icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(192, 100, 83, 0.28);
    color: var(--terracota);
}

.pie__icono svg {
    width: 1.05rem;
    height: 1.05rem;
}

.pie__enlace {
    color: var(--crema);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.pie__enlace:hover {
    color: var(--dorado);
}

.pie__legal {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    padding-top: 1.25rem;
    text-align: center;
}

.pie__nota {
    margin: 0;
    font-size: 0.82rem;
    color: #CFC7BC;
}

/* Firma de quien ha hecho el campus. Va centrada y sin recuadro: es una firma,
   no una llamada a la acción, y el recuadro le daba más peso del que le toca en
   el pie de Adena. */
.pie__linkealia {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    justify-self: center;
    padding: 0;
    text-decoration: none;
    opacity: 0.85;
}

.pie__linkealia:hover {
    opacity: 1;
}

.pie__linkealia-rotulo {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #CFC7BC;
}

.pie__linkealia img {
    display: block;
    width: 7.5rem;
    height: auto;
}

@media (min-width: 40rem) {
    .pie__principal {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .pie__datos {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
    }

    .pie__legal {
        gap: 1.25rem;
    }
}

/* --- Utilidades de accesibilidad ----------------------------------------- */

/* Visible para lectores de pantalla, oculto visualmente. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Barra de progreso --------------------------------------------------- */

.progreso {
    background: var(--fondo-tarjeta);
    border-bottom: 1px solid var(--borde);
    padding-block: 0.875rem;
}

.progreso__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
    margin-bottom: 0.625rem;
}

.progreso__texto {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terracota-oscuro);
}

/* Nombre del paso en curso: en móvil sustituye a la lista de círculos. */
.progreso__actual {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    color: var(--texto);
}

/* Barra de avance, solo para pantallas estrechas. */
.progreso__barra {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--arena);
    overflow: hidden;
}

.progreso__barra-relleno {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--terracota);
    transition: width 0.3s ease;
}

/* La lista de pasos aparece a partir de tablet; en móvil basta la barra. */
.progreso__lista {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 40rem) {
    .progreso {
        padding-block: 1rem 0.875rem;
    }

    .progreso__barra {
        display: none;
    }

    .progreso__actual {
        display: none;
    }

    .progreso__cabecera {
        margin-bottom: 0.75rem;
    }

    .progreso__lista {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .progreso__paso {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
        text-align: center;
        font-size: 0.8rem;
        color: var(--texto-suave);
    }

    /* Línea que une cada paso con el anterior. Se dibuja por detrás del
       círculo y no aparece en el primero. */
    .progreso__paso::before {
        content: "";
        position: absolute;
        top: 1.1875rem;
        right: 50%;
        left: -50%;
        height: 3px;
        background: var(--borde);
    }

    .progreso__paso:first-child::before {
        display: none;
    }

    /* El tramo ya recorrido se colorea: llega hasta el paso actual incluido. */
    .progreso__paso--hecho::before,
    .progreso__paso--actual::before {
        background: var(--dorado);
    }

    .progreso__marca {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 2.375rem;
        height: 2.375rem;
        border-radius: 50%;
        border: 3px solid var(--borde);
        background: var(--fondo-tarjeta);
        font-size: 1rem;
        font-weight: 700;
        color: var(--texto-suave);
    }

    .progreso__marca svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Completado: dorado con marca de verificación, no solo color. */
    .progreso__paso--hecho .progreso__marca {
        background: var(--dorado);
        border-color: var(--dorado);
        color: var(--carbon);
    }

    /* En curso: terracota relleno y anillo, para que destaque de un vistazo. */
    .progreso__paso--actual .progreso__marca {
        background: var(--terracota);
        border-color: var(--terracota);
        color: #FFFFFF;
        box-shadow: 0 0 0 4px rgba(192, 100, 83, 0.18);
    }

    .progreso__paso--actual {
        color: var(--terracota-oscuro);
        font-weight: 700;
    }

    .progreso__rotulo {
        line-height: 1.25;
    }
}

/* --- Estructura del flujo ------------------------------------------------ */

.matricula {
    display: grid;
    gap: 1.5rem;
    padding-block: 1.25rem 3rem;
}

.matricula__columna {
    min-width: 0;
}

/* Mientras el flujo va en una sola columna, el resumen encabeza la página:
   se ve lo elegido antes de empezar a rellenar. */
.matricula__resumen {
    order: -1;
}

/* --- Resumen lateral ----------------------------------------------------- */

.resumen {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    /* En móvil es una tira de una línea; en escritorio, una tarjeta. */
    padding: 0.75rem 1rem;
    box-shadow: var(--sombra);
}

.resumen__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.resumen__titulo {
    font-family: var(--fuente-titulo);
    font-size: 0.95rem;
    margin: 0;
}

/* Resumen de una línea: cuántos cursos y cuánto suman. Sustituye al desglose
   en las pantallas donde el detalle solo estorba. */
.resumen__compacto {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
}

.resumen__compacto-cursos {
    color: var(--texto-suave);
}

.resumen__compacto-cursos::after {
    content: "·";
    margin-inline-start: 0.5rem;
}

.resumen__compacto-total {
    color: var(--terracota-oscuro);
    font-size: 1.05rem;
    white-space: nowrap;
}

/* El desglose curso a curso solo aparece cuando hay sitio de sobra. */
.resumen__detalle {
    display: none;
}

.resumen__vacio {
    margin: 0.375rem 0 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.resumen__cursos {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.resumen__curso {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--borde);
}

.resumen__curso-precio {
    white-space: nowrap;
    font-weight: 500;
}

.resumen__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.resumen__total strong {
    color: var(--terracota-oscuro);
    font-size: 1.25rem;
}

.resumen__nota {
    margin: 0;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

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

.formulario {
    margin-top: 1.25rem;
}

.fila {
    display: grid;
    gap: 0 1rem;
}

.campo {
    margin-bottom: 1.125rem;
}

.campo__etiqueta {
    display: block;
    margin-bottom: 0.3125rem;
    font-weight: 500;
}

.campo__obligatorio {
    color: var(--terracota-oscuro);
}

.campo__control {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
    color: var(--texto);
    font: inherit;
}

.campo__control:focus-visible {
    border-color: var(--foco);
}

/* El campo con error se marca con borde grueso e icono, no solo con color. */
.campo--error .campo__control {
    border-color: var(--error);
    border-width: 2px;
}

.campo__ayuda {
    margin: 0.3125rem 0 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.campo__error {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.3125rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--error);
}

.campo__icono {
    flex: none;
    margin-top: 0.15rem;
}

textarea.campo__control {
    min-height: 6rem;
    resize: vertical;
}

/* --- Casillas y opciones ------------------------------------------------- */

.casilla {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.625rem;
    margin-bottom: 1rem;
}

.casilla__control,
.opcion__control {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--terracota);
}

.casilla__etiqueta {
    cursor: pointer;
}

.casilla .campo__error {
    grid-column: 1 / -1;
}

.opciones {
    border: 0;
    margin: 0 0 1.25rem;
    padding: 0;
}

.opciones__leyenda {
    padding: 0;
    margin-bottom: 0.625rem;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    color: var(--carbon);
}

.opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: start;
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
}

.opcion:has(.opcion__control:checked) {
    border-color: var(--terracota-oscuro);
    border-left-width: 6px;
}

.opcion--deshabilitada {
    opacity: 0.6;
}

.opcion__etiqueta {
    cursor: pointer;
}

.opcion__titulo {
    display: block;
    font-weight: 500;
}

.opcion__descripcion {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--texto-suave);
}

/* --- Catálogo seleccionable --------------------------------------------- */
/* La tarjeta de curso está definida más arriba, en «Catálogo de cursos». */

.cursos-grupo {
    border: 0;
    margin: 0;
    padding: 0;
}

/* --- Acciones del paso --------------------------------------------------- */

 /* En móvil los botones ocupan todo el ancho y el principal va arriba: es el
    patrón más cómodo con el pulgar y evita pulsar "Atrás" por error. */
.acciones {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    margin-top: 2rem;
}

.acciones .boton {
    width: 100%;
}

.acciones__espacio {
    display: none;
}

@media (min-width: 30rem) {
    .acciones {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .acciones .boton {
        width: auto;
    }

    .acciones__espacio {
        display: block;
        flex: 1;
    }
}

.aviso__lista {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.aviso__lista a {
    color: inherit;
}

/* --- Paneles condicionales del paso de pago ------------------------------ */

.panel-condicional {
    border: 1px solid var(--borde);
    border-left: 6px solid var(--terracota);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
    padding: 1.125rem;
    margin-bottom: 1.5rem;
}

.panel-condicional[hidden] {
    display: none;
}

/* Dentro de un panel el título es secundario: no debe competir con el h1. */
.panel-condicional .subtitulo {
    margin-top: 0;
    font-size: 1.05rem;
}

.datos__monoespaciado {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

/* --- Documentos legales -------------------------------------------------- */

.documento {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
    padding: 1.125rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(48, 47, 43, 0.04);
}

.documento--pendiente {
    background: var(--fondo);
    border-style: dashed;
}

.documento__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.documento__icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radio-pequeno);
    background: var(--arena);
    color: var(--terracota-oscuro);
}

.documento__titulos {
    min-width: 0;
}

/* Un documento ya abierto se marca con el borde y con la etiqueta "Abierto":
   el estado no se distingue solo por color. */
.documento--leido {
    border-color: var(--terracota);
}

.documento--leido .documento__icono {
    background: var(--terracota);
    color: #FFFFFF;
}

.documento__acciones {
    margin: 0 0 0.75rem;
}


.documento__titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}

.documento__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.etiqueta-estado {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--atencion);
    border-radius: var(--radio-pastilla, 999px);
    background: var(--atencion-fondo);
    color: #4A3200;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Documento ya abierto. Va después de .etiqueta-estado para ganarle en la
   cascada sin recurrir a más especificidad. */
.etiqueta-estado--hecho {
    border-color: var(--exito);
    background: var(--exito-fondo);
    color: #10402C;
}

.documento__enlace {
    margin: 0 0 0.75rem;
}

.documento__enlace a {
    color: var(--terracota-oscuro);
    font-weight: 500;
}

.documento__nota {
    margin: 0;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

.documento__opcional {
    color: var(--texto-suave);
    font-weight: 400;
}

/* --- Bloques de revisión ------------------------------------------------- */

.bloque {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
    padding: 1.125rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(48, 47, 43, 0.04);
}

.bloque__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bloque__titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    margin: 0;
}

.bloque__editar {
    color: var(--terracota-oscuro);
    font-size: 0.9rem;
    font-weight: 500;
}

/* El total cierra la lista: sin línea inferior propia, y la superior la aporta
   el borde del par anterior para que no salgan dos rayas seguidas. */
.datos__par--total {
    border-bottom: 0;
    padding-top: 0.625rem;
    font-size: 1.05rem;
}

.datos__par--total dt {
    font-weight: 700;
    font-size: 1rem;
    color: var(--texto);
}

.datos__par--total dd {
    font-weight: 700;
}

/* Honeypot: fuera de la vista de cualquier persona, pero presente en el DOM
   para los bots. No se usa display:none porque algunos lo detectan. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Confirmación -------------------------------------------------------- */

.confirmacion {
    text-align: center;
    padding-block: 1rem 0.5rem;
}

.confirmacion__marca {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--exito-fondo);
    color: var(--exito);
}

.referencia {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1.25rem 0;
    padding: 0.875rem 1.5rem;
    border: 2px dashed var(--terracota);
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
}

.referencia__etiqueta {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terracota-oscuro);
}

.referencia__valor {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.35rem;
    letter-spacing: 0.05em;
}

.parrafo--pequeno {
    font-size: 0.9rem;
}

/* --- Pantallas grandes --------------------------------------------------- */

@media (min-width: 40rem) {
    .titulo {
        font-size: 2.125rem;
    }

    .principal {
        padding-block: 2.5rem 4rem;
    }

    .fila--dos {
        grid-template-columns: 1fr 1fr;
    }

    /* Con sitio de sobra, el rótulo acompaña al logo separado por una línea. */
    .cabecera__logo {
        height: 2.25rem;
    }

    .cabecera__rotulo {
        padding-left: 0.875rem;
        border-left: 1px solid rgba(244, 238, 232, 0.35);
        opacity: 1;
    }
}

@media (min-width: 60rem) {
    /* La cabecera y el progreso se alinean con el contenido: si no, quedan
       centrados en su propia medida y sus extremos no cuadran con los del
       formulario ni con los del resumen lateral. */
    .cabecera__interior,
    .progreso__interior,
    .pie__interior {
        max-width: 68rem;
    }

    /* Solo el flujo de matrícula se ensancha, para dar sitio al resumen
       lateral. El resto de páginas mantiene la medida de lectura cómoda. */
    .matricula {
        max-width: 68rem;
        grid-template-columns: minmax(0, 1fr) 19rem;
        align-items: start;
        gap: 2.5rem;
    }

    /* El resumen acompaña al usuario mientras rellena el formulario. */
    .matricula__resumen {
        position: sticky;
        top: 1.5rem;
    }

    /* Con sitio para la columna lateral, el resumen recupera su forma de
       tarjeta y vuelve a su posición natural, después del formulario. */
    .matricula__resumen {
        order: 0;
    }

    .resumen {
        padding: 1.125rem;
    }

    .resumen__titulo {
        font-size: 1.05rem;
        margin-bottom: 0.75rem;
    }

    .resumen__compacto {
        display: none;
    }

    .resumen__detalle {
        display: block;
    }
}