/* =====================================================================
   Colegio Parroquial Juan XXIII — sistema visual
   Identidad cívica: el escudo manda. Azul eclesial sobre marfil,
   una sola regla de oro litúrgico, rojo ladrillo para la acción.
   Bandas de color a sangre completa; el contenido se alinea a un riel.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&display=swap');

:root {
    /* Campo de color */
    --azul: #123d73;
    --azul-oscuro: #082445;
    --azul-tinta: #05182f;
    --rojo: #c9182b;
    --rojo-hondo: #a01120;
    --dorado: #d5a735;
    --dorado-claro: #e8c877;
    --blanco: #ffffff;
    --marfil: #f7f4ec;
    --gris: #f1f3f7;
    --gris-linea: #e4e7ee;
    --gris-texto: #566172;
    --negro: #101820;

    /* Texto sobre azul (tinte del propio hue, nunca gris) */
    --sobre-azul: #eef1f8;
    --sobre-azul-suave: #a9b3d0;
    --linea-oro: rgba(213, 167, 53, 0.45);

    /* Tipografía */
    --fuente-titulo: 'Spectral', Georgia, 'Times New Roman', serif;
    --fuente-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Estructura */
    --riel: 1440px;
    --riel-texto: 1120px;
    --pad-x: clamp(20px, 4.5vw, 76px);
    --paso: clamp(64px, 9vw, 128px);
    --borde-riel: max(var(--pad-x), calc((100% - var(--riel)) / 2));

    /* Forma cívica: radios chicos, no burbuja SaaS */
    --radio: 10px;
    --radio-lg: 16px;
    --radio-pill: 999px;

    /* Profundidad: offset real + desenfoque suave */
    --sombra-sm: 0 4px 14px -6px rgba(8, 36, 69, 0.22);
    --sombra: 0 24px 55px -22px rgba(8, 36, 69, 0.32);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--azul) var(--marfil);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--azul);
    border-radius: var(--radio-pill);
    border: 3px solid var(--marfil);
}

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

body {
    font-family: var(--fuente-texto);
    font-size: 1.0625rem;
    line-height: 1.65;
    background: var(--blanco);
    color: var(--negro);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--azul-oscuro);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--azul);
    color: var(--marfil);
}

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

/* =========================================
   HEADER — barra azul a sangre completa, sticky
========================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--azul-oscuro);
    border-bottom: 1px solid var(--linea-oro);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}

.navbar {
    max-width: none;
    margin: 0;
    /* Barra a todo el ancho: logo pegado a la izquierda, "Mi perfil" a la
       derecha; no se alinea al riel de 1440px como el resto del contenido. */
    padding: 14px clamp(20px, 3vw, 48px);
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
}

.logo-imagen,
.login-logo {
    width: 52px;
    height: 52px;
    border-radius: var(--radio);
    background: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--linea-oro);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
    flex: 0 0 auto;
}

.logo-imagen img,
.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4px;
}

.logo-texto {
    display: block;
    line-height: 1.15;
}

.logo strong {
    display: block;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--blanco);
}

.logo small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dorado-claro);
}

.menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.menu a,
.menu label.btn-nav {
    display: inline-block;
    padding: 9px 14px;
    border-radius: var(--radio);
    color: var(--sobre-azul);
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.menu > li > a {
    position: relative;
}

.menu > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--dorado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s var(--ease);
}

.menu a:hover {
    color: var(--blanco);
    background: rgba(255, 255, 255, 0.08);
}

.menu > li > a:hover::after,
.menu > li > a.activo::after {
    transform: scaleX(1);
}

.menu > li > a.activo {
    color: var(--blanco);
}

.menu .dropdown-menu a {
    color: var(--azul-oscuro);
}

.menu .dropdown-menu a:hover,
.menu .dropdown-menu a.activo {
    background: var(--gris);
    color: var(--rojo);
}

.menu .dropdown-menu a.activo {
    font-weight: 700;
}

.btn-nav {
    background: var(--dorado) !important;
    color: var(--azul-tinta) !important;
    font-weight: 700 !important;
}

.btn-nav:hover {
    background: var(--dorado-claro) !important;
    color: var(--azul-tinta) !important;
}

.btn-salir {
    background: transparent !important;
    color: var(--sobre-azul) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.btn-salir:hover {
    background: var(--rojo) !important;
    color: var(--blanco) !important;
    box-shadow: none;
}

#menu-toggle,
.menu-btn {
    display: none;
}

/* =========================================
   HERO — banda a sangre completa, ocupa el alto de pantalla
========================================= */
.hero {
    position: relative;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    min-height: min(800px, calc(100svh - 82px));
    padding: clamp(48px, 8vh, 112px) var(--borde-riel);
    background:
        radial-gradient(60% 90% at 12% 20%, rgba(201, 24, 43, 0.10), transparent 60%),
        radial-gradient(55% 80% at 88% 8%, rgba(18, 61, 115, 0.16), transparent 55%),
        linear-gradient(180deg, var(--blanco), var(--marfil));
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gris-linea);
}

.etiqueta {
    display: inline-block;
    color: var(--rojo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    margin-bottom: 16px;
}

.hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
}

.hero-contenido > p:not(.etiqueta):not(.mensaje-sesion) {
    max-width: 46ch;
    color: var(--gris-texto);
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
}

.hero .etiqueta {
    color: var(--rojo);
}

.acciones {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 26px;
    border-radius: var(--radio);
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn.principal {
    background: var(--rojo);
    color: var(--blanco);
    box-shadow: 0 16px 30px -12px rgba(201, 24, 43, 0.5);
}

.btn.principal:hover {
    background: var(--rojo-hondo);
}

.btn.secundario {
    background: transparent;
    color: var(--azul-oscuro);
    box-shadow: inset 0 0 0 1.5px rgba(8, 36, 69, 0.25);
}

.btn.secundario:hover {
    box-shadow: inset 0 0 0 1.5px var(--azul-oscuro);
}

.mensaje-sesion {
    margin-top: 22px;
    font-size: 0.95rem !important;
    color: var(--gris-texto);
}

.mensaje-sesion strong {
    color: var(--azul-oscuro);
}

.hero-card {
    justify-self: center;
    max-width: 420px;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    padding: clamp(28px, 3vw, 44px);
    box-shadow: var(--sombra);
    text-align: center;
    border: 1px solid var(--gris-linea);
}

.escudo-simple {
    width: min(240px, 60vw);
    aspect-ratio: 5 / 6;
    height: auto;
    margin: 0 auto;
    border-radius: 6px 6px 44% 44% / 6px 6px 20% 20%;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--linea-oro);
    box-shadow: 0 20px 40px -20px rgba(8, 36, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blanco);
}

.escudo-con-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 14px;
    mix-blend-mode: multiply;
}

.escudo-simple .mitad {
    flex: 1;
}

.escudo-simple .azul {
    background: var(--azul);
}

.escudo-simple .rojo {
    background: var(--rojo);
}

.escudo-simple span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--blanco);
    font-size: 42px;
    font-weight: 900;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.hero-card h2 {
    font-size: 1.5rem;
    margin-top: 26px;
}

.hero-card p {
    margin-top: 8px;
    color: var(--gris-texto);
    font-size: 0.95rem;
}

/* =========================================
   SECCIONES — riel interno, bandas a sangre completa
========================================= */
.seccion {
    max-width: none;
    margin: 0;
    padding: var(--paso) var(--borde-riel);
}

.fondo-suave {
    background: var(--marfil);
    border-block: 1px solid var(--gris-linea);
}

