/*
 * Las pantallas de acceso: entrar, darse de alta, la contraseña y los errores.
 * Sacado de base.css el 4 nov 2026: solo lo cargan esas pantallas.
 */

/* #region Pantallas de acceso (entrar, alta, contraseña, errores) */
/*
 * Aquí la marca se expresa más (sección 34 de la especificación): panel
 * de marca con el símbolo de Rasedia a la izquierda en escritorio; en móvil
 * solo el formulario con el símbolo y un brillo de fondo discreto.
 */
.pantalla-entrar {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: var(--espacio-6) var(--espacio-4);
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgb(37 140 255 / 0.12), transparent 70%),
        var(--rs-fondo);
}

.pantalla-entrar > .tarjeta {
    width: 100%;
    max-width: 420px;
    padding: var(--espacio-8);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-lg);
}

.pantalla-entrar > .tarjeta > h1 {
    font-size: var(--texto-h2);
    margin-bottom: var(--espacio-2);
}

.pantalla-entrar > .tarjeta > h1 + p {
    color: var(--rs-texto-secundario);
    margin-bottom: var(--espacio-6);
}

.pantalla-entrar form {
    margin-top: var(--espacio-6);
}

.pantalla-entrar form .boton[type="submit"] {
    min-height: var(--alto-control);
    margin-top: var(--espacio-2);
}

.tarjeta-alta {
    max-width: 480px !important;
}

.pantalla-entrar__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-8);
}

/* Logo pequeño de Rasedia con su eslogan debajo. */
.pantalla-entrar__marca {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.marca-rasedia__eslogan {
    margin: 0;
    padding-left: 36px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.panel-marca .marca-rasedia__eslogan {
    color: #A7B0BC;
    font-size: var(--texto-etiqueta);
}

.pantalla-entrar__organizacion {
    font-size: var(--texto-etiqueta);
    color: var(--rs-texto-secundario);
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enlace-olvide-contrasena {
    text-align: center;
    margin: var(--espacio-5) 0 0;
    font-size: var(--texto-etiqueta);
}

/*
 * La contraseña de la pantalla de entrar (2 nov 2026): «¿La has olvidado?» a la derecha
 * de su etiqueta, donde se mira al dudar. En el HTML va detrás del campo, para que el
 * tabulador pase de la contraseña a «Entrar» sin pararse antes en el enlace.
 */
.campo--con-enlace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--espacio-3);
    align-items: baseline;
}

.campo--con-enlace > .campo-contrasena {
    grid-column: 1 / -1;
    grid-row: 2;
}

.campo__enlace {
    grid-column: 2;
    grid-row: 1;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
    text-align: right;
    text-decoration: none;
    transition: color var(--duracion-hover) ease;
}

.campo__enlace:hover,
.campo__enlace:focus-visible {
    color: var(--marca-acento);
}

/* En la tarjeta de entrar ambos campos hacen falta, y se ve: sin asteriscos. */
#formulario-entrar .campo > label::after {
    content: none;
}

/*
 * «¿Es tu primera vez?» (22 oct 2026; rehecho el 2 nov 2026): una fila tranquila bajo
 * una raya, con su icono y su resumen, que abre los tres pasos del enlace personal.
 */
.entrar-primera-vez {
    margin: var(--espacio-6) 0 0;
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.entrar-primera-vez > summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2);
    margin: 0 calc(-1 * var(--espacio-2));
    border-radius: var(--radio-md);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--duracion-hover) ease;
}

.entrar-primera-vez > summary::-webkit-details-marker {
    display: none;
}

.entrar-primera-vez > summary:hover {
    background: rgb(255 255 255 / 0.04);
}

.entrar-primera-vez__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--marca-acento) 16%, transparent);
    color: var(--marca-acento);
}

.entrar-primera-vez__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.entrar-primera-vez__textos strong {
    color: var(--rs-texto);
    font-weight: 600;
}

.entrar-primera-vez__flecha {
    display: grid;
    flex: none;
    color: var(--rs-texto-tenue);
    transition: transform var(--duracion-hover) ease;
}

.entrar-primera-vez[open] .entrar-primera-vez__flecha {
    transform: rotate(180deg);
}

/* Los pasos, con su número en un círculo del color de la asociación. */
.entrar-primera-vez__pasos {
    display: grid;
    gap: var(--espacio-3);
    margin: var(--espacio-4) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.entrar-primera-vez__pasos li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--espacio-3);
    align-items: baseline;
    counter-increment: paso;
    line-height: 1.45;
}

.entrar-primera-vez__pasos li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid color-mix(in oklch, var(--marca-acento) 45%, transparent);
    border-radius: 50%;
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    align-self: start;
}

.entrar-primera-vez__nota {
    margin: var(--espacio-4) 0 0;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: rgb(255 255 255 / 0.04);
    line-height: 1.45;
}

