:root {
    --arena: #FAF8F3;
    --lienzo: #FFFFFF;
    --tinta: #14223A;
    --tinta-suave: #4B5A70;
    --tinta-tenue: #56657A;
    --azul: #1A5FA8;
    --azul-oscuro: #1752A0;
    --azul-fondo: #E8F1FB;
    --dorado: #D3A23B;
    --dorado-claro: #E9C878;
    --dorado-oscuro: #84620F;
    --dorado-medio: #B08423;
    --dorado-fondo: #FBF2DA;
    --borde: #E4E1D8;
    --borde-fuerte: #C9C3B5;
    --error: #B02D1E;
    --error-fondo: #FAE6E3;
    --beige: #F6E7C3;
    --beige-imagen: #C9D5E3;
    --sombra-tarjeta: 0 2px 10px rgba(20, 34, 58, .07);
    --azul-noche: #0F3C78;
    --dorado-sobre-azul: #F0D48E;
    --marfil-fondo: #F5EFE2;
    --ancho: 1140px;
    --fuente-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--arena);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

* {
    scrollbar-color: var(--borde-fuerte) var(--arena);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--arena);
}

::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 20px;
    border: 3px solid var(--arena);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--azul);
}

h1,
h2,
h3 {
    font-family: var(--fuente-display);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.titulo-tarjeta {
    font-size: 1.17em;
    margin-bottom: 10px;
}

.tarjeta-encabezado .titulo-tarjeta {
    margin-bottom: 0;
}

a {
    color: var(--azul);
}

.cabecera {
    background: var(--azul-oscuro);
    color: var(--arena);
    border-bottom: 2px solid var(--dorado);
    position: sticky;
    top: 0;
    z-index: 40;
}

.cabecera-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.marca {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}

.marca .escudo {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--arena);
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    object-fit: contain;
    display: block;
}

.marca .texto {
    display: grid;
    gap: 2px;
}

.marca .nombre {
    font-family: var(--fuente-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.marca .lugar {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dorado-sobre-azul);
}

.navegacion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu>li {
    position: relative;
}

.menu a,
.desplegable>summary {
    display: block;
    padding: 8px 13px;
    border-radius: 6px;
    color: #DCE8F5;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background .15s ease, color .15s ease;
}

.menu a:hover,
.desplegable>summary:hover {
    background: rgba(255, 255, 255, .1);
    color: #FFFFFF;
}

.menu a:focus-visible,
.desplegable>summary:focus-visible {
    outline: 2px solid var(--dorado-claro);
    outline-offset: -2px;
}

.menu a.activo,
.desplegable>summary.activo {
    color: var(--dorado-sobre-azul);
    font-weight: 600;
    text-decoration: underline 2px var(--dorado);
    text-underline-offset: 9px;
}

.desplegable {
    position: relative;
}

.desplegable>summary::-webkit-details-marker {
    display: none;
}

.desplegable>summary::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.desplegable[open]>summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.desplegable .opciones {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 232px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--lienzo, #FFFFFF);
    border: 1px solid var(--borde);
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(20, 34, 58, .18);
}

.desplegable .opciones.derecha {
    left: auto;
    right: 0;
}

.desplegable .opciones a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--tinta);
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
}

.desplegable .opciones a:hover {
    background: var(--azul-fondo);
    color: var(--azul-oscuro);
}

.desplegable .opciones .separador {
    height: 1px;
    margin: 5px 8px;
    background: var(--borde);
}

.desplegable .opciones .encabezado {
    padding: 7px 12px 5px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.desplegable.usuario>summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, .1);
}

.desplegable.usuario>summary:hover {
    background: rgba(255, 255, 255, .18);
}

.desplegable.usuario .inicial {
    display: grid;
    place-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dorado);
    color: var(--tinta);
    font-weight: 700;
    font-size: 14px;
}

.desplegable.usuario .quien {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campana {
    position: relative;
    display: grid;
    place-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #DCE8F5;
    background: rgba(255, 255, 255, .1);
    transition: background .15s ease, color .15s ease;
}

.campana:hover {
    background: rgba(255, 255, 255, .18);
    color: #FFFFFF;
}

.campana:focus-visible {
    outline: 2px solid var(--dorado-claro);
    outline-offset: 2px;
}

.campana.con-pendientes {
    color: var(--dorado-sobre-azul);
}

.campana.con-pendientes svg {
    transform-origin: 50% 3px;
    animation: campana-sonar 1.6s ease-in-out 1;
}

.campana-numero {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dorado);
    color: var(--tinta);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--azul-oscuro);
}

@keyframes campana-sonar {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-5deg); }
    75% { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .campana.con-pendientes svg {
        animation: none;
    }
}

.boton-sesion {
    padding: 9px 18px;
    border-radius: 6px;
    background: var(--dorado);
    color: var(--tinta);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.boton-sesion:hover {
    background: var(--dorado-claro);
}

.boton-sesion:focus-visible {
    outline: 2px solid var(--arena);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .cabecera {
        position: static;
    }

    .cabecera-interior {
        gap: 10px;
        padding: 14px 18px;
    }

    .menu a,
    .desplegable>summary {
        padding: 8px 10px;
    }

    .navegacion {
        display: contents;
    }

    .marca {
        flex: 1 1 auto;
        min-width: 0;
    }

    .menu {
        order: 3;
        flex-basis: 100%;
    }

    .boton-sesion {
        padding: 8px 14px;
        font-size: 14px;
    }

    .desplegable.usuario .quien {
        display: none;
    }

    .desplegable .opciones {
        left: auto;
        right: 0;
    }
}

@media (max-width: 480px) {
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -8px;
    }

    .menu::-webkit-scrollbar {
        display: none;
    }

    .menu a {
        padding: 8px 6px;
        font-size: 14px;
    }

    .marca .lugar {
        display: none;
    }
}

.contenido {
    flex: 1;
    max-width: var(--ancho);
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.titulo-pagina {
    font-size: clamp(26px, 3.4vw, 32px);
    margin-bottom: 10px;
}

.encabezado-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 26px;
}

.encabezado-pagina .titulo-pagina {
    margin-bottom: 0;
}

.encabezado-pagina .espaciador {
    flex: 1 1 auto;
}

.bajada {
    color: var(--tinta-suave);
    max-width: 62ch;
    margin: 0 0 32px;
}

.tarjeta {
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--tinta);
}

.tarjeta p {
    color: var(--tinta-suave);
    font-size: 14.5px;
    margin: 0;
}

.titulo-tarjeta {
    transition: color .22s ease;
}

.tarjeta-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tarjeta-encabezado h2,
.tarjeta-encabezado h3 {
    margin: 0;
}

.tarjeta-icono {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--beige);
    display: grid;
    place-content: center;
}

.tarjeta-icono img {
    display: block;
    width: 16px;
    height: 16px;
}

.bloque-dato+.bloque-dato {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.bloque-dato .rotulo-dorado {
    color: var(--dorado-oscuro);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
}

.bloque-dato .rotulo {
    color: var(--tinta-suave);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
}

.bloque-dato .valor,
.bloque-dato ul {
    margin: 0;
    font-size: 14px;
    color: var(--tinta);
}

.bloque-dato ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 4px;
}

.pastilla-etiqueta {
    display: inline-block;
    background: var(--beige);
    color: var(--azul-oscuro);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.pastilla-etiqueta.grande {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
}

.fila-pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.barra-busqueda {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    max-width: 340px;
    background: var(--lienzo);
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    padding: 9px 14px;
}

.barra-busqueda:focus-within {
    outline: 2px solid var(--dorado);
    outline-offset: 1px;
    border-color: var(--azul);
}

.barra-busqueda img {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: .55;
}

.barra-busqueda input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    padding: 0;
}

.chips-criterio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chips-criterio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chips-criterio label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--lienzo);
    color: var(--tinta-suave);
    font-size: 15px;
    cursor: pointer;
}

.chips-criterio input:checked+label {
    background: var(--dorado-fondo);
    border-color: var(--dorado-oscuro);
    color: var(--tinta);
    font-weight: 600;
}

.chips-criterio input:focus-visible+label {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 18px;
}

