/* Identidad publica compartida: logo de referencia y desplazamiento discreto. */
:root {
    --margen-cabecera: clamp(40px, 5vw, 72px);
    --ancho-marca: clamp(150px, 12vw, 180px);
    --alto-marca: calc(var(--ancho-marca) * 0.411381);
    --borde-publico: #d35400;
    --scroll-publico: color-mix(in srgb, var(--borde-publico) 65%, #0a0906);
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.pagina-publica {
    padding-top: 0;
}

.pagina-publica:not(.pagina-inicio) > main {
    padding-top: calc(var(--margen-cabecera) + var(--alto-marca) + 48px);
}

.pagina-publica :is(.contacto, .login, .boletin, .error) {
    position: static;
    padding-top: 0;
}

.pagina-publica :is(.login, .boletin) {
    justify-content: flex-start;
    align-content: start;
}

.pagina-publica .error {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pagina-publica .cabecera-publica {
    position: absolute;
    top: var(--margen-cabecera);
    left: var(--margen-cabecera);
    right: var(--margen-cabecera);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px 32px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

.pagina-publica .cabecera-publica > a {
    display: block;
    width: var(--ancho-marca);
    min-width: var(--ancho-marca);
    margin: 0;
    align-self: auto;
}

.pagina-publica .cabecera-publica > a img {
    display: block;
    width: 100%;
    height: auto;
}

.pagina-publica .cabecera-publica nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding-top: 20px;
}

/* El navegador usa el pulgar personalizado, sin botones de flechas. */
.pagina-publica * {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

html::-webkit-scrollbar,
.pagina-publica *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track,
.pagina-publica *::-webkit-scrollbar-track {
    background: #0a0906;
}

html::-webkit-scrollbar-thumb,
.pagina-publica *::-webkit-scrollbar-thumb {
    background: var(--scroll-publico);
    border-radius: 6px;
    border: 0;
}

html::-webkit-scrollbar-button,
.pagina-publica *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

@supports not selector(::-webkit-scrollbar) {
    :root,
    .pagina-publica * {
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-publico) #0a0906;
    }
}

/* Selectores y fechas mantienen el fondo oscuro y los bordes de la pagina. */
.pagina-publica :is(select, input[type="date"], input[type="datetime-local"], input[type="time"]) {
    background-color: #100e0a;
    border: 1px solid var(--scroll-publico);
    border-radius: 0.5rem;
    color: #eee8db;
    color-scheme: dark;
    font-family: inherit;
    accent-color: var(--scroll-publico);
}

@supports (appearance: base-select) {
    .pagina-publica select:not([multiple]),
    .pagina-publica select:not([multiple])::picker(select) {
        appearance: base-select;
    }

    .pagina-publica select::picker(select) {
        background: #100e0a;
        border: 1px solid var(--scroll-publico);
        border-radius: 0.5rem;
        color: #eee8db;
        max-height: 18rem;
        padding: 0.3rem;
    }

    .pagina-publica select option {
        padding: 0.55rem 0.7rem;
        white-space: normal;
    }

    .pagina-publica select option:is(:hover, :checked, :focus-visible) {
        background: #31251a;
        color: #ffffff;
    }
}

@media (max-width: 600px) {
    :root {
        --margen-cabecera: 26px;
        --ancho-marca: 150px;
    }

    .pagina-publica:has(.cabecera-publica nav):not(.pagina-inicio) > main {
        padding-top: calc(var(--margen-cabecera) + var(--alto-marca) + 110px);
    }

    .pagina-publica .cabecera-publica nav {
        padding-top: 0;
    }
}

@media (max-height: 500px) {
    :root {
        --margen-cabecera: 32px;
    }
}