/*
    EstilosNuevo.css
    Estilos de la nueva pantalla de acceso (Inicio.master / Inicio.aspx / RecuperarContraseña.aspx).
    Todas las reglas van con el prefijo ".paginaAcceso" (clase añadida solo en Inicio.master)
    para no afectar a Principal.master ni a otras páginas que reutilizan las mismas clases
    (paginaHeader, CabecereaLogoyNombre, LogoAplicacion, MainContent, paginaFooter...).
*/

/* No se fija min-height:100% aquí ni en el body: el "form" (ver Responsive.css,
   body.paginaConPieAbajo > form) ya establece min-height:100vh/100dvh. Tener
   varias fuentes de alto (html, body y form) resolviéndose por separado con
   % y vh es lo que provocaba desbordamientos de subpíxel (una scrollbar
   mínima con contenido que, a simple vista, cabe perfectamente). */
html.paginaAccesoHtml {
    overflow-x: hidden;
}

.paginaAcceso {
    overflow-x: hidden;
    background: url("/Imagenes/degradado1.jpg") center center / cover no-repeat fixed;
}

    /* .page ya es "flex:1 0 auto" dentro del form (ver Responsive.css); aquí se
   convierte además en contenedor flex en columna para que la cabecera quede
   arriba y el contenido (MainContent) reparta el resto del alto disponible.
   No se usa overflow:hidden aquí: cuando el contenido (p. ej. el texto largo
   de RecuperarContraseña.aspx en móvil) no cabe en el alto de la pantalla,
   tiene que poder aparecer scroll vertical normal en vez de recortarse. */
    .paginaAcceso .page {
        display: flex;
        flex-direction: column;
    }

    /* ---- cabecera ---- */
    .paginaAcceso .paginaHeader {
        background: transparent;
        flex: 0 0 auto;
    }

    .paginaAcceso #divMenuResponsive {
        display: none;
    }

    .paginaAcceso .CabecereaLogoyNombre {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        padding: 56px 16px 6px 16px;
    }

    .paginaAcceso .LogoAplicacion {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: center;
    }

        .paginaAcceso .LogoAplicacion img {
            height: 52px;
            width: auto;
            margin: 0 0 8px 0;
        }

    .paginaAcceso #LabelLibro {
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .paginaAcceso #LabelVersión {
        color: #B9C7DC;
        font-size: 11px;
        font-weight: 300;
    }

    .paginaAcceso .cabeceraNombreAplicacion {
        display: none;
    }

    /* ---- contenido central ---- */
    /* La etiqueta "main" (ADASistemas.css) trae "margin-left/right: auto". Al ser
   .MainContent un elemento flex dentro de .page (eje transversal horizontal),
   esos márgenes auto anulan el estirado y lo encogen a su contenido — el mismo
   problema que ya resuelve ".page" con "width:100%". Aquí se anula con margin:0
   para que MainContent ocupe siempre el ancho completo disponible. */
    .paginaAcceso .MainContent {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
    }

