/* Componentes de la Bitácora Nocturna para todo el sitio (ver DESIGN.md) */
:root {
    --noche: #042550;
    --cielo: #88b6f2;
    --cielo-tenue: #7ea6dc;
    --cielo-linea: rgba(136, 182, 242, 0.22);
    --carmesi: #940606;
    --carmesi-profundo: #570e0e;
    --grafito: #131a22;
    --humo: #f5f5f5;
    --radio: 0.375rem;
    --medida: 68ch;
    --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html {
    /* Los anclajes no quedan escondidos bajo la barra fija */
    scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: var(--noche);
}

/* Enlace para saltar la navegación con el teclado */
.saltar {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--noche);
    background: var(--cielo);
    border-radius: var(--radio);
    text-decoration: none;
}

.saltar:focus {
    top: 1rem;
    color: var(--noche);
    outline: 2px solid var(--humo);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

.tray {
    background: var(--noche);
    color: var(--cielo);
    /* Títulos capturados en el admin pueden traer palabras o enlaces muy largos */
    overflow-wrap: break-word;
}

.tray-tarjeta-titulo,
.tray-prueba > span,
.tray-riel-cargo,
.tray-vecino-cargo {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .tray *,
    .tray *::after {
        transition: none !important;
    }
}

.tray ::selection {
    background: var(--carmesi);
    color: var(--humo);
}

.tray a:focus-visible,
.tray button:focus-visible,
.tray audio:focus-visible,
.tray video:focus-visible {
    outline: 2px solid var(--cielo);
    outline-offset: 3px;
    border-radius: var(--radio);
}

.tray ul,
.tray ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tray img {
    display: block;
    max-width: 100%;
    background: var(--grafito);
}

/* ---------- Encabezado ---------- */
.tray-encabezado {
    padding: 8rem 0 3rem;
}

.tray-titulo {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--cielo);
    text-wrap: balance;
}

.tray-periodo {
    margin: 0.75rem 0 0;
    font-size: 1.125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--cielo);
}

.tray-sep {
    margin: 0 0.5rem;
    color: var(--cielo-tenue);
}

.tray-redes-bloque {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tray-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tray-redes .btn-social {
    display: inline-grid;
    place-items: center;
}

.tray-redes .icono {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--cielo);
}

/* Riel: la línea carmesí de la trayectoria, en horizontal */
.tray-riel {
    margin-top: 3rem;
}

.tray-riel ol {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    /* 9rem: en 390px caben dos cargos completos y asoma el tercero, señal de que se desplaza */
    grid-auto-columns: minmax(9rem, 1fr);
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--cielo-linea) transparent;
    padding-bottom: 0.5rem;
}

.tray-riel-item {
    position: relative;
    padding-top: 1.5rem;
    scroll-snap-align: start;
}

/* El tramo de riel de cada cargo cubre también el hueco hasta el siguiente,
   así la línea sigue continua al desplazarse en móvil */
.tray-riel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -1.5rem;
    height: 0.25rem;
    background: var(--carmesi);
}

.tray-riel-item:last-child::before {
    right: 0;
}

/* Medialuna colgada del riel, como en la trayectoria de la página de inicio */
.tray-riel-luna {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 1.5rem;
    height: 0.75rem;
    border: 2px solid var(--carmesi);
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    background: var(--noche);
}

.tray-riel-item.is-actual .tray-riel-luna {
    background: var(--carmesi);
}

.tray-riel-texto {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--cielo-tenue);
    text-decoration: none;
}

a.tray-riel-texto:hover .tray-riel-cargo {
    color: var(--cielo);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.tray-riel-anios {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tray-riel-cargo {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.tray-riel-item.is-actual .tray-riel-texto {
    color: var(--cielo);
}

.tray-riel-item.is-actual .tray-riel-cargo {
    font-weight: 600;
}

/* ---------- Semblanza ---------- */
.tray-semblanza {
    padding: 1.5rem 0 4.5rem;
}

.tray-semblanza-grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .tray-semblanza-grid {
        grid-template-columns: minmax(0, var(--medida)) minmax(16rem, 22rem);
        justify-content: space-between;
        align-items: start;
    }
}

.tray-prosa {
    max-width: var(--medida);
}

.tray-prosa p {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    /* Alineada a la izquierda: justificar abre huecos entre palabras en columnas angostas */
    text-align: left;
    text-wrap: pretty;
}

.tray-video {
    display: block;
    width: 100%;
    margin-top: 2rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio);
    background: var(--grafito);
}

.tray-retrato {
    margin: 0;
    order: -1;
}

@media (min-width: 992px) {
    .tray-retrato {
        order: 0;
    }
}

.tray-retrato img {
    width: 100%;
    max-width: 22rem;
    min-height: 12rem;
    border-radius: var(--radio);
    object-fit: cover;
}

/* ---------- Secciones ---------- */
.tray-seccion {
    padding: 4.5rem 0 1.5rem;
    border-top: 1px solid var(--cielo-linea);
}

.tray-h2 {
    margin: 0 0 2rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cielo);
}