.fondo-suave > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.titulo-seccion {
    max-width: var(--riel-texto);
    margin: 0 auto clamp(38px, 5vw, 60px);
    text-align: center;
}

.titulo-seccion p {
    display: inline-block;
    color: var(--rojo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    margin-bottom: 14px;
}

.titulo-seccion h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.grid-dos,
.cards {
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    grid-template-columns: repeat(3, 1fr);
}

.grid-dos {
    grid-template-columns: repeat(2, 1fr);
    max-width: var(--riel-texto);
    margin: 0 auto;
}

.card {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: clamp(24px, 2.4vw, 34px);
    border: 1px solid var(--gris-linea);
    box-shadow: var(--sombra-sm);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.card p {
    color: var(--gris-texto);
}

.card.grande {
    box-shadow: none;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--linea-oro);
    border-radius: 0;
    padding: 26px 0 0;
}

.card.nivel {
    text-align: left;
    position: relative;
    padding-top: 30px;
}

.card.nivel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--dorado);
}

.card.nivel:hover,
.card.noticia:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
}

.icono {
    width: 46px;
    height: 46px;
    border-radius: var(--radio);
    margin: 0 0 18px;
    display: grid;
    place-items: center;
    font-size: 24px;
    background: var(--gris);
    border: 1px solid var(--gris-linea);
}

.noticia {
    border-top: 3px solid var(--azul);
}

.noticia:nth-child(2) {
    border-top-color: var(--rojo);
}

.noticia:nth-child(3) {
    border-top-color: var(--dorado);
}

.noticia a {
    display: inline-block;
    margin-top: 16px;
    color: var(--rojo);
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s var(--ease);
}

.noticia a:hover {
    border-bottom-color: var(--rojo);
}

/* =========================================
   GALERÍA — carrusel de imágenes a sangre completa
========================================= */
.galeria {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--azul-tinta);
    outline: none;
}

.galeria__viewport {
    overflow: hidden;
}

.galeria__track {
    display: flex;
    transition: transform 0.6s var(--ease);
    will-change: transform;
}

.galeria__slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    position: relative;
    height: clamp(420px, 78vh, 860px);
    overflow: hidden;
    background: var(--azul-tinta);
}

/* Relleno: la misma imagen, ampliada y desenfocada, cubre el marco
   para que nunca queden barras vacías al no recortar. */
.galeria__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);
    filter: blur(34px) brightness(0.5) saturate(1.15);
    pointer-events: none;
    user-select: none;
}

/* Imagen real: se adapta al marco sin recortarse */
.galeria__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

/* Velo inferior: mantiene legible la barra sobre fotos claras */
.galeria__slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(5, 24, 47, 0.45));
    pointer-events: none;
}

/* Flechas de navegación — contraste sólido para cualquier fondo (incluso blanco) */
.galeria__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pill);
    background: rgba(8, 24, 47, 0.62);
    box-shadow:
        0 8px 24px -8px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    color: var(--blanco);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s var(--ease), background 0.18s var(--ease),
        box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
}

.galeria__flecha svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.galeria__flecha--prev {
    left: clamp(12px, 2.5vw, 34px);
}

.galeria__flecha--next {
    right: clamp(12px, 2.5vw, 34px);
}

.galeria:hover .galeria__flecha,
.galeria:focus-visible .galeria__flecha,
.galeria__flecha:focus-visible {
    opacity: 1;
}

.galeria__flecha:hover {
    background: var(--azul-oscuro);
    box-shadow:
        0 10px 28px -8px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.galeria__flecha:active {
    transform: translateY(-50%) scale(0.92);
}

/* En pantallas táctiles (sin hover) las flechas quedan siempre visibles */
@media (hover: none) {
    .galeria__flecha {
        opacity: 1;
    }
}

/* Barra de indicadores: pastilla gris redondeada */
.galeria__barra {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 3.5vh, 30px);
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--radio-pill);
    background: rgba(16, 22, 30, 0.6);
    box-shadow:
        0 6px 20px -8px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.galeria__seg {
    width: 28px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pill);
    background: rgba(255, 255, 255, 0.34);
    cursor: pointer;
    transition: background 0.25s var(--ease), width 0.25s var(--ease);
}

.galeria__seg:hover {
    background: rgba(255, 255, 255, 0.55);
}

.galeria__seg.is-activa {
    width: 44px;
    background: var(--blanco);
}

/* =====================================================================
   Administración de la galería — visible solo para el Representante Legal
===================================================================== */
.galeria__admin {
    position: absolute;
    top: clamp(12px, 2.6vw, 26px);
    right: clamp(12px, 2.6vw, 34px);
    z-index: 6;
    display: flex;
    gap: 10px;
}

.galeria__admin--centrado {
    position: static;
}

.galeria__subir {
    margin: 0;
}

/* Input real oculto pero accesible: lo dispara el <label> */
.galeria__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Botón "Agregar fotos" — regla de oro litúrgico sobre tinta azul */
.galeria__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px 0 15px;
    border: 0;
    border-radius: var(--radio-pill);
    background: var(--dorado);
    color: var(--azul-tinta);
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        0 10px 26px -10px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition: background 0.18s var(--ease), transform 0.12s var(--ease),
        box-shadow 0.18s var(--ease);
}

.galeria__add svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.galeria__add:hover {
    background: var(--dorado-claro);
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px -10px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.galeria__add:active {
    transform: translateY(0) scale(0.97);
}

.galeria__file:focus-visible + .galeria__add {
    outline: 2px solid var(--blanco);
    outline-offset: 2px;
}

.galeria__add--enviar {
    margin-left: 8px;
    background: var(--azul);
    color: var(--blanco);
}

/* Botón eliminar — uno por diapositiva, arriba a la izquierda */
.galeria__eliminar {
    position: absolute;
    top: clamp(12px, 2.6vw, 26px);
    left: clamp(12px, 2.6vw, 34px);
    z-index: 6;
    margin: 0;
}

.galeria__del {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pill);
    background: rgba(160, 17, 32, 0.82);
    color: var(--blanco);
    cursor: pointer;
    opacity: 0;
    box-shadow:
        0 8px 24px -8px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    transition: opacity 0.25s var(--ease), background 0.18s var(--ease),
        transform 0.12s var(--ease);
}

.galeria__del svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.galeria:hover .galeria__del,
.galeria:focus-within .galeria__del {
    opacity: 1;
}

.galeria__del:hover {
    background: var(--rojo);
    transform: scale(1.06);
}

.galeria__del:active {
    transform: scale(0.92);
}

.galeria__del:focus-visible {
    opacity: 1;
    outline: 2px solid var(--blanco);
    outline-offset: 2px;
}

@media (hover: none) {
    .galeria__del {
        opacity: 1;
    }
}

/* Estado vacío — el Representante Legal aún no cargó imágenes */
.galeria--vacia {
    background: linear-gradient(160deg, var(--azul-oscuro), var(--azul-tinta));
}

.galeria__vacio {
    min-height: clamp(300px, 46vh, 460px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: clamp(44px, 8vw, 96px) var(--pad-x);
    text-align: center;
    color: var(--sobre-azul);
}

.galeria__vacio-icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radio-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--dorado-claro);
    box-shadow: inset 0 0 0 1px var(--linea-oro);
}

.galeria__vacio-icono svg {
    width: 32px;
    height: 32px;
}

