/*
 | GestiónControl — pantalla de ingreso (estilo "soft UI").
 | CSS plano, sin compilación. Lo carga solo la vista
 | filament/ingreso/layout.blade.php; el resto del panel no lo ve.
 |
 | Convive con gestioncontrol.css y con los render hooks del admin
 | (theme-accent y theme-redesign), que pintan .fi-input-wrp, .fi-input
 | y el fondo oscuro. Por eso todo lo que toca clases de Filament va
 | bajo #gc-ingreso: un id pesa más que cualquier combinación de
 | clases, así no hace falta !important ni depende del orden de carga.
 |
 | Los colores viven en variables: claro en #gc-ingreso y oscuro en
 | .dark #gc-ingreso. Las reglas de abajo solo usan las variables.
 */

/* ── Colores: modo claro ─────────────────────────────────────── */
#gc-ingreso {
    --gi-fondo-1: #f1f4fa;
    --gi-fondo-2: #e2e8f3;
    --gi-halo: rgba(96, 140, 245, .26);

    --gi-titulo: #0a1433;
    --gi-texto: #0f1b3d;
    --gi-texto-medio: #2c3a5a;
    --gi-texto-suave: #56678a;
    --gi-marcador: #5f6e8c;
    --gi-icono: #5d6d8e;
    --gi-icono-tema: #0f1b3d;

    --gi-azul: #2f6cf6;
    --gi-azul-claro: #5d95ff;
    --gi-azul-oscuro: #1d4fd6;
    --gi-anillo: rgba(47, 108, 246, .22);
    --gi-boton-sombra: rgba(37, 99, 235, .45);

    /* Relieve: luz arriba a la izquierda, sombra abajo a la derecha */
    --gi-sup-1: #f8fafe;
    --gi-sup-2: #e6ecf6;
    --gi-borde-suave: rgba(255, 255, 255, .85);
    --gi-brillo: rgba(255, 255, 255, .9);
    --gi-sombra-oscura: rgba(146, 163, 196, .5);
    --gi-sombra-clara: rgba(255, 255, 255, .95);
    --gi-sombra-campo: rgba(146, 163, 196, .32);

    --gi-campo: rgba(255, 255, 255, .45);
    --gi-campo-solido: #f2f5fb;
    --gi-campo-borde: rgba(255, 255, 255, .8);
    --gi-campo-borde-foco: rgba(47, 108, 246, .45);

    --gi-error: #c81e1e;
    --gi-error-borde: rgba(220, 38, 38, .55);
    --gi-error-anillo: rgba(220, 38, 38, .14);

    --gi-orbe-1: #f6f8fd;
    --gi-orbe-2: #dfe7f6;
    --gi-orbe-3: #b5c9f3;
    --gi-orbe-brillo: rgba(255, 255, 255, .75);
    --gi-orbe-sombra-int: rgba(64, 112, 226, .25);
    --gi-orbe-sombra: rgba(70, 105, 190, .18);
    --gi-orbe-borde: rgba(255, 255, 255, .85);
    --gi-aro: rgba(80, 128, 240, .16);

    --gi-panel: rgba(255, 255, 255, .28);
    --gi-panel-borde: rgba(255, 255, 255, .7);
    --gi-sombra-panel: rgba(120, 140, 180, .28);

    --gi-curva: cubic-bezier(.16, 1, .3, 1);
}

/* ── Colores: modo oscuro ────────────────────────────────────── */
.dark #gc-ingreso {
    --gi-fondo-1: #111a2e;
    --gi-fondo-2: #070b15;
    --gi-halo: rgba(37, 99, 235, .3);

    --gi-titulo: #f1f5ff;
    --gi-texto: #e6ecfa;
    --gi-texto-medio: #c3cde3;
    --gi-texto-suave: #8e9dbd;
    --gi-marcador: #7a8aac;
    --gi-icono: #8191b2;
    --gi-icono-tema: #fcd34d;

    --gi-azul: #3b7bff;
    --gi-azul-claro: #6ea2ff;
    --gi-azul-oscuro: #1f54e0;
    --gi-anillo: rgba(91, 147, 255, .3);
    --gi-boton-sombra: rgba(37, 99, 235, .55);

    --gi-sup-1: #1a2440;
    --gi-sup-2: #0f172b;
    --gi-borde-suave: rgba(255, 255, 255, .07);
    --gi-brillo: rgba(255, 255, 255, .06);
    --gi-sombra-oscura: rgba(0, 0, 0, .55);
    --gi-sombra-clara: rgba(120, 150, 220, .06);
    --gi-sombra-campo: rgba(0, 0, 0, .45);

    --gi-campo: rgba(255, 255, 255, .035);
    --gi-campo-solido: #121a2d;
    --gi-campo-borde: rgba(255, 255, 255, .08);
    --gi-campo-borde-foco: rgba(110, 162, 255, .55);

    --gi-error: #f87171;
    --gi-error-borde: rgba(248, 113, 113, .55);
    --gi-error-anillo: rgba(248, 113, 113, .16);

    --gi-orbe-1: #1c2a4d;
    --gi-orbe-2: #111a33;
    --gi-orbe-3: #1b3878;
    --gi-orbe-brillo: rgba(147, 197, 253, .12);
    --gi-orbe-sombra-int: rgba(59, 130, 246, .35);
    --gi-orbe-sombra: rgba(0, 0, 0, .5);
    --gi-orbe-borde: rgba(96, 165, 250, .16);
    --gi-aro: rgba(59, 130, 246, .14);

    --gi-panel: rgba(13, 20, 38, .5);
    --gi-panel-borde: rgba(255, 255, 255, .06);
    --gi-sombra-panel: rgba(0, 0, 0, .5);
}