.tray-grupo {
    margin-bottom: 4rem;
}

.tray-h3 {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--cielo);
}

.tray-cuenta {
    font-size: 0.9375rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--cielo-tenue);
}

.tray-meta {
    font-size: 0.8125rem;
    color: var(--cielo-tenue);
}

/* ---------- Logros ---------- */
.tray-logros {
    max-width: var(--medida);
}

.tray-logro {
    padding: 1.25rem 0;
    border-top: 1px solid var(--cielo-linea);
}

.tray-logro:first-child {
    border-top: 0;
    padding-top: 0;
}

.tray-logro p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
}

.tray-pruebas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem !important;
}

.tray-prueba {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cielo);
    text-decoration: none;
    background: var(--grafito);
    border: 1px solid var(--cielo-linea);
    border-radius: var(--radio);
    transition: border-color 0.15s ease-out;
}

.tray-prueba:hover {
    border-color: var(--cielo);
}

.tray-prueba-clase {
    font-weight: 600;
}

.tray-prueba-tipo {
    color: var(--cielo-tenue);
    font-weight: 500;
}

/* Ver el resto de una lista: acción terciaria, en texto, para no competir con el contenido */
.tray-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cielo);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    background: none;
    border: 0;
    cursor: pointer;
}

.tray-mas:hover,
.tray-mas:active {
    color: var(--humo);
}

.tray-mas[hidden] {
    display: none;
}

/* Chevron dibujado: apunta abajo cerrado, arriba abierto */
.tray-mas[aria-controls]::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    margin-top: -0.25em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease-out;
}

.tray-mas[aria-expanded="true"]::after {
    margin-top: 0.25em;
    transform: rotate(-135deg);
}

/* ---------- Evidencia ---------- */
.tray-documentos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 1.5rem;
}

.tray-documento {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: var(--cielo);
    text-decoration: none;
}

.tray-documento img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin-bottom: 0.375rem;
    border-radius: var(--radio);
    transition: box-shadow 0.2s ease-out;
}

.tray-documento:hover img {
    box-shadow: var(--sombra-hover);
}

.tray-documento:hover .tray-tarjeta-titulo {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.tray-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.tray-tarjetas > li[hidden] {
    display: none;
}

.tray-tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: var(--cielo);
    text-decoration: none;
    background: var(--grafito);
    border-radius: var(--radio);
    transition: box-shadow 0.2s ease-out;
}

.tray-tarjeta:hover {
    color: var(--cielo);
    box-shadow: var(--sombra-hover);
}

.tray-tarjeta img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tray-tarjeta-medio {
    position: relative;
    display: block;
}

