/* =============================================================================
   Pantalla de acceso del panel administrativo (plataforma DIADOLOS)
   ---------------------------------------------------------------------------
   Hoja APARTE de site.css a propósito: el panel administrativo está en producción
   y este rediseño no debe poder afectarlo. Casi todo cuelga de .login-page — las
   tres excepciones (body, button, label) están declaradas abajo y explicadas: son
   lo que esta pantalla heredaba de site.css y ahora fija por su cuenta.

   La paleta se muestreó del mockup aprobado, no se eligió a ojo.

   Tema claro/oscuro: esta pantalla usa SIEMPRE la identidad de marca, sin importar
   la preferencia de tema del navegador. Es una portada de marca, como el mockup;
   por eso los colores van explícitos y no con las variables de site.css.
   ============================================================================= */

/* =============================================================================
   LO QUE ESTA PANTALLA HEREDABA DE site.css — fijado acá el 2026-10-03
   -----------------------------------------------------------------------------
   Decía el encabezado de abajo que esta hoja es autónoma. NO LO ERA: el acceso
   aprobado y publicado se veía como se ve porque, además de esta hoja, le llegaban
   tres reglas genéricas de site.css (la hoja del PANEL). Al rediseñar el panel esas
   reglas cambiaron y el acceso cambió con ellas — fondo, alto de los campos, alto
   del botón "Ingresar", tamaño del ojo de la contraseña y del "Recordarme".

   La causa de fondo no era el valor de ninguna regla: era la dependencia. Así que
   los valores con los que esta pantalla ESTÁ APROBADA quedan declarados acá, en su
   propia hoja, y el panel ya no puede moverlos. No hay rediseño: son exactamente
   los valores computados que hoy sirve producción.

   Las tres van con selector de elemento DESNUDO a propósito, igual que las que
   reemplazan: así siguen perdiendo, como perdían, contra cualquier regla de clase
   de esta hoja (.login-submit, .login-control__toggle, .login-remember). Subirles
   la especificidad —por ejemplo a `.login-page button`— rompería el botón
   "Ingresar", que sí define su propio tamaño y peso.

   Esta hoja la carga ÚNICAMENTE _LoginLayout (acceso y recuperación de contraseña),
   así que una regla de elemento desnudo acá ya está acotada a esas dos pantallas.
   ============================================================================= */

/* El panel derecho (.login-access) es transparente: lo que se ve detrás de la
   tarjeta de ingreso es el fondo del <body>. Lo ponía site.css con --color-bg. */
body {
    background: #f7f7f5;
}

/* Reemplaza a `button, .btn, … { font-family; font-size; font-weight; line-height }`
   de site.css. De acá sale el tamaño y el peso del ojo que muestra la contraseña, y
   el interlineado que le da al botón "Ingresar" sus 50px de alto. */