.galeria__vacio h2 {
    font-family: var(--fuente-titulo);
    color: var(--blanco);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.galeria__vacio p {
    max-width: 44ch;
    color: var(--sobre-azul-suave);
    font-size: 1.02rem;
}

.galeria__vacio .galeria__admin--centrado {
    margin-top: 6px;
}

.galeria__vacio .galeria__add {
    height: 52px;
    font-size: 1rem;
}

@media (max-width: 560px) {
    .galeria__slide {
        height: clamp(285px, 57vh, 480px);
    }

    .galeria__admin {
        top: 10px;
        right: 10px;
    }

    .galeria__add {
        height: 42px;
        padding: 0 16px 0 12px;
        font-size: 0.88rem;
    }

    .galeria__eliminar {
        top: 10px;
        left: 10px;
    }

    .galeria__del {
        width: 42px;
        height: 42px;
    }

    .galeria__flecha {
        width: 46px;
        height: 46px;
    }

    .galeria__flecha svg {
        width: 19px;
        height: 19px;
    }
}

/* Sección de contacto embebida (páginas que la usan) */
.contacto {
    max-width: none;
    margin: 0;
    padding: var(--paso) var(--borde-riel);
    color: var(--sobre-azul);
    background: var(--azul-oscuro);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.contacto h2 {
    color: var(--blanco);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.contacto .etiqueta {
    color: var(--dorado-claro);
}

.contacto p {
    color: var(--sobre-azul-suave);
}

.datos-contacto {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radio);
    padding: 26px;
}

.datos-contacto p {
    color: var(--sobre-azul);
}

.datos-contacto strong {
    color: var(--dorado-claro);
}

.footer {
    text-align: center;
    padding: 28px var(--borde-riel);
    background: var(--azul-tinta);
    color: var(--sobre-azul-suave);
}

/* =========================================
   FOOTER INSTITUCIONAL
========================================= */
.footer-institucional {
    background: var(--azul-oscuro);
    color: var(--sobre-azul);
    padding: clamp(48px, 6vw, 76px) var(--borde-riel) 0;
    margin-top: var(--paso);
    border-top: 1px solid var(--linea-oro);
}

.footer-grid {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
    gap: clamp(28px, 3vw, 44px);
    padding-bottom: 44px;
}

.footer-col h4 {
    color: var(--dorado-claro);
    font-family: var(--fuente-texto);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.footer-col p {
    color: var(--sobre-azul-suave);
    font-size: 0.9rem;
}

.footer-marca .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: var(--blanco);
    border-radius: 8px;
    padding: 4px;
}

.footer-logo strong {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--blanco);
}

.footer-instagram {
    display: inline-block;
    margin-top: 16px;
    color: var(--sobre-azul);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
}

.footer-instagram:hover {
    color: var(--dorado-claro);
    border-bottom-color: var(--dorado-claro);
}

.footer-links,
.footer-datos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links a,
.footer-datos a {
    color: var(--sobre-azul-suave);
    font-size: 0.9rem;
    transition: color 0.18s var(--ease);
}

.footer-links a:hover,
.footer-datos a:hover {
    color: var(--dorado-claro);
}

.footer-datos li {
    color: var(--sobre-azul-suave);
    font-size: 0.9rem;
}

.footer-mapa .mapa-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mapa-tab {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sobre-azul-suave);
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radio);
    cursor: pointer;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

#mapa-secundaria:checked ~ .mapa-tabs label[for="mapa-secundaria"],
#mapa-jardin:checked ~ .mapa-tabs label[for="mapa-jardin"] {
    color: var(--azul-tinta);
    background: var(--dorado);
}

.mapa-panel {
    display: none;
}

#mapa-secundaria:checked ~ .mapa-paneles .panel-secundaria,
#mapa-jardin:checked ~ .mapa-paneles .panel-jardin {
    display: block;
}

.mapa-panel iframe {
    width: 100%;
    height: 170px;
    border: 0;
    border-radius: var(--radio);
    display: block;
}

.mapa-direccion {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--sobre-azul-suave);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    padding: 22px;
}

.footer-bottom p {
    color: var(--sobre-azul-suave);
    font-size: 0.8rem;
}

/* =========================================
   RESPONSIVE — global
========================================= */
@media (max-width: 1080px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-mapa {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-top: clamp(44px, 8vh, 72px);
        text-align: center;
    }

    .hero-contenido > p {
        margin-inline: auto;
    }

    .acciones {
        justify-content: center;
    }

    .hero-card {
        order: -1;
    }

    .grid-dos,
    .cards {
        grid-template-columns: 1fr 1fr;
    }

    .contacto {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        font-size: 26px;
        color: var(--blanco);
        border-radius: var(--radio);
        cursor: pointer;
    }

    .menu-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--azul-oscuro);
        border-bottom: 1px solid var(--linea-oro);
        padding: 12px var(--pad-x) 20px;
        max-height: calc(100svh - 100%);
        overflow-y: auto;
        box-shadow: 0 26px 40px -20px rgba(0, 0, 0, 0.6);
        display: none;
    }

    #menu-toggle:checked ~ .menu {
        display: flex;
    }

    .menu li {
        list-style: none;
        width: 100%;
    }

    .menu > li > a,
    .menu label.btn-nav {
        display: block;
        padding: 13px 12px;
        font-size: 1rem;
    }

    .menu > li > a::after {
        display: none;
    }

    .menu li[style] {
        margin-left: 0 !important;
    }

    /* En móvil el submenú "Institución" queda desplegado (no hay hover táctil) */
    .dropdown > a[href="#"] {
        opacity: 0.6;
        font-size: 0.78rem !important;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        pointer-events: none;
    }

    .dropdown-menu {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 8px !important;
        min-width: 0 !important;
    }

    .menu .dropdown-menu a {
        color: var(--sobre-azul) !important;
        padding-left: 22px !important;
    }

    .menu .dropdown-menu a:hover,
    .menu .dropdown-menu a.activo {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--dorado-claro) !important;
    }

    .btn-salir {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
        margin-top: 6px;
    }
}

@media (max-width: 560px) {
    .grid-dos,
    .cards {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .logo strong {
        font-size: 0.95rem;
    }

    .logo small {
        font-size: 0.66rem;
    }

    .hero h1 {
        font-size: clamp(2.1rem, 9vw, 2.9rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   FORMULARIOS DE TRÁMITES (inscripciones, becas, contacto, buscar trabajo)
   Layout de tarjeta ancha con grilla de 2 columnas, reutilizable en todas
   las páginas que tengan un formulario de este tipo.
========================================= */
body.pagina-formulario {
    background: var(--marfil);
    font-family: var(--fuente-texto);
}

.pagina-formulario main {
    position: relative;
    overflow: hidden;
}

.form-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    color: #dbe3ee;
    opacity: 0.6;
}

.form-deco-books {
    top: 40px;
    left: clamp(-40px, -2vw, 0px);
    width: clamp(120px, 12vw, 200px);
    height: auto;
}

.form-deco-globe {
    top: 10px;
    right: clamp(-50px, -3vw, -10px);
    width: clamp(150px, 14vw, 240px);
    height: auto;
}

.form-deco-book-bottom {
    bottom: 30px;
    left: clamp(10px, 3vw, 60px);
    width: clamp(90px, 8vw, 140px);
    height: auto;
}

@media (max-width: 1024px) {
    .form-deco {
        display: none;
    }
}

.form-hero {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 12px;
    text-align: center;
}

.form-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--azul);
    background: rgba(18, 61, 115, 0.08);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.form-hero h1 {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    color: var(--azul-oscuro);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.form-hero p {
    color: var(--gris-texto);
    font-size: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.form-card {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    width: calc(100% - 48px);
    margin: 36px auto 80px;
    padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px);
    background: var(--blanco);
    border: 1px solid #eef1f5;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(8, 36, 69, 0.04), 0 12px 32px rgba(8, 36, 69, 0.06);
    box-sizing: border-box;
}

.form-card .alerta-exito,
.form-card .alerta-error {
    margin-bottom: 22px;
}

.form-seccion {
    margin-top: 8px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f5;
}

.form-seccion:first-of-type {
    margin-top: 0;
}

.form-seccion h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--azul);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px clamp(20px, 3vw, 40px);
    align-items: start;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.campo {
    display: flex;
    flex-direction: column;
}

.form-grid label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--azul-oscuro);
    margin-bottom: 6px;
}

