/* =============================================================================
   Login - rediseño 2026
   -----------------------------------------------------------------------------
   Solo la usa resources/views/auth/login.blade.php, enlazada desde
   @section('section-css'). Al editar, subir el ?v= del <link> en la vista.

   Contexto de carga (layouts/simpleNew.blade.php):
       bootstrap.min.css -> proto-style.css -> <style> del layout -> ESTA hoja
   Al ser la última del documento, gana a igualdad de especificidad. Por eso
   puede sobrescribir el body{background-image} del layout sin tocarlo.

   El bundle es Bootstrap 3.1.1 + un fragmento de BS4 pegado al final. No hay
   .d-flex ni .justify-content-*, y el grid se queda en 1200px. Todo el layout
   va con clases propias login-*, sin usar el grid de Bootstrap.
   ============================================================================= */

:root {
    /* marca */
    --login-navy: #0f172a;
    --login-navy-soft: #1e293b;
    --login-blue: #1d4ed8;
    --login-blue-hover: #1a43ba;
    --login-blue-active: #163a9e;
    --login-blue-light: #3b82f6;
    --login-blue-tint: #eff4ff;
    --login-teal: #14b8a6;

    /* neutros */
    --login-grey: #64748b;
    --login-grey-soft: #94a3b8;
    --login-border: #e2e8f0;
    --login-field-bg: #f8fafc;
    --login-page-bg: #f6f8fd;
    --login-white: #ffffff;

    /* estado */
    --login-danger: #b91c1c;
    --login-danger-bg: #fef2f2;
    --login-danger-border: #fecaca;

    /* forma */
    --login-radius-card: 24px;
    --login-radius-ctrl: 10px;
    --login-radius-tile: 12px;
    --login-shadow-card: 0 24px 64px -24px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .04);
    --login-shadow-tile: 0 1px 2px rgba(15, 23, 42, .04);

    --login-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   Override del layout: simpleNew pinta /img/background.png sobre #e9ebec.
   -------------------------------------------------------------------------- */
body {
    background-image: none;
    background-color: var(--login-page-bg);
    color: var(--login-navy);
}

/* =============================================================================
   1. Página
   ============================================================================= */

.login-page {
    position: relative;
    min-height: 100vh;
    /* el padding inferior libera el footer position:fixed de mainLayout (40px) */
    padding: 24px 24px 72px;
    font-family: var(--login-font);
    overflow-x: hidden;

    /* Dos velos de color muy tenues, uno azul abajo a la izquierda y otro turquesa
       abajo a la derecha, para que el fondo no sea un plano liso. Van como capas
       del background de la propia página, no como elementos: así no hay ningún
       riesgo de que tapen contenido ni de que intercepten clics. Los dos
       pseudoelementos de .login-page ya están ocupados por la rejilla y el arco.

       Alfas por debajo de .05 a propósito: sobre un fondo #f6f8fd cualquier valor
       más alto deja de leerse como fondo y compite con la tarjeta. */
    background-color: var(--login-page-bg);
    background-image:
        radial-gradient(ellipse 45% 40% at 6% 92%, rgba(29, 78, 216, .05), transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 82%, rgba(20, 184, 166, .035), transparent 70%);
}

@supports (min-height: 100dvh) {
    .login-page {
        /* 100vh salta en Safari/Chrome móvil al colapsar el chrome del navegador */
        min-height: 100dvh;
    }
}

/* Decoración: rejilla de puntos + arco. Pura CSS, sin assets.
   pointer-events:none es obligatorio o se comen los clicks. */
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--login-border) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 15%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 60% at 20% 15%, #000 0%, transparent 70%);
}

.login-page::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: -14vw;
    top: -10vh;
    width: 52vw;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(29, 78, 216, .07);
    box-shadow: 0 0 0 90px rgba(29, 78, 216, .025) inset;
}