button {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Reemplaza a `label { display; font-size; margin-bottom }` de site.css. De acá
   salen el tamaño del "Recordarme" y el aire que lo separa de la fila. */
label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* Reemplaza al objetivo táctil mínimo que site.css daba a todo `button` dentro de
   `@media (max-width: 640px)`. Mismo corte y mismo valor: de acá sale que el ojo
   que muestra la contraseña mida 44px de alto en el teléfono y no 34. El botón
   "Ingresar" ya mide 50 y no se entera. */
@media (max-width: 640px) {
    button {
        min-height: 44px;
    }
}

/* =============================================================================
   LA PALETA DE ESTA PANTALLA (Bloque 9, completado en el Bloque 11)
   -----------------------------------------------------------------------------
   Hasta el Bloque 8 estos valores estaban escritos acá y punto, con nombres que
   decían el nombre del primer cliente. Resultado: cualquier otro comercio
   entraba a su acceso y veía los colores de otro cliente, aunque el nombre que
   leía fuera el suyo. El Bloque 9 les puso nombres de ROL y los hizo pisables
   desde fuera (--brand-*), pero el valor por omisión seguía siendo el del primer
   cliente: un comercio CON marca propia no recibía override y heredaba igual.

   EL BLOQUE 11 CERRÓ ESO. Los valores por omisión de acá son ahora los de
   DIADOLOS, y la identidad de cada comercio vive en css/tenants/<tema>.css, que
   se carga DESPUÉS de esta hoja. Así:

     - un comercio con tema propio se dibuja con el suyo;
     - un comercio sin tema, y cualquier dominio que no es de nadie, se dibujan
       con el de la plataforma;
     - NINGUNO hereda el de otro cliente, que es el caso que se quería cerrar.

   La paleta aprobada del primer cliente se movió TAL CUAL a su propio archivo:
   lo computado para él es idéntico hasta el último dígito, y hay una prueba que
   lo verifica token por token sobre el HTML renderizado.

   Los nombres no nombran a ningún cliente: dicen qué papel cumple cada color.
   ============================================================================= */
.login-page {
    --marca-profundo: var(--brand-deep, #12141a);
    --marca-base: var(--brand-primary, #1e3fa8);
    --marca-fuerte: var(--brand-strong, #2f5bea);
    --marca-clara: var(--brand-light, #7d9bff);
    --marca-acento: var(--brand-accent, #2f5bea);
    --marca-acento-titulo: var(--brand-accent-title, #7d9bff);
    --marca-fondo: var(--brand-wash, #eef0f5);
    --marca-fondo-suave: var(--brand-wash-soft, #f7f8fa);
    --marca-papel: #ffffff;
    --marca-texto: var(--brand-ink, #12141a);
    --marca-texto-suave: var(--brand-ink-soft, #5a6172);

    /* Pasos intermedios del degradado del panel de marca y del botón, que antes eran
       hexadecimales sueltos dentro de las reglas. */
    /* El mismo --marca-base con alfa 0. No se usa `transparent` porque eso es negro
       transparente, y un degradado que termina en negro transparente puede apagarse
       hacia el gris en vez de hacia el color. */
    --marca-base-nula: var(--brand-primary-none, rgba(30, 63, 168, 0));
    --marca-medio: var(--brand-mid, #141a2a);
    --marca-borde: var(--brand-edge, #161f36);
    --marca-fuerte-alta: var(--brand-strong-high, #4a70ef);
    --marca-acento-alto: var(--brand-accent-high, #4a70ef);
    /* Sombra del botón: el acento con alfa. Va aparte porque una sombra no puede
       derivarse de un hexadecimal sin color-mix, que no está disponible en todos los
       navegadores que este panel soporta. */
    --marca-acento-sombra: var(--brand-accent-shadow, rgba(47, 91, 234, 0.32));
    --marca-acento-sombra-alta: var(--brand-accent-shadow-high, rgba(47, 91, 234, 0.42));
    /* Velo oscuro sobre la foto del comercio, en el tono profundo de la marca. */
    --marca-velo: var(--brand-veil, rgba(18, 20, 26, 0.9));
    --marca-velo-medio: var(--brand-veil-mid, rgba(18, 20, 26, 0.45));
    --marca-velo-nulo: var(--brand-veil-none, rgba(18, 20, 26, 0));
    /* Costura entre los dos paneles: el fondo claro del derecho, con alfa. */
    --marca-costura: var(--brand-seam, rgba(247, 248, 250, 0.72));
    --marca-costura-nula: var(--brand-seam-none, rgba(247, 248, 250, 0));
    /* Texto del botón "Ingresar", que va SOBRE el acento. Por omisión el tono profundo,
       que es lo que estaba escrito y lo que el amarillo aprobado necesita; una marca con
       un acento oscuro lo pisa con un color claro para no perder legibilidad. */
    --marca-acento-texto: var(--brand-accent-ink, #ffffff);
    /* Halo del acento detrás de la curva inferior, y sombra de la tarjeta de ingreso. */
    --marca-halo: var(--brand-halo, rgba(47, 91, 234, 0.26));
    --marca-halo-nulo: var(--brand-halo-none, rgba(47, 91, 234, 0));
    --marca-sombra-tarjeta: var(--brand-card-shadow, rgba(18, 20, 26, 0.16));
    --marca-sombra-tarjeta-suave: var(--brand-card-shadow-soft, rgba(18, 20, 26, 0.07));
    --marca-sombra-google: var(--brand-google-shadow, rgba(18, 20, 26, 0.1));

    --marca-radio: 20px;

    min-height: 100vh;
    display: grid;
    /* Desktop 60% / 40%. El minmax del lado derecho es el piso que necesita la
       tarjeta (424px + los 2×24px de padding): por debajo de ~1180px de ancho el
       40% puro no le alcanzaría y la tarjeta se comprimiría. Ahí la columna se
       queda en 472px y el resto se lo lleva la marca — se pierden unos puntos de
       la proporción antes que legibilidad del formulario. */
    grid-template-columns: minmax(0, 60fr) minmax(472px, 40fr);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--marca-texto);
}

/* =========================================================================
   PANEL IZQUIERDO — marca
   ========================================================================= */

.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    padding: 3.5rem clamp(2rem, 4vw, 4.5rem);
    /* El degradado también sale de la marca (Bloque 9): antes eran cinco hexadecimales
       escritos acá, así que pisar las variables cambiaba los acentos y dejaba el fondo
       del otro comercio. --marca-medio y --marca-borde son los dos pasos intermedios
       del degradado, que tampoco tenían nombre. */
    background:
        radial-gradient(120% 90% at 0% 0%, var(--marca-base) 0%, var(--marca-base-nula) 60%),
        linear-gradient(150deg, var(--marca-profundo) 0%, var(--marca-medio) 45%, var(--marca-borde) 100%);
    color: var(--marca-papel);
}

/* Apilado del panel de marca, de atrás hacia adelante:
     1. el fondo azul (background del propio .login-brand)
     2. la fotografía
     3. la curva amarilla inferior
     4. el contenido
   Se usan z-index POSITIVOS: con valores negativos los hijos quedan por detrás del
   fondo del propio elemento y no se ven (es lo que pasaba con la foto). */
.login-brand > * {
    position: relative;
    z-index: 3;
}

/* Fotografía de producto: abajo a la derecha, fundida hacia el azul con una máscara
   en gradiente. Sin la máscara se vería un rectángulo pegado encima.
   Una sola máscara horizontal, sin mask-composite: el soporte de composite es
   despareja entre navegadores y acá alcanza con el desvanecido lateral. */
.login-brand__photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    max-width: 660px;
    height: 100%;
    object-fit: cover;
    object-position: 52% center;
    z-index: 1;
    opacity: 0.97;
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, 0.5) 22%, #000 48%);
    mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, 0.5) 22%, #000 48%);
}

/* Dos capas, de adelante hacia atrás:

   1. La COSTURA con el panel de acceso. Los últimos ~86px del panel de marca se
      funden hacia el celeste del panel derecho, así el encuentro entre los dos no
      es una línea vertical dura sino una transición corta. Se resuelve entera de
      este lado —y no metiendo azul dentro del panel claro— para no ensuciar el
      fondo sobre el que va la tarjeta. No agrega ningún color: es el mismo
      --marca-fondo-suave con el que arranca el panel derecho.

   2. El velo azul sobre la fotografía: la funde con el fondo del panel y, sobre
      todo, mantiene legible el texto que cae encima de la foto.

   Todo en z-index 2 — arriba de la foto (1) y debajo del contenido (3). */
.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to left,
            var(--marca-fondo-suave) 0,
            var(--marca-costura) 26px,
            var(--marca-costura-nula) 86px),
        linear-gradient(95deg,
            var(--marca-velo) 34%,
            var(--marca-velo-medio) 52%,
            var(--marca-velo-nulo) 72%);
}

/* Curva amarilla inferior, como el mockup: una franja ancha y baja, no un bloque. */
.login-brand::after {
    content: "";
    position: absolute;
    left: -14%;
    right: -14%;
    bottom: -86px;
    height: 140px;
    background: var(--marca-acento);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 2;
}

/* --- Cabecera: mascota + nombre --- */
.brand-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-head__mark {
    width: 72px;
    height: 72px;
    flex: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.brand-head__name {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

.brand-head__name em {
    font-style: normal;
    color: var(--marca-acento);
}

.brand-head__sub {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.brand-head__sub::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--marca-acento);
    position: relative;
}

/* --- Título --- */
.brand-title {
    position: relative;
    margin: 0;
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.brand-title em {
    position: relative;
    font-style: normal;
    color: var(--marca-acento-titulo);
}

/* Subrayado tipo pincelada bajo "más simple". */
.brand-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: -4%;
    bottom: -0.12em;
    height: 0.13em;
    background: var(--marca-acento);
    border-radius: 999px;
    transform: rotate(-0.6deg);
}

/* Chispas amarillas a la derecha del título, como en el mockup. */
.brand-title__spark {
    position: absolute;
    top: -0.35em;
    right: 12%;
    width: 78px;
    height: 70px;
    pointer-events: none;
}

.brand-title__spark span {
    position: absolute;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--marca-acento);
}

.brand-title__spark span:nth-child(1) { width: 40px; top: 6px;  right: 4px;  transform: rotate(-42deg); }
.brand-title__spark span:nth-child(2) { width: 30px; top: 30px; right: 22px; transform: rotate(-42deg); }
.brand-title__spark span:nth-child(3) { width: 22px; top: 50px; right: 40px; transform: rotate(-42deg); }

/* --- Bajada --- */
.brand-lead {
    max-width: 30rem;
    margin: 0;
    font-size: clamp(0.98rem, 1.15vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Bloques de funcionalidades --- */
.brand-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 27rem;
}

.brand-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feat__icon {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--marca-fuerte), var(--marca-fuerte-alta));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    color: var(--marca-acento);
}

.feat__icon svg {
    width: 26px;
    height: 26px;
}

.feat__title {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
}

.feat__desc {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================================
   PANEL DERECHO — acceso
   ========================================================================= */

.login-access {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(160deg, var(--marca-fondo-suave) 0%, var(--marca-fondo) 100%);
}

/* La tarjeta siempre por encima de la decoración. */
.login-access > .login-card {
    z-index: 4;
}

/* Marca de agua gigante: la misma mascota, muy tenue. El desenfoque cumple dos
   funciones: la integra al fondo y disimula que el asset original es de resolución
   limitada — a este tamaño, sin él, se notaría el pixelado. */
.login-access__watermark {
    position: absolute;
    top: 46%;
    left: 62%;
    width: min(155%, 1150px);
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.04;
    filter: blur(4px) grayscale(0.25);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Ondas decorativas azul y amarilla. */
.login-access__wave {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
}

.login-access__wave--blue {
    width: 58vw;
    height: 58vw;
    max-width: 760px;
    max-height: 760px;
    right: -26%;
    top: -34%;
    background: radial-gradient(circle at 35% 35%, rgba(1, 62, 139, 0.16), rgba(1, 62, 139, 0) 68%);
}

.login-access__wave--yellow {
    width: 46vw;
    height: 46vw;
    max-width: 560px;
    max-height: 560px;
    left: -20%;
    bottom: -26%;
    background: radial-gradient(circle at 60% 40%, var(--marca-halo), var(--marca-halo-nulo) 70%);
}

/* Cinta amarilla inferior derecha, como el mockup: asoma desde la esquina, no ocupa
   media pantalla. */
.login-access::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -22%;
    width: 56%;
    height: 42%;
    background: var(--marca-acento);
    border-radius: 50%;
    opacity: 0.85;
    z-index: 2;
    transform: rotate(-8deg);
}

/* Onda azul superior derecha, en el borde entre los dos paneles. */
.login-access::before {
    content: "";
    position: absolute;
    left: -8%;
    top: -14%;
    width: 42%;
    height: 46%;
    background: radial-gradient(circle at 60% 60%, rgba(1, 62, 139, 0.14), rgba(1, 62, 139, 0) 70%);
    border-radius: 50%;
    z-index: 2;
}

/* --- Tarjeta --- */
.login-card {
    position: relative;
    width: 100%;
    max-width: 424px;
    padding: clamp(1.75rem, 3vw, 2.6rem);
    background: var(--marca-papel);
    border-radius: 26px;
    box-shadow:
        0 24px 60px var(--marca-sombra-tarjeta),
        0 4px 14px var(--marca-sombra-tarjeta-suave);
}

.login-card__mark {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 0.85rem;
}

.login-card__brand {
    margin: 0;
    text-align: center;
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--marca-fuerte);
}

.login-card__brand em {
    font-style: normal;
    color: var(--marca-acento);
}

.login-card__sub {
    margin: 0.35rem 0 1.6rem;
    text-align: center;
    font-size: 0.92rem;
    color: var(--marca-texto-suave);
}

/* --- Campos --- */
.login-field {
    margin-bottom: 1.05rem;
}

.login-field > label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--marca-texto);
}

.login-control {
    position: relative;
    display: flex;
    align-items: center;
}

.login-control__icon {
    position: absolute;
    left: 14px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--marca-texto-suave);
    pointer-events: none;
}

.login-control__icon svg {
    width: 18px;
    height: 18px;
}

.login-page input[type="email"],
.login-page input[type="password"],
.login-page input[type="text"] {
    width: 100%;
    padding: 0.85rem 0.95rem 0.85rem 2.9rem;
    font-size: 0.97rem;
    font-family: inherit;
    color: var(--marca-texto);
    background: #f7f9fd;
    border: 1.5px solid #dde5f2;
    border-radius: 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-page input::placeholder {
    color: #9aa8c2;
}

.login-page input:focus {
    background: var(--marca-papel);
    border-color: var(--marca-clara);
    box-shadow: 0 0 0 4px rgba(47, 111, 208, 0.14);
}

/* Botón mostrar/ocultar contraseña. */
.login-control__toggle {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--marca-texto-suave);
    cursor: pointer;
}

.login-control__toggle:hover {
    background: #eef2f9;
    color: var(--marca-fuerte);
}

.login-control__toggle:focus-visible {
    outline: 2px solid var(--marca-clara);
    outline-offset: 1px;
}

.login-control__toggle svg {
    width: 19px;
    height: 19px;
}

.login-control__toggle .icon-hide { display: none; }
.login-control__toggle[aria-pressed="true"] .icon-show { display: none; }
.login-control__toggle[aria-pressed="true"] .icon-hide { display: block; }

/* Deja lugar al botón del ojo para que no tape el texto. */
.login-control--password input {
    padding-right: 3rem;
}

/* --- Fila recordarme / olvidé --- */
.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.2rem 0 1.4rem;
    font-size: 0.88rem;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--marca-texto);
    user-select: none;
}

.login-remember input {
    width: 17px;
    height: 17px;
    accent-color: var(--marca-fuerte);
    cursor: pointer;
}

.login-row a {
    color: var(--marca-clara);
    font-weight: 600;
    text-decoration: none;
}

.login-row a:hover {
    text-decoration: underline;
}

/* --- Botón principal --- */
.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.95rem 1rem;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--marca-acento-texto);
    background: var(--marca-acento);
    border: none;
    border-radius: 13px;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--marca-acento-sombra);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-submit:hover {
    background: var(--marca-acento-alto);
    box-shadow: 0 10px 26px var(--marca-acento-sombra-alta);
}

.login-submit:active {
    transform: translateY(1px);
}

.login-submit:focus-visible {
    outline: 3px solid var(--marca-fuerte);
    outline-offset: 2px;
}

.login-submit svg {
    width: 18px;
    height: 18px;
}

/* --- Separador y acceso con Google -----------------------------------------
   Sólo se dibujan si el ingreso con Google está habilitado (ver Login.cshtml).
   El botón amarillo de arriba sigue siendo la acción principal: éste es
   secundario a propósito — blanco con borde, como cualquier botón alternativo
   de la aplicación. Reutiliza la paleta y los radios que ya existen; no hay
   colores nuevos salvo los cuatro de la marca de Google, que van sólo en el
   ícono. */
.login-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.25rem 0;
    color: var(--marca-texto-suave);
    font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e8eef8;
}

