/*
    TKAcceso.css
    Estilos de la pantalla de acceso (SiteSinMenusFondo.Master / Cuenta/Entrar.aspx).

    Tomados como referencia de la pantalla de acceso del proyecto de Libros
    Electrónicos (Inicio.master / Inicio.aspx). Todas las reglas cuelgan de
    ".paginaAcceso" (clase que sólo lleva el body de este master) para no pisar
    las clases del resto del portal, que comparten nombres como "paginaHeader"
    o "mainInicio".

    El alto de la página ya lo resuelve TKSite.css: "body" es flex en columna
    con min-height:100vh y "body > form" es "flex: 1 0 auto". Aquí no se vuelve
    a fijar el alto, sólo se reparte el espacio sobrante entre cabecera,
    contenido y pie.
*/

/*
   Degradado en CSS en lugar de imagen de fondo: no añade descarga. No es un
   degradado lineal, sino una malla, así que se reproduce apilando varios
   "radial-gradient" transparentes sobre un lineal de base. El orden importa:
   la primera capa es la que queda más arriba.

   El color de respaldo (#0C2A55) es el azul dominante, y se ve mientras el
   navegador pinta las capas o si no soportara gradientes.

   La orientación es la misma que la de la cabecera y el pie de la plataforma
   (ver "CABECERA CON DEGRADADO" en TKSite.css): la luz entra por la izquierda
   y la penumbra cierra por la derecha, para que al pasar del acceso a la
   aplicación la iluminación no cambie de lado.
*/
.paginaAcceso {
    overflow-x: hidden;
    background-color: #0C2A55;
    background-image:
        /* foco violeta de la parte superior */
        radial-gradient(ellipse 42% 38% at 65% -2%, rgba(178, 132, 222, 0.95) 0%, rgba(150, 110, 200, 0.45) 38%, rgba(90, 80, 160, 0) 70%),
        /* turquesa de la esquina superior izquierda */
        radial-gradient(ellipse 34% 62% at -1% 8%, rgba(86, 190, 200, 0.85) 0%, rgba(50, 150, 190, 0.35) 45%, rgba(20, 90, 170, 0) 78%),
        /* azul luminoso del lateral izquierdo */
        radial-gradient(ellipse 55% 85% at 8% 45%, rgba(26, 116, 220, 0.75) 0%, rgba(20, 85, 180, 0.25) 50%, rgba(10, 45, 110, 0) 82%),
        /* claro tenue de la zona inferior central */
        radial-gradient(ellipse 45% 30% at 62% 103%, rgba(30, 100, 205, 0.55) 0%, rgba(18, 60, 140, 0.2) 45%, rgba(10, 36, 71, 0) 75%),
        /* penumbra de la esquina inferior derecha */
        radial-gradient(ellipse 60% 70% at 98% 78%, rgba(6, 22, 48, 0.85) 0%, rgba(8, 28, 60, 0.35) 45%, rgba(10, 36, 71, 0) 80%),
        /* base */
        linear-gradient(240deg, #1C2545 0%, #0C2A55 40%, #12447F 72%, #1A69B8 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

    /* Contenedor de cabecera + contenido: en columna, para que el contenido
       reparta todo el alto que sobra por encima del pie. */
    .paginaAcceso .pageInicio {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        width: 100%;
    }

/* ---- cabecera ---- */
.cabeceraAcceso {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    padding: 56px 16px 6px 16px;
    background: transparent;
}

.logoAcceso {
    height: 52px;
    width: auto;
    margin: 0 0 8px 0;
}

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

.subtituloAcceso {
    color: #B9C7DC;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---- contenido central ---- */
/* Centra en vertical ("justify-content") pero NO en horizontal: entre este
   contenedor y la caja de login se cuela el div que renderiza el UpdatePanel,
   y con "align-items: center" ese div intermedio se encogía al ancho de su
   contenido, así que el "width: 100%" de la caja se calculaba sobre un ancho
   ya comprimido y su "max-width" no tenía ningún efecto. Sin "align-items"
   los hijos se estiran (comportamiento por defecto) y el centrado horizontal
   lo hace la propia caja con "margin: 0 auto", que no depende de cuántos
   elementos haya por medio. */
.paginaAcceso .mainInicio {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px;
}

/* El ancho de los campos lo marca esta caja: los campos, el botón y los
   enlaces van todos al 100% de ella. */
.cajaAccesoLogin {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.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;
}

/* Campo sin caja: sólo una línea inferior, que se aclara al tener el foco. */
.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 26px 8px 2px;
    outline: none;
    transition: border-color .15s ease;
}

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

.campoAccesoPass {
    position: relative;
}

    /* ".iconoVisible" (TKSite.css) ya se coloca en absoluto y centrado sobre el
       alto del input, pero está pensada para el formulario claro del portal:
       aquí sólo se recoloca sobre la línea inferior y se aclara el color. */
    .campoAccesoPass .iconoVisible {
        right: 2px;
        top: auto;
        bottom: 9px;
        margin-top: 0;
        color: #B9C7DC;
    }

.zonaBotonAcceso {
    width: 100%;
}

.btnAccederAcceso {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 11px 0;
    background: #FFFFFF;
    color: #00255B !important;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity .15s ease;
}

    .btnAccederAcceso:hover {
        opacity: 1;
    }

/* ---- enlaces ---- */
/* "position: relative" para que la lista de certificados, que va en absoluto,
   se coloque respecto a este bloque y no respecto a la página. */
.enlacesAcceso {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    text-align: center;
}

    /* Dos bloques de enlaces seguidos quedan demasiado separados por el "gap"
       de la caja, así que el segundo recupera parte del espacio. */
    .enlacesAcceso + .enlacesAcceso {
        margin-top: -18px;
    }

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

/* ---- certificados admitidos ---- */
/* El disparador vuelve a ser el icono de información junto al enlace: la lista es una aclaración puntual, no algo que deba ocupar sitio permanente. */
.iconoInfoAcceso {
    padding: 0 4px;
    background: none;
    border: none;
    color: #B9C7DC;
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
}

    .iconoInfoAcceso .material-icons-outlined {
        font-size: 16px;
        vertical-align: middle;
    }

/* Bloque translúcido con el mismo lenguaje visual que los campos, en lugar de
   una tarjeta blanca que rompe el fondo.

   Va en absoluto y colgando del enlace ("top: 100%"), fuera del flujo, para
   que al abrirlo no empuje nada: la caja de login está centrada en vertical,
   así que si el cuerpo ocupara sitio los campos se desplazarían hacia arriba.
   Cerrado se queda aplastado contra su borde superior ("scaleY(0)" con el
   origen arriba) y al abrirse se despliega hacia abajo. */
.bloqueCuerpo {
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 12px 14px 14px 14px;
    background-color: #123059;
    border: 1px solid rgba(185, 199, 220, 0.35);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    text-align: left;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .2s ease, opacity .2s ease;
    /* Cerrado no debe capturar clics sobre lo que tiene debajo. */
    pointer-events: none;
}

.bloqueCuerpoVisible {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

.tituloCertificados {
    margin: 0 0 10px 0;
    color: #E8EDF6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Las autoridades van como etiquetas y no como lista: son nombres cortos y
   así ocupan dos líneas en vez de seis. */
.listaCertificados {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .listaCertificados li {
        padding: 4px 11px;
        background-color: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        color: #FFFFFF;
        font-size: 12px;
        /* Interrogación: son etiquetas informativas, no texto seleccionable ni nada pulsable, y cada una lleva su nombre desarrollado en el title. */
        cursor: help;
    }

.pieCertificados {
    margin: 12px 0 0 0;
    color: #B9C7DC;
    font-size: 11.5px;
}

    .pieCertificados a {
        color: #B9C7DC;
    }

/* ---- mensajes y progreso ---- */
.mensajeAcceso {
    width: 100%;
    text-align: center;
}

    /* El aviso lo pinta ".alert alert-danger" (TKSite.css). Aquí sólo se ajusta
       a la caja: como lo lleva un asp:Label, que renderiza un "span", hay que
       darle "inline-block" para que respete el relleno, y se le quita el margen
       inferior porque la separación ya la pone el "gap" de la caja.
       Mientras no haya mensaje, el span está vacío y no se muestra. */
    .mensajeAcceso .alert {
        display: inline-block;
        margin-bottom: 0;
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
    }

        .mensajeAcceso .alert:empty {
            display: none;
        }

.cargandoAcceso {
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 13px;
}

/* ---- pie ---- */
.pieAcceso {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 0 16px 0;
    text-align: center;
}

.pieAccesoLogoAda {
    height: 44px;
    width: auto;
    opacity: 0.92;
}

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

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

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

/* ---- pantallas de error de certificado ----
   SSL/CertificadoNoValido.aspx y SSL/CertificadoNoNIF.aspx. Antes usaban la
   caja ".FondoAzulClaroFuenteAzul" sobre el degradado, que rompía la
   composición del acceso; ahora repiten la misma estructura que la caja de
   login: sin caja, contenido centrado directamente sobre el fondo. */
.cajaError {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.marcaError {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(248, 215, 218, 0.16);
    border: 1px solid rgba(248, 215, 218, 0.5);
    color: #F8D7DA;
}

    .marcaError .material-icons-outlined {
        font-size: 30px;
    }

.tituloError {
    margin: 0;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.detalleError {
    margin: 0;
    max-width: 44ch;
    color: #B9C7DC;
    font-size: 13.5px;
}

    /* El NIF va destacado y en monoespaciada: es el dato que el usuario tiene
       que comparar con el de su certificado. */
    .detalleError .nifError {
        color: #FFFFFF;
        font-weight: 600;
        font-family: Consolas, "Courier New", monospace;
        letter-spacing: 0.04em;
    }

.zonaBotonesError {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

    /* Los botones son enlaces, así que hay que anular el subrayado y darles el
       ancho completo de la columna. */
    .zonaBotonesError .btnNuevo {
        width: 100%;
        margin: 0;
        padding: 12px 0;
        display: block;
        text-align: center;
        text-decoration: none;
    }

/* Botón secundario sobre fondo oscuro: el gris macizo no se lee bien encima
   del degradado, así que sólo lleva borde. */
.btnNuevoFantasma {
    background-color: transparent;
    border: 1px solid rgba(185, 199, 220, 0.5);
    color: #B9C7DC !important;
    transition: border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

    .btnNuevoFantasma:hover {
        border-color: #FFFFFF;
        color: #FFFFFF !important;
    }

.avisoError {
    margin: 0;
    max-width: 44ch;
    color: #B9C7DC;
    font-size: 12.5px;
    line-height: 17px;
}

    .avisoError a {
        color: #B9C7DC;
    }

/* Código del error en Errores.aspx: monoespaciado porque es un dato que el
   usuario tiene que leer o dictar sin equivocarse. */
.codigoError {
    color: #FFFFFF;
    font-weight: 600;
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.04em;
}