/* =============================================================================
   Pantalla de acceso — TodoPollo (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. Todo cuelga de .login-page.

   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.
   ============================================================================= */

.login-page {
    --tp-azul-profundo: #021f4e;
    --tp-azul: #01306f;
    --tp-azul-institucional: #013e8b;
    --tp-azul-claro: #2f6fd0;
    --tp-amarillo: #ffc616;
    --tp-amarillo-titulo: #f2cb22;
    --tp-celeste: #e2edf9;
    --tp-celeste-suave: #eef4fc;
    --tp-blanco: #ffffff;
    --tp-texto: #0d1b34;
    --tp-texto-suave: #5b6b88;
    --tp-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(--tp-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);
    background:
        radial-gradient(120% 90% at 0% 0%, #01306f 0%, rgba(1, 48, 111, 0) 60%),
        linear-gradient(150deg, #021f4e 0%, #01275e 45%, #013163 100%);
    color: var(--tp-blanco);
}

/* 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
      --tp-celeste-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(--tp-celeste-suave) 0,
            rgba(238, 244, 252, 0.72) 26px,
            rgba(238, 244, 252, 0) 86px),
        linear-gradient(95deg,
            rgba(2, 31, 78, 0.9) 34%,
            rgba(2, 31, 78, 0.45) 52%,
            rgba(2, 31, 78, 0) 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(--tp-amarillo);
    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(--tp-amarillo);
}

.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(--tp-amarillo);
    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(--tp-amarillo-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(--tp-amarillo);
    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(--tp-amarillo);
}

.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(--tp-azul-institucional), #0150b4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    color: var(--tp-amarillo);
}

.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(--tp-celeste-suave) 0%, var(--tp-celeste) 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%, rgba(255, 198, 22, 0.28), rgba(255, 198, 22, 0) 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(--tp-amarillo);
    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(--tp-blanco);
    border-radius: 26px;
    box-shadow:
        0 24px 60px rgba(2, 31, 78, 0.16),
        0 4px 14px rgba(2, 31, 78, 0.07);
}

.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(--tp-azul-institucional);
}

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

.login-card__sub {
    margin: 0.35rem 0 1.6rem;
    text-align: center;
    font-size: 0.92rem;
    color: var(--tp-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(--tp-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(--tp-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(--tp-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(--tp-blanco);
    border-color: var(--tp-azul-claro);
    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(--tp-texto-suave);
    cursor: pointer;
}

.login-control__toggle:hover {
    background: #eef2f9;
    color: var(--tp-azul-institucional);
}

.login-control__toggle:focus-visible {
    outline: 2px solid var(--tp-azul-claro);
    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(--tp-texto);
    user-select: none;
}

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

.login-row a {
    color: var(--tp-azul-claro);
    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(--tp-azul-profundo);
    background: var(--tp-amarillo);
    border: none;
    border-radius: 13px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 198, 22, 0.38);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-submit:hover {
    background: #ffd034;
    box-shadow: 0 10px 26px rgba(255, 198, 22, 0.48);
}

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

.login-submit:focus-visible {
    outline: 3px solid var(--tp-azul-institucional);
    outline-offset: 2px;
}

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

/* --- 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(--tp-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(--tp-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(--tp-azul-claro);
    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,
            rgba(2, 31, 78, 0.9) 34%,
            rgba(2, 31, 78, 0.45) 52%,
            rgba(2, 31, 78, 0) 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;
    }
}