.volver svg {
    flex: none;
    transition: transform .15s ease;
}

.volver:hover {
    text-decoration: underline;
}

.volver:hover svg {
    transform: translateX(-2px);
}

.volver:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 3px;
    border-radius: 3px;
}

.migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--tinta-tenue);
    margin-bottom: 18px;
}

.volver + .migas {
    margin-top: -10px;
}

.migas a {
    color: var(--azul);
    font-weight: 600;
    text-decoration: none;
}

.migas a:hover {
    text-decoration: underline;
}

.migas span.actual {
    color: var(--tinta-suave);
}

.imagen-cabecera {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 480px;
    margin: 0 auto 24px;
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    background: var(--beige-imagen);
}

.imagen-cabecera:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .imagen-cabecera {
        max-height: 320px;
    }
}

.lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 30, .88);
    align-items: center;
    justify-content: center;
    padding: 28px;
    cursor: zoom-out;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}

.lightbox.abierto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s linear;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .4);
    cursor: default;
    transform: scale(.96);
    transition: transform .18s ease;
}

.lightbox.abierto img {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

    .lightbox,
    .lightbox img {
        transition: none;
    }
}

.lightbox-cerrar {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.lightbox-cerrar:hover {
    background: rgba(255, 255, 255, .28);
}

.lightbox-cerrar:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.carrusel-marco {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--beige-imagen);
    box-shadow: var(--sombra-tarjeta);
    touch-action: pan-y;
}

.carrusel-imagen {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 34, 58, .55);
    color: #FFFFFF;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background-color .15s ease;
}

.carrusel-flecha:hover {
    background: rgba(20, 34, 58, .75);
}

.carrusel-flecha:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.carrusel-flecha.izquierda {
    left: 12px;
}

.carrusel-flecha.derecha {
    right: 12px;
}

.carrusel-contador {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(20, 34, 58, .55);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
}

@media (max-width: 560px) {
    .carrusel-imagen {
        height: 240px;
    }
}

.formulario {
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 26px;
    max-width: 560px;
}

.acciones-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.armador-horario {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px;
    background: var(--arena);
    border: 1px solid var(--borde);
    border-radius: 8px;
}

.armador-dias {
    gap: 6px;
}

.armador-dias label {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
}

.armador-atajos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.armador-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.armador-fila .armador-horas {
    flex: 1 1 220px;
    min-width: 0;
    font-family: inherit;
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--lienzo);
    color: var(--tinta);
}

.armador-fila .armador-horas:focus {
    outline: 2px solid var(--dorado);
    outline-offset: 1px;
    border-color: var(--azul);
}

.campo {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
}

.campo [hidden] {
    display: none;
}

.campo[hidden] {
    display: none;
}

.campo label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta);
}

.campo input,
.campo select,
.campo textarea {
    font-family: inherit;
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--lienzo);
    color: var(--tinta);
    width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 2px solid var(--dorado);
    outline-offset: 1px;
    border-color: var(--azul);
}

.campo-invalido {
    border-color: var(--error) !important;
}

.campo-invalido:focus {
    outline-color: var(--error) !important;
}

.mensaje-validacion {
    margin: -3px 0 0;
    font-size: 12.5px;
    color: var(--error);
}

.campo .chips-criterio {
    margin-top: 2px;
}

.campo .chips-criterio input {
    position: absolute;
    width: auto;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.campo .chips-criterio label {
    font-weight: 400;
    color: var(--tinta-suave);
}

.boton {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--azul-oscuro);
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.boton:hover {
    background: var(--tinta);
}

.boton:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.boton.secundario {
    background: var(--lienzo);
    border: 1px solid var(--borde-fuerte);
    color: var(--tinta);
}

.boton.secundario:hover {
    background: var(--azul-fondo);
}

.mapa {
    margin: 0 0 28px;
    max-width: 640px;
}

.tarjeta .mapa {
    margin: 0;
    max-width: none;
}

.tarjeta .mapa-lienzo {
    aspect-ratio: 16 / 7;
    border-radius: 10px;
}

.direccion-mapa {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--tinta-suave);
}

.pareja-foto-mapa {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 22px;
}

.pareja-foto-mapa .imagen-cabecera {
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
}

.pareja-foto-mapa .tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pareja-foto-mapa .mapa {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pareja-foto-mapa .mapa-lienzo {
    flex: 1;
    aspect-ratio: auto;
    min-height: 220px;
}

@media (max-width: 760px) {
    .pareja-foto-mapa {
        grid-template-columns: 1fr;
    }

    .pareja-foto-mapa .imagen-cabecera {
        height: auto;
        max-height: 320px;
    }
}

.direccion-mapa img {
    width: 14px;
    height: 14px;
    flex: none;
}

.mapa-lienzo {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--azul-fondo);
}

.mapa-enlace {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
}

.ayuda-campo {
    font-size: 13px;
    color: var(--tinta-tenue);
    margin: -8px 0 16px;
    max-width: 60ch;
}

.aviso {
    padding: 13px 16px;
    border-radius: 6px;
    margin-bottom: 22px;
    font-size: 15px;
    border-left: 1px solid transparent;
}

.aviso.exito {
    background: var(--dorado-fondo);
    border-left-color: var(--dorado);
    color: var(--azul);
}

.aviso.error {
    background: var(--error-fondo);
    border-left-color: var(--error);
    color: var(--error);
}

.aviso.guia {
    background: var(--azul-fondo);
    border-left-color: var(--azul);
    color: var(--tinta);
    line-height: 1.5;
}

.aviso.guia strong {
    display: block;
    margin-bottom: 2px;
}

.aviso.guia a {
    color: var(--azul);
    font-weight: 600;
}

.aviso.vacio {
    background: var(--azul-fondo);
    border-left-color: var(--borde-fuerte);
    color: var(--tinta-suave);
}

.pagina-acceso {
    display: flex;
    justify-content: center;
    padding-top: 24px;
}

.tarjeta-acceso {
    background: var(--lienzo);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(20, 34, 58, .08);
    padding: 48px;
    width: 100%;
    max-width: 420px;
}

.barra-superior-tarjeta {
    height: 6px;
    border-radius: 3px;
    background: var(--dorado);
    margin-bottom: 20px;
}

.tarjeta-acceso .titulo-acceso {
    font-size: 24px;
    margin: 0 0 6px;
}

.tarjeta-acceso .bajada-acceso {
    color: var(--tinta-suave);
    font-size: 14px;
    margin: 0 0 24px;
}

.selector-acceso {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--azul-fondo);
    border-radius: 9px;
    margin-bottom: 22px;
}