/* ── Fondo de la página ──────────────────────────────────────── */
/* Gana a ".dark .fi-body" de gestioncontrol.css y theme-redesign */
body.gc-ingreso-cuerpo {
    background-color: #e8edf6;
    background-image: none;
}

html.dark body.gc-ingreso-cuerpo {
    background-color: #070b15;
    background-image: none;
}

#gc-ingreso {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--gi-texto);
    background:
        radial-gradient(120% 70% at 50% 0%, var(--gi-fondo-1) 0%, transparent 70%),
        linear-gradient(180deg, var(--gi-fondo-1) 0%, var(--gi-fondo-2) 100%);
    transition: color .35s ease;
}

#gc-ingreso .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Círculos decorativos ────────────────────────────────────── */
.gc-ingreso-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.gc-halo,
.gc-orbe {
    position: absolute;
    border-radius: 50%;
}

/* Manchas de luz difusas en las esquinas (degradado, sin filtro: más liviano) */
.gc-halo {
    width: 70vmax;
    height: 70vmax;
    background: radial-gradient(circle, var(--gi-halo) 0%, transparent 62%);
}

.gc-halo-1 { left: -36vmax; top: -34vmax; }
.gc-halo-2 { right: -36vmax; bottom: -34vmax; }

/* Esferas con relieve: brillo arriba a la izquierda y sombra interna */
.gc-orbe {
    width: var(--d);
    height: var(--d);
    background:
        radial-gradient(circle at 32% 28%, var(--gi-orbe-brillo) 0%, transparent 42%),
        radial-gradient(circle at 50% 50%, var(--gi-orbe-1) 0%, var(--gi-orbe-2) 68%, var(--gi-orbe-3) 100%);
    border: 1px solid var(--gi-orbe-borde);
    box-shadow:
        inset -14px -18px 36px var(--gi-orbe-sombra-int),
        inset 8px 10px 22px var(--gi-orbe-brillo),
        18px 24px 48px var(--gi-orbe-sombra);
    animation: gc-flotar 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* Aro azul alrededor de las esferas grandes, como en la referencia */
.gc-orbe-1::after,
.gc-orbe-3::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 10px solid var(--gi-aro);
    box-shadow: 0 0 36px var(--gi-aro);
}

.gc-orbe-1 {
    --d: clamp(220px, 62vw, 460px);
    left: calc(var(--d) * -.42);
    top: calc(var(--d) * -.36);
}

.gc-orbe-2 {
    --d: clamp(110px, 30vw, 200px);
    right: calc(var(--d) * -.38);
    top: 21%;
    --fx: -8px;
    --fy: 14px;
    animation-duration: 13s;
}

.gc-orbe-3 {
    --d: clamp(240px, 70vw, 520px);
    right: calc(var(--d) * -.5);
    bottom: calc(var(--d) * -.52);
    animation-duration: 21s;
}

.gc-orbe-4 {
    --d: clamp(160px, 44vw, 320px);
    left: calc(var(--d) * -.48);
    bottom: calc(var(--d) * -.5);
    --fx: 10px;
    --fy: -8px;
    animation-duration: 16s;
}

@keyframes gc-flotar {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--fx, 6px), var(--fy, 10px), 0); }
}