.login-page__inner {
    position: relative;
    /* por encima de la decoración */
    z-index: 1;
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* =============================================================================
   2. Marca recortada (D4)
   -----------------------------------------------------------------------------
   logo-ubiquos-nuevo.png (7012x5604) lleva la palabra UBIQUOS incrustada en el
   ~22% inferior. Se recorta con una caja de aspecto fijo + overflow:hidden:
   la imagen entra al 100% de ancho, sobresale por abajo y se clipa.

       ratio = ancho / (alto * porcion_marca) = 1.2513 / 0.78 = 1.6

   Al disponer de un SVG solo-marca, basta cambiar el @case('brand-mark') del
   partial resources/views/auth/partials/login-icon.blade.php.
   ============================================================================= */

.login-brand {
    --login-brand-ratio: 1.6;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--login-brand-ratio);
    line-height: 0;
}

.login-brand img {
    display: block;
    width: 100%;
    height: auto;
}

/* =============================================================================
   3. Columna izquierda: hero
   ============================================================================= */

/* position:relative para colgar de aquí los dos detalles de fondo del hero. */
.login-hero {
    position: relative;
    min-width: 0;
}

/* Decoración del hero: un anillo abajo a la izquierda y un racimo de puntos
   arriba a la derecha. Pura CSS, sin assets, como el arco de .login-page.

   z-index:-1 los deja detrás de TODO el contenido del hero, imagen incluida, sin
   depender del orden del DOM. Van dentro de .login-page__inner, que es contexto
   de apilamiento (position:relative + z-index:1), así que el -1 no los manda
   detrás del fondo de la página: se quedan justo entre el fondo y el contenido.

   Los desplazamientos negativos se quedan cortos a propósito. .login-page recorta
   en horizontal (overflow-x:hidden) pero NO en vertical, y un absolute que
   asomara por abajo sumaría alto al documento y sacaría scroll. */
.login-hero::before,
.login-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.login-hero::before {
    left: -12%;
    bottom: -6%;
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(29, 78, 216, .06);
    box-shadow: 0 0 0 40px rgba(29, 78, 216, .018) inset;
}

/* El racimo repite la trama de puntos de .login-page::before, algo más apretada
   (20px en vez de 22) y más tenue. */
.login-hero::after {
    right: 3%;
    top: 6%;
    width: 124px;
    height: 100px;
    background-image: radial-gradient(var(--login-grey-soft) 1.4px, transparent 1.4px);
    background-size: 20px 20px;
    opacity: .3;
}

.login-hero__lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-hero__logo {
    display: block;
    flex: 0 0 auto;
    width: 116px;
}

.login-hero__logo .login-brand {
    width: 100%;
}

.login-hero__wordmark {
    display: block;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: .01em;
    color: var(--login-navy);
}

.login-hero__wordmark-1,
.login-hero__wordmark-2 {
    display: block;
}

/* Regla azul bajo el lockup: dos tramos, azul sólido + azul claro */
.login-hero__rule {
    display: block;
    width: 88px;
    height: 4px;
    margin: 14px 0 20px;
    border-radius: 2px;
    background: linear-gradient(to right,
            var(--login-blue) 0 55%,
            var(--login-blue-light) 55% 100%);
}

.login-hero__title {
    /* bootstrap pone margin-top:20px a h1-h3 */
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--login-navy);
}

.login-hero__title--accent {
    color: var(--login-blue);
}

.login-hero__subtitle {
    margin: 0 0 26px;
    max-width: 34em;
    font-size: 16px;
    line-height: 1.6;
    color: var(--login-grey);
}

/* -------- Features -------- */

.login-features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.login-feature + .login-feature {
    margin-top: 20px;
}

.login-feature__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    color: var(--login-blue);
    background: var(--login-white);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius-tile);
    box-shadow: var(--login-shadow-tile);
}

.login-feature__tile .login-icon {
    width: 30px;
    height: 30px;
}

/* El margen superior de 1px alinea ópticamente la altura de mayúscula del
   título con el borde del cuadro del icono. */
.login-feature__title {
    margin: 1px 0 2px;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.2;
    color: var(--login-navy-soft);
}

.login-feature__text {
    margin: 0;
    max-width: 30em;
    font-size: 14px;
    line-height: 1.35;
    text-align: justify;
    color: var(--login-grey);
}

/* -------- Render de producto -------- */

