/* =========================================================
   PÁGINA NORMAS INTERNAS — pestañas + galería + lightbox
   4 políticas; al elegir una, se ven sus páginas como miniaturas;
   al hacer clic en una miniatura, se abre grande (lightbox).
   ========================================================= */

/* ---------- Pestañas ---------- */
.normas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
}
.normas-tabs button {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.normas-tabs button:hover { color: var(--navy-900); border-color: var(--blue-500); }
.normas-tabs button.activo {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}

/* ---------- Paneles (uno por política) ---------- */
.normas-panel { display: none; }
.normas-panel.activo { display: block; animation: normas-aparecer .4s ease; }
@keyframes normas-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Galería de miniaturas ---------- */
/* ---------- Fila: visor de imagen (izq) + video (der) ---------- */
.normas-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;      /* ambos al mismo alto */
}

/* visor: muestra una página a la vez, con flechas para navegar */
.normas-visor {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
    /* sin aspect-ratio fijo: toma el alto de la fila (igual al video) */
    min-height: 0;
}
.normas-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    cursor: zoom-in;
}
.normas-slide.activo { opacity: 1; visibility: visible; }
.normas-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;               /* muestra la hoja completa */
    background: #f0f3f8;
}

/* flechas de navegación del visor */
.normas-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(6,16,33,.55);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: background .2s ease;
}
.normas-nav:hover { background: rgba(6,16,33,.85); }
.normas-nav.prev { left: 10px; }
.normas-nav.next { right: 10px; }

/* contador de páginas del visor */
.normas-contador {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(6,16,33,.7);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    z-index: 3;
}

/* respaldo cuando la imagen no existe */
.normas-slide.sin-img {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    background: #eef2f8;
}
.normas-slide .ph-texto {
    font-size: .85rem;
    font-weight: 600;
    color: #9aa9bf;
    text-align: center;
    padding: 12px;
}

/* video horizontal a la derecha */
.normas-video {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #05101f;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;              /* video horizontal */
    position: relative;
}
.normas-video video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: absolute; inset: 0;
}
.normas-video-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #14395f, #0b2447 60%, #071a30);
    color: rgba(255,255,255,.7);
    font-size: .95rem;
    padding: 20px;
}
.normas-video-ph small { color: rgba(255,255,255,.5); font-size: .8rem; }

/* en móvil se apila: imagen arriba, video abajo */
@media (max-width: 780px) {
    .normas-fila { grid-template-columns: 1fr; }
}

/* ---------- Lightbox (imagen grande a pantalla completa) ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 16, 33, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lightbox.abierto { display: flex; }
.lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* botones del lightbox */
.lightbox-cerrar,
.lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
.lightbox-cerrar:hover,
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-cerrar {
    top: 20px; right: 24px;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
}
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }
/* contador "3 / 5" */
.lightbox-contador {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .9rem;
    background: rgba(255,255,255,.12);
    padding: 6px 16px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

@media (max-width: 600px) {
    .lightbox { padding: 12px; }
    .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
    .lightbox-nav.prev { left: 10px; }
    .lightbox-nav.next { right: 10px; }
}

/* ---------- Fondo de la página de normas ---------- */
body.normas-con-fondo {
    background-image: url('../assets/img/normas/fondo-normas.avif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* la sección se hace semitransparente para que se vea el fondo */
body.normas-con-fondo .section {
    background: rgba(246, 248, 251, .8);
}