/* Fondo y tarjeta de MARCA de las páginas de entrada (login, alta en
   autoservicio). Una sola copia: el alta tenía que verse «como parte del login»
   (decisión del dueño, 2026-09-27) y con las reglas escritas en cada plantilla
   acabarían divergiendo.

   No depende de base.css (el login no la carga): el navy va aquí como
   propiedades propias. Es una superficie oscura POR DISEÑO, igual en tema claro
   y oscuro (ui-standard.md, «páginas públicas»); la tarjeta encima es clara. */
:root {
    --fm-navy-1: #0c1626;
    --fm-navy-2: #14263f;
    --fm-navy-3: #0f3460;
    --fm-azul: 66, 153, 225;         /* rgb del acento, para los halos */
    --fm-azul-osc: 44, 82, 130;
    --fm-sombra: 8, 20, 38;
    --fm-marca-1: #1a365d;
    --fm-marca-2: #4299e1;
    --fm-marca-3: #2c5282;
    --fm-entra: cubic-bezier(0, 0, 0.2, 1);
}

.fondo-marca {
    background:
        radial-gradient(90rem 60rem at 72% -12%, rgba(var(--fm-azul), 0.14), transparent 60%),
        radial-gradient(70rem 50rem at 8% 112%, rgba(var(--fm-azul-osc), 0.32), transparent 65%),
        linear-gradient(150deg, var(--fm-navy-1) 0%, var(--fm-navy-2) 48%, var(--fm-navy-3) 100%);
    /* `dvh` con `vh` de respaldo: `100vh` no descuenta el teclado virtual. */
    min-height: 100vh;
    min-height: 100dvh;
    /* En horizontal se recorta (el fondo no genera barra lateral); en vertical
       se desplaza: con `hidden`, en una pantalla baja el botón quedaba fuera. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Viñeta + foco central: enmarca la tarjeta sin bloquear nada de debajo. */
.fondo-marca::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(46rem 32rem at 50% 42%, rgba(var(--fm-azul), 0.10), transparent 70%),
        radial-gradient(125% 125% at 50% 50%, transparent 52%, rgba(5, 12, 24, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Tarjeta de cristal clara sobre el fondo. `margin: auto` y no centrar el
   padre con `align-items: center`: si la tarjeta crece más que la pantalla, el
   centrado le da un desplazamiento superior negativo y lo de arriba (el logo)
   queda cortado sin forma de llegar a ello. */
.tarjeta-marca {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 250, 252, 0.93) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(var(--fm-sombra), 0.25),
        0 12px 28px -8px rgba(var(--fm-sombra), 0.40),
        0 42px 90px -22px rgba(var(--fm-sombra), 0.60),
        0 0 70px rgba(var(--fm-azul), 0.14);
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
    animation: fm-entra 0.7s var(--fm-entra) both;
}

/* Filo superior de acento: firma de marca navy → azul. */
.tarjeta-marca::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fm-marca-1) 0%, var(--fm-marca-2) 55%, var(--fm-marca-3) 100%);
}

@keyframes fm-entra {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .tarjeta-marca { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-marca { animation: none; }
}