.login-hero__mockup {
    max-width: 100%;
    height: auto;

    /* Sin sombras. El fondo pasó a ser una ilustración plana (mapamundi con
       iconos sobre transparente), no un portátil/móvil apoyados en una mesa: los
       charcos de contacto y la drop-shadow de silueta que llevaba la imagen
       anterior ya no representan nada y solo ensuciarían el dibujo. La
       legibilidad del texto que la imagen solapa se resuelve con el velo de
       .login-hero__col::before, no aquí. */
}

/* -------- Categorías -------- */

.login-categories__label {
    margin: 28px 0 16px;
    font-weight: 700;
    font-size: 14px;
    color: var(--login-blue);
}

/* Los 5 chips tienen que entrar en UNA fila dentro de la columna del hero. Si se
   parten en dos filas el hero crece ~100px y la vista deja de caber en pantallas
   de 768px de alto.

   Con gap de 18px: 5 x 56 + 4 x 18 = 352, y la columna mide 380px como mínimo
   (ver el minmax de .login-hero__body), así que sobran 28px. Al subir este gap
   hay que comprobar esa cuenta. */
.login-categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 56px;
}

.login-category__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--login-blue);
    background: var(--login-white);
    border: 1px solid var(--login-border);
    border-radius: 50%;
    box-shadow: var(--login-shadow-tile);
}

.login-category__chip .login-icon {
    width: 28px;
    height: 28px;
}

.login-category__caption {
    font-size: 12.5px;
    line-height: 1.3;
    text-align: center;
    color: var(--login-grey);
}

/* =============================================================================
   4. Columna derecha: card
   ============================================================================= */

.login-panel {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    /* El card por encima del render del hero. Hace falta explícitamente: la
       imagen es un elemento posicionado con z-index, y esos pintan por encima
       de las cajas sin posicionar aunque vayan antes en el DOM. */
    position: relative;
    z-index: 2;
}

.login-card {
    padding: 28px 36px;
    background: var(--login-white);
    border-radius: var(--login-radius-card);
    box-shadow: var(--login-shadow-card);
}

.login-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 14px;
    background: var(--login-blue-tint);
    border-radius: 50%;
}

.login-card__badge .login-brand {
    width: 48px;
}

.login-card__title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.25;
    text-align: center;
    color: var(--login-navy);
}

.login-card__subtitle {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--login-grey);
}

/* -------- Alerta de errores -------- */

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--login-danger);
    background: var(--login-danger-bg);
    border: 1px solid var(--login-danger-border);
    border-radius: var(--login-radius-ctrl);
}

.login-alert__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.login-alert__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-alert__list li + li {
    margin-top: 4px;
}

/* -------- Campos -------- */

.login-field {
    margin-bottom: 15px;
}

/* margin:0 gana a proto-style.css -> label{margin-top:10px} */
.login-field__label {
    display: block;
    margin: 0 0 7px;
    font-weight: 700;
    font-size: 13px;
    color: var(--login-navy-soft);
}

.login-field__control {
    position: relative;
    display: block;
}

.login-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px 0 44px;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 48px;
    color: var(--login-navy);
    background: var(--login-field-bg);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius-ctrl);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* el campo de contraseña deja hueco al botón del ojo */
#password.login-input {
    padding-right: 48px;
}

/* Edge pinta su propio botón de revelar (::-ms-reveal) sobre los input de tipo
   password: sin esto se ven DOS ojos, y además el nativo no queda sincronizado
   con aria-pressed ni con el icono de eye-off. Reglas SEPARADAS a propósito:
   una lista unida por comas la descartaría entera el navegador que no entienda
   uno de los pseudoelementos. */
#password.login-input::-ms-reveal {
    display: none;
}

#password.login-input::-ms-clear {
    display: none;
}

.login-input:hover {
    border-color: #cbd5e1;
}

.login-input:focus {
    outline: none;
    background: var(--login-white);
    border-color: var(--login-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .14);
}

.login-input--invalid {
    border-color: var(--login-danger-border);
    background: var(--login-danger-bg);
}

/* proto-style.css (lineas 60-76) pone los placeholders en blanco, invisibles
   sobre estos campos casi blancos. Cinco reglas SEPARADAS a propósito: una
   lista unida por comas la descarta ENTERA cualquier navegador que no entienda
   uno de los miembros. */