/* Panel de marca: solo en pantallas amplias. */
.pantalla-entrar--marca {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    padding: 0;
    place-items: stretch;
    /*
     * Pantalla partida (escritorio): el fondo animado o el vídeo va detrás de
     * las DOS mitades y se desvanece hacia el lado del logo, que a su vez se
     * funde hacia transparente: una sola escena, sin línea en medio.
     */
    position: relative;
    isolation: isolate;
    background: #05070A;
}

.panel-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--espacio-8);
    padding: var(--espacio-12);
    overflow: hidden;
    /* El brillo toma el color de la organización (en el panel técnico, el azul de Rasedia). */
    /*
     * Sin borde a la derecha: el fondo se funde hacia transparente para que
     * la red (o el vídeo) del otro lado entre poco a poco, sin línea.
     */
    background:
        radial-gradient(40rem 26rem at 30% 55%, color-mix(in srgb, var(--marca-acento) 24%, transparent), transparent 65%),
        radial-gradient(24rem 16rem at 80% 20%, color-mix(in srgb, var(--marca-secundaria) 12%, transparent), transparent 70%),
        linear-gradient(90deg, #05070A 0%, rgb(7 10 15 / 0.92) 55%, rgb(5 7 10 / 0) 100%);
    color: #F6F8FA;
}

.panel-marca::after {
    /* Rejilla técnica muy tenue: "precisión", sin robar protagonismo. */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 40% 50%, black 20%, transparent 75%);
    pointer-events: none;
}

.panel-marca > * {
    position: relative;
    z-index: 1;
}

/* El panel de marca siempre es oscuro: el logotipo en blanco, un poco más grande. */
.panel-marca .marca-rasedia__logotipo {
    height: 20px;
}

.panel-marca__simbolo {
    align-self: center;
    width: min(300px, 62%);
    height: auto;
    filter: drop-shadow(0 0 36px rgb(41 213 255 / 0.18)) drop-shadow(0 18px 40px rgb(0 0 0 / 0.5));
    animation: aparecer-simbolo 900ms var(--curva) both;
}

/* Momento de marca: el símbolo aparece y se "enciende" una vez, sin quedarse animado. */
@keyframes aparecer-simbolo {
    from { opacity: 0; transform: translateY(8px) scale(0.98); filter: brightness(0.6); }
    to { opacity: 1; transform: none; }
}

/* Logo de la organización en el panel de marca: grande y sin fondo, con el mismo brillo que el símbolo de Rasedia. */
.panel-marca__logo {
    align-self: center;
    display: grid;
    place-items: center;
    width: min(340px, 70%);
}

.panel-marca__logo img {
    display: block;
    max-width: 100%;
    max-height: min(360px, 42vh);
    object-fit: contain;
    filter: drop-shadow(0 0 40px color-mix(in srgb, var(--marca-acento) 35%, transparent)) drop-shadow(0 18px 40px rgb(0 0 0 / 0.5));
    animation: aparecer-simbolo 900ms var(--curva) both;
}

.pantalla-entrar__logo {
    display: inline-flex;
}

.pantalla-entrar__logo img {
    display: block;
    height: 40px;
    max-width: 160px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.4));
}

/* Asociación sin logo: sus iniciales, grandes y en su color (sección 104). */
.panel-marca__iniciales {
    align-self: center;
    display: grid;
    place-items: center;
    width: min(220px, 50%);
    aspect-ratio: 1;
    border-radius: var(--radio-2xl);
    background: linear-gradient(145deg, var(--marca-fondo), color-mix(in srgb, var(--marca-fondo) 60%, var(--marca-secundaria-visible)));
    color: var(--marca-sobre);
    font-family: var(--fuente-display);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 0 70px color-mix(in srgb, var(--marca-acento) 35%, transparent), 0 18px 40px rgb(0 0 0 / 0.5);
    animation: aparecer-simbolo 900ms var(--curva) both;
}

.panel-marca__pie-simbolo {
    width: 16px;
    height: auto;
    opacity: 0.8;
}

/* Cabecera de la tarjeta en el móvil: la asociación delante; Rasedia, un símbolo pequeño. */
.pantalla-entrar__asociacion {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-width: 0;
    font-weight: 600;
}

.pantalla-entrar__asociacion > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pantalla-entrar__iniciales {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radio-md);
    background: var(--marca-fondo);
    color: var(--marca-sobre);
    font-family: var(--fuente-display);
    font-weight: 700;
}

/* Con logo (móvil y tableta): el logo grande y centrado; Rasedia, pequeño en la esquina. */
.pantalla-entrar__cabecera--logo {
    position: relative;
    justify-content: center;
}

.pantalla-entrar__cabecera--logo .pantalla-entrar__rasedia {
    position: absolute;
    top: 0;
    right: 0;
}

.pantalla-entrar__logo--grande img {
    height: 128px;
    max-width: 240px;
    filter: drop-shadow(0 0 28px color-mix(in srgb, var(--marca-acento) 35%, transparent)) drop-shadow(0 10px 24px rgb(0 0 0 / 0.5));
}

.pantalla-entrar__rasedia {
    flex-shrink: 0;
    width: 22px;
    height: auto;
    opacity: 0.6;
}

