/* =============================================
   pages/equipo-modal.css
   Equipo, parte 3/3: modal de ficha de locutor, tema claro y
   transicion de pagina de Equipo. Dividido desde equipo.css
   (fase de reorganizacion de arquitectura CSS, 2026-08-13) --
   mismo contenido, sin cambios de valores.
   Viene de pages/equipo-roster.css.
   ============================================= */

/* =========================================================
   Ficha: panel de pantalla completa dividido en dos columnas --
   retrato a la izquierda (con el mismo recorte diagonal de los spreads
   del carrete, ver equipo-roster.css) y contenido desplazable a la
   derecha con el nombre en tipografia enorme del color del integrante
   y secciones numeradas 01/02/03. Deliberadamente NO es un card
   centrado con bordes redondeados: la ficha se lee como una
   continuacion de la pagina, no como un dialogo generico encima.
   ========================================================= */
.roster-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
}

.roster-modal.is-open {
    display: block;
}

.roster-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: roster-overlay-in 260ms var(--ease-out) both;
}

@keyframes roster-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.roster-modal-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    width: min(1280px, calc(100% - 48px));
    height: calc(100vh - 56px);
    margin: 28px auto;
    overflow: hidden;
    border-radius: 4px;
    background: #0a1526;
    color: #ffffff;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    animation: roster-modal-in 380ms var(--ease-out) both;
}

/* Entra deslizando desde la derecha, como el resto del lenguaje
   direccional de la pagina (los spreads entran de lado). */
@keyframes roster-modal-in {
    from { opacity: 0; transform: translateX(48px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .roster-modal-overlay,
    .roster-modal-card {
        animation: none;
    }
}

/* --- Columna de retrato --- */
.roster-modal-photo {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(160deg, #071427, #0f1f38);
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
}

.roster-modal-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(200deg, color-mix(in srgb, var(--member-accent, var(--cyan-glow)) 26%, transparent), transparent 55%);
    pointer-events: none;
}

.roster-modal-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform-origin: center center;
    transition: transform 0.25s var(--ease-out);
}

/* Etiqueta vertical "Ficha" sobre el borde del retrato -- detalle
   editorial que reemplaza al titulo generico del dialogo. */
.roster-modal-photo-tag {
    position: absolute;
    z-index: 3;
    top: 28px;
    left: 24px;
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Controles flotantes para acercar o alejar la fotografia. */
.roster-photo-controls {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 3;
    display: inline-flex;
    gap: var(--space-2);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    padding: 6px;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.roster-photo-controls button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.roster-photo-controls button:hover {
    background: var(--member-accent, var(--cyan-glow));
    color: #04121c;
}

.roster-photo-controls svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
}

/* --- Columna de contenido --- */
.roster-modal-scroll {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px clamp(28px, 4vw, 56px) 56px;
}

/* Boton de cerrar con palabra, no un aspa suelta -- mismo tono de los
   links de texto del carrete. */
.roster-modal-close {
    position: sticky;
    top: 0;
    z-index: 5;
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.roster-modal-close:hover {
    color: var(--member-accent, var(--cyan-glow));
    border-color: var(--member-accent, var(--cyan-glow));
}

.roster-modal-close svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

.roster-modal-head {
    clear: both;
    padding-top: 18px;
    margin-bottom: 44px;
}

.roster-modal-role {
    color: var(--member-accent, var(--cyan-glow));
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.roster-modal-head h2 {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--member-accent, var(--cyan-glow));
    word-break: break-word;
}

/* Secciones numeradas: el numero vive en una columna propia a la
   izquierda, como el sumario de una revista. */
.roster-modal-section {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0 var(--space-4);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.roster-modal-section-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--member-accent, var(--cyan-glow));
    padding-top: 4px;
}

.roster-modal-section h3 {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: var(--space-3);
}

#roster-modal-bio p {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.75;
    margin-bottom: var(--space-3);
}

#roster-modal-bio p:first-child {
    font-size: 1.06rem;
    color: #ffffff;
}