.login-input::placeholder {
    color: var(--login-grey-soft);
    opacity: 1;
}

.login-input::-webkit-input-placeholder {
    color: var(--login-grey-soft);
}

.login-input::-moz-placeholder {
    color: var(--login-grey-soft);
    opacity: 1;
}

.login-input:-moz-placeholder {
    color: var(--login-grey-soft);
    opacity: 1;
}

.login-input:-ms-input-placeholder {
    color: var(--login-grey-soft);
}

/* El icono va DESPUÉS del input en el DOM y se reposiciona encima. Eso permite
   colorearlo en :focus con el selector de hermano general, sin JS. */
.login-input__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--login-grey-soft);
    pointer-events: none;
    transition: color .15s;
}

.login-input:focus ~ .login-input__icon {
    color: var(--login-blue);
}

.login-input--invalid ~ .login-input__icon {
    color: var(--login-danger);
}

.login-input__action {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--login-grey-soft);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.login-input__action:hover {
    color: var(--login-navy);
    background: rgba(15, 23, 42, .05);
}

.login-input__action:focus-visible {
    outline: 2px solid var(--login-blue);
    outline-offset: 2px;
}

.login-input__action .login-icon {
    width: 20px;
    height: 20px;
}

/* Los dos ojos se renderizan siempre; CSS muestra uno.

   Los tres selectores van descendiendo de .login-input__action a propósito: así
   suman dos clases y ganan a .login-icon{display:block} de la sección 5, que
   está MÁS ABAJO en la hoja. Con una sola clase empataban en especificidad,
   ganaba .login-icon por orden y se veían los dos ojos a la vez. */
.login-input__action .login-icon--eye-off,
.login-input__action.is-revealed .login-icon--eye {
    display: none;
}

.login-input__action.is-revealed .login-icon--eye-off {
    display: block;
}

/* -------- Opciones y enlace -------- */

.login-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 16px;
}

.login-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--login-blue);
    text-decoration: none;
}

/* proto-style.css -> a:hover,a:focus{color:#626bae} */
.login-link:hover,
.login-link:focus {
    color: var(--login-blue-hover);
    text-decoration: underline;
}

/* -------- Botón -------- */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 20px;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background: var(--login-blue);
    border: 0;
    border-radius: var(--login-radius-ctrl);
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(29, 78, 216, .55);
    transition: background-color .15s, transform .06s, box-shadow .15s;
}

.login-submit:hover {
    background: var(--login-blue-hover);
}

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

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

.login-submit .login-icon {
    width: 21px;
    height: 21px;
}

/* -------- reCAPTCHA -------- */

.login-captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 18px 0 4px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: var(--login-radius-ctrl);
    transition: border-color .15s;
}

.login-captcha--error {
    border-color: var(--login-danger);
}

/* El borde rojo solo es señal de color: inaccesible por sí mismo */
.login-captcha__error {
    display: none;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--login-danger);
}

.login-captcha--error .login-captcha__error {
    display: block;
}

/* -------- Divisor con punto central -------- */

.login-rule {
    position: relative;
    display: block;
    height: 1px;
    margin: 20px 0;
    background: var(--login-border);
}

.login-rule span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--login-white);
    border: 1px solid var(--login-border);
}

/* -------- Panel "¿Necesitas acceso?" -------- */

.login-info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    background: var(--login-blue-tint);
    border-radius: var(--login-radius-tile);
}

/* Sin acotar el ancho, el bloque de texto ocupa todo el hueco y
   justify-content:center no tiene nada que repartir. */
.login-info__body {
    max-width: 24em;
    text-align: justify;
}

.login-info__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--login-blue);
    background: var(--login-white);
    border-radius: 50%;
}

.login-info__tile .login-icon {
    width: 23px;
    height: 23px;
}

.login-info__title {
    margin: 2px 0 4px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--login-navy-soft);
}

.login-info__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--login-grey);
}

/* El disparador del modal. Es un <button> por accesibilidad, así que hay que
   deshacerle el aspecto de botón del navegador para que siga leyéndose como
   parte de la frase, igual que el <strong> al que sustituye. */