.selector-acceso input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.selector-acceso label {
    flex: 1;
    text-align: center;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.selector-acceso input:checked+label {
    background: var(--lienzo);
    color: var(--azul-oscuro);
    box-shadow: 0 1px 3px rgba(20, 34, 58, .1);
}

.selector-acceso input:focus-visible+label {
    outline: 2px solid var(--dorado);
    outline-offset: 1px;
}

.tarjeta-acceso:has(#tipo-personal:checked) .solo-ciudadano,
.tarjeta-acceso:has(#tipo-ciudadano:checked) .solo-personal {
    display: none;
}

.tarjeta-acceso .nota-acceso {
    font-size: 12.5px;
    color: var(--tinta-tenue);
    margin: -8px 0 18px;
}

.tarjeta-acceso .campo {
    margin-bottom: 18px;
}

.tarjeta-acceso .campo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.tarjeta-acceso .campo label {
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta);
}

.tarjeta-acceso .campo .enlace-discreto {
    font-size: 12.5px;
    color: var(--azul);
    text-decoration: none;
}

.tarjeta-acceso .campo .enlace-discreto:hover {
    text-decoration: underline;
}

.tarjeta-acceso .campo input {
    background: var(--lienzo);
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    padding: 12px 14px;
}

.tarjeta-acceso .campo input:focus {
    outline: 2px solid var(--dorado);
    outline-offset: 1px;
    border-color: var(--azul);
}

.tarjeta-acceso .campo input:focus::placeholder {
    color: transparent;
}

.boton-acceso {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    background: var(--azul-oscuro);
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
}

.boton-acceso:hover {
    background: var(--tinta);
}

.boton-acceso:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.tarjeta-acceso .enlace-acceso {
    text-align: center;
    font-size: 13.5px;
    margin: 18px 0 0;
    color: var(--tinta-suave);
}

.tarjeta-acceso .enlace-acceso a {
    color: var(--azul);
    text-decoration: none;
    font-weight: 600;
}

.tarjeta-acceso .enlace-acceso a:hover {
    text-decoration: underline;
}

.tarjeta-acceso.tarjeta-ancha {
    max-width: 460px;
}

.campo-fila {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.campo-fila .campo {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .tarjeta-acceso {
        padding: 32px 24px;
    }

    .campo-fila {
        flex-direction: column;
        gap: 0;
    }
}

.campo-fila-foto {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.campo-fila-foto>div:first-child {
    flex: 1;
    min-width: 0;
}

.foto-arzobispo-marco {
    flex: none;
    width: 120px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--arena);
    border: 1px solid var(--borde);
}

.foto-arzobispo-marco img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-arzobispo-vacia {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--tinta-tenue);
    font-size: 11.5px;
    text-align: center;
    padding: 8px;
}

@media (max-width: 480px) {
    .campo-fila-foto {
        flex-direction: column-reverse;
    }

    .foto-arzobispo-marco {
        width: 100%;
        height: 170px;
    }
}

.tabla-envoltura {
    overflow-x: auto;
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 8px;
}

table.datos {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
    min-width: 520px;
}

table.datos th {
    text-align: left;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--arena);
    background: var(--azul-oscuro);
    padding: 13px 16px;
}

table.datos th:first-child {
    border-top-left-radius: 8px;
}

table.datos th:last-child {
    border-top-right-radius: 8px;
}

table.datos td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--borde);
    color: var(--tinta-suave);
}

table.datos tbody tr:last-child td {
    border-bottom: none;
}

.boton-chico {
    padding: 7px 14px;
    font-size: 13px;
}

.boton.peligro {
    background: var(--lienzo);
    border: 1px solid var(--error);
    color: var(--error);
}

.boton.peligro:hover {
    background: var(--error-fondo);
}

.fila-detalle td {
    background: var(--arena);
    padding: 0;
}

.fila-detalle[hidden] {
    display: none;
}

.detalle-contenido {
    padding: 18px 20px;
}

.detalle-contenido p {
    margin: 0 0 10px;
    color: var(--tinta-suave);
    font-size: 14.5px;
}

.detalle-contenido p:last-child {
    margin-bottom: 0;
}

.detalle-contenido .campo {
    max-width: 420px;
    margin-top: 6px;
}

.pago-qr-imagen-marco {
    display: inline-block;
    padding: 14px;
    background: var(--arena);
    border: 1px solid var(--borde);
    border-radius: 12px;
}

.pago-qr-vacio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--tinta-tenue);
    font-size: 13.5px;
    max-width: 40ch;
}

.qr-compacto-fila {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.qr-compacto-marco {
    flex: none;
    width: 90px;
    height: 90px;
    padding: 6px;
}

.qr-compacto-imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.qr-compacto-vacio {
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    text-align: center;
}

.qr-compacto-form {
    flex: 1;
    min-width: 0;
}

.qr-compacto-form input[type="file"] {
    font-size: 12px;
    width: 100%;
}

@media (max-width: 420px) {
    .qr-compacto-fila {
        flex-direction: column;
    }

    .qr-compacto-marco {
        width: 100%;
        height: 130px;
    }
}

.miniaturas-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.miniatura-foto {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--borde);
}

.miniatura-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.miniatura-quitar {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: grid;
    place-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(20, 34, 58, .72);
    color: #FFFFFF;
    cursor: pointer;
    padding: 0;
}

.miniatura-quitar:hover {
    background: var(--error);
}

.pregunta-ayuda {
    border-bottom: 1px solid var(--borde);
    padding: 14px 0;
}

.pregunta-ayuda:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pregunta-ayuda summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--tinta);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pregunta-ayuda summary::-webkit-details-marker {
    display: none;
}

.pregunta-ayuda summary::after {
    content: "+";
    flex: none;
    font-size: 18px;
    font-weight: 400;
    color: var(--dorado-oscuro);
    transition: transform .15s ease;
}

.pregunta-ayuda[open] summary::after {
    transform: rotate(45deg);
}

.pregunta-ayuda p {
    margin: 10px 0 0;
    color: var(--tinta-suave);
    font-size: 14.5px;
    max-width: 68ch;
}

.pregunta-destacada {
    background: var(--dorado-fondo);
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

.enlace-ayuda {
    color: var(--azul);
    font-weight: 600;
    white-space: nowrap;
}

.modal-confirmar-fondo {
    position: fixed;
    inset: 0;
    background: rgba(20, 34, 58, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal-confirmar-fondo.abierto {
    display: flex;
}

.modal-confirmar {
    background: var(--lienzo);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(20, 34, 58, .3);
    padding: 26px 26px 20px;
    max-width: 380px;
    width: 100%;
}

.modal-confirmar-texto {
    margin: 0 0 22px;
    font-size: 15.5px;
    color: var(--tinta);
    line-height: 1.5;
}

.modal-confirmar-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 560px) {
    .cabecera-interior {
        justify-content: flex-start;
    }

    .contenido {
        padding: 28px 18px 48px;
    }
}

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

.pagina-inicio .contenido {
    max-width: none;
    padding: 0;
}

.pagina-inicio,
.pagina-parroquias,
.pagina-espacios {
    background: var(--lienzo);
}

.boton-dorado {
    background: var(--dorado);
    color: var(--tinta);
}

.boton-dorado:hover {
    background: var(--dorado-claro);
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--azul);
    text-decoration: underline transparent;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color .2s ease;
}

.enlace-flecha svg {
    flex: none;
}

.enlace-flecha:hover {
    text-decoration-color: currentColor;
}

.enlace-flecha:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 4px;
    border-radius: 3px;
}

.portada {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(520px, calc(100svh - 84px), 700px);
    background: var(--azul-oscuro);
    background-image: radial-gradient(130% 150% at 0% 0%, #2266BA 0%, #1752A0 48%, #0F3A7C 100%);
    color: #FFFFFF;
}

.portada-texto {
    display: flex;
    align-items: center;
    padding: 64px 56px 64px max(24px, calc((100vw - var(--ancho)) / 2 + 24px));
}

.portada-contenido {
    width: 100%;
    max-width: 31rem;
}

.portada-titulo {
    font-size: clamp(38px, 3.8vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 22px;
    text-wrap: balance;
}

.sin-corte {
    white-space: nowrap;
}

.portada-bajada {
    font-size: clamp(16px, 1.25vw, 18.5px);
    line-height: 1.6;
    color: #DCE8F5;
    max-width: 36ch;
    margin: 0 0 32px;
}

.portada-busqueda {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: var(--tinta-tenue);
    border-radius: 10px;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 14px 34px rgba(6, 16, 34, .28);
}

.portada-busqueda:focus-within {
    outline: 3px solid var(--dorado-claro);
    outline-offset: 2px;
}

.portada-busqueda svg {
    flex: none;
}

.portada-busqueda input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    padding: 10px 4px;
}

.portada-busqueda input::placeholder {
    color: var(--tinta-tenue);
}

.portada-busqueda .boton {
    flex: none;
    padding: 11px 22px;
}

.portada-accesos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 18px;
}

.portada .enlace-flecha {
    color: var(--dorado-sobre-azul);
}

.boton-contorno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    border: 1.5px solid var(--dorado-sobre-azul);
    border-radius: 10px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s ease;
}

.boton-contorno:hover {
    background: rgba(255, 255, 255, .1);
}

.boton-contorno:focus-visible {
    outline: 2px solid var(--dorado-claro);
    outline-offset: 3px;
}

.portada-foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--azul-noche);
}

.portada-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
    animation: portada-asentar 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

.portada-foto figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 56px 28px 18px;
    font-size: 13px;
    color: #F2F6FB;
    background: linear-gradient(to top, rgba(8, 26, 60, .78), rgba(8, 26, 60, 0));
}