.form-grid label .obligatorio {
    color: var(--rojo);
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid input[type="date"],
.form-grid input[type="number"],
.form-grid input[type="password"],
.form-grid select,
.form-grid textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--negro);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-grid textarea {
    resize: vertical;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(18, 61, 115, 0.12);
}

/* Campo de contraseña con botón "ojo" para mostrar/ocultar (mismo recuadro que el resto) */
.campo-password {
    position: relative;
}

.campo-password input,
.form-grid .campo-password input {
    width: 100%;
    padding-right: 46px;
}

.form-login .campo-password {
    position: relative;
    display: flex;
}

.form-login .campo-password input {
    width: 100%;
    padding-right: 46px;
}

.campo-password .campo-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.campo-password .campo-password-toggle:hover {
    color: var(--azul-oscuro);
    background: rgba(18, 61, 115, 0.08);
    /* Queda fijo: sin el translateY(-1px) que heredaba de .form-login button */
    transform: translateY(-50%);
}

.campo-password .campo-password-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.campo-password .campo-password-toggle .pw-eye-off {
    display: none;
}

.campo-password .campo-password-toggle.is-visible .pw-eye {
    display: none;
}

.campo-password .campo-password-toggle.is-visible .pw-eye-off {
    display: block;
}

/* Requisitos de contraseña que se van tildando + medidor de seguridad */
.pw-fuerza {
    margin: 4px 0 6px;
    font-size: 12.5px;
}

.pw-reqs {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 4px 16px;
}

.pw-reqs li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gris-texto);
    transition: color 0.15s ease;
}

.pw-reqs li::before {
    content: "\25CB";
    font-size: 11px;
    color: #cbd5e1;
    transition: color 0.15s ease;
}

.pw-reqs li.ok {
    color: #2f7d4f;
}

.pw-reqs li.ok::before {
    content: "\2713";
    color: #2f7d4f;
    font-weight: 800;
}

.pw-medidor {
    height: 7px;
    border-radius: 999px;
    background: #e6e9ef;
    overflow: hidden;
}

.pw-medidor__barra {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--rojo);
    transition: width 0.2s ease, background 0.2s ease;
}

.pw-medidor__texto {
    margin: 6px 0 0;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--gris-texto);
}

.pw-fuerza.nivel-debil .pw-medidor__barra {
    width: 34%;
    background: var(--rojo);
}

.pw-fuerza.nivel-moderada .pw-medidor__barra {
    width: 67%;
    background: var(--dorado);
}

.pw-fuerza.nivel-segura .pw-medidor__barra {
    width: 100%;
    background: #2f7d4f;
}

.pw-fuerza.nivel-debil .pw-medidor__texto {
    color: var(--rojo);
}

.pw-fuerza.nivel-moderada .pw-medidor__texto {
    color: #b07d16;
}

.pw-fuerza.nivel-segura .pw-medidor__texto {
    color: #2f7d4f;
}

/* En rejilla ancha, los requisitos en dos columnas */
.form-grid .pw-reqs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Panel "restablecer contraseña" en Mi cuenta */
.cuenta-password {
    margin-top: 30px;
    padding: 22px 24px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 16px;
}

.cuenta-password h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--azul);
}

.cuenta-password p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--gris-texto);
}

.cuenta-password .form-submit {
    margin-top: 0;
    width: auto;
    padding: 0 26px;
}

/* Subtítulo de bloque dentro de una sección (ej: tutor 1 / tutor 2) */
.form-subseccion {
    margin: 6px 0 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--azul-oscuro);
}

.form-grid .segundo-tutor {
    display: contents;
}

.form-grid .segundo-tutor[hidden] {
    display: none;
}

/* Opción tipo checkbox con aspecto de tarjeta (ej: "no vengo de otra institución") */
label.opcion-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 11px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--azul-oscuro);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.opcion-check:hover {
    border-color: var(--azul);
}

.opcion-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.opcion-check__box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.opcion-check__box::after {
    content: "\2713";
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.opcion-check input:checked ~ .opcion-check__box {
    background: var(--azul);
    border-color: var(--azul);
}

.opcion-check input:checked ~ .opcion-check__box::after {
    opacity: 1;
    transform: scale(1);
}

.opcion-check input:checked ~ .opcion-check__txt {
    color: var(--azul);
}

.opcion-check:has(input:checked) {
    border-color: var(--azul);
    background: rgba(18, 61, 115, 0.06);
}

.opcion-check input:focus-visible ~ .opcion-check__box {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

/* Botón "agregar" (ej: segundo padre/madre/tutor) */
label.opcion-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 14px 18px;
    border: 2px dashed var(--azul);
    border-radius: 14px;
    background: rgba(18, 61, 115, 0.04);
    color: var(--azul);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.opcion-agregar:hover {
    background: rgba(18, 61, 115, 0.09);
}

.opcion-agregar input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.opcion-agregar__icono {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

.opcion-agregar.is-on {
    border-style: solid;
    border-color: var(--dorado);
    background: rgba(213, 167, 53, 0.16);
    color: var(--azul-oscuro);
}

.opcion-agregar.is-on .opcion-agregar__icono {
    background: var(--dorado);
    color: var(--azul-tinta);
}

.opcion-agregar input:focus-visible ~ .opcion-agregar__icono {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

.form-archivo {
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    background: #f8fafc;
}

.form-archivo input[type="file"] {
    width: 100%;
    font-size: 14px;
    color: var(--gris-texto);
}

.form-materias-fila {
    display: flex;
    gap: 10px;
}

.form-materias-fila select {
    flex: 1;
}

.form-btn-agregar {
    flex-shrink: 0;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: var(--azul);
    color: var(--blanco);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.form-btn-agregar:hover {
    background: var(--azul-oscuro);
}

.form-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 0;
}

.form-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 61, 115, 0.08);
    color: var(--azul-oscuro);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 8px 7px 14px;
    border-radius: 999px;
}

.form-chip button {
    border: none;
    background: transparent;
    color: var(--azul-oscuro);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}

.form-submit {
    margin-top: 26px;
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 999px;
    background: var(--azul-oscuro);
    color: var(--blanco);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.form-submit:hover {
    background: var(--azul);
    transform: translateY(-1px);
}

.form-nota {
    margin-top: 28px;
    padding: 20px 24px;
    background: #f8fafc;
    border-radius: 14px;
    text-align: center;
    color: var(--gris-texto);
    font-size: 14px;
}

.form-nota strong {
    color: var(--azul-oscuro);
}

.form-nota a {
    color: var(--azul);
    font-weight: 600;
}

.form-nota a:hover {
    color: var(--azul-oscuro);
}

.form-nota p + p {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .form-hero {
        padding: 48px 20px 8px;
    }

    .form-card {
        margin: 28px auto 64px;
    }
}

@media (max-width: 640px) {
    .form-hero {
        padding: 36px 16px 4px;
    }

    .form-hero h1 {
        font-size: 26px;
    }

    .form-hero p {
        font-size: 15px;
    }

    .form-card {
        width: calc(100% - 24px);
        margin: 20px auto 48px;
        border-radius: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-materias-fila {
        flex-wrap: wrap;
    }

    .form-materias-fila select {
        flex-basis: 100%;
    }

    .form-btn-agregar {
        flex: 1;
        padding: 12px 20px;
    }
}

@media (max-width: 400px) {
    .form-card {
        padding: 20px 16px;
    }

    .form-hero h1 {
        font-size: 22px;
    }
}

.body-login {
    min-height: 100svh;
    background:
        radial-gradient(70% 60% at 12% 8%, rgba(201, 24, 43, 0.16), transparent 60%),
        radial-gradient(80% 70% at 100% 100%, rgba(213, 167, 53, 0.14), transparent 55%),
        linear-gradient(160deg, var(--azul-tinta), var(--azul));
}

.login-contenedor {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio-lg);
    padding: clamp(28px, 5vw, 40px);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

.volver {
    display: inline-block;
    color: var(--azul);
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

.volver:hover {
    border-bottom-color: var(--azul);
}

.login-logo {
    width: 84px;
    height: 84px;
    margin: 12px auto 18px;
    border-radius: var(--radio-lg);
}

.login-card h1 {
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 2rem);
}

.login-card > p {
    text-align: center;
    color: var(--gris-texto);
    margin-bottom: 20px;
}

.form-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-login label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--azul-oscuro);
}

.form-login input,
.form-login select {
    min-height: 48px;
    border: 1.5px solid var(--gris-linea);
    border-radius: var(--radio);
    padding: 0 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--negro);
    background: var(--blanco);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.form-login input:focus,
.form-login select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(18, 61, 115, 0.12);
}

.form-login input[readonly] {
    background: var(--gris);
    color: var(--gris-texto);
    cursor: not-allowed;
}

.form-login button {
    margin-top: 14px;
    min-height: 50px;
    border: none;
    border-radius: var(--radio);
    background: var(--rojo);
    color: var(--blanco);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.form-login button:hover {
    background: var(--rojo-hondo);
    transform: translateY(-1px);
}

.alerta-error {
    background: #fdecee;
    color: var(--rojo-hondo);
    padding: 12px 14px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.9rem;
}

.datos-prueba {
    margin-top: 22px;
    padding: 16px;
    background: var(--gris);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio);
    font-size: 0.85rem;
    color: var(--gris-texto);
}

.panel,
.fondo-suave .panel {
    max-width: 1640px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(14px, 3.5vw, 48px) clamp(56px, 8vw, 96px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.6vw, 30px);
}

.panel-bienvenida {
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radio-lg);
    background: var(--azul-oscuro);
    border: 1px solid var(--linea-oro);
    color: var(--sobre-azul);
    box-shadow: var(--sombra);
    margin-bottom: 32px;
}