.login-info__link {
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--login-blue);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.login-info__link:hover {
    color: var(--login-blue-hover);
}

.login-info__link:focus-visible {
    outline: 2px solid var(--login-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* -------- Nota de conexión segura -------- */

/* Las columnas deben ser auto/auto: con un track 1fr el texto se queda con todo
   el ancho sobrante y justify-content:center no centra nada. */
.login-secure {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 10px;
    justify-content: center;
    margin: 18px 0 0;
}

.login-secure__icon {
    grid-row: 1 / span 2;
    width: 25px;
    height: 25px;
    color: var(--login-grey-soft);
}

.login-secure__title,
.login-secure__text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: justify;
    color: var(--login-grey);
}

.login-secure__text {
    color: var(--login-grey-soft);
}

/* =============================================================================
   5. Iconos
   ============================================================================= */

.login-icon {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

/* =============================================================================
   6. Footer (D5)
   -----------------------------------------------------------------------------
   mainLayout emite <footer class="row text-right"> con dos <span>: el aviso de
   copyright y la versión. Solo se re-estiliza; los textos siguen viniendo de
   NOMBRE_CLIENTE y Helpers::getVersion(). Al ser esta hoja page-scoped (solo la
   enlaza login.blade.php) no afecta al resto de vistas de simpleNew.

   Corrige además un bug latente: footer.row hereda .row{margin:0 -15px} de
   BS3, así que hoy el footer fijo cuelga 15px fuera de pantalla.
   ============================================================================= */

footer.row {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0 32px;
    font-size: 12px;
    color: var(--login-grey-soft);
    text-align: left;
    /* Regla de separación sobre el pie, como en el diseño. El footer es
       position:fixed con fondo transparente (estilo en línea de simpleNew), así
       que basta el borde: no hace falta reservar más alto porque .login-page ya
       deja 72px de padding inferior para este pie de 40px. */
    border-top: 1px solid var(--login-border);
}

/* mainLayout deja nodos de texto en blanco entre los dos <span> y Chrome los
   convierte en elementos flex anónimos. Con justify-content:space-between el
   hueco libre se reparte en TRES tramos y los textos acaban hacia el centro en
   vez de en las esquinas. Un margen automático absorbe todo el hueco de una
   vez, así que el resultado no depende de cuántos hijos fantasma haya. */
footer.row > span:first-of-type {
    margin-right: auto;
}

footer.row a {
    color: var(--login-grey-soft);
}

footer.row a:hover,
footer.row a:focus {
    color: var(--login-grey);
}

/* =============================================================================
   7. Media queries
   ============================================================================= */

/* -------- >= 992px: dos columnas -------- */
@media (min-width: 992px) {
    /* row-reverse: el card va PRIMERO en el DOM (el tabulador cae en las
       credenciales de inmediato) y se pinta a la derecha. En móvil la
       dirección column lo deja arriba gratis, sin hacks de order. */
    .login-page__inner {
        flex-direction: row-reverse;
        align-items: center;
        /* 20px en vez de 40: en el diseño las dos columnas quedan casi pegadas y
           el render del hero llega hasta el borde del card. */
        gap: 20px;
        min-height: calc(100vh - 96px);
        /* 1560 dejaba 180px de hueco muerto a cada lado en 1920. El diseño
           aprovecha ~94% del ancho, que es lo que da este tope. */
        max-width: 1720px;
    }

    .login-hero {
        flex: 1 1 56%;
    }

    /* Tope continuo en vez de escalonado por breakpoint: así el card crece a la
       par que la pantalla y la imagen del hero no da saltos al cruzar 1440. */
    .login-panel {
        flex: 0 0 44%;
        /* Ancho del card. El 37vw manda hasta ~1650px de pantalla y los 610px por
           encima. Se estrechó desde min(660px, 40vw). */
        max-width: min(610px, 37vw);
        margin: 0;
        /* El card a TODA la altura de la fila, como en el diseño, en vez de
           centrado a su alto natural. El resto de .login-page__inner sigue con
           align-items:center para que el hero no se estire con él. */
        align-self: stretch;
        display: flex;
        /* Centra el card en vertical cuando toca su tope de alto. NO se puede
           hacer con `margin: auto 0` en el card: por especificación, un margen
           auto en el eje transversal anula el estirado, y el card se quedaba en
           su alto natural (662px de 1080) en vez de crecer. */
        align-items: center;
    }

    .login-card {
        /* flex:1 reparte el ANCHO. El alto es un MÍNIMO, no un alto fijo: con
           height+max-height, en cuanto aparecían el mensaje de error o el
           captcha el contenido no cabía y se salía del fondo blanco del card.
           Así estira hasta llenar la columna pero sigue pudiendo crecer.

           El tope de 900px es porque el contenido mide ~630px: por encima de ahí
           el hueco interno crecía sin freno (en 1080 salían 147px sobre el badge
           y 119 entre el botón y la regla) y el card quedaba vacío. */
        flex: 1;
        min-height: min(100%, 900px);
        display: flex;
        flex-direction: column;
    }

    /* Al estirarse el card sobra alto. Dos márgenes automáticos lo reparten a
       partes iguales -- en flex, varios auto se llevan la misma tajada del hueco
       libre: la mitad sobre el badge y la mitad entre el botón de acceder y la
       regla, que es como se ve en el diseño. Con un solo auto los ~142px de
       holgura caían enteros en el mismo sitio y el card quedaba descuadrado.

       El auto vertical no interfiere con el `margin: 0 auto` horizontal del
       badge, que es lo que lo centra. */
    .login-card > .login-card__badge,
    .login-card > .login-rule {
        margin-top: auto;
    }

    /* -------- Hero: bloques más juntos --------
       Solo espaciado, sin tocar tamaños de letra. Va aquí y no en los valores
       base para no alterar el apilado de móvil. */
    .login-hero__rule {
        margin: 12px 0 16px;
    }

    .login-hero__subtitle {
        margin-bottom: 20px;
    }

    .login-feature + .login-feature {
        margin-top: 16px;
    }

    .login-categories__label {
        margin: 20px 0 12px;
    }
}

/* -------- >= 1200px: features y render en dos columnas, con solape -------- */
@media (min-width: 1200px) {
    /* padding lateral más ajustado para dar ancho a las dos columnas */
    .login-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* El mínimo de la primera columna evita que los textos de las features se
       partan en 3 líneas cuando el card se lleva su ancho máximo. Sube de 340 a
       380px porque los 5 chips de categorías necesitan 352px para no partirse en
       dos filas con el gap de 18px. */
    .login-hero__body {
        display: grid;
        grid-template-columns: minmax(380px, .84fr) minmax(0, 1.16fr);
        align-items: center;
        column-gap: 20px;
    }

    /* grid-row:1 explícito en las DOS celdas para que texto e imagen compartan la
       misma fila (columna 1 el texto, columna 2 la imagen) y queden lado a lado. */
    .login-hero__col {
        grid-column: 1;
        grid-row: 1;
    }

    /* El mapa ocupa SU PROPIA columna (la 2), no se cuela por debajo del texto:
       es la rejilla la que garantiza que nunca se solapen, sin depender de z-index
       ni de velos. Se ve entero al lado del texto.

       width:100% -> llena el ancho de su columna; height:auto conserva el ratio
       1536x1024. min-width:0 anula la contribución de min-content del PNG (1536px
       intrínsecos), que si no ensancharía la columna y estrujaría el texto.

       max-width como tope para que en pantallas muy anchas (donde la columna 2
       crece) no se desmadre, y justify-self:center lo centra en su columna cuando
       toca ese tope. pointer-events:none: la imagen es decorativa, que no capte
       clics. */
    .login-hero__mockup {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        min-width: 0;
        width: 100%;
        max-width: 640px;
        height: auto;
        pointer-events: none;
    }
}

/* -------- Pantallas anchas pero bajas: modo compacto --------
   Un portátil de 1366x768 deja un viewport real de ~650px una vez descontado el
   chrome del navegador. En vez de apretar el diseño para todos, se aprieta solo
   donde falta alto. --------------------------------------------------------- */
@media (min-width: 992px) and (max-height: 800px) {
    .login-hero__logo {
        width: 98px;
    }

    .login-hero__wordmark {
        font-size: 26px;
    }

    .login-hero__rule {
        margin: 10px 0 14px;
    }

    .login-hero__title {
        margin-bottom: 10px;
        font-size: 30px;
    }

    .login-hero__subtitle {
        margin-bottom: 18px;
        font-size: 15px;
    }

    .login-feature + .login-feature {
        margin-top: 14px;
    }

    .login-categories__label {
        margin: 18px 0 12px;
    }

    .login-card {
        padding: 22px 32px;
    }

    .login-card__badge {
        width: 64px;
        height: 64px;
        margin-bottom: 10px;
    }

    .login-card__badge .login-brand {
        width: 40px;
    }

    .login-card__title {
        font-size: 23px;
    }

    .login-card__subtitle {
        margin-bottom: 14px;
    }

    .login-field {
        margin-bottom: 12px;
    }

    .login-options {
        margin-bottom: 14px;
    }

    .login-rule {
        margin: 14px 0;
    }

    .login-info {
        padding: 14px;
    }

    .login-secure {
        margin-top: 12px;
    }
}

/* -------- < 1200px: el render baja debajo de las features -------- */
@media (max-width: 1199px) {
    .login-hero__title {
        font-size: 34px;
    }

    /* Sin la rejilla de dos columnas la imagen caería debajo de las features y
       dispararía el alto del hero a ~1000px. Se reserva para >=1200px, que es
       donde tiene una columna propia. Sigue siendo loading=lazy, así que el
       navegador no la descarga estando en display:none. */
    .login-hero__mockup {
        display: none;
    }
}

/* -------- < 992px: apila, card arriba -------- */
@media (max-width: 991px) {
    .login-page {
        padding-top: 32px;
    }

    .login-page::after {
        display: none;
    }

    .login-page::before {
        opacity: .35;
    }

    .login-hero {
        text-align: center;
    }

    .login-hero__lockup {
        justify-content: center;
    }

    .login-hero__rule {
        margin-left: auto;
        margin-right: auto;
    }

    .login-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    /* icono + texto se lee mal centrado: las features siguen alineadas */
    .login-features {
        max-width: 460px;
        margin: 0 auto;
        text-align: left;
    }

    .login-categories__list {
        justify-content: center;
    }
}

/* -------- < 576px -------- */
@media (max-width: 575px) {
    .login-page {
        padding: 24px 16px 104px;
    }

    .login-card {
        padding: 24px;
        border-radius: 16px;
    }

    .login-card__title {
        font-size: 22px;
    }

    .login-hero__title {
        font-size: 28px;
    }

    .login-hero__wordmark {
        font-size: 25px;
    }

    .login-hero__logo {
        width: 96px;
    }

    /* 5 chips -> 3 + 2 */
    .login-categories__list {
        gap: 16px 12px;
    }

    .login-category,
    .login-category__chip {
        width: 48px;
    }

    .login-category {
        flex: 0 0 calc(33.333% - 8px);
    }

    .login-category__chip {
        height: 48px;
    }

    .login-category__chip .login-icon {
        width: 24px;
        height: 24px;
    }

    /* el footer fijo pasa a dos líneas: de ahí el padding-bottom de 104px */
    footer.row {
        flex-direction: column;
        justify-content: center;
        line-height: 20px;
        padding: 8px 16px;
        text-align: center;
    }

    /* apilado ya no hay esquinas que ocupar */
    footer.row > span:first-of-type {
        margin-right: 0;
    }
}

/* -------- < 400px: el iframe del captcha mide 304px fijos -------- */
@media (max-width: 400px) {
    .login-captcha {
        transform: scale(.88);
        transform-origin: center top;
    }
}

/* -------- Preferencias del usuario -------- */
@media (prefers-reduced-motion: reduce) {
    .login-input,
    .login-input__icon,
    .login-input__action,
    .login-submit,
    .login-captcha {
        transition: none;
    }

    .login-submit:active {
        transform: none;
    }
}

/* =============================================================================
   8. Modal "Solicitar acceso"
   -----------------------------------------------------------------------------
   Modal propio, sin Bootstrap: simpleNew carga el CSS de Bootstrap 3.1.1 pero
   NO su JS, así que .modal('show') y data-toggle no funcionan en esta pantalla.
   Sigue el patrón de .firma-modal-bg de auth/profile.blade.php.

   El markup vive FUERA de <main>, ver el comentario de la vista: dentro de
   .login-page__inner el z-index quedaría encapsulado en su contexto de
   apilamiento.

   Los campos reutilizan .login-field / .login-input / .login-input__icon, así
   que aquí solo va lo propio del modal.
   ============================================================================= */

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* display:none, y el HTML lleva además el atributo hidden: si esta hoja no
       cargara, el atributo evita que el formulario se vuelque en la página. */
    display: none;
    padding: 24px;
    /* overflow-y para que en pantallas bajas se pueda llegar al final del panel */
    overflow-y: auto;
    background: rgba(15, 23, 42, .45);
}

.login-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    background: var(--login-white);
    border-radius: var(--login-radius-card);
    box-shadow: var(--login-shadow-card);
}