/* ── Botón de modo oscuro ────────────────────────────────────── */
.gc-ingreso-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--gi-borde-suave);
    border-radius: 1rem;
    color: var(--gi-icono-tema);
    background: linear-gradient(145deg, var(--gi-sup-1), var(--gi-sup-2));
    box-shadow:
        6px 6px 14px var(--gi-sombra-oscura),
        -6px -6px 14px var(--gi-sombra-clara),
        inset 1px 1px 0 var(--gi-brillo);
    cursor: pointer;
    transition: transform .3s var(--gi-curva), box-shadow .3s ease, color .3s ease;
}

.gc-ingreso-tema:hover { transform: translateY(-2px); }

.gc-ingreso-tema:active {
    transform: scale(.95);
    box-shadow:
        inset 4px 4px 10px var(--gi-sombra-oscura),
        inset -4px -4px 10px var(--gi-sombra-clara);
}

.gc-ingreso-tema:focus-visible {
    outline: 3px solid var(--gi-anillo);
    outline-offset: 3px;
}

.gc-ingreso-tema svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* El ícono depende de la clase .dark: no parpadea al cargar */
.gc-icono-sol { display: none; }
.dark .gc-icono-luna { display: none; }
.dark .gc-icono-sol { display: block; }

/* ── Contenedor ──────────────────────────────────────────────── */
.gc-ingreso-principal {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4.75rem 1.5rem 2.25rem;
}

.gc-ingreso-contenido {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 24.5rem;
}

/* ── Logo, título y subtítulo ────────────────────────────────── */
.gc-ingreso-cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.1rem;
    text-align: center;
}

.gc-ingreso-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 8.5rem;
    height: 8.5rem;
    margin-bottom: 1.9rem;
    border: 1px solid var(--gi-borde-suave);
    border-radius: 2.4rem;
    background: linear-gradient(145deg, var(--gi-sup-1), var(--gi-sup-2));
    box-shadow:
        14px 14px 30px var(--gi-sombra-oscura),
        -14px -14px 30px var(--gi-sombra-clara),
        inset 1px 1px 0 var(--gi-brillo);
}

/* Brillo de vidrio sobre la tarjeta */
.gc-ingreso-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 28% 18%, var(--gi-brillo), transparent 58%);
    opacity: .7;
    pointer-events: none;
}

.gc-ingreso-logo-img {
    position: relative;
    width: 64%;
    height: 64%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(37, 99, 235, .22));
}

/* Respaldo mientras no exista el archivo del logo */
.gc-ingreso-monograma {
    position: relative;
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(150deg, var(--gi-azul-claro) 0%, var(--gi-azul) 48%, var(--gi-azul-oscuro) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 8px 12px rgba(37, 99, 235, .3));
    transform: translateY(-2px);
    user-select: none;
}

.gc-ingreso-titulo {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--gi-titulo);
}

/* El padding compensa el espacio que deja la última letra y lo centra */
.gc-ingreso-subtitulo {
    margin: .75rem 0 0;
    padding-left: .3em;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--gi-texto-suave);
}

/* ── Formulario (las piezas son de Filament) ─────────────────── */
#gc-ingreso .gc-ingreso-form {
    row-gap: 1.35rem;
}

#gc-ingreso .fi-fo-component-ctn {
    gap: 1rem;
}

#gc-ingreso .fi-input-wrp {
    align-items: center;
    min-height: 3.6rem;
    border: 1px solid var(--gi-campo-borde);
    border-radius: 1.15rem;
    background-color: var(--gi-campo);
    box-shadow:
        8px 8px 18px var(--gi-sombra-campo),
        -8px -8px 18px var(--gi-sombra-clara),
        inset 0 1px 0 var(--gi-brillo);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

#gc-ingreso .fi-input-wrp:focus-within {
    border-color: var(--gi-campo-borde-foco);
    box-shadow:
        0 0 0 4px var(--gi-anillo),
        8px 8px 18px var(--gi-sombra-campo),
        -8px -8px 18px var(--gi-sombra-clara),
        inset 0 1px 0 var(--gi-brillo);
}

#gc-ingreso .fi-input-wrp.fi-invalid {
    border-color: var(--gi-error-borde);
    box-shadow:
        0 0 0 3px var(--gi-error-anillo),
        8px 8px 18px var(--gi-sombra-campo),
        -8px -8px 18px var(--gi-sombra-clara);
}

#gc-ingreso .fi-input-wrp-prefix {
    padding-inline: 1.2rem .1rem;
    border: 0;
}

#gc-ingreso .fi-input-wrp-icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--gi-icono);
    transition: color .25s ease;
}

#gc-ingreso .fi-input-wrp:focus-within .fi-input-wrp-prefix .fi-input-wrp-icon {
    color: var(--gi-azul);
}

#gc-ingreso .fi-input {
    height: 3.5rem;
    padding-block: 0;
    padding-inline: .85rem 1rem;
    border-radius: 0;
    background-color: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--gi-texto);
}