.cajaAccesoLogin {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* RecuperarContraseña.aspx reutiliza .cajaAccesoLogin con más ancho, porque
   lleva un párrafo de instrucciones que no cabe cómodo en 400px. */
.cajaAccesoRecuperar {
    max-width: 440px;
}

.tituloAccesoRecuperar {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
}

.subtituloAccesoRecuperar {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.textoAccesoBloque {
    width: 100%;
    text-align: center;
}

.textoAccesoRecuperar {
    color: #C4FF4D;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.camposDobles {
    width: 100%;
    display: flex;
    gap: 16px;
}

    .camposDobles .campoAcceso {
        flex: 1 1 0;
        min-width: 0;
    }

.filaCaptcha {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filaCaptcha .inputAcceso {
        flex: 1 1 0;
        min-width: 0;
    }

.iframeCaptchaAcceso {
    flex: 0 0 auto;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 4px;
    background: #FFFFFF;
}

@media (max-width: 560px) {
    .camposDobles,
    .filaCaptcha {
        flex-direction: column;
        align-items: stretch;
    }
}

.formAccesoLogin {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.campoAcceso {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.etiquetaAcceso {
    color: #B9C7DC;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.inputAcceso {
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #5C79AA;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
    padding: 6px 2px 8px 2px;
    outline: none;
    transition: border-color .15s ease;
}

    .inputAcceso:focus {
        border-bottom-color: #FFFFFF;
    }

.campoAccesoPass {
    position: relative;
}

    .campoAccesoPass .iconoVisible {
        position: absolute;
        right: 2px;
        bottom: 9px;
        color: #B9C7DC;
        margin: 0;
        float: none;
    }

.zonaBotonAcceso {
    width: 100%;
}

.btnAccederAcceso {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 0;
    background: #FFFFFF;
    color: #00255B;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.55;
}

.enlacesAcceso {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

    .enlacesAcceso + .enlacesAcceso {
        margin-top: -18px;
    }

.enlaceAcceso {
    color: #B9C7DC !important;
    font-size: 12.5px;
}

.mensajeAcceso {
    width: 100%;
    text-align: center;
}

    /* La clase ".error" (ADASistemas.css) pone "color: crimson !important" en
   todo el proyecto; aquí no se toca ese color (se lee bien sobre fondo claro
   en el resto de la app), solo se le da una pastilla blanca de fondo para que
   se siga viendo bien sobre el degradado azul. Sin texto, la pastilla no se
   muestra (":empty"). */
    .mensajeAcceso .error {
        display: inline-block;
        background: #FFFFFF;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
    }

    .mensajeAcceso .LabelError {
        display: inline-block;
        background: #FFFFFF;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
    }

        .mensajeAcceso .error:empty,
        .mensajeAcceso .LabelError:empty {
            padding: 0;
            background: transparent;
        }

/* ---- pie ---- */
.paginaAcceso .paginaFooter {
    background: transparent;
    color: #B9C7DC;
    flex: 0 0 auto;
}

.pieAcceso {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0 16px 0;
    text-align: center;
}

.pieAccesoLogoAda {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.pieAccesoCopyright {
    color: #B9C7DC;
    font-size: 11px;
    font-style: italic;
}

@media (max-width: 560px) {
    .paginaAcceso .CabecereaLogoyNombre {
        padding: 32px 16px 4px 16px;
    }

    .cajaAccesoLogin {
        max-width: 100%;
    }
}

/* ---- modal nuevo (genérico, reutilizable en cualquier pantalla) ----
   Tomado como referencia del modal "seleccionar colegio" de Inicio.aspx:
   tarjeta blanca (se lee bien encima de cualquier fondo) con el acento de
   marca (#00255B), radios y tipografía nuevos. No se toca ".modalPopup" ni
   ".modalBackground" (compartidas por otros popups de la aplicación, ya
   existentes): estas clases solo añaden/sobrescriben lo necesario para la
   variante nueva. */
.modalNuevo {
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    padding: 24px;
}

/* Modal anidado dentro de otro modal (p. ej. los de "Anotacion.ascx", que se
   abren estando ya abierto "pnlAnotacion" en EditLibro.aspx). El
   ModalPopupExtender (Ajax Control Toolkit) calcula el "left"/"top" del panel
   pensando que va a quedar "position:absolute" respecto a todo el documento,
   pero al estar su HTML anidado dentro de otro panel que también es
   "position:absolute" mientras está abierto, esas coordenadas se resuelven
   respecto a ese padre en vez de respecto a la ventana -aparece descentrado,
   normalmente desplazado hacia dentro del hueco que deja el padre-.
   "position:fixed" ignora cualquier ancestro posicionado (siempre que ninguno
   tenga "transform"/"filter", que no es el caso aquí) y usa la ventana como
   referencia, así que con las mismas coordenadas que calcula el toolkit el
   modal vuelve a quedar centrado igual que si no estuviera anidado. Aplicar
   solo a los modales realmente anidados: forzarlo en ".modalPopup"/
   ".modalNuevo" en general rompería el reposicionado al hacer scroll de los
   modales de primer nivel (no anidados), que si siguen usando "absolute". */
.modalAnidado {
    position: fixed !important;
}

/* Mismo motivo que ".modalAnidado", para el fondo oscuro del modal anidado:
   el toolkit calcula su ancho/alto para cubrir todo el documento (pensando
   que es "position:absolute" respecto a él), pero anidado solo llega a cubrir
   la caja del modal padre. Se fuerza aquí a cubrir siempre la ventana visible. */
.modalBackgroundAnidado {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Ancho del modal: aparte de ".modalNuevo", para que cada modal fije el
   suyo sin tocar el resto del estilo. En móvil todos pasan a ocupar el
   90%, sea cual sea su ancho en escritorio. */

.modalAncho40 {
    width: 40%;
}

.modalAncho50 {
    width: 50%;
}

.modalAncho60 {
    width: 60%;
}

.modalAncho70 {
    width: 70%;
}

.modalAncho80 {
    width: 80%;
}

.modalAncho90 {
    width: 90%;
}

@media screen and (max-width: 768px) {
    .modalAncho40,
    .modalAncho50,
    .modalAncho60,
    .modalAncho70,
    .modalAncho80,
    .modalAncho90 {
        width: 90%;
    }
}

.cuerpoModalNuevo {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cabeceraModalNuevo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tituloModalNuevo {
    color: #00255B;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cerrarModalNuevo {
    flex: 0 0 auto;
    display: inline-flex;
    color: #00255B;
    opacity: 0.6;
}

    .cerrarModalNuevo i {
        font-size: 20px;
    }

.subtituloModalNuevo {
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.5;
}

.campoModalNuevo,
.zonaBotonModalNuevo,
.mensajeModalNuevo {
    width: 100%;
}

/* DropDownList nuevo: mismo estilo de línea recta que ".inputNuevo"/".inputAcceso",
   reutilizable en cualquier pantalla (p. ej. "DDLColegios" en Inicio.aspx,
   "ddlTipoPaginacion" en Colegiados.aspx). Se anula el ".DDLSeleccionTab"/
   ".DDLSeleccionTab select" de ADASistemas.css (caja con borde y flecha nativa
   oculta) sin tocar esas reglas compartidas. */
.selectNuevo {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    overflow: visible;
    background: transparent;
    border: none;
    border-bottom: 1px solid #b9c2d1;
    border-radius: 0;
    padding: 6px 2px 8px 2px;
    color: #00255B;
}

    .selectNuevo select {
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        height: auto;
        line-height: normal;
        font-size: 15px;
        color: #00255B;
    }

        /* Bloqueado (Enabled="False" -> "disabled"): mismo color que su etiqueta
   (".etiquetaNuevo", #6c757d), igual que ".inputNuevo:read-only". Doble
   selector porque ".selectNuevo" se aplica directamente sobre el <select>. */
        .selectNuevo:disabled,
        .selectNuevo select:disabled {
            color: #6c757d;
        }

/* Modificador de ancho de ".selectNuevo": por defecto ocupa el 100% de su
   contenedor (pensado para formularios a una columna); esta clase lo reduce
   a su contenido para selects cortos (p. ej. "ddlTipoPaginacion" en
   Colegiados.aspx). */
.selectNuevoPeque {
    width: auto;
}

.btnModalNuevo {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 11px 0;
    background: #00255B;
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* =====================================================================
   Principal.Master — mismo fondo degradado que Inicio.master, cabecera
   con logo nuevo y division blanca/degradado, menu en verde y contenido
   (MainContent) en blanco. Todo bajo ".paginaPrincipalNueva" (clase
   añadida al body en Principal.Master) para no afectar a Inicio.master
   ni a nada que no lleve esa clase.
   ===================================================================== */
.paginaPrincipalNueva {
    background: url("/Imagenes/degradado1.jpg") center center / cover no-repeat fixed;
}

    /* ".page" ya es "flex:1 0 auto" dentro del form (ver Responsive.css); aquí
   se convierte además en contenedor flex en columna para que la cabecera
   quede arriba (alto fijo) y el contenido (MainContent) reparta el resto
   del alto hasta el pie, en vez de quedarse solo con el alto de su propio
   contenido. */
    .paginaPrincipalNueva .page {
        display: flex;
        flex-direction: column;
    }

    /* Cabecera: el 70% izquierdo muestra el degradado (imagen de fondo), el 30%
   derecho es blanco (donde va el logo del colegio), y en el corte hay 3
   lineas blancas del mismo ancho (3px), con la separacion entre ellas
   creciendo a medida que se alejan del bloque blanco. Se consigue
   superponiendo un linear-gradient (con cortes duros de color) sobre la
   imagen: donde el gradiente es blanco, tapa la imagen; donde es
   transparente, se ve la imagen. Usa la misma imagen con "fixed" para que
   coincida en el mismo punto que el fondo del resto de la pagina. */
    .paginaPrincipalNueva .paginaHeader {
        background: linear-gradient( to right, transparent 0%, transparent calc(70% - 35px), #fff calc(70% - 35px), #fff calc(70% - 32px), transparent calc(70% - 32px), transparent calc(70% - 18px), #fff calc(70% - 18px), #fff calc(70% - 15px), transparent calc(70% - 15px), transparent calc(70% - 7px), #fff calc(70% - 7px), #fff calc(70% - 4px), transparent calc(70% - 4px), transparent 70%, #fff 70%, #fff 100% ), url("/Imagenes/degradado1.jpg") center center / cover no-repeat fixed;
        flex: 0 0 auto;
    }

    /* "#divMenuResponsive" (Responsive.css) trae "margin-left/right:auto" pensado
   para su maquetación anterior (dentro de la cabecera, en flujo normal). Al
   pasar a ser hijo directo de ".page" (flex en columna), esos márgenes auto
   anulan el estirado y lo encogen a su contenido, centrándolo — el mismo
   problema ya visto con ".page"/"MainContent". Se anula con "width:100%;
   margin:0" para que ocupe todo el ancho, como antes de este cambio. */
    .paginaPrincipalNueva #divMenuResponsive {
        width: 100%;
        margin: 0;
        flex: 0 0 auto;
    }

    .paginaPrincipalNueva .cabeceraLogoColegio {
        margin-left: auto;
        padding-right: 24px;
    }

        .paginaPrincipalNueva .cabeceraLogoColegio .cabeceraImagenNombre {
            max-height: 70px;
            margin-top: 7px;
            margin-bottom: 7px;
        }

    .paginaPrincipalNueva #LabelLibro {
        color: #FFFFFF !important;
    }

    /* Contenido de la página: blanco, para que las pantallas de la app (grids,
   formularios...) se sigan viendo con fondo claro, y ocupando todo el alto
   que quede hasta el pie (no solo el de su contenido). La etiqueta "main"
   (ADASistemas.css) trae "margin-left/right: auto"; al ser MainContent un
   elemento flex dentro de ".page" esos márgenes auto anulan el estirado y
   lo encogen a su contenido — se anula con "width:100%; margin:0" (mismo
   ajuste ya hecho en Inicio.master). */
    .paginaPrincipalNueva .MainContent {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        flex: 1 1 auto;
        background: #FFFFFF;
        padding: 24px;
    }

    /* Pie: comparte el mismo fondo transparente que la cabecera (se ve el
   degradado detrás en vez del gris claro habitual), con el logo y el texto
   en tonos claros para que se sigan leyendo. */
    .paginaPrincipalNueva .paginaFooter {
        background: transparent;
    }

    .paginaPrincipalNueva .pieContenido {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .paginaPrincipalNueva .pieLogo {
        height: 64px;
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }

    .paginaPrincipalNueva .pieCopyright,
    .paginaPrincipalNueva #LabelVersión.pieVersion {
        color: #B9C7DC !important;
        padding-left: 0 !important;
    }

    .paginaPrincipalNueva #LabelVersión.pieVersion {
        font-size: 11px;
    }

    /* Menú: mismo Menu.css de siempre, solo se cambia el color de fondo
   (".nav"/"nav" están definidos dos veces en Menu.css). El texto pasa a
   azul de marca porque blanco sobre este verde no se leería bien. */
    .paginaPrincipalNueva nav,
    .paginaPrincipalNueva .nav {
        background-color: #C4FF4D;
    }

        .paginaPrincipalNueva .nav a,
        .paginaPrincipalNueva .nav a:link,
        .paginaPrincipalNueva .nav a:visited,
        .paginaPrincipalNueva .nav a:active {
            color: #00255B;
        }

        /* Submenus: azul de marca en vez del azul/gris antiguos de Menu.css, con un
   fundido suave al desplegarse en vez de aparecer de golpe. No se toca el
   mecanismo de despliegue (la clase ".hover" que pone el JS al pasar el
   ratón, ni el "left:-9999px"/"left:0" de Menu.css) — solo colores y una
   transición de opacidad encima. La flechita de ".parent" (imagen) ya no se
   veía antes de este cambio; se deja explícitamente sin imagen para que
   siga sin aparecer. */
        .paginaPrincipalNueva .nav li ul {
            background-color: #00255B;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease;
        }

        .paginaPrincipalNueva .nav > li.hover > ul,
        .paginaPrincipalNueva .nav li li.hover ul {
            opacity: 1;
            visibility: visible;
        }

        .paginaPrincipalNueva .nav li li a,
        .paginaPrincipalNueva .nav li li li a,
        .paginaPrincipalNueva .nav li li a:link,
        .paginaPrincipalNueva .nav li li a:visited,
        .paginaPrincipalNueva .nav li li a:active,
        .paginaPrincipalNueva .nav li li li a:link,
        .paginaPrincipalNueva .nav li li li a:visited,
        .paginaPrincipalNueva .nav li li li a:active {
            background-color: #00255B;
            color: #FFFFFF;
        }

        .paginaPrincipalNueva .nav li li + li > a,
        .paginaPrincipalNueva .nav li li li + li > a {
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }

        .paginaPrincipalNueva .nav li li a:hover,
        .paginaPrincipalNueva .nav li li li a:hover {
            background-color: #16357a;
        }

        .paginaPrincipalNueva .nav li li .parent {
            background-image: none;
        }

/* Icono de desplegar menu en movil: el JS (menuresponsive.js) solo alterna
   "display" del ".toggleMenu" segun el ancho, la posicion/dibujo del icono
   los pone Menu.css (barras hechas con box-shadow) y "#divMenuResponsive"
   con "text-align:right" (ADASistemas.css) lo empuja a la derecha. Aqui se
   deja a la izquierda y se sustituye el dibujo por un icono real de
   material-icons-outlined ("menu" cerrado / "close" abierto). */
@media screen and (max-width: 768px) {
    /* Sin el botón dentro, "nav" solo contiene el enlace oculto ".logo" y el
       "<ul class='nav'>" (oculto hasta que se abre el menú); el
       "min-height:50px" de Responsive.css dejaba una franja vacía reservada
       bajo la cabecera aunque el menú estuviera cerrado. */
    .paginaPrincipalNueva #divMenuResponsive nav {
        min-height: 0;
        background-color: transparent;
    }

    /* El botón de menú ya no vive dentro de "#divMenuResponsive"/"nav" (eso
       lo generaba Utilidades.vb -RellenaMenuResponsive-, ahora solo genera
       el "<ul class='nav'>"). Vive como markup fijo en Principal.Master,
       dentro de ".CabecereaLogoyNombre" y antes del logo de e-libros, así
       que se coloca a su izquierda de forma natural (flex, primer hijo) y
       se centra verticalmente solo, porque ".CabecereaLogoyNombre" ya es
       "display:flex; align-items:center" (Responsive.css). */
    .paginaPrincipalNueva .toggleMenuCabecera {
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        background-color: transparent;
    }

        /* Centrado por posición absoluta (no depende de que el navegador trate
       el "::after" como hijo flex ni de sus métricas de línea). Color
       blanco porque este botón queda sobre la zona del degradado, igual
       que el logo de e-libros. */
        .paginaPrincipalNueva .toggleMenuCabecera:after {
            content: "menu";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: auto;
            margin: 0;
            background: none;
            box-shadow: none;
            font-family: "Material Icons Outlined";
            font-size: 28px;
            line-height: 1;
            color: #FFFFFF;
        }

        /* Al abrir el menú, Menu.css saca el botón de su sitio con
       "position:fixed;top:5px;right:10px" para que quede por encima del
       panel a pantalla completa. Aquí ya no hace falta: el botón se queda
       fijo dentro de la cabecera (mismo icono "menu", vuelve a cerrar al
       tocarlo otra vez) porque la cabecera entera queda por encima del
       menú (ver ".paginaHeader" más abajo, con z-index). */
        .paginaPrincipalNueva .toggleMenuCabecera.active {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
        }

            .paginaPrincipalNueva .toggleMenuCabecera.active:after {
                content: "menu";
                font-family: "Material Icons Outlined";
                width: auto;
                height: auto;
                font-size: 28px;
                line-height: 1;
                color: #FFFFFF;
            }

    /* La cabecera se queda siempre visible y por encima del menú desplegado
       a pantalla completa (".nav" de Menu.css usa z-index:1000 y cubre todo
       el viewport desde arriba); con más z-index aquí, la cabecera lo tapa
       en su propia franja y visualmente el menú solo ocupa "de la cabecera
       para abajo", sin necesidad de calcular su alto exacto. */
    .paginaPrincipalNueva .paginaHeader {
        position: relative;
        z-index: 1002;
    }

    /* Cabecera en móvil: Responsive.css fuerza el logo de la app a ocupar
       toda la fila ("flex:1 1 100%"), lo que manda el logo del colegio a una
       segunda fila. Aquí se mantienen ambos en la misma fila -logo/título a
       la izquierda (degradado), logo del colegio a la derecha (blanco)-, y
       se reduce el logo del colegio para que quepa sin pisar las 3 líneas.
       El "max-height:70px" de escritorio (más arriba en este fichero) se
       anula aquí porque, al no llevar media query, se aplicaba también en
       móvil por encima del límite de Responsive.css. */
    .paginaPrincipalNueva .cabeceraEnlaceLogo {
        flex: 1 1 auto;
    }

    .paginaPrincipalNueva .cabeceraLogoLibros {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .paginaPrincipalNueva #LabelLibro {
        display: none;
    }

    /* Acordeón real en móvil: el fundido de opacidad (pensado para el
       desplegable de escritorio) no quita el hueco reservado del submenú,
       solo lo hace invisible ("opacity"/"visibility" no sacan el elemento
       del flujo). Aquí se usa "display" para que, cerrado, no ocupe espacio,
       y al abrirse (clase ".hover") empuje hacia abajo a los menús
       siguientes. */
    .paginaPrincipalNueva .nav li ul {
        display: none;
        opacity: 1;
        visibility: visible;
    }

    /* La visibilidad del submenú la controla solo jQuery (slideToggle, en
       menuresponsive.js), no la clase ".hover": si además la clase forzara
       "display:block" al mismo tiempo que se hace ".toggleClass('hover')"
       (antes de que corra el slideToggle), jQuery encontraba el submenú ya
       visible por el CSS y lo cerraba de inmediato -de ahí el "se abre y se
       cierra" la primera vez-. La clase ".hover" solo sirve ahora para el
       chevron que rota. */

    .paginaPrincipalNueva .cabeceraLogoColegio .cabeceraImagenNombre {
        max-height: 40px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .paginaPrincipalNueva .paginaFooter {
        padding-top: 8px;
    }

    /* El "padding-right:24px" pensado para escritorio (más arriba en este
       fichero) deja muy poco sitio dentro del 30% blanco en móvil y empuja
       el logo hacia la izquierda, invadiendo la zona del degradado. */
    .paginaPrincipalNueva .cabeceraLogoColegio {
        padding-right: 8px;
    }

    /* En móvil, para ganar espacio, sin líneas en el corte. */
    .paginaPrincipalNueva .paginaHeader {
        background: linear-gradient( to right, transparent 0%, transparent 70%, #fff 70%, #fff 100% ), url("/Imagenes/degradado1.jpg") center center / cover no-repeat fixed;
    }

    /* Menú desplegado a pantalla completa: fondo azul (no el verde de la
       barra superior, que es ".nav"/"nav" también) y letra blanca. El
       "padding-top:55px" de Menu.css dejaba hueco para el botón de cerrar
       que antes flotaba encima del panel; ahora ese botón vive en la
       cabecera, así que no hace falta ese hueco ni la línea divisoria que
       Menu.css pone antes del primer menú. */
    /* El "padding-top:0" quitaba el hueco de 55px de Menu.css (pensado para
       el antiguo botón flotante), pero dejaba el primer menú ("Inicio")
       justo en la franja que ocupa la cabecera (".paginaHeader", con más
       z-index) por encima: no falta hueco, sino uno que coincida con el
       alto real de la cabecera en móvil, para que el menú empiece justo
       debajo de ella en vez de detrás. Ajustar este valor si cambia el
       contenido/alto de la cabecera. */
    .paginaPrincipalNueva .nav {
        background-color: #00255F;
        padding-top: 47px !important;
    }

        .paginaPrincipalNueva .nav > li:first-child {
            border-top: none;
        }

        .paginaPrincipalNueva .nav > li > a:link,
        .paginaPrincipalNueva .nav > li > a:visited,
        .paginaPrincipalNueva .nav > li > a:active {
            color: #FFFFFF;
        }

        /* Submenús en móvil: acordeón (ya existente vía menuresponsive.js, clase
       ".hover") con jerarquía visual — indentación (ya la pone Menu.css con
       "padding-left" en li li a / li li li a), un tono más claro que el
       fondo del menú, y un chevron que rota al expandir en vez de las
       flechas de imagen de Menu.css (que ya estaban quitadas/no se veían
       para el 2º nivel; aquí se quitan para cualquier nivel y se sustituyen
       por el icono). */
        .paginaPrincipalNueva .nav li li a,
        .paginaPrincipalNueva .nav li li li a,
        .paginaPrincipalNueva .nav li li a:link,
        .paginaPrincipalNueva .nav li li a:visited,
        .paginaPrincipalNueva .nav li li a:active,
        .paginaPrincipalNueva .nav li li li a:link,
        .paginaPrincipalNueva .nav li li li a:visited,
        .paginaPrincipalNueva .nav li li li a:active {
            background-color: #123a75;
            color: #FFFFFF;
        }

        .paginaPrincipalNueva .nav a.parent {
            position: relative;
            background-image: none !important;
        }

            .paginaPrincipalNueva .nav a.parent:after {
                content: "chevron_right";
                font-family: "Material Icons Outlined";
                font-size: 20px;
                text-transform: none;
                letter-spacing: normal;
                font-style: normal;
                font-weight: normal;
                -webkit-font-feature-settings: "liga";
                font-feature-settings: "liga";
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                transition: transform 0.15s ease;
            }

        .paginaPrincipalNueva .nav li.hover > a.parent:after {
            transform: translateY(-50%) rotate(90deg);
        }
}

/* Salir.aspx: sin caja/sombreado alrededor, texto y botones centrados,
   apilados verticalmente. */
.cajaSalir {
    margin-top: 40px;
    text-align: center;
}

.textoConfirmarSalir {
    font-size: 22px;
}

.zonaBotonesSalir {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    margin: 20px auto 0 auto;
}

/* Estilo base de los botones nuevos de acción (sin color): mismo patrón que
   ".btnAccederAcceso" (Inicio.aspx/EstilosNuevo.css) pero sin redondeo. El
   color va aparte, en ".btnNuevoAzul"/".btnNuevoGris" (justo debajo), para
   poder combinarlo con distintos fondos sin duplicar el resto del estilo.
   Tamaño normal por defecto: este botón también se usa en línea junto a
   otros (p. ej. ".ContenedorBotones" en MiFichaDeUsuario.aspx). El tamaño
   grande y el ancho completo solo se aplican dentro de ".zonaBotonesSalir"
   (ver más abajo). */
.btnNuevo {
    box-sizing: border-box;
    padding: 6px 12px;
    margin-left: 7px;
    margin-right: 7px;
    color: White !important;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.zonaBotonesSalir .btnNuevo {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
}

/* Modificador de tamaño de ".btnNuevo": letra y padding más reducidos, para
   botones secundarios o en contextos con poco espacio (p. ej. varios botones
   en línea dentro de un grid o una barra de acciones). */
.btnNuevoPeque {
    padding: 4px 10px;
    font-size: 13px;
}

/* En móvil, cuando varios ".btnNuevo" van en línea (p. ej. ".ContenedorBotones"
   en MiFichaDeUsuario.aspx), se reducen para que los tres quepan en la misma
   fila sin partirse. No afecta a ".zonaBotonesSalir" (Salir.aspx), que fija
   su propio tamaño grande justo arriba. */
@media screen and (max-width: 480px) {
    .btnNuevo {
        padding: 5px 8px;
        margin-left: 3px;
        margin-right: 3px;
        font-size: 11px;
    }
}

/* Color azul de marca (acción principal, p. ej. "Guardar"/"Cerrar sesión"). */
.btnNuevoAzul {
    background-color: #00255B;
    transition: background-color 0.1s ease-in-out;
}

    .btnNuevoAzul:hover {
        background-color: #1A73E9;
    }

/* Color gris (acción secundaria, p. ej. "Salir"/"No, ir a inicio"). */
.btnNuevoGris {
    background-color: #6c757d;
    transition: background-color 0.1s ease-in-out;
}

    .btnNuevoGris:hover {
        background-color: #BCBFC4;
    }

/* Color verde claro. Texto en gris (en vez de blanco, como en ".btnNuevo")
   porque este fondo es demasiado claro para leerse en blanco. */
.btnNuevoVerdeClaro {
    background-color: #c4ff4d;
    color: #6c757d !important;
    transition: background-color 0.1s ease-in-out;
}

    .btnNuevoVerdeClaro:hover {
        background-color: #d9ff8a;
    }

/* Color morado claro. */
.btnNuevoMorado {
    background-color: #bb8cff;
    transition: background-color 0.1s ease-in-out;
}

    .btnNuevoMorado:hover {
        background-color: #d2b3ff;
    }

/* Color rojo (acción destructiva, p. ej. "Eliminar"). */
.btnNuevoRojo {
    background-color: #dc3545;
    transition: background-color 0.1s ease-in-out;
}

    .btnNuevoRojo:hover {
        background-color: #e77e87;
    }

/* MiFichaDeUsuario.aspx: mismo patrón de campo que ".campoAcceso"/".etiquetaAcceso"/
   ".inputAcceso" (RecuperarContraseña.aspx) -etiqueta encima, input con línea
   inferior en vez de caja-, pero en su variante para fondo blanco: texto en
   azul corporativo en vez de blanco. */
.campoNuevo {
    display: flex;
    flex-direction: column;
}

.etiquetaNuevo {
    color: #6c757d;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.inputNuevo {
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #b9c2d1;
    color: #00255B;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
    padding: 6px 2px 8px 2px;
    outline: none;
    transition: border-color .15s ease;
}

    .inputNuevo:focus {
        border-bottom-color: #00255B;
    }

    /* Bloqueado (ReadOnly="True"): mismo color que su etiqueta (".etiquetaNuevo",
   #6c757d) para que se note a simple vista que no es editable, y la línea
   inferior ya no cambia de color al enfocarlo/pulsarlo. */
    .inputNuevo:read-only {
        color: #6c757d;
    }

        .inputNuevo:read-only:focus {
            border-bottom-color: #b9c2d1;
        }

    /* Texto marcado/seleccionado dentro del textbox: azul corporativo en vez del
   azul genérico que pone el navegador por defecto. */
    .inputNuevo::selection {
        background-color: #00255B;
        color: #FFFFFF;
    }

/* Checkbox marcado: el navegador pinta el fondo del check nativo con este
   color ("accent-color"), en vez del azul genérico por defecto. Se aplica a
   nivel de elemento (no de clase) porque los checkbox del proyecto usan
   clases muy distintas ("CheckBoxGrande", "CheckBoxGrandeColor"...) y todas
   siguen siendo, por debajo, un <input type="checkbox"> nativo. */
input[type="checkbox"] {
    accent-color: #00255B;
}

/* Lista de radio buttons (RadioButtonList), estilo afín al resto de campos
   nuevos: opciones apiladas con algo de aire entre ellas, texto en gris
   oscuro y el radio nativo en azul corporativo (mismo recurso "accent-color"
   que el checkbox de arriba). Aplicar en el CssClass del RadioButtonList
   (p. ej. "RBLDestDebeConfirmar" en Anotacion.ascx). */
.radioNuevo td {
    padding: 4px 0;
}

.radioNuevo input[type="radio"] {
    accent-color: #00255B;
    cursor: pointer;
    vertical-align: middle;
}

.radioNuevo label {
    margin-left: 6px;
    color: #363636;
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
}

/* Opción deshabilitada (p. ej. "SMS" en RBLDestDebeConfirmar, mientras ese
       canal de envío no esté disponible): mismo gris que ".inputNuevo:read-only". */
.radioNuevo input[type="radio"]:disabled,
.radioNuevo input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

    .radioNuevo input[type="radio"]:disabled + label {
        color: #6c757d;
    }

/* Enlace tipo "Historial" (icono + texto), en azul corporativo, reutilizable
   en cualquier pantalla (p. ej. "lnkControlCambios" en MiFichaDeUsuario.aspx). */
.enlaceHistorialNuevo,
.enlaceHistorialNuevo:link,
.enlaceHistorialNuevo:visited,
.enlaceHistorialNuevo:active {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    color: #00255B !important;
    font-size: 1.3em;
    text-decoration: none;
    transition: color 0.1s ease-in-out;
}

    .enlaceHistorialNuevo:hover {
        color: #6c757d !important;
    }

@media screen and (max-width: 480px) {
    .enlaceHistorialNuevo,
    .enlaceHistorialNuevo:link,
    .enlaceHistorialNuevo:visited,
    .enlaceHistorialNuevo:active {
        font-size: 1em;
    }

        /* El icono ("material-icons-outlined", ADASistemas.css) trae "font-size:
       24px" fijo, que no se ve afectado por el "font-size" en "em" del enlace. */
        .enlaceHistorialNuevo i {
            font-size: 18px;
        }
}

/* GridView nuevo: mismo estilo de tabla que ".contenidoEjemplo table"
   (Mockup_Principal.html) -cabecera sencilla sin fondo de color, líneas
   divisorias finas y texto pequeño-. Reutilizable en cualquier grid (p. ej.
   "gridRegistrosControlCambios" en HistorialCambios.ascx, junto con
   ".gridRegistros" que ya trae el ancho al 100%). */
.gridHeaderNuevo {
    background-color: transparent;
    color: #00255B;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e2e2e2;
}

    .gridHeaderNuevo th {
        padding: 8px 10px;
    }

    .gridHeaderNuevo a {
        color: #00255B !important;
    }

.gridRowNuevo {
    text-align: left;
    background-color: transparent;
    font-size: 13px;
    border-bottom: 1px solid #e2e2e2;
}

    .gridRowNuevo td {
        padding: 8px 10px;
    }

/* Grid anidado dentro de una celda de otro grid nuevo (p. ej. "GridRepresentantes"
   dentro de "GridCON" en EditLibro.aspx): sin cabecera ni bordes propios entre
   filas -para que se note que es un listado simple y no un grid independiente-,
   con el texto y los iconos de editar/eliminar más pequeños que los del grid
   principal. El aspecto de tarjeta que lo separa visualmente del grid padre lo
   pone ".gridAnidadoTarjeta", en el <table> que envuelve estas filas. */
.gridRowAnidadoNuevo {
    text-align: left;
    background-color: transparent;
    font-size: 11px;
    border-bottom: none;
}

    .gridRowAnidadoNuevo td {
        padding: 3px 6px;
    }

    .gridRowAnidadoNuevo i.material-icons,
    .gridRowAnidadoNuevo i.fas {
        font-size: 14px;
    }

/* Tarjeta para el grid anidado de arriba: fondo y borde redondeado propios
   para que se distinga como un bloque aparte dentro de la celda del grid
   padre (si no, al no tener cabecera ni bordes entre filas, se confundía
   visualmente con el contenido normal de esa celda). */
.gridAnidadoTarjeta {
    margin: 4px 0;
    padding: 4px;
    background-color: #f8f9fa;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 768px) {
    .gridHeaderNuevo th {
        padding: 6px 4px;
    }

    .gridRowNuevo td {
        padding: 6px 4px;
    }
}

/* Título de página (p. ej. "LBNombre" en MiFichaDeUsuario.aspx): mismo
   tamaño que ".lbformularioBlancoTituloGrande" (ADASistemas.css), pero en
   negro en vez de azul, y reducido en móvil. */
.tituloPaginaNuevo {
    font-size: 24px;
    color: #000000;
}

@media screen and (max-width: 480px) {
    .tituloPaginaNuevo {
        font-size: 18px;
    }
}

/* Responsive: en pantallas pequeñas, en vez de apretar las columnas hasta
   hacerlas ilegibles, la tabla mantiene un ancho mínimo y aparece scroll
   horizontal dentro de su contenedor. Sirve tanto para grids ya envueltos en
   un contenedor con overflow propio (p. ej. ".contenedorGridModal" de
   ADASistemas.css, usado en HistorialCambios.ascx) como para los que no lo
   estaban (para esos, envolver el GridView en ".contenedorGridResponsive"). */
.contenedorGridResponsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
    .gridRegistros {
        min-width: 600px;
    }

    /* Excepción: páginas con vista de tarjeta en móvil (".pantallaSinDesborde",
       p. ej. GridLibros.aspx en Responsive.css) ya garantizan que nada
       desborda por construcción -cada fila pasa a ser un bloque a 100% de
       ancho-; el "min-width" de arriba rompería justo esa garantía. */
    .pantallaSinDesborde .gridRegistros {
        min-width: 0;
    }
}

/* Switch (".el-switch", checkbox.css) activado: azul corporativo en vez del
   azul genérico (#20a0ff) que trae por defecto. Se carga después de
   checkbox.css (Principal.Master), así que no hace falta "!important". */
.el-switch > input[type="checkbox"]:checked + .el-switch-style,
.el-switch > input[type="checkbox"]:checked + label {
    background-color: #00255B;
}

.verticalAlignSub {
    vertical-align: sub;
}

.colorAzulNuevo {
    color: #00255B;
}