.login-modal__close {
    position: absolute;
    right: 14px;
    top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--login-grey-soft);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.login-modal__close:hover {
    color: var(--login-navy);
    background: rgba(15, 23, 42, .05);
}

.login-modal__close:focus-visible {
    outline: 2px solid var(--login-blue);
    outline-offset: 2px;
}

.login-modal__title {
    /* margin:0 gana a bootstrap, que pone margin-top:20px a h1-h3 */
    margin: 0 0 6px;
    padding-right: 36px;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    color: var(--login-navy);
}

.login-modal__text {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--login-grey);
}

.login-modal__error {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--login-danger);
}

/* :empty evita que un <p> vacío reserve alto bajo cada campo */
.login-modal__error:empty {
    display: none;
}

.login-modal__status {
    margin: 16px 0 0;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    border-radius: var(--login-radius-ctrl);
}

.login-modal__status:empty {
    display: none;
}

.login-modal__status--ok {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.login-modal__status--error {
    color: var(--login-danger);
    background: var(--login-danger-bg);
    border: 1px solid var(--login-danger-border);
}

/* Consentimiento RGPD: casilla + enlace a la política, en una fila. Con aire
   arriba (separarla del campo compañía) y, sobre todo, abajo (separarla del
   botón de enviar, que sin captcha va justo después). */
.login-modal__consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 20px;
}