.panel-marca__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #F6F8FA;
    max-width: 18ch;
}

.panel-marca__lema {
    margin: var(--espacio-3) 0 0;
    max-width: 40ch;
    color: #A7B0BC;
    font-size: var(--texto-grande);
}

.panel-marca__pie {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: #84909E;
    font-size: var(--texto-pequeno);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-marca__pie::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--marca-secundaria-visible);
}

.pantalla-entrar__formulario {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: var(--espacio-8) var(--espacio-4);
    background: #05070A;
}

@media (min-width: 1024px) {
    .pantalla-entrar--marca .pantalla-entrar__formulario {
        position: static;
        isolation: auto;
        overflow: visible;
        background: transparent;
    }

    .pantalla-entrar--marca .fondo-entrada {
        mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / 0.6) 42%, black 60%);
        -webkit-mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / 0.6) 42%, black 60%);
    }
}

/*
 * Fondo detrás del formulario (plantillas/comun/fondo-entrada.php): vídeo o
 * imagen de la organización, o la red animada de Rasedia. Siempre oscuro
 * —es un momento de marca—, con un velo encima para que la tarjeta y su
 * texto se lean siempre, sea cual sea el vídeo.
 */
.fondo-entrada {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40rem 28rem at 50% 30%, rgb(37 140 255 / 0.16), transparent 70%),
        radial-gradient(30rem 20rem at 85% 90%, rgb(220 169 79 / 0.08), transparent 70%),
        linear-gradient(160deg, #0A0F16 0%, #05070A 100%);
}

.fondo-entrada__red, .fondo-entrada__medio {
    display: block;
    width: 100%;
    height: 100%;
}

.fondo-entrada__medio {
    object-fit: cover;
}

/* La foto fija del vídeo, debajo de él: se ve mientras el vídeo no pinte nada. */
.fondo-entrada__portada {
    position: absolute;
    inset: 0;
}

.fondo-entrada__portada + video {
    position: relative;
}

.fondo-entrada__velo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgb(5 7 10 / 0.1) 0%, rgb(5 7 10 / 0.45) 100%);
}

/*
 * La tarjeta de entrar, a la altura del logo en 3D: cristal oscuro
 * profundo, canto dorado metálico (como los filos del logo), un brillo
 * fino arriba y un halo azul detrás (el visor). Siempre igual: las
 * pantallas de entrada tienen el tema fijo en oscuro.
 */
.pantalla-entrar__formulario > .tarjeta {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--espacio-8);
    border-radius: var(--radio-xl);
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgb(24 31 42 / 0.8) 0%, rgb(10 13 19 / 0.9) 50%, rgb(6 8 12 / 0.95) 100%) padding-box,
        linear-gradient(135deg, rgb(241 199 110 / 0.9) 0%, rgb(168 117 36 / 0.35) 20%, rgb(255 255 255 / 0.06) 48%, rgb(168 117 36 / 0.3) 78%, rgb(241 199 110 / 0.7) 100%) border-box;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow:
        0 40px 90px rgb(0 0 0 / 0.65),
        0 0 70px rgb(37 140 255 / 0.1),
        inset 0 1px 0 rgb(255 255 255 / 0.08);
}

/* Brillo metálico en el canto de arriba. */
.pantalla-entrar__formulario > .tarjeta::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 232 190 / 0.95), transparent);
    pointer-events: none;
}

/* Halo azul detrás de la tarjeta, como la luz del visor. */
.pantalla-entrar__formulario > .tarjeta::after {
    content: "";
    position: absolute;
    inset: 10% -8% -6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(37 140 255 / 0.22), transparent);
    filter: blur(28px);
    pointer-events: none;
}

.pantalla-entrar__formulario > .tarjeta > h1 {
    background: linear-gradient(180deg, #FFFFFF 30%, #B9C3CF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: var(--texto-h2);
    margin-bottom: var(--espacio-2);
}

.pantalla-entrar__formulario > .tarjeta :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
    background-color: rgb(4 6 9 / 0.65);
    border-color: rgb(255 255 255 / 0.1);
}

.pantalla-entrar__formulario > .tarjeta :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):hover {
    border-color: rgb(255 255 255 / 0.18);
}

.pantalla-entrar__formulario > .tarjeta :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus {
    border-color: var(--rs-azul);
}

.pantalla-entrar__formulario .boton[type="submit"] {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--marca-boton) 35%, transparent);
    min-height: var(--alto-control);
    margin-top: var(--espacio-2);
}

@media (min-width: 1024px) {
    .pantalla-entrar--marca .pantalla-entrar__cabecera {
        display: none;
    }
}

@media (max-width: 1023px) {
    .pantalla-entrar--marca {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-marca {
        display: none;
    }
}

@media (max-width: 767px) {
    .pantalla-entrar > .tarjeta, .pantalla-entrar__formulario > .tarjeta {
        padding: var(--espacio-6) var(--espacio-5);
    }
}
/* #endregion */