.panel-bienvenida .etiqueta {
    color: var(--dorado-claro);
}

.panel-bienvenida p {
    color: var(--sobre-azul-suave);
}

.panel-bienvenida h1 {
    color: var(--blanco);
    font-size: clamp(2rem, 4vw, 2.8rem);
}

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

    .escudo-simple {
        width: min(200px, 66vw);
    }
}

.menu li {
    position: relative;
}

/* El submenú oculto por defecto */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--blanco);
    box-shadow: var(--sombra);
    border-radius: var(--radio);
    padding: 8px 0;
    min-width: 240px;
    list-style: none;
    z-index: 100;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--gris-linea);
}

/* Mostrar el submenú al pasar el mouse por el "li" que lo contiene */
.menu li:hover .dropdown-menu {
    display: flex;
}

/* Estilos de los botones dentro del submenú */
.dropdown-menu li a {
    display: block;
    padding: 10px 24px;
    border-radius: 0; /* Quitamos el formato de pastilla del menú principal */
    color: var(--azul-oscuro);
    font-weight: 600;
}

.dropdown-menu li a:hover {
    background: var(--gris);
    color: var(--rojo);
}

/* =========================================
   ESTILOS PARA PÁGINAS DE NIVELES (SIDEBAR Y CONTENIDO)
========================================= */

/* Contenedor principal que divide la pantalla */
.layout-niveles {
    max-width: var(--riel);
    margin: clamp(28px, 4vw, 56px) auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 260px 1fr; /* barra + contenido */
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
    min-height: 60vh;
}

/* La barra lateral a la izquierda */
.sidebar-niveles {
    background: var(--blanco);
    border-radius: var(--radio-lg);
    padding: 24px;
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--gris-linea);
    position: sticky;
    top: 96px;
}

.sidebar-niveles h3 {
    color: var(--azul-oscuro);
    margin-bottom: 18px;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--linea-oro);
    padding-bottom: 12px;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-menu a {
    display: block;
    padding: 11px 16px;
    border-radius: var(--radio);
    color: var(--gris-texto);
    font-weight: 500;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
    background: var(--gris);
}

.sidebar-menu a:hover,
.sidebar-menu a.activo {
    background: var(--azul);
    color: var(--blanco);
    transform: translateX(4px);
}

/* Contenido principal a la derecha */
.contenido-niveles {
    background: var(--blanco);
    border-radius: var(--radio-lg);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--gris-linea);
}

.contenido-niveles h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin-bottom: 16px;
}

.contenido-niveles p {
    color: var(--gris-texto);
    margin-bottom: 18px;
}

/* Responsivo */
@media (max-width: 900px) {
    .layout-niveles {
        grid-template-columns: 1fr;
    }

    .sidebar-niveles {
        position: static;
    }
}

/* =========================================
   ESTILOS DEL MENÚ FLOTANTE (MODAL)
========================================= */

/* Ocultar los inputs lógicos */
.oculto {
    display: none;
}

/* Fondo oscuro desenfocado */
.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 24, 47, 0.55);
    backdrop-filter: blur(6px);
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 9999;
}

/* Tarjeta blanca del formulario */
.modal-card {
    background: var(--blanco);
    width: 100%;
    max-width: 440px;
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio-lg);
    padding: clamp(24px, 4vw, 36px);
    position: relative;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
    max-height: 90svh;
    overflow-y: auto;
}

.modal-card h2 {
    font-size: 1.4rem;
}

/* Botón de cerrar (la X) */
.cerrar-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    font-size: 16px;
    color: var(--gris-texto);
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.cerrar-modal:hover {
    color: var(--rojo);
    background: var(--gris);
}

/* Pestañas (Tabs) de Login / Registro */
.modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gris-linea);
    padding-bottom: 12px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--gris-texto);
    cursor: pointer;
    border-radius: var(--radio);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.tab:hover {
    background: var(--gris);
}

/* Lógica para abrir el modal */
#modal-toggle:checked ~ .modal-overlay {
    display: flex;
}

/* Lógica para mostrar las pestañas activas */
.form-content {
    display: none; /* Oculta ambos formularios por defecto */
}

#switch-login:checked ~ .modal-tabs label[for="switch-login"],
#switch-registro:checked ~ .modal-tabs label[for="switch-registro"] {
    color: var(--azul);
    background: rgba(18, 61, 115, 0.1);
}

/* Mostrar el formulario correspondiente según qué radio esté seleccionado */
#switch-login:checked ~ #form-login-content {
    display: block;
}

#switch-registro:checked ~ #form-registro-content {
    display: block;
}