#gc-ingreso .fi-input::placeholder {
    color: var(--gi-marcador);
    opacity: 1;
}

/* El autocompletado del navegador pinta el campo de amarillo o azul */
#gc-ingreso .fi-input:-webkit-autofill,
#gc-ingreso .fi-input:-webkit-autofill:hover,
#gc-ingreso .fi-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--gi-texto);
    caret-color: var(--gi-texto);
    -webkit-box-shadow: 0 0 0 1000px var(--gi-campo-solido) inset;
    transition: background-color 600000s 0s;
}

#gc-ingreso .fi-input-wrp-suffix {
    padding-inline: 0 .9rem;
    border: 0;
}

#gc-ingreso .fi-input-wrp-suffix .fi-icon-btn {
    color: var(--gi-icono);
}

#gc-ingreso .fi-input-wrp-suffix .fi-icon-btn:hover,
#gc-ingreso .fi-input-wrp-suffix .fi-icon-btn:focus-visible {
    color: var(--gi-azul);
}

#gc-ingreso .fi-fo-field-wrp-error-message {
    padding-inline-start: .6rem;
    font-size: .85rem;
    color: var(--gi-error);
}

/* Enlace "¿Olvidaste tu contraseña?": solo aparece si se activa en el panel */
#gc-ingreso .fi-fo-field-wrp-hint a,
#gc-ingreso .fi-fo-field-wrp-hint .fi-link {
    font-weight: 600;
    color: var(--gi-azul);
}

/* ── Recordarme ──────────────────────────────────────────────── */
#gc-ingreso .fi-fo-field-wrp-label {
    gap: .75rem;
    cursor: pointer;
}

#gc-ingreso .fi-fo-field-wrp-label > span {
    font-size: .95rem;
    font-weight: 500;
    color: var(--gi-texto-medio);
}

#gc-ingreso .fi-checkbox-input {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: .45rem;
    color: var(--gi-azul);
    background-color: var(--gi-campo-solido);
    box-shadow:
        inset 2px 2px 5px var(--gi-sombra-campo),
        inset -2px -2px 5px var(--gi-sombra-clara),
        0 0 0 1px var(--gi-campo-borde);
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
}

#gc-ingreso .fi-checkbox-input:checked {
    background-color: var(--gi-azul);
    box-shadow: 0 6px 14px -4px var(--gi-boton-sombra);
}

#gc-ingreso .fi-checkbox-input:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px var(--gi-anillo),
        inset 2px 2px 5px var(--gi-sombra-campo);
}

/* ── Botón Ingresar ──────────────────────────────────────────── */
.gc-ingreso-boton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.75rem;
    margin-top: .35rem;
    padding: 0 4.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(100deg, var(--gi-azul-claro) 0%, var(--gi-azul) 48%, var(--gi-azul-oscuro) 100%);
    box-shadow:
        0 14px 30px -8px var(--gi-boton-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: transform .3s var(--gi-curva), box-shadow .3s ease, filter .3s ease;
}