@keyframes portada-asentar {
    from {
        transform: scale(1.07);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portada-foto img {
        animation: none;
    }
}

@media (max-width: 860px) {
    .portada {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .portada-foto {
        order: -1;
        height: clamp(240px, 40svh, 380px);
    }

    .portada-texto {
        padding: 34px 20px 44px;
    }
}

.seccion {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--lienzo);
}

.seccion-tono {
    background: var(--marfil-fondo);
}

.seccion-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.seccion-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 40px;
    margin-bottom: 36px;
}

.seccion-titulo {
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.seccion-bajada {
    color: var(--tinta-suave);
    font-size: 16.5px;
    max-width: 60ch;
    margin: 0;
}

.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 34px 24px;
}

.ficha {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
}

.ficha:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 6px;
}

.ficha-foto {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--beige-imagen);
}

.ficha-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.ficha:hover .ficha-foto img {
    transform: scale(1.05);
}

.ficha-foto.sin-foto {
    display: grid;
    place-content: center;
    background: var(--azul-fondo);
}

.ficha-foto.sin-foto img,
.ficha:hover .ficha-foto.sin-foto img {
    width: 64px;
    height: auto;
    opacity: .7;
    transform: none;
}

.ficha-texto {
    display: grid;
    gap: 4px;
}

.ficha-nombre {
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 2px;
    color: var(--tinta);
    text-wrap: balance;
    text-decoration: underline transparent;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color .2s ease;
}

.ficha:hover .ficha-nombre {
    text-decoration-color: var(--dorado);
}

.ficha-detalle {
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.ficha-horario {
    font-size: 14px;
    color: var(--tinta-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ficha-horario strong {
    color: var(--azul-oscuro);
    font-weight: 600;
}

.ficha-precio {
    margin-top: 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--azul-oscuro);
}

.mosaico-espacios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(210px, auto);
    gap: 16px;
}

.ficha-espacio {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 210px;
    border-radius: 10px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    background: var(--azul-oscuro);
}

.ficha-espacio.destacada {
    grid-column: span 2;
    grid-row: span 2;
}

.ficha-espacio img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.ficha-espacio::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 26, 60, .9) 0%, rgba(8, 26, 60, .6) 45%, rgba(8, 26, 60, .12) 80%, rgba(8, 26, 60, 0) 100%);
}

.ficha-espacio:hover img {
    transform: scale(1.05);
}

.ficha-espacio:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 3px;
}

.ficha-espacio-texto {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    padding: 20px 22px;
}

.ficha-espacio .ficha-nombre {
    color: #FFFFFF;
    font-size: 20px;
}

.ficha-espacio.destacada .ficha-nombre {
    font-size: clamp(24px, 2.4vw, 30px);
}

.ficha-espacio:hover .ficha-nombre {
    text-decoration-color: var(--dorado-claro);
}

.ficha-espacio .ficha-detalle {
    color: #E9F0F8;
}

@media (max-width: 900px) {
    .mosaico-espacios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mosaico-espacios {
        grid-template-columns: 1fr;
    }

    .ficha-espacio.destacada {
        grid-column: auto;
        grid-row: auto;
        min-height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ficha-foto img,
    .ficha-espacio img,
    .enlace-flecha svg {
        transition: none;
    }
}

.pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.paso {
    border-top: 1px solid var(--dorado-claro);
    padding-top: 22px;
}

.paso-numero {
    display: block;
    font-family: var(--fuente-display);
    font-size: 46px;
    line-height: 1;
    color: var(--dorado-medio);
    margin-bottom: 16px;
}

.paso h3 {
    font-size: 19px;
    margin: 0 0 8px;
}

.paso p {
    color: var(--tinta-suave);
    font-size: 15px;
    margin: 0;
}

.pasos-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 44px;
}

@media (max-width: 900px) {
    .pasos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .pasos {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

.arzobispo-rejilla {
    display: grid;
    grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.arzobispo-retrato {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--beige-imagen);
}

.arzobispo-retrato img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arzobispo-nombre {
    font-family: var(--fuente-display);
    font-size: clamp(21px, 2vw, 25px);
    line-height: 1.3;
    color: var(--azul-oscuro);
    margin: 0 0 18px;
}

.arzobispo-bio {
    max-width: 65ch;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--tinta-suave);
    white-space: pre-line;
    margin: 0;
}

@media (max-width: 760px) {
    .arzobispo-rejilla {
        grid-template-columns: 1fr;
    }

    .arzobispo-retrato {
        max-width: 300px;
    }
}

.pie {
    background: var(--azul-noche);
    color: #CBD9EC;
    font-size: 14.5px;
    border-top: 3px solid var(--dorado);
}

.pie-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 52px 24px 36px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.pie-marca {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pie-marca img {
    flex: none;
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--arena);
    border-radius: 8px;
    padding: 3px;
}

.pie-marca strong {
    display: block;
    font-family: var(--fuente-display);
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.pie h2 {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dorado-sobre-azul);
    margin: 0 0 14px;
}

.pie ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.pie a {
    color: #DCE8F5;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.pie a:hover {
    color: #FFFFFF;
    text-decoration-color: var(--dorado-claro);
}

.pie a:focus-visible {
    outline: 2px solid var(--dorado-claro);
    outline-offset: 3px;
    border-radius: 3px;
}

.pie-base {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 18px 24px 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    font-size: 13px;
    color: #B9C9DE;
}

.pie .autor {
    color: var(--dorado-sobre-azul);
    font-weight: 600;
}

@media (max-width: 720px) {
    .pie-interior {
        grid-template-columns: 1fr 1fr;
    }

    .pie-marca {
        grid-column: 1 / -1;
    }
}

.ficha-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
    margin: 8px 0 56px;
}

.ficha-cabecera.sin-foto {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
}

.ficha-cabecera:not(.sin-foto) {
    grid-template-areas:
        "foto texto"
        "cuerpo texto"
        "llamado llamado";
    grid-template-rows: auto 1fr auto;
    row-gap: 28px;
}

.ficha-cabecera:not(.sin-foto) > .ficha-cabecera-foto { grid-area: foto; }
.ficha-cabecera:not(.sin-foto) > .ficha-cabecera-texto { grid-area: texto; }
.ficha-cabecera:not(.sin-foto) > .ficha-cuerpo { grid-area: cuerpo; }
.ficha-cabecera:not(.sin-foto) > .llamado-reserva { grid-area: llamado; }

.ficha-cabecera-foto {
    margin: 0;
}

.ficha-cabecera-foto > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 10px;
    background: var(--beige-imagen);
    cursor: zoom-in;
}

.ficha-cabecera-foto > img:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 3px;
}

.ficha-cabecera-foto .carrusel-marco {
    box-shadow: none;
    border-radius: 10px;
}

.ficha-cabecera-foto .carrusel-imagen {
    height: auto;
    aspect-ratio: 4 / 3;
}

.ficha-titulo {
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    text-wrap: balance;
}

.ficha-lugar {
    font-size: 16.5px;
    color: var(--tinta-suave);
    margin: 0 0 28px;
}

.horario-titulo {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
    margin: 0 0 10px;
}

.horario-tabla {
    margin: 0 0 26px;
    border-top: 1px solid var(--dorado-claro);
}

.horario-fila {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 4px 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde);
}

.horario-fila dt {
    font-weight: 600;
    color: var(--azul-oscuro);
}

.horario-fila dd {
    margin: 0;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.horario-fila dt.solo-lectores + dd {
    grid-column: 1 / -1;
}

.horario-vacio {
    color: var(--tinta-tenue) !important;
}

.ficha-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.boton-contacto {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--lienzo);
    color: var(--tinta);
    font-size: 15px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color .15s ease, background .15s ease;
}

.boton-contacto img,
.boton-contacto svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--azul);
}

.boton-contacto:hover {
    border-color: var(--dorado);
    background: var(--dorado-fondo);
}

.boton-contacto:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.datos-clave {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 0 0 26px;
    padding: 16px 0;
    border-top: 1px solid var(--dorado-claro);
    border-bottom: 1px solid var(--borde);
}