/* Trayectoria: linea de tiempo vertical con punto por hito, en vez de
   una lista de vinetas plana. */
.roster-modal-list {
    list-style: none;
    display: grid;
    gap: var(--space-4);
}

.roster-modal-list li {
    position: relative;
    padding-left: var(--space-5);
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
}

.roster-modal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--member-accent, var(--cyan-glow));
}

.roster-modal-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(0.5em + 13px);
    bottom: calc(-1 * var(--space-4));
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}

/* Intereses: pastillas, no vinetas -- se escanean de un vistazo. */
.roster-modal-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.roster-modal-chips li {
    padding: 7px 14px;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--member-accent, var(--cyan-glow)) 42%, transparent);
    background: color-mix(in srgb, var(--member-accent, var(--cyan-glow)) 10%, transparent);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .roster-modal-card {
        grid-template-columns: 1fr;
        grid-template-rows: 38vh minmax(0, 1fr);
        width: calc(100% - 24px);
        height: calc(100vh - 32px);
        margin: 16px auto;
    }

    .roster-modal-photo {
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    .roster-modal-scroll {
        padding: 28px 22px 40px;
    }

    .roster-modal-head {
        margin-bottom: 32px;
    }
}

@media (max-width: 520px) {
    .roster-modal-section {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .roster-modal-section-num {
        padding-top: 0;
    }
}

/* =========================================================
   PAGE TRANSITION (llegada) — Equipo es retrato/enfoque: blur +
   escala sutil, como un "focus pull" de camara hacia las fotos
   del equipo. Ver components/page-transitions.css.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: pt-equipo-exit var(--duration-base) var(--ease-out);
    }

    ::view-transition-new(root) {
        animation: pt-equipo-enter var(--duration-slow) var(--ease-out);
    }

    @keyframes pt-equipo-exit {
        to { opacity: 0; filter: blur(4px); transform: scale(1.02); }
    }

    @keyframes pt-equipo-enter {
        from { opacity: 0; filter: blur(5px); transform: scale(0.97); }
    }
}

/* =========================================================
   Light theme
   Movido desde themes/light.css (fase de reorganizacion de
   arquitectura CSS, 2026-08-13): estas reglas ya pertenecian a esta
   pagina, solo estaban centralizadas en otro archivo.
   ========================================================= */
/* La banda de color (equipo-hero.css) ya se resuelve sola por tema via
   sus variables --band-* -- el turquesa de marca solo aparece en claro,
   ver ese archivo. El panel de tarjetas si necesita este override: en
   oscuro coincide exacto con --bg-dark (equipo-roster.css), en claro
   pasa a blanco. */
body.light-theme .team-panel {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 -24px 60px rgba(15, 23, 42, 0.1);
}

body.light-theme .team-card-link {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.16);
}

body.light-theme .roster-modal-card {
    background: #ffffff;
    color: #0f172a;
}

body.light-theme .roster-modal-photo {
    background: linear-gradient(160deg, #e2e8f0, #cbd5e1);
}

body.light-theme .roster-modal-close {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.16);
}

body.light-theme .roster-modal-section {
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-theme .roster-modal-section h3 {
    color: #64748b;
}

body.light-theme #roster-modal-bio p,
body.light-theme .roster-modal-list li {
    color: #334155;
}

body.light-theme #roster-modal-bio p:first-child {
    color: #0f172a;
}

body.light-theme .roster-modal-list li:not(:last-child)::after {
    background: rgba(15, 23, 42, 0.16);
}

body.light-theme .roster-modal-chips li {
    color: #1e293b;
}

body.light-theme .roster-photo-controls {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.82);
}

body.light-theme .roster-photo-controls button {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

/* =========================================================
   Mobile
   Movido desde responsive.css (fase de reorganizacion de
   arquitectura CSS, 2026-08-13): esta regla ya pertenecia a esta
   pagina, solo estaba centralizada en otro archivo.
   ========================================================= */
@media (max-width: 768px) {
    .team-panel {
        padding: 32px 6% 72px;
    }
}