.login-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--marca-texto);
    background: var(--marca-papel);
    border: 1.5px solid #dbe4f0;
    border-radius: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.login-google:hover {
    background: #f7faff;
    border-color: var(--marca-clara);
    box-shadow: 0 4px 14px var(--marca-sombra-google);
}

.login-google:active {
    transform: translateY(1px);
}

.login-google:focus-visible {
    outline: 3px solid var(--marca-fuerte);
    outline-offset: 2px;
}

.login-google__mark {
    width: 18px;
    height: 18px;
    flex: none;
}

/* --- Pie --- */
.login-card__foot {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid #e8eef8;
    text-align: center;
    font-size: 0.82rem;
    color: var(--marca-texto-suave);
}

/* --- Mensajes --- */
.login-alert {
    margin-bottom: 1.1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.login-alert--error {
    color: #8a1c1c;
    background: #fdecec;
    border: 1px solid #f6cccc;
}

.login-alert--ok {
    color: #0f5132;
    background: #e7f5ec;
    border: 1px solid #c3e6d0;
}

/* Texto auxiliar de la tarjeta (lo usa la recuperación de contraseña). */
.login-card__hint {
    margin: -0.4rem 0 1.3rem;
    text-align: center;
    font-size: 0.89rem;
    line-height: 1.5;
    color: var(--marca-texto-suave);
}

.login-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--marca-clara);
    text-decoration: none;
}