.datos-clave dt {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
    margin-bottom: 4px;
}

.datos-clave dd {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.datos-clave dd span {
    font-family: inherit;
    font-size: 16px;
    color: var(--tinta-suave);
}

.datos-clave.precios {
    margin-top: 22px;
}

.ficha-accion {
    margin-top: 28px;
    display: grid;
    gap: 12px;
    justify-items: start;
}

.ficha-accion > p {
    margin: 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--azul-fondo);
    color: var(--tinta-suave);
    font-size: 15px;
}

.ficha-accion .boton {
    padding: 13px 26px;
    font-size: 15px;
}

.plazo-anticipo {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--tinta-suave);
}

.plazo-anticipo strong {
    color: var(--tinta);
}

.llamado-reserva {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 48px;
    align-items: center;
    padding: 26px 32px;
    border-radius: 12px;
    background: var(--azul-noche);
    color: #DCE7F5;
    box-shadow: 0 14px 30px -18px rgba(15, 60, 120, .65);
}

.llamado-reserva-titulo {
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 8px;
    text-wrap: balance;
}

.llamado-reserva-texto {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    max-width: 58ch;
}

.llamado-reserva-acciones {
    display: grid;
    gap: 12px;
    justify-items: end;
}

.llamado-reserva-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.llamado-reserva .boton {
    padding: 13px 24px;
    font-size: 15px;
    background: var(--dorado);
    color: var(--tinta);
}

.llamado-reserva .boton:hover {
    background: var(--dorado-claro);
}

.llamado-reserva .boton.secundario {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #FFFFFF;
}

.llamado-reserva .boton.secundario:hover {
    background: rgba(255, 255, 255, .12);
}

.llamado-reserva .boton:focus-visible,
.llamado-reserva .enlace-ayuda:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.llamado-reserva .enlace-ayuda {
    color: var(--dorado-sobre-azul);
    font-size: 14px;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .llamado-reserva {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 22px 20px;
    }

    .llamado-reserva-acciones,
    .llamado-reserva-botones {
        justify-items: start;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .llamado-reserva-botones .boton {
        flex: 1 1 100%;
        text-align: center;
    }
}

.guia-reserva {
    padding: 20px 24px 22px;
    margin: 0 0 28px;
    border-radius: 12px;
    background: var(--azul-fondo);
}

.guia-reserva-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    margin-bottom: 16px;
}

.guia-reserva-titulo {
    font-size: 19px;
    margin: 0;
}

.guia-reserva-cabeza .enlace-ayuda {
    font-size: 14px;
    text-underline-offset: 3px;
}

.guia-reserva ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 28px;
    counter-reset: paso-guia;
}

.guia-reserva li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tinta);
    counter-increment: paso-guia;
}

.guia-reserva li::before {
    content: counter(paso-guia);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lienzo);
    border: 1px solid var(--dorado-claro);
    font-family: var(--fuente-display);
    font-size: 16px;
    line-height: 1;
    color: var(--dorado-oscuro);
}

.guia-reserva li span {
    padding-top: 5px;
}

@media (max-width: 760px) {
    .guia-reserva ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ficha-accion .ficha-nota {
    padding: 0;
    background: none;
    font-size: 14px;
    color: var(--tinta-tenue);
}

.ficha-cuerpo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.ficha-recomendaciones {
    margin-top: 24px;
}

.ficha-medios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    margin-top: 48px;
}

.ficha-medios.solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

.ficha-medios-titulo {
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

.video-marco {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.video-marco iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ficha-mapa .mapa {
    max-width: none;
    margin: 0;
}

.ficha-mapa .mapa-lienzo {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

@media (max-width: 860px) {
    .ficha-cabecera,
    .ficha-cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ficha-cabecera:not(.sin-foto) {
        grid-template-areas: "foto" "texto" "cuerpo" "llamado";
        grid-template-rows: none;
    }

    .ficha-medios {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }

    .ficha-mapa .mapa-lienzo {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .horario-fila {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .horario-fila dt.solo-lectores + dd {
        grid-column: auto;
    }
}

.tarjeta-acceso .nota-acceso-pie {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--tinta-tenue);
    text-align: center;
}

.ayuda-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.ayuda-indice {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--dorado-claro);
}

.ayuda-indice a {
    display: block;
    padding: 8px 0 8px 16px;
    color: var(--tinta-suave);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.ayuda-indice a:hover {
    color: var(--azul-oscuro);
}

.ayuda-indice a:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
    border-radius: 3px;
}

.ayuda-temas {
    display: grid;
    gap: 48px;
    max-width: 760px;
}

.ayuda-grupo {
    scroll-margin-top: 110px;
}

.ayuda-grupo-titulo {
    font-size: clamp(24px, 2.4vw, 30px);
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dorado-claro);
}

.ayuda-grupo > p {
    color: var(--tinta-suave);
    margin: 14px 0 0;
}

@media (max-width: 760px) {
    .ayuda-rejilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .ayuda-indice {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-left: 0;
    }

    .ayuda-indice a {
        padding: 8px 14px;
        border: 1px solid var(--borde-fuerte);
        border-radius: 8px;
        background: var(--lienzo);
    }
}

.pagina-estado {
    max-width: 620px;
    margin: 24px auto 0;
    text-align: center;
}

.pagina-estado .estado-escudo {
    display: block;
    margin: 0 auto 22px;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.pagina-estado .titulo-pagina {
    font-size: clamp(30px, 3.4vw, 40px);
}

.pagina-estado .bajada {
    margin-left: auto;
    margin-right: auto;
}

.pagina-estado .aviso {
    text-align: left;
}

.estado-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.cabecera-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--borde);
}

.cabecera-seccion .titulo-pagina {
    margin-bottom: 8px;
    text-wrap: balance;
}

.cabecera-seccion .bajada {
    margin: 0;
}

.cabecera-seccion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hoja {
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 26px;
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--sombra-tarjeta);
}

.hoja-titulo {
    font-size: 21px;
    margin: 0 0 6px;
}

.hoja-bajada {
    color: var(--tinta-suave);
    font-size: 15px;
    margin: 0 0 20px;
}

.hoja-nota {
    color: var(--tinta-suave);
    font-size: 14.5px;
    margin: 16px 0 0;
}

.hoja-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.boton svg {
    vertical-align: -3px;
}

.boton-bloque {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
}

.estado-reserva {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--azul-fondo);
    color: var(--tinta);
}

.estado-reserva::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--azul);
}

.estado-reserva.aprobada {
    background: var(--dorado-fondo);
    color: var(--azul-oscuro);
}

.estado-reserva.aprobada::before {
    background: var(--dorado);
}

.estado-reserva.rechazada {
    background: var(--error-fondo);
    color: var(--error);
}

.estado-reserva.rechazada::before {
    background: var(--error);
}

.estado-reserva.cancelada,
.estado-reserva.vencida {
    background: #EAEFF5;
    color: var(--tinta-suave);
}

.estado-reserva.cancelada::before,
.estado-reserva.vencida::before {
    background: var(--borde-fuerte);
}

.estado-reserva.grande {
    font-size: 14.5px;
    padding: 7px 15px 7px 12px;
}

.estado-reserva.grande::before {
    width: 8px;
    height: 8px;
}

.grupo-reservas + .grupo-reservas {
    margin-top: 48px;
}

.grupo-reservas-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 14px;
}

.grupo-reservas-cabecera h2 {
    font-size: 24px;
}

.grupo-reservas-cabecera p {
    margin: 0;
    color: var(--tinta-suave);
    font-size: 15px;
}

.grupo-cuenta {
    display: inline-block;
    min-width: 26px;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--azul-fondo);
    color: var(--tinta-suave);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    vertical-align: 4px;
}

.grupo-reservas-vacio {
    margin: 0;
    padding: 18px 22px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 12px;
    color: var(--tinta-suave);
}

.grupo-reservas-vacio a {
    color: var(--azul);
    font-weight: 600;
}

.lista-reservas {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    overflow: hidden;
}

.reserva-fila {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(210px, 270px);
    gap: 6px 26px;
    align-items: start;
    padding: 22px 24px;
    transition: background .15s ease;
}