/* Estilo para mensajes de éxito al registrarse */
.alerta-exito {
    background: #e8f3ec;
    color: #1c7a38;
    padding: 12px 14px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

/* =========================================
   ESTILOS DE LAS NOTIFICACIONES FLOTANTES
========================================= */
.notificacion {
    position: fixed;
    bottom: clamp(16px, 4vw, 30px);
    right: clamp(16px, 4vw, 30px);
    left: clamp(16px, 4vw, 30px);
    max-width: 420px;
    margin-left: auto;
    padding: 15px 20px;
    border-radius: var(--radio);
    color: var(--blanco);
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    z-index: 10000;
    animation: entrarNoti 0.45s var(--ease) forwards;
}

.noti-error {
    background-color: var(--rojo);
}

.noti-exito {
    background-color: #1c7a38;
}

.notificacion label {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: 0.2s;
}

.notificacion label:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* Ocultar la notificación cuando se hace clic en la X */
#cerrar-noti:checked ~ .notificacion {
    display: none;
}

@keyframes entrarNoti {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

.dropdown-perfil {
    right: 0;
    left: auto;
    min-width: 160px;
}

/* =========================================
   ESTILOS PARA EL PANEL DE ADMINISTRACIÓN
   Dashboard a ancho completo en PC, apilado y con
   tablas de scroll propio en celulares.
========================================= */

/* Encabezado del panel (usa .titulo-seccion pero como banner) */
.panel > .titulo-seccion {
    max-width: none;
    margin: 0;
    text-align: left;
    padding: clamp(22px, 3.4vw, 40px);
    border-radius: var(--radio-lg);
    background:
        radial-gradient(130% 150% at 100% 0%, rgba(213, 167, 53, 0.20), transparent 58%),
        linear-gradient(155deg, var(--azul-oscuro), var(--azul-tinta));
    border: 1px solid var(--linea-oro);
    box-shadow: var(--sombra);
}

.panel > .titulo-seccion p {
    margin: 0;
    color: var(--dorado-claro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
}

.panel > .titulo-seccion h1 {
    margin: 8px 0 0;
    color: var(--blanco);
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.15;
}

/* Alertas: ocupan el ancho del panel */
.panel > .alerta-exito,
.panel > .alerta-error {
    max-width: none !important;
    margin: 0 !important;
    text-align: left;
}

/* Cada bloque del panel es una tarjeta */
.seccion-gestion-usuarios {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: clamp(16px, 2.6vw, 30px);
}

.seccion-gestion-usuarios > h2 {
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gris-linea);
    font-family: var(--fuente-titulo);
    color: var(--azul-oscuro);
    font-size: clamp(1.12rem, 1.9vw, 1.5rem);
    line-height: 1.25;
}

.seccion-gestion-usuarios > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 54px;
    height: 2px;
    background: var(--dorado);
}

.seccion-gestion-usuarios > p {
    margin: 0;
    color: var(--gris-texto);
    font-size: 0.92rem;
    text-align: left !important;
}

.seccion-gestion-usuarios > a.btn-guardar {
    align-self: flex-start;
    margin: 0 !important;
    text-decoration: none;
}

/* Formulario "Cargar materia previa" dentro de una tarjeta */
.seccion-gestion-usuarios .login-card {
    margin: 0 !important;
    max-width: 560px;
    padding: clamp(16px, 2vw, 22px);
    background: var(--gris);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio);
    box-shadow: none;
}

/* Tabla: contenedor con borde y scroll horizontal propio */
.tabla-contenedor {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio);
    box-shadow: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-admin {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.tabla-admin thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gris);
    color: var(--azul-oscuro);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 13px 14px;
    border-bottom: 2px solid var(--azul);
    white-space: nowrap;
}

.tabla-admin td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gris-linea);
    color: var(--gris-texto);
    vertical-align: middle;
}

.tabla-admin tbody tr:nth-child(even) {
    background: var(--gris);
}

.tabla-admin tbody tr:hover {
    background: rgba(18, 61, 115, 0.06);
}

.tabla-admin tbody tr:last-child td {
    border-bottom: none;
}

.tabla-admin td[colspan] {
    text-align: center;
    font-style: italic;
    padding: 22px 14px;
}

/* Métricas del Representante Legal (Resumen global) */
.panel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.panel-stat {
    padding: 18px 20px;
    border-radius: var(--radio);
    color: var(--blanco);
    background: linear-gradient(155deg, var(--azul), var(--azul-oscuro));
    box-shadow: var(--sombra-sm);
}

.panel-stat .n {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
}

.panel-stat .k {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--sobre-azul-suave);
}

/* Etiqueta visual (rol, estado, nivel, sector) */
.etiqueta-rol {
    display: inline-block;
    background: rgba(18, 61, 115, 0.1);
    color: var(--azul-oscuro);
    padding: 5px 11px;
    border-radius: var(--radio-pill);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

/* Estado de una materia previa */
.etiqueta-estado {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--radio-pill);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.etiqueta-estado.es-pendiente {
    background: #fdecdd;
    color: #9a5b12;
}

.etiqueta-estado.es-proceso {
    background: #e7effb;
    color: #1c4f8a;
}

.etiqueta-estado.es-ok {
    background: #e3f3e8;
    color: #1c7a38;
}

/* Semáforo de estado: punto de color a la izquierda de cada fila de mensajes */
.tabla-admin td.col-estado-punto,
.tabla-admin th:first-child:empty {
    width: 30px;
    padding-left: 16px;
    padding-right: 4px;
    text-align: center;
}
.estado-punto {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(8, 36, 69, 0.08);
}
.estado-punto--pendiente { background: var(--rojo); }
.estado-punto--proceso   { background: var(--dorado); }
.estado-punto--ok        { background: #1c7a38; }

/* Filtro de roles (Gestión de Usuarios) — botón que despliega las opciones */
.filtro-roles {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.filtro-roles__menu {
    position: relative;
}

.filtro-roles__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: var(--radio-pill);
    background: var(--azul);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    box-shadow: var(--sombra-sm);
    transition: background 0.16s var(--ease);
}

.filtro-roles__btn::-webkit-details-marker {
    display: none;
}

.filtro-roles__btn:hover {
    background: var(--azul-oscuro);
}

.filtro-roles__btn > svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.filtro-roles__actual {
    padding: 3px 10px;
    border-radius: var(--radio-pill);
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
}

.filtro-roles__chevron {
    transition: transform 0.18s var(--ease);
}

.filtro-roles__menu[open] .filtro-roles__chevron {
    transform: rotate(180deg);
}

.filtro-roles__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max(260px, 100%);
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    box-shadow: var(--sombra);
}

.filtro-roles__opcion {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--azul-oscuro);
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}

.filtro-roles__opcion:hover {
    background: var(--gris);
}

.filtro-roles__opcion.is-activa {
    background: var(--azul);
    color: var(--blanco);
    font-weight: 700;
}

.filtro-roles__conteo {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gris-texto);
}