.login-back:hover {
    text-decoration: underline;
}

/* =========================================================================
   RESPONSIVE
   En pantallas chicas NO se fuerza el 50/50: el panel de marca pasa a ser una
   cabecera compacta y la tarjeta ocupa el ancho. Lo importante es poder entrar.
   ========================================================================= */

@media (max-width: 1080px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    /* Apilado no hay costura vertical que suavizar: los paneles se tocan por el
       borde de abajo, donde ya está la curva amarilla. Se saca la capa de costura
       y queda sólo el velo azul sobre la foto. */
    .login-brand::before {
        background: linear-gradient(95deg,
            var(--marca-velo) 34%,
            var(--marca-velo-medio) 52%,
            var(--marca-velo-nulo) 72%);
    }

    .login-brand {
        padding: 2.5rem 2rem 3.25rem;
        gap: 1.4rem;
    }

    .brand-title {
        font-size: clamp(2.1rem, 6vw, 3rem);
    }

    /* La foto pasa a ser un fondo tenue: en vertical no hay lugar para que
       conviva con el texto sin estorbarlo. */
    .login-brand__photo {
        width: 62%;
        height: 100%;
        opacity: 0.5;
    }

    .login-brand::after {
        bottom: -70px;
        height: 100px;
    }

    .login-access {
        padding: 2.75rem 1.25rem 3.25rem;
    }

    .login-access__watermark {
        width: 130%;
        opacity: 0.045;
    }
}