/* En pantallas angostas la tarjeta pasa a fila: miniatura a la izquierda, texto a la derecha */
@media (max-width: 575.98px) {
    .tray-tarjetas {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .tray-tarjeta {
        flex-direction: row;
        align-items: stretch;
    }

    /* width y min-width explícitos: un flex item con min-width:auto se ensancha hasta el tamaño
       natural de la imagen (1000px o más) y la página se desborda de lado */
    .tray-tarjeta > img,
    .tray-tarjeta-medio {
        flex: 0 0 6.5rem;
        width: 6.5rem;
        min-width: 0;
        min-height: 6.5rem;
    }

    .tray-tarjeta > img {
        height: auto;
        aspect-ratio: auto;
    }

    .tray-tarjeta-medio img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }

    .tray-tarjeta-cuerpo {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.75rem 1rem;
    }

    .tray-play {
        left: 0.5rem;
        bottom: 0.5rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.6875rem;
    }

    .tray-documentos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.tray-play {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
    color: var(--humo);
    background: var(--carmesi);
    border-radius: 50%;
}

/* Triángulo de reproducción dibujado en CSS: un video más no suma marcado */
.tray-play::before {
    content: "";
    width: 0.75em;
    height: 0.875em;
    margin-left: 0.15em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tray-tarjeta-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
}

.tray-tarjeta-titulo {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.tray-fecha {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tray-audios {
    display: grid;
    gap: 1rem;
    max-width: var(--medida);
}

.tray-audio {
    display: grid;
    gap: 0.625rem;
    padding: 1rem;
    background: var(--grafito);
    border-radius: var(--radio);
}

.tray-audio audio {
    width: 100%;
}

/* ---------- Reproductor de entrevistas: lista de reproducción estilo app de música ---------- */
.rep {
    max-width: 48rem;
    overflow: hidden;
    background: var(--grafito);
    border-radius: var(--radio);
}

.rep-panel {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-areas:
        "portada info controles"
        "progreso progreso progreso";
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(136, 182, 242, 0.1) 0%, rgba(136, 182, 242, 0) 65%);
}

.rep-portada {
    grid-area: portada;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    color: var(--cielo);
    background: var(--noche);
    border-radius: var(--radio);
}

.rep-portada .icono {
    width: 1.5rem;
    height: 1.5rem;
}

/* Ecualizador: aparece en lugar del micrófono mientras suena */
.rep-eq {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 1.5rem;
}

.rep-eq i {
    width: 4px;
    height: 100%;
    background: var(--cielo);
    border-radius: 2px;
    transform-origin: bottom;
}

.rep-eq i:nth-child(1) { transform: scaleY(0.55); }
.rep-eq i:nth-child(2) { transform: scaleY(1); }
.rep-eq i:nth-child(3) { transform: scaleY(0.4); }
.rep-eq i:nth-child(4) { transform: scaleY(0.75); }

.rep.is-sonando .rep-portada .icono {
    display: none;
}

.rep.is-sonando .rep-eq {
    display: flex;
}

@media (prefers-reduced-motion: no-preference) {
    .rep.is-sonando .rep-eq i {
        animation: rep-eq 900ms ease-in-out infinite alternate;
    }

    .rep.is-sonando .rep-eq i:nth-child(2) { animation-delay: -300ms; animation-duration: 700ms; }
    .rep.is-sonando .rep-eq i:nth-child(3) { animation-delay: -600ms; animation-duration: 1100ms; }
    .rep.is-sonando .rep-eq i:nth-child(4) { animation-delay: -150ms; animation-duration: 800ms; }
}

@keyframes rep-eq {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}

.rep-info {
    grid-area: info;
    min-width: 0;
}

.rep-titulo {
    display: -webkit-box;
    margin: 0.25rem 0 0;
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cielo);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rep-controles {
    grid-area: controles;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rep-btn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--cielo);
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.rep-btn:hover {
    background: rgba(136, 182, 242, 0.12);
}

.rep-btn .icono {
    width: 1.125rem;
    height: 1.125rem;
}

.rep-btn-play {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--humo);
    background: var(--carmesi);
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
}

.rep-btn-play:hover {
    background: var(--carmesi-profundo);
}

.rep-btn-play .icono {
    width: 1.25rem;
    height: 1.25rem;
}

/* El triángulo de "play" se ve descentrado si se centra por su caja */
.rep-ico-play {
    display: grid;
    margin-left: 3px;
}

.rep-ico-pausa,
.rep.is-sonando .rep-ico-play {
    display: none;
}

.rep.is-sonando .rep-ico-pausa {
    display: grid;
}

.rep-progreso {
    grid-area: progreso;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.rep-tiempo {
    min-width: 2.75rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--cielo-tenue);
}

.rep-tiempo:last-child {
    text-align: right;
}

/* Barra de avance: la parte recorrida en cielo, el resto en cielo tenue */
.rep-barra {
    width: 100%;
    height: 1.5rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.rep-barra::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cielo) var(--progreso, 0%), var(--cielo-linea) var(--progreso, 0%));
}

.rep-barra::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    background: var(--cielo);
    border: 0;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
}

.rep-barra::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--cielo-linea);
}

.rep-barra::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--cielo);
}

.rep-barra::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--cielo);
    border: 0;
    border-radius: 50%;
}

.rep-barra:hover::-webkit-slider-thumb,
.rep-barra:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(136, 182, 242, 0.22);
}

.rep-barra:focus-visible {
    outline: 2px solid var(--cielo);
    outline-offset: 2px;
    border-radius: 2px;
}

.rep-lista {
    padding: 0.5rem;
    border-top: 1px solid var(--cielo-linea);
}

.rep-pista {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.75rem;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    color: var(--cielo-tenue);
    background: transparent;
    border: 0;
    border-radius: var(--radio);
}

.rep-pista:hover {
    color: var(--cielo);
    background: rgba(136, 182, 242, 0.06);
}

.rep-pista[aria-current] {
    color: var(--cielo);
    background: rgba(136, 182, 242, 0.1);
}

.rep-pista[aria-current] .rep-pista-titulo {
    font-weight: 600;
}