/* Acciones por fila de usuario */
.acciones-usuario {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.acciones-usuario form {
    margin: 0;
}

.dato-vacio {
    color: #aeb6c2;
}

/* Variantes de botón */
.btn-guardar--sec {
    background: var(--blanco);
    color: var(--azul);
    box-shadow: inset 0 0 0 1.5px var(--azul);
    text-decoration: none;
    display: inline-block;
}

.btn-guardar--sec:hover {
    background: rgba(18, 61, 115, 0.08);
    transform: translateY(-1px);
}

.btn-guardar--peligro {
    background: var(--rojo-hondo);
}

.btn-guardar--peligro:hover {
    background: var(--rojo);
}

/* Modal "Ver datos del usuario" */
.modal-usuario[hidden] {
    display: none;
}

.modal-usuario {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal-usuario__fondo {
    position: absolute;
    inset: 0;
    background: rgba(5, 24, 47, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal-usuario__card {
    position: relative;
    width: min(460px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra);
    padding: clamp(22px, 3.5vw, 32px);
}

.modal-usuario__x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radio-pill);
    background: var(--gris);
    color: var(--gris-texto);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}

.modal-usuario__x:hover {
    background: var(--gris-linea);
    color: var(--azul-oscuro);
}

.modal-usuario__card h3 {
    font-family: var(--fuente-titulo);
    color: var(--azul-oscuro);
    font-size: 1.3rem;
    margin: 0 0 18px;
    padding-right: 40px;
}

.modal-usuario__datos {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-usuario__datos > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris-linea);
}

.modal-usuario__datos > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.modal-usuario__datos dt {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.modal-usuario__datos dd {
    margin: 0;
    font-size: 0.98rem;
    color: var(--negro);
    word-break: break-word;
}

/* Formulario en línea para cambiar rol */
.form-fila {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.select-rol {
    max-width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--gris-linea);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--azul-oscuro);
    background: var(--blanco);
    outline: none;
}

.select-rol:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(18, 61, 115, 0.12);
}

.btn-guardar {
    background: var(--azul);
    color: var(--blanco);
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s var(--ease), transform 0.12s var(--ease);
}

.btn-guardar:hover {
    background: var(--azul-oscuro);
    transform: translateY(-1px);
}

.btn-guardar:active {
    transform: translateY(0);
}

/* Botones de borrado dentro de las tablas → rojo */
.tabla-admin .btn-guardar[name="btn_eliminar_novedad"],
.tabla-admin .btn-guardar[name="btn_eliminar_materia"] {
    background: var(--rojo-hondo);
}

.tabla-admin .btn-guardar[name="btn_eliminar_novedad"]:hover,
.tabla-admin .btn-guardar[name="btn_eliminar_materia"]:hover {
    background: var(--rojo);
}

@media (max-width: 720px) {
    .panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .seccion-gestion-usuarios {
        padding: 16px 14px;
        border-radius: var(--radio);
    }

    .tabla-admin {
        font-size: 0.82rem;
        min-width: 540px;
    }

    .tabla-admin thead th,
    .tabla-admin td {
        padding: 10px 11px;
    }

    .seccion-gestion-usuarios .login-card {
        max-width: none;
    }
}

/* =========================================
   ESTILOS PARA LOS SUBMENÚS LATERALES
========================================= */
.desplegable-lateral summary {
    cursor: pointer;
    padding: 10px 15px;
    font-weight: bold;
    color: var(--azul-oscuro);
    list-style: none; /* Quita la flecha por defecto de HTML */
    display: block;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s ease;
}

/* Flechitas personalizadas de abierto/cerrado */
.desplegable-lateral summary::-webkit-details-marker {
    display: none; /* Para Safari/Chrome viejo */
}
.desplegable-lateral summary:after {
    content: ' ▼';
    float: right;
    font-size: 0.8em;
    color: #666;
}
.desplegable-lateral[open] summary:after {
    content: ' ▲';
}
.desplegable-lateral summary:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Formato de los enlaces dentro del desplegable */
.submenu-lateral {
    list-style: none;
    padding: 5px 0 5px 15px; /* Le da una pequeña sangría */
    margin: 0;
    background-color: #fcfcfc;
}
.submenu-lateral li a {
    font-size: 0.9em;
    padding: 8px 15px;
    display: block;
    color: #444;
    text-decoration: none;
    border-bottom: none;
}
.submenu-lateral li a:hover {
    color: var(--azul-oscuro);
    padding-left: 20px; /* Efecto hover igual al menú principal */
}
.submenu-lateral li a.activo,
.submenu-lateral li a.activo:hover {
    color: var(--blanco);
    font-weight: 700;
    padding-left: 20px;
    background: var(--azul);
    border-radius: 6px;
    box-shadow: inset 3px 0 0 var(--dorado);
}
.desplegable-lateral:has(a.activo) summary {
    color: var(--rojo);
    font-weight: 700;
}

/* =========================================
   ESTILOS PARA NOVEDADES Y SUBIDAS (DIRECTIVOS)
========================================= */
.btn-subir {
    display: inline-block;
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 20px;
    transition: 0.3s;
}
.btn-subir:hover {
    background-color: #1a3c61;
}

/* Modal de Subida de Archivos */
#modal-novedad-toggle {
    display: none;
}
.modal-novedad-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
#modal-novedad-toggle:checked + .modal-novedad-overlay {
    display: flex;
}
.modal-novedad-card {
    background: var(--blanco);
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
}
.btn-cerrar-modal {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

/* Acordeón para PDFs y Texto */
.novedad-item {
    background: var(--blanco);
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}
.novedad-item summary {
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    background-color: #f9f9f9;
    list-style: none;
}
.novedad-item summary::-webkit-details-marker { display: none; }
.novedad-item summary:after {
    content: ' ▼';
    float: right;
    color: var(--azul-oscuro);
}
.novedad-item[open] summary:after { content: ' ▲'; }
.novedad-contenido {
    padding: 15px;
    border-top: 1px solid #ddd;
}
.novedad-contenido iframe {
    width: 100%;
    height: 500px;
    border: none;
}

/* Galería de Imágenes y Lightbox */
.galeria-imagenes {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.miniatura-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--azul-oscuro);
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.2s;
}
.miniatura-img:hover {
    transform: scale(1.05);
}
/* Efecto para agrandar imagen sin JavaScript */
.lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.lightbox:target {
    display: flex; /* Se abre cuando se hace clic en la foto */
}
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
}
.lightbox-cerrar {
    position: absolute;
    top: 20px; right: 30px;
    color: white;
    font-size: 40px;
    text-decoration: none;
}

/* =========================================
   ESTILOS DEL BOTÓN FLOTANTE (DIRECTIVOS)
========================================= */
.btn-subir {
    position: fixed;      /* Lo fija a la pantalla */
    bottom: 30px;         /* Separación desde abajo */
    right: 30px;          /* Separación desde la derecha */
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    padding: 15px 25px;
    border-radius: 50px;  /* Bordes bien redondeados (estilo pastilla) */
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para que flote visualmente */
    z-index: 999;         /* Se asegura de que esté por encima del contenido */
    transition: all 0.3s ease;
}

.btn-subir:hover {
    background-color: #1a3c61;
    transform: scale(1.05) translateY(-3px); /* Pequeño salto al pasar el mouse */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Modal de Subida de Archivos */
#modal-novedad-toggle {
    display: none;
}
.modal-novedad-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000; /* Debe ser mayor al z-index del botón para taparlo al abrirse */
    justify-content: center;
    align-items: center;
}

/* EL ARREGLO DEL CLIC: Usamos el signo (~) en lugar de (+) */
#modal-novedad-toggle:checked ~ .modal-novedad-overlay {
    display: flex;
}

/* =====================================================================
   NIVELES · CABECERA EDITABLE + NOVEDADES (rediseño)
   Usado por: inicial / primario / secundaria_orientada / secundaria_tecnica
===================================================================== */

.nivel-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
}

/* ---- Cabecera editable (título + texto) ---- */
.nivel-intro {
    position: relative;
    background: linear-gradient(180deg, #fff, var(--gris));
    border: 1px solid var(--gris-linea);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio-lg);
    padding: clamp(22px, 3.4vw, 40px);
    box-shadow: var(--sombra-sm);
}