@media (max-width: 720px) {
    /* En teléfono el formulario va PRIMERO: apilado, el panel de marca mide casi una
       pantalla entera y dejaría el acceso debajo del pliegue. El orden visual cambia,
       el del DOM no — quien navega con teclado o lector de pantalla sigue leyendo
       primero la marca y después el formulario. */
    .login-access {
        order: -1;
    }

    .login-brand {
        padding: 2rem 1.35rem 2.75rem;
        gap: 1.15rem;
    }

    .brand-head__mark {
        width: 56px;
        height: 56px;
    }

    .brand-head__name {
        font-size: 1.9rem;
    }

    .brand-title {
        font-size: clamp(1.9rem, 8.5vw, 2.5rem);
    }

    /* Las chispas quedarían encima del texto con este ancho. */
    .brand-title__spark {
        display: none;
    }

    .brand-lead {
        font-size: 0.95rem;
    }

    .feat__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .feat__icon svg {
        width: 22px;
        height: 22px;
    }

    .feat__title { font-size: 0.95rem; }
    .feat__desc  { font-size: 0.84rem; }

    .login-access {
        padding: 2rem 1rem 2.5rem;
    }

    .login-card {
        padding: 1.6rem 1.25rem;
        border-radius: 22px;
    }

    .login-card__mark {
        width: 78px;
        height: 78px;
    }

    .login-card__brand {
        font-size: 1.7rem;
    }

    .login-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

/* Pantallas muy angostas: se recorta lo accesorio, nunca el formulario. */
@media (max-width: 400px) {
    .brand-features li:nth-child(n + 3) {
        display: none;
    }
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .login-submit {
        transition: none;
    }
}