/* Reflejo superior, como vidrio */
.gc-ingreso-boton::before {
    content: "";
    position: absolute;
    inset: 1px 1px 50% 1px;
    border-radius: 999px 999px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.gc-ingreso-boton:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 18px 36px -8px var(--gi-boton-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.gc-ingreso-boton:active {
    transform: translateY(0) scale(.985);
}

.gc-ingreso-boton:focus-visible {
    outline: 3px solid var(--gi-anillo);
    outline-offset: 3px;
}

.gc-ingreso-boton:disabled {
    cursor: progress;
    filter: saturate(.85);
}

.gc-ingreso-boton-texto {
    position: relative;
}

.gc-ingreso-boton-flecha {
    position: absolute;
    top: 50%;
    right: .55rem;
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px rgba(15, 30, 90, .18);
    transform: translateY(-50%);
    transition: transform .3s var(--gi-curva), background-color .3s ease;
}

.gc-ingreso-boton:hover .gc-ingreso-boton-flecha {
    background: rgba(255, 255, 255, .26);
    transform: translate(3px, -50%);
}

.gc-ingreso-boton-flecha svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* Livewire lo muestra mientras se verifica; oculto el resto del tiempo */
.gc-ingreso-giro {
    display: none;
    animation: gc-girar .8s linear infinite;
}

@keyframes gc-girar {
    to { transform: rotate(360deg); }
}

/* ── Frase del pie ───────────────────────────────────────────── */
.gc-ingreso-lema {
    margin: 2.6rem 0 0;
    padding-left: .34em;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-align: center;
    text-transform: uppercase;
    color: var(--gi-texto-suave);
}

/* ── Entrada escalonada ──────────────────────────────────────── */
@keyframes gc-aparecer {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.gc-ingreso-logo,
.gc-ingreso-titulo,
.gc-ingreso-subtitulo,
.gc-ingreso-form,
.gc-ingreso-lema {
    animation: gc-aparecer .7s var(--gi-curva) both;
}

.gc-ingreso-titulo { animation-delay: .06s; }
.gc-ingreso-subtitulo { animation-delay: .12s; }
.gc-ingreso-form { animation-delay: .18s; }
.gc-ingreso-lema { animation-delay: .26s; }

/* ── Pantallas bajas (celular con poco alto) ─────────────────── */
@media (max-height: 720px) {
    .gc-ingreso-principal { padding-top: 4.25rem; }
    .gc-ingreso-cabecera { margin-bottom: 1.5rem; }

    .gc-ingreso-logo {
        width: 6.75rem;
        height: 6.75rem;
        margin-bottom: 1.3rem;
        border-radius: 1.95rem;
    }

    .gc-ingreso-monograma { font-size: 3.5rem; }
    .gc-ingreso-titulo { font-size: 2rem; }
    .gc-ingreso-lema { margin-top: 1.9rem; }
}

/* La frase del pie cabe en una línea aun en celulares de 360 px */
@media (max-width: 380px) {
    .gc-ingreso-lema {
        padding-left: .22em;
        font-size: .68rem;
        letter-spacing: .22em;
    }
}

@media (max-width: 359px) {
    .gc-ingreso-principal { padding-inline: 1.1rem; }
    .gc-ingreso-titulo { font-size: 1.9rem; }
    .gc-ingreso-subtitulo { letter-spacing: .22em; padding-left: .22em; }
}

/* ── Escritorio: el contenido flota en un panel de vidrio ────── */
@media (min-width: 640px) {
    .gc-ingreso-tema {
        top: 1.5rem;
        right: 1.5rem;
    }

    .gc-ingreso-contenido {
        max-width: 28rem;
        padding: 2.75rem 2.5rem 2.25rem;
        border: 1px solid var(--gi-panel-borde);
        border-radius: 2.5rem;
        background: var(--gi-panel);
        box-shadow:
            24px 24px 60px var(--gi-sombra-panel),
            -20px -20px 50px var(--gi-sombra-clara);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

/* ── Accesibilidad ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #gc-ingreso *,
    #gc-ingreso *::before,
    #gc-ingreso *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Alto contraste de Windows: sin sombras, los bordes marcan los campos */
@media (forced-colors: active) {
    #gc-ingreso .fi-input-wrp,
    .gc-ingreso-boton,
    .gc-ingreso-tema {
        border: 1px solid CanvasText;
    }

    .gc-ingreso-fondo { display: none; }
}

/* ── Pantallas hermanas del ingreso ──────────────────────────── */
/* Recuperar la contraseña, crear una nueva, confirmar el correo y el
   código de dos pasos: mismo marco y cabecera, título más corto. */
.gc-ingreso-cabecera-compacta .gc-ingreso-titulo {
    font-size: 1.85rem;
}

.gc-ingreso-nota {
    margin: 0 0 1.35rem;
    font-size: .95rem;
    line-height: 1.55;
    text-align: center;
    color: var(--gi-texto-medio);
    animation: gc-aparecer .7s var(--gi-curva) .15s both;
}

.gc-ingreso-nota strong {
    font-weight: 600;
    color: var(--gi-texto);
    overflow-wrap: anywhere;
}

#gc-ingreso .gc-ingreso-nota .fi-link,
.gc-ingreso-volver {
    font-weight: 600;
    color: var(--gi-azul);
}

/* Filament pinta el texto de sus enlaces en un <span> con el color del
   panel (verde en el portal); así toman el azul del ingreso */
#gc-ingreso .fi-link > span {
    color: inherit;
}

/* "Volver a ingresar" y "Salir": enlaces discretos bajo el formulario */
.gc-ingreso-volver {
    display: block;
    width: fit-content;
    margin: 1.5rem auto 0;
    padding: .35rem .75rem;
    border: 0;
    border-radius: .6rem;
    background: none;
    font: inherit;
    font-size: .95rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.gc-ingreso-volver:hover {
    text-decoration: underline;
}

.gc-ingreso-volver:focus-visible {
    outline: 3px solid var(--gi-anillo);
    outline-offset: 2px;
}

@media (max-width: 359px) {
    .gc-ingreso-cabecera-compacta .gc-ingreso-titulo { font-size: 1.6rem; }
}