.nivel-intro-txt h1 {
    font-family: var(--fuente-titulo);
    color: var(--azul-tinta);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.15;
    margin: 0 0 10px;
}

.nivel-intro-txt p {
    color: var(--gris-texto);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 70ch;
    margin: 0;
    white-space: pre-line;
}

.nivel-intro-editar {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--azul);
    background: #fff;
    border: 1px solid var(--azul);
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nivel-intro-editar:hover {
    background: var(--azul);
    color: #fff;
}

/* ---- Bloque de novedades ---- */
.novedades-wrap { position: relative; }

.novedades-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--linea-oro);
}
.novedades-head h2 {
    font-family: var(--fuente-titulo);
    color: var(--azul-oscuro);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin: 0;
}

.novedades-vacio {
    color: var(--gris-texto);
    background: var(--gris);
    border: 1px dashed var(--gris-linea);
    border-radius: var(--radio);
    padding: 28px;
    text-align: center;
}

.novedades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

/* ---- Tarjeta de novedad ---- */
.nov-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.nov-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
}

.nov-card-cab,
.nov-card-pie { padding: 16px 18px; }
.nov-card-cuerpo { padding: 4px 18px 18px; }

.nov-card-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--azul);
    background: rgba(18, 61, 115, 0.09);
    padding: 3px 9px;
    border-radius: var(--radio-pill);
    margin-bottom: 8px;
}
.nov-card h3 {
    font-family: var(--fuente-titulo);
    color: var(--azul-tinta);
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0 0 4px;
}
.nov-card time {
    display: block;
    font-size: 0.8rem;
    color: var(--gris-texto);
}
.nov-card-cuerpo p {
    color: var(--negro);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

/* Imagen / Galería con carrusel */
.nov-carrusel {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gris);
}
.nov-carrusel-track { position: absolute; inset: 0; }
.nov-carrusel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s var(--ease);
    cursor: zoom-in;
}
.nov-carrusel-slide.activo { opacity: 1; }

.nov-carrusel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--azul-oscuro);
    background: rgba(255, 255, 255, 0.85);
    border: 0;
    border-radius: var(--radio-pill);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s var(--ease), background 0.18s var(--ease);
}
.nov-carrusel:hover .nov-carrusel-nav,
.nov-carrusel-nav:focus-visible { opacity: 1; }
.nov-carrusel-nav:hover { background: #fff; }
.nov-carrusel-nav.prev { left: 10px; }
.nov-carrusel-nav.next { right: 10px; }

.nov-carrusel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    gap: 6px;
    justify-content: center;
}
.nov-carrusel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pill);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(8, 36, 69, 0.25);
    cursor: pointer;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.nov-carrusel-dot.activo { background: #fff; transform: scale(1.35); }

/* Visor de imágenes a pantalla completa */
.nivel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(5, 24, 47, 0.92);
}
.nivel-lightbox[hidden] { display: none; }
.nivel-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--radio);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.nivel-lightbox-cerrar {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 1.6rem;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}
.nivel-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background 0.18s var(--ease);
}
.nivel-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.nivel-lightbox-nav.prev { left: 3vw; }
.nivel-lightbox-nav.next { right: 3vw; }
.nivel-lightbox-contador {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}
@media (max-width: 560px) {
    .nivel-lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; }
    .nivel-lightbox-nav.prev { left: 6px; }
    .nivel-lightbox-nav.next { right: 6px; }
}

/* PDF: visor embebido */
.nov-visor {
    border-top: 1px solid var(--gris-linea);
    background: var(--gris);
}
.nov-visor > summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--azul-oscuro);
}
.nov-visor > summary::-webkit-details-marker { display: none; }
.nov-visor > summary::after { content: " \25BE"; color: var(--azul); }
.nov-visor[open] > summary::after { content: " \25B4"; }
/* Marco que recorta las barras de scroll internas del visor de PDF */
.nov-visor-marco {
    height: 560px;
    overflow: hidden;
    border-top: 1px solid var(--gris-linea);
    background: #fff;
}
.nov-visor iframe {
    width: calc(100% + 17px);
    height: calc(100% + 17px);
    border: 0;
    display: block;
}

.nov-card-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--gris-linea);
    margin-top: auto;
}

/* ---- Botones ---- */
.btn-nivel-primario {
    display: inline-block;
    background: var(--azul-oscuro);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-nivel-primario:hover { background: var(--azul); transform: translateY(-1px); }

.btn-nivel-sec {
    display: inline-block;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: var(--radio-pill);
    border: 1px solid var(--azul);
    color: var(--azul);
    background: #fff;
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-nivel-sec:hover { background: var(--azul); color: #fff; }

.nov-eliminar { margin-left: auto; }
.nov-eliminar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--rojo);
    color: var(--rojo);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 7px 14px;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.nov-eliminar button .nov-eliminar-ico { font-size: 0.95rem; line-height: 1; }
.nov-eliminar button:hover {
    background: var(--rojo);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(201, 24, 43, 0.55);
    transform: translateY(-1px);
}
.nov-eliminar button:active { transform: translateY(0); }
.nov-eliminar button:focus-visible {
    outline: 2px solid var(--rojo);
    outline-offset: 2px;
}

.nov-card-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nov-card-pie h3 { flex: 1 1 100%; margin-top: 4px; }
.nov-card-pie time { flex: 1 1 100%; }

/* Mensajes de estado del bloque de novedades */
.novedades-flash {
    padding: 12px 16px;
    border-radius: var(--radio);
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 18px;
}
.novedades-flash.ok {
    background: rgba(33, 128, 74, 0.1);
    border: 1px solid rgba(33, 128, 74, 0.35);
    color: #1c6b3f;
}
.novedades-flash.error {
    background: rgba(201, 24, 43, 0.08);
    border: 1px solid rgba(201, 24, 43, 0.35);
    color: var(--rojo-hondo);
}

/* Campos que se muestran/ocultan según el tipo de contenido */
.form-nivel [data-campo][hidden] { display: none; }

/* ---- Modales (cabecera / añadir contenido) ---- */
.modal-toggle { display: none; }
.modal-nivel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 24, 47, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1200;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}
.modal-toggle:checked ~ .modal-nivel-overlay { display: flex; }

.modal-nivel-card {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 540px;
    margin: 6vh auto;
    padding: 30px;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra);
}
.modal-nivel-card h3 {
    font-family: var(--fuente-titulo);
    color: var(--azul-oscuro);
    margin: 0 0 18px;
    font-size: 1.3rem;
}
.modal-nivel-cerrar {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.2rem;
    color: var(--gris-texto);
    cursor: pointer;
    line-height: 1;
}
.modal-nivel-cerrar:hover { color: var(--rojo); }

.form-nivel { display: flex; flex-direction: column; gap: 6px; }
.form-nivel label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--azul-oscuro);
    margin-top: 10px;
}
.form-nivel input[type="text"],
.form-nivel select,
.form-nivel textarea,
.form-nivel input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio);
    font: inherit;
    background: #fff;
}
.form-nivel textarea { resize: vertical; min-height: 96px; }
.form-nivel input[type="text"]:focus,
.form-nivel select:focus,
.form-nivel textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(18, 61, 115, 0.12);
}
.form-nivel .form-nivel-ayuda { font-weight: 400; color: var(--gris-texto); margin-top: 2px; font-size: 0.8rem; }
.form-nivel button { margin-top: 20px; align-self: flex-start; }

@media (max-width: 560px) {
    .novedades-grid { grid-template-columns: 1fr; }
    .nivel-intro-editar { position: static; margin-top: 16px; }
    .nov-visor-marco { height: 420px; }
}