.reserva-fila + .reserva-fila {
    border-top: 1px solid var(--borde);
}

.reserva-fila:hover {
    background: #F4F7FB;
}

.reserva-fila:has(a:focus-visible) {
    outline: 2px solid var(--dorado);
    outline-offset: -3px;
}

.reserva-fecha {
    display: grid;
    justify-items: center;
    padding: 9px 4px 8px;
    border: 1px solid var(--dorado-claro);
    border-radius: 10px;
    background: var(--lienzo);
    line-height: 1.15;
}

.reserva-fecha .dia {
    font-family: var(--fuente-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--azul-oscuro);
    line-height: 1;
}

.reserva-fecha .mes {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
}

.reserva-fecha .anio {
    font-size: 12px;
    color: var(--tinta-tenue);
}

.reserva-fila.rechazada .reserva-fecha,
.reserva-fila.cancelada .reserva-fecha,
.reserva-fila.vencida .reserva-fecha {
    border-color: var(--borde);
}

.reserva-fila.rechazada .reserva-fecha .dia,
.reserva-fila.cancelada .reserva-fecha .dia,
.reserva-fila.vencida .reserva-fecha .dia,
.reserva-fila.rechazada .reserva-fecha .mes,
.reserva-fila.cancelada .reserva-fecha .mes,
.reserva-fila.vencida .reserva-fecha .mes {
    color: var(--tinta-tenue);
}

.reserva-espacio {
    font-size: 19px;
    margin: 2px 0 4px;
}

.reserva-espacio a {
    color: var(--tinta);
    text-decoration: none;
}

.reserva-espacio a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.reserva-espacio a:focus-visible {
    outline: none;
}

.reserva-fila:hover .reserva-espacio a {
    color: var(--azul);
}

.reserva-cuando {
    margin: 0;
    font-size: 15px;
    color: var(--tinta);
}

.reserva-motivo {
    margin: 4px 0 0;
    font-size: 14.5px;
    color: var(--tinta-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reserva-rechazo {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--error);
}

.reserva-estado {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 6px;
}

.reserva-siguiente {
    margin: 2px 0 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tinta);
}

.reserva-valor {
    margin: 0;
    font-size: 14px;
    color: var(--tinta-suave);
}

.reserva-valor strong {
    color: var(--tinta);
}

.reserva-valor.tenue {
    color: var(--tinta-tenue);
}

.reserva-ir {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--azul);
}

.reserva-ir.destacado {
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--dorado);
    color: var(--tinta);
}

.reservas-vacio {
    max-width: 680px;
}

.reservas-vacio h2 {
    font-size: 22px;
    margin: 0 0 10px;
}

.reservas-vacio p {
    margin: 0;
    color: var(--tinta-suave);
}

.reservas-vacio-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 22px;
}

.detalle-reserva-cabecera {
    align-items: center;
}

.seguimiento {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
    padding: 22px 24px 20px;
    background: var(--lienzo);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
}

.seguimiento-paso {
    position: relative;
    min-width: 0;
}

.seguimiento-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 38px;
    right: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--borde);
}

.seguimiento-paso.hecho:not(:last-child)::after {
    background: var(--dorado-claro);
}

.seguimiento-marca {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--borde-fuerte);
    background: var(--lienzo);
    color: var(--tinta);
}

.seguimiento-paso.hecho .seguimiento-marca {
    background: var(--dorado);
    border-color: var(--dorado);
}

.seguimiento-paso.actual .seguimiento-marca {
    border-color: var(--dorado);
    outline: 4px solid var(--dorado-fondo);
}

.seguimiento-paso.actual .seguimiento-marca::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dorado);
}

.seguimiento-paso.fallido .seguimiento-marca {
    background: var(--error);
    border-color: var(--error);
    color: #FFFFFF;
}

.seguimiento-paso.detenido .seguimiento-marca {
    border-color: var(--borde-fuerte);
    background: #EAEFF5;
    color: var(--tinta-suave);
}

.seguimiento-paso.detenido .seguimiento-dato {
    color: var(--tinta-suave);
}

.seguimiento-texto {
    display: block;
    margin-top: 10px;
}

.seguimiento-nombre {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
}

.seguimiento-dato {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--tinta-suave);
}

.seguimiento-paso.futuro .seguimiento-nombre {
    color: var(--tinta-tenue);
    font-weight: 500;
}

.seguimiento-paso.fallido .seguimiento-nombre,
.seguimiento-paso.fallido .seguimiento-dato {
    color: var(--error);
}

.detalle-reserva {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.detalle-reserva:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
}

.datos-lista {
    margin: 12px 0 0;
    border-top: 1px solid var(--dorado-claro);
}

.datos-lista > div {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 2px 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde);
}

.datos-lista dt {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-suave);
}

.datos-lista dd {
    margin: 0;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.datos-lista.cifras dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.datos-lista.cifras > div {
    grid-template-columns: minmax(0, 1fr) auto;
}

.datos-lista.cifras .total {
    border-bottom: 0;
    padding-top: 14px;
    align-items: baseline;
}

.datos-lista.cifras .total dt {
    color: var(--tinta);
}

.datos-lista.cifras .total dd {
    font-family: var(--fuente-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--azul-oscuro);
    font-variant-numeric: lining-nums tabular-nums;
}

.datos-lista.compacta {
    margin-top: 18px;
}

.datos-lista.compacta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 9px 0;
}

.datos-lista.compacta dt {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.datos-lista.compacta dd {
    font-size: 15px;
}

.pago-qr {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--arena);
}

.pago-qr:not(:has(img)) {
    grid-template-columns: minmax(0, 1fr);
}

.pago-qr img {
    display: block;
    width: 168px;
    height: 168px;
    object-fit: contain;
    padding: 6px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--lienzo);
}

.pago-qr p {
    margin: 0;
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.pago-qr strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tinta);
}

.hoja-espera p,
.hoja-rechazo p {
    margin: 12px 0 0;
    color: var(--tinta-suave);
}

.hoja-espera .enlace-ayuda {
    display: inline-block;
    margin-top: 14px;
}

.hoja-rechazo p:first-of-type {
    color: var(--tinta);
    font-size: 16px;
}

.hoja-espera .boton,
.hoja-rechazo .boton {
    margin-top: 18px;
}

.zona-cancelar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.zona-cancelar p {
    margin: 0;
    max-width: 62ch;
    font-size: 15px;
    color: var(--tinta-suave);
}

.zona-cancelar strong {
    color: var(--tinta);
}

.zona-cambios {
    margin-top: 28px;
}

.zona-cambios p {
    margin: 0;
    color: var(--tinta-suave);
}

.zona-cambios ul {
    margin: 12px 0 14px;
    padding-left: 20px;
    color: var(--tinta-suave);
}

.zona-cambios li + li {
    margin-top: 8px;
}

.zona-cambios strong {
    color: var(--tinta);
}

.bandeja-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}

.bandeja-herramientas .filtro-estados {
    margin-bottom: 0;
}

.bandeja-resultado {
    margin: 0 0 16px;
    color: var(--tinta-suave);
}

.bandeja-resultado a {
    margin-left: 6px;
}