.login-modal__consent-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    /* alinea la casilla con la primera línea del texto */
    margin-top: 2px;
    accent-color: var(--login-blue);
}

.login-modal__consent-label {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--login-grey);
}

.login-modal__consent-label a {
    color: var(--login-blue);
    text-decoration: underline;
}

/* Widget del captcha: aire arriba y centrado. El iframe de reCAPTCHA mide
   304px; en móviles estrechos se escala con transform para no desbordar. */
.login-modal__captcha {
    margin-top: 16px;
}

/* Honeypot de la fase 2. Se desplaza fuera de pantalla y NO se usa
   display:none: los bots que ejecutan CSS descartan lo que está en
   display:none, pero sí rellenan lo que solo está desplazado. */
.login-modal__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Bloquea el scroll del fondo con el modal abierto. Hacen falta las DOS reglas:
   .login-page tiene overflow-x:hidden y, por especificación, eso hace que su
   overflow-y compute a auto, así que es un contenedor de scroll por sí mismo y
   no basta con el body. */
body.login-modal-open,
body.login-modal-open .login-page {
    overflow: hidden;
}

@media (max-width: 575px) {
    .login-modal {
        padding: 12px;
    }

    .login-modal__panel {
        max-height: 94vh;
        padding: 22px 18px;
    }

    .login-modal__title {
        font-size: 19px;
    }

    /* El iframe de reCAPTCHA son 304px fijos: en un panel estrecho se escala
       para que no desborde. transform-origin a la izquierda para que no deje
       hueco a un lado. */
    .login-modal__captcha {
        transform: scale(.85);
        transform-origin: 0 0;
        height: 65px; /* 78px * .85, recupera el alto que el scale no reserva */
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-modal__close {
        transition: none;
    }
}