.rep-pista-num {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.rep-pista-titulo {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.rep-pista-dur {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .rep-panel {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        grid-template-areas:
            "portada info"
            "progreso progreso"
            "controles controles";
        padding: 1rem;
    }

    .rep-controles {
        justify-content: center;
        gap: 1.5rem;
    }
}

.tray-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .tray-fotos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tray-fotos img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radio);
}

/* ---------- Página no encontrada ---------- */
.tray-no-encontrada-texto {
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* ---------- Cierre ---------- */
.tray-cierre {
    padding: 3rem 0 4.5rem;
    border-top: 1px solid var(--cielo-linea);
}

.tray-cierre-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .tray-cierre-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.tray-vecino {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.5rem;
    color: var(--cielo);
    text-decoration: none;
    background: var(--grafito);
    border-radius: var(--radio);
    transition: box-shadow 0.2s ease-out;
}

.tray-vecino:hover {
    color: var(--cielo);
    box-shadow: var(--sombra-hover);
}

.tray-vecino-siguiente {
    grid-column: -2;
    text-align: right;
}

.tray-vecino-cargo {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
}

.tray-cierre-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.tray-cierre-pie .tray-redes-bloque {
    margin-top: 0;
}

.tray-volver {
    font-weight: 600;
    color: var(--cielo);
    text-underline-offset: 0.25em;
}

.tray-volver:hover {
    color: var(--humo);
}

/* ---------- Dock flotante: el cargo en cifras ----------
   Píldora de vidrio grafito anclada abajo al centro; cada cifra lleva a su sección y la
   sección en lectura se pinta en cielo. Se retira al llegar al pie de página. */
.tray:has(.tray-dock) {
    padding-bottom: 5rem;
}

.tray-dock {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.3125rem;
    background: rgba(19, 26, 34, 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--cielo-linea);
    border-radius: 50rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(136, 182, 242, 0.1);
    transform: translateX(-50%);
}

.tray-dock ul {
    position: relative;
    display: flex;
    gap: 0.125rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 50rem;
}

.tray-dock ul::-webkit-scrollbar {
    display: none;
}

.tray-dock a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.6875rem 1rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--cielo-tenue);
    text-decoration: none;
    border-radius: 50rem;
}

.tray-dock .icono {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.tray-dock-texto {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
}

.tray-dock-num {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cielo);
}

.tray-dock-txt {
    font-size: 0.8125rem;
}

.tray-dock a:hover {
    color: var(--cielo);
    background: rgba(136, 182, 242, 0.12);
}

.tray-dock a[aria-current] {
    color: var(--noche);
    background: var(--cielo);
}

.tray-dock a[aria-current] .tray-dock-num {
    color: var(--noche);
}

.tray .tray-dock a:focus-visible {
    outline: 2px solid var(--cielo);
    outline-offset: -2px;
}

.tray-dock.is-oculto {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
    .tray-dock {
        transition:
            opacity var(--dur-media) var(--curva-entrada),
            transform var(--dur-media) var(--curva-entrada),
            visibility 0s;
    }

    .tray-dock.is-oculto {
        transition:
            opacity var(--dur-rapida) var(--curva-salida),
            transform var(--dur-rapida) var(--curva-salida),
            visibility 0s linear var(--dur-rapida);
    }

    .tray-dock a {
        transition: background-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
    }
}

/* En móvil y tableta solo íconos: un toque lleva a la sección y la cifra activa se despliega con su texto
   ("27 reconocimientos"), así siempre se sabe dónde se está sin pedir un segundo toque.
   El texto de las demás sigue en el DOM para lectores de pantalla. */
@media (max-width: 1199.98px) {
    .tray-dock {
        max-width: calc(100% - 1rem);
    }

    .tray-dock ul {
        gap: 0;
    }

    .tray-dock a {
        gap: 0;
        padding: 0.6875rem 0.8125rem;
    }

    .tray-dock .icono {
        width: 1.125rem;
        height: 1.125rem;
    }

    .tray-dock-texto {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
    }

    .tray-dock a[aria-current] {
        padding-right: 1rem;
    }

    .tray-dock a[aria-current] .tray-dock-texto {
        max-width: 14rem;
        margin-left: 0.5rem;
        opacity: 1;
    }

    /* Cuando el dock no cabe, se desplaza de lado y los extremos se desvanecen como señal */
    .tray-dock.is-desborda ul {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.75rem, #000 calc(100% - 0.75rem), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 0.75rem, #000 calc(100% - 0.75rem), transparent 100%);
    }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: no-preference) {
    .tray-dock a[aria-current] .tray-dock-texto {
        transition: opacity var(--dur-media) var(--curva-entrada);
    }
}

@media print {
    .tray-dock {
        display: none;
    }
}