.solicitud {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.solicitud-formulario {
    padding: 28px;
    padding: clamp(22px, 3vw, 32px);
}

.grupo-campos {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.grupo-campos + .grupo-campos {
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.grupo-campos legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 14px;
    font-family: var(--fuente-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--tinta);
}

.grupo-campos legend + * {
    clear: both;
}

.espacio-elegido {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin: -4px 0 16px;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--arena);
}

.espacio-elegido[hidden] {
    display: none;
}

.espacio-elegido:has(img[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

.espacio-elegido img {
    display: block;
    width: 112px;
    height: 84px;
    object-fit: cover;
    border-radius: 7px;
    background: var(--beige-imagen);
}

.espacio-elegido img[hidden] {
    display: none;
}

.espacio-elegido-nombre {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.espacio-elegido-datos {
    margin: 2px 0 4px;
    font-size: 14px;
    color: var(--tinta-suave);
}

.espacio-elegido .enlace-ayuda {
    font-size: 14px;
}

.etiqueta-campo {
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta);
}

.opciones-jornada {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
}

.campo .opcion-jornada {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 12px 38px 12px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--lienzo);
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.campo .opcion-jornada input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.opcion-jornada .mensaje-validacion {
    display: none;
}

.opcion-jornada-nombre {
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
}

.opcion-jornada-horas {
    font-size: 13.5px;
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}

.campo .opcion-jornada:hover {
    border-color: var(--dorado);
    background: #F4F7FB;
}

.campo .opcion-jornada:has(input:checked) {
    border-color: var(--azul-oscuro);
    background: var(--dorado-fondo);
    box-shadow: inset 0 0 0 1px var(--azul-oscuro);
}

.campo .opcion-jornada:has(input:checked)::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--azul-oscuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.campo .opcion-jornada:has(input:focus-visible) {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.campo .opcion-jornada:has(input:disabled) {
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--borde-fuerte);
    background: #F1F4F8;
}

.opcion-jornada:has(input:disabled) .opcion-jornada-nombre {
    color: var(--tinta-tenue);
}

.opcion-jornada:has(input:disabled) .opcion-jornada-horas {
    font-weight: 600;
    color: var(--tinta-tenue);
}

.opciones-jornada-vacio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.estado-disponibilidad {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.estado-disponibilidad[hidden] {
    display: none;
}

.estado-disponibilidad::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borde-fuerte);
}

.estado-disponibilidad.libre::before {
    background: var(--dorado);
}

.estado-disponibilidad.parcial::before {
    background: var(--azul);
}

.estado-disponibilidad.sin-cupo {
    color: var(--error);
}

.estado-disponibilidad.sin-cupo::before {
    background: var(--error);
}

.por-horas {
    margin: 16px 0;
    padding: 16px 16px 4px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
}

.por-horas .campo-fila {
    margin-bottom: 0;
}

.ayuda-campo.error-campo {
    color: var(--error);
}

.solicitud-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.solicitud-guia {
    position: sticky;
    top: 24px;
    padding: 26px;
    padding: clamp(22px, 3vw, 28px);
    border-radius: 12px;
    background: var(--azul-oscuro);
    color: #DCE8F5;
}

.solicitud-guia h2 {
    font-size: 20px;
    color: #FFFFFF;
    margin: 0;
}

.guia-pasos {
    list-style: none;
    counter-reset: paso;
    display: grid;
    gap: 16px;
    margin: 18px 0 20px;
    padding: 0;
}

.guia-pasos li {
    position: relative;
    counter-increment: paso;
    padding-left: 38px;
    font-size: 14.5px;
    line-height: 1.5;
}

.guia-pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -3px;
    font-family: var(--fuente-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    color: var(--dorado-sobre-azul);
}

.guia-pasos strong {
    display: block;
    color: #FFFFFF;
    font-weight: 600;
}

.solicitud-guia .enlace-ayuda {
    color: var(--dorado-sobre-azul);
}

.cuenta {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.cuenta-resumen {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
}

.cuenta-monograma {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border: 2px solid var(--dorado);
    border-radius: 50%;
    background: var(--azul-oscuro);
    color: var(--dorado-sobre-azul);
    font-family: var(--fuente-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
}

.cuenta-nombre {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cuenta-rol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.estado-cuenta {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--dorado-fondo);
    color: var(--azul-oscuro);
    font-size: 12.5px;
    font-weight: 600;
}

.estado-cuenta.inactiva {
    background: var(--error-fondo);
    color: var(--error);
}

.cuenta-atajos {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--lienzo);
    box-shadow: var(--sombra-tarjeta);
}

.cuenta-atajos a {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 14px 44px 14px 18px;
    color: var(--tinta);
    text-decoration: none;
    transition: background .15s ease;
}

.cuenta-atajos a + a {
    border-top: 1px solid var(--borde);
}

.cuenta-atajos a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--borde-fuerte);
    border-right: 2px solid var(--borde-fuerte);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color .15s ease;
}

.cuenta-atajos a span {
    font-size: 15px;
    font-weight: 600;
}

.cuenta-atajos a small {
    font-size: 13.5px;
    color: var(--tinta-suave);
}

.cuenta-atajos a:hover {
    background: #F4F7FB;
}

.cuenta-atajos a:hover span {
    color: var(--azul);
}

.cuenta-atajos a:hover::after {
    border-color: var(--dorado);
}

.cuenta-atajos a:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: -3px;
}

.cuenta-formularios {
    display: grid;
    gap: 20px;
}

.ayuda-campo.en-linea {
    margin: 0;
}

@media (max-width: 900px) {
    .solicitud,
    .cuenta {
        grid-template-columns: minmax(0, 1fr);
    }

    .solicitud-guia,
    .cuenta-resumen {
        position: static;
    }
}

@media (max-width: 760px) {
    .reserva-fila {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px 16px;
        padding: 18px 16px;
    }

    .reserva-estado {
        grid-column: 2;
    }

    .reserva-fecha .dia {
        font-size: 24px;
    }

    .detalle-reserva {
        grid-template-columns: minmax(0, 1fr);
    }

    .seguimiento {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .seguimiento-paso {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .seguimiento-paso:not(:last-child)::after {
        top: 32px;
        bottom: -14px;
        left: 13px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .seguimiento-texto {
        margin-top: 3px;
    }
}

@media (max-width: 520px) {
    .cabecera-seccion-acciones,
    .cabecera-seccion-acciones .boton {
        width: 100%;
        text-align: center;
    }

    .pago-qr {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .datos-lista > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .datos-lista.cifras > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .zona-cancelar .boton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cuenta-atajos a::after {
        transition: none;
    }
}

.gestion-nav {
    margin: -12px 0 28px;
    border-bottom: 1px solid var(--borde);
}

.gestion-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.gestion-nav ul::-webkit-scrollbar {
    display: none;
}

.gestion-nav a {
    display: block;
    padding: 10px 14px 12px;
    color: var(--tinta-suave);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.gestion-nav a:hover {
    color: var(--azul);
    border-bottom-color: var(--borde-fuerte);
}

.gestion-nav a[aria-current="page"] {
    color: var(--tinta);
    font-weight: 600;
    border-bottom-color: var(--dorado);
}

.gestion-nav a:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: -2px;
    border-radius: 4px;
}

.gestion-nav-separador {
    flex: none;
    width: 1px;
    height: 20px;
    margin: 0 10px;
    background: var(--borde-fuerte);
}

.grupo-titulo {
    font-size: 24px;
    margin: 0 0 14px;
}

.grupo-titulo:not(:first-child) {
    margin-top: 40px;
}

.grupo-bajada {
    margin: -6px 0 16px;
    max-width: 70ch;
    color: var(--tinta-suave);
    font-size: 15px;
}

.boton-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 4px;
    border: 0;
    background: none;
    color: var(--azul);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: text-decoration-color .15s ease;
}

.boton-texto:hover {
    text-decoration-color: currentColor;
}

.boton-texto:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
    border-radius: 4px;
}

.boton-texto.peligro {
    color: var(--error);
}

.acciones-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.acciones-fila form {
    margin: 0;
}

.estado-reserva.completo {
    background: var(--dorado);
    color: var(--tinta);
}

.estado-reserva.completo::before {
    background: var(--tinta);
}

.filtro-estados {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 22px;
    padding: 4px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--lienzo);
}

.filtro-estados a {
    padding: 7px 16px;
    border-radius: 7px;
    color: var(--tinta-suave);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.filtro-estados a:hover {
    background: var(--azul-fondo);
    color: var(--tinta);
}

.filtro-estados a[aria-current="page"] {
    background: var(--azul-oscuro);
    color: #FFFFFF;
    font-weight: 600;
}

.filtro-estados a:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.lista-gestion .reserva-cuando strong {
    font-weight: 600;
}

.lista-gestion .reserva-estado {
    gap: 8px;
}

.lista-gestion .acciones-fila {
    margin-top: 2px;
}

.fila-detalle {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--arena);
}

.fila-detalle[hidden] {
    display: none;
}

.detalle-rejilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 20px;
    margin: 0;
    border-top: 0;
}

.detalle-rejilla > div {
    border-bottom: 0;
}

.formulario-en-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.formulario-en-linea .campo {
    flex: 1 1 320px;
    margin: 0;
}

.formulario-en-linea p {
    flex: 1 1 320px;
    margin: 0;
    color: var(--tinta-suave);
    font-size: 14.5px;
}

.formulario-reprogramar .campo {
    flex: 1 1 240px;
}

.formulario-reprogramar .campo-fila {
    flex: 1 1 280px;
}

.formulario-reprogramar p {
    flex: 1 1 100%;
}

.formulario-reprogramar button[type="submit"] {
    margin-left: auto;
}

.fila-detalle .reserva-rechazo {
    margin-top: 12px;
}

.pagos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

.pago-fila {
    display: grid;
    gap: 14px;
    padding: 20px 24px;
}

.pago-fila + .pago-fila {
    border-top: 1px solid var(--borde);
}

.pago-fila-cabeza,
.cuenta-fila-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
}

.cifras-fila {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--arena);
}

.cifras-fila dt {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.cifras-fila dd {
    margin: 2px 0 0;
    font-size: 16px;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.cifras-fila .saldo dd {
    font-weight: 700;
    color: var(--azul-oscuro);
}

.pagos-qr {
    position: sticky;
    top: 24px;
}

.pagos-qr-imagen {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 18px;
    padding: 8px;
    object-fit: contain;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--lienzo);
}

.pagos-qr-vacio {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 10px;
    color: var(--tinta-suave);
    font-size: 14.5px;
}

.pagos-qr .boton-bloque {
    margin-top: 4px;
}

.tabla-envoltura {
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
}

table.datos th {
    padding: 12px 16px;
    background: var(--lienzo);
    color: var(--tinta-tenue);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--dorado-claro);
}

table.datos td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--tinta);
}

table.datos tbody tr {
    transition: background .15s ease;
}

table.datos tbody tr:hover {
    background: #F4F7FB;
}

table.datos .numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.celda-principal {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

.celda-principal img,
.miniatura-vacia {
    flex: none;
    width: 64px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--beige-imagen);
}

.celda-titulo {
    display: block;
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
}

.celda-titulo:hover {
    color: var(--azul);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.celda-sub {
    display: block;
    font-size: 14px;
    color: var(--tinta-suave);
}

.celda-vacia {
    color: var(--tinta-tenue);
}

.celda-alerta {
    color: var(--error);
    font-weight: 600;
}

.celda-acciones {
    width: 1%;
    white-space: nowrap;
}

.celda-acciones .acciones-fila {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.cuenta-fila {
    display: grid;
    gap: 14px;
    padding: 20px 24px;
}

.cuenta-fila + .cuenta-fila {
    border-top: 1px solid var(--borde);
}

.cuenta-hechos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    margin: 0;
}

.cuenta-hechos dt {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.cuenta-hechos dd {
    margin: 2px 0 0;
    font-size: 15px;
    color: var(--tinta);
}

.cuenta-alerta {
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--error-fondo);
    color: var(--error);
    font-size: 14.5px;
}

.plegable {
    border-top: 1px dashed var(--borde);
    padding-top: 10px;
}

.plegable summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.plegable summary::-webkit-details-marker {
    display: none;
}

.plegable summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.plegable[open] summary::before {
    transform: rotate(45deg);
}

.plegable summary:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 3px;
    border-radius: 4px;
}

.plegable form {
    margin-top: 12px;
    max-width: 620px;
}

.plegable .ayuda-campo {
    display: block;
    margin-bottom: 12px;
}

.cifras-banda {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
    margin: 0 0 36px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--lienzo);
    box-shadow: var(--sombra-tarjeta);
    overflow: hidden;
}

.cifras-banda > div {
    padding: 18px 20px;
}

.cifras-banda > div + div {
    border-left: 1px solid var(--borde);
}

.cifras-banda dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-suave);
}

.cifras-banda dd {
    margin: 4px 0 0;
    font-family: var(--fuente-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tinta);
    font-variant-numeric: lining-nums tabular-nums;
}

.cifras-banda .destacada {
    background: var(--azul-oscuro);
}

.cifras-banda .destacada dt {
    color: var(--dorado-sobre-azul);
}

.cifras-banda .destacada dd {
    color: #FFFFFF;
}

.reportes-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.reportes-rejilla.dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reportes-rejilla .hoja-titulo {
    font-size: 18px;
    margin-bottom: 14px;
}

.barras {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.barras li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    font-size: 14.5px;
}

.barras-etiqueta {
    color: var(--tinta);
}

.barras-valor {
    font-weight: 700;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.barras-pista {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 99px;
    background: var(--azul-fondo);
    overflow: hidden;
}

.barras-pista span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--azul);
}

.barras li:first-child .barras-pista span {
    background: var(--dorado);
}

.barras-vacio {
    margin: 0;
    color: var(--tinta-tenue);
    font-size: 14.5px;
}

.formulario-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.formulario-columna {
    display: grid;
    gap: 20px;
}

.hoja-formulario .hoja-titulo {
    font-size: 19px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borde);
}

.formulario-angosto {
    max-width: 560px;
}

.barra-guardar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--borde);
    background: rgba(250, 248, 243, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hoja-formulario .barra-guardar {
    margin: 22px calc(-1 * clamp(20px, 3vw, 30px)) calc(-1 * clamp(20px, 3vw, 30px));
    padding: 14px clamp(20px, 3vw, 30px);
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, .96);
}

@media (max-width: 1000px) {
    .reportes-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cifras-banda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cifras-banda > div {
        border-left: 0 !important;
        border-top: 1px solid var(--borde);
    }

    .cifras-banda > div:nth-child(-n+3) {
        border-top: 0;
    }

    .cifras-banda > div:not(:nth-child(3n+1)) {
        border-left: 1px solid var(--borde) !important;
    }
}

@media (max-width: 900px) {
    .pagos,
    .formulario-columnas {
        grid-template-columns: minmax(0, 1fr);
    }

    .pagos-qr {
        position: static;
    }
}

@media (max-width: 760px) {
    .detalle-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cifras-fila {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pago-fila,
    .cuenta-fila {
        padding: 18px 16px;
    }

    .reportes-rejilla,
    .reportes-rejilla.dos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .cifras-banda {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cifras-banda > div:not(:nth-child(3n+1)) {
        border-left: 0 !important;
    }

    .cifras-banda > div:nth-child(even) {
        border-left: 1px solid var(--borde) !important;
    }

    .cifras-banda > div:nth-child(3) {
        border-top: 1px solid var(--borde);
    }

    .cifras-banda dd {
        font-size: 24px;
    }

    .filtro-estados {
        display: flex;
    }

    .filtro-estados a {
        flex: 1 1 auto;
        text-align: center;
        padding: 7px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plegable summary::before,
    .gestion-nav a,
    table.datos tbody tr {
        transition: none;
    }
}

.hoja-formulario .campo-fila + .ayuda-campo {
    margin-top: 8px;
}

@media (max-width: 480px) {
    .campo-fila {
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .filtro-estados {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tabla-envoltura {
        overflow: visible;
    }

    table.datos {
        min-width: 0;
    }

    table.datos thead {
        display: none;
    }

    table.datos,
    table.datos tbody,
    table.datos tr,
    table.datos td {
        display: block;
        width: auto;
    }

    table.datos tbody tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--borde);
    }

    table.datos tbody tr:last-child {
        border-bottom: 0;
    }

    table.datos td {
        padding: 3px 0;
        border: 0;
    }

    table.datos td.celda-cabeza {
        padding-bottom: 10px;
    }

    table.datos td[data-etiqueta] {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        text-align: right;
    }

    table.datos td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        color: var(--tinta-suave);
        font-size: 14px;
        text-align: left;
    }

    .celda-principal {
        min-width: 0;
    }

    table.datos td.celda-acciones {
        padding-top: 12px;
    }

    .celda-acciones .acciones-fila {
        justify-content: flex-start;
    }
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
    background: var(--arena);
    border-style: dashed;
    color: var(--tinta-suave);
    cursor: not-allowed;
}