/*
 * Pantallas de acceso (equipo administrativo y portal del proveedor).
 * El panel se ensancha para repartir la pantalla en dos columnas: la presentación a la izquierda y
 * el formulario a la derecha. En pantallas pequeñas queda una sola columna con el formulario primero.
 */
.auth-shell {
    display: grid;
    /* La columna se ajusta al contenedor: sin esto crece con el contenido y el panel se desborda. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    max-width: 100%;
    padding: 1.5rem;
    place-items: center;
}

/*
 * El panel ancho necesita más especificidad que `.auth-panel` de proveedores.css, que se carga
 * después de este archivo y lo dejaría en 30rem (dos columnas de 15rem, ilegibles).
 *
 * `min-width: 0` es imprescindible: sin él, el panel (elemento de rejilla) no baja del ancho de su
 * contenido y se sale por la derecha en el móvil. El tope de escritorio se escribe como
 * `min(62rem, 100%)` para que nunca pueda superar el hueco que le deja el contenedor.
 */
.auth-shell .auth-panel-ancho {
    width: 100%;
    max-width: min(62rem, 100%);
    min-width: 0;
}

.auth-acceso {
    /* Dos columnas cuando hay espacio y una sola cuando no, sin depender de breakpoints. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
    /* El alto mínimo es para que la presentación no quede baja frente al formulario. */
    min-height: 34rem;
    /* Ancho del hueco disponible, nunca más: aquí dentro nada puede empujar la tarjeta. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--sgo-color-borde, #dfe5ec);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.12);
}

/* Presentación: qué es el sistema y qué resuelve. */
.auth-lado {
    /* El bloque de títulos se centra en el espacio que deja el pie, que va abajo del todo. */
    display: grid;
    grid-template-rows: 1fr auto;
    /* Elemento de rejilla: puede encogerse por debajo del ancho de su contenido. */
    min-width: 0;
    gap: 1.5rem;
    padding: 2.75rem 2.5rem;
    color: #eef3f8;
    background: linear-gradient(165deg, #1d2b38 0%, #17212b 55%, #101a23 100%);
}

.auth-lado-centro {
    display: grid;
    gap: 1.5rem;
    align-self: center;
}

.auth-lado-titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
}

/*
 * Marca de la puesta en marcha: el mismo bloque de identidad que la barra lateral.
 * La pantalla de acceso no la usa (ahí la presentación va sin marca), pero puesta en marcha sí.
 */
.auth-lado-marca {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-lado-marca > span {
    display: grid;
    line-height: 1.25;
}

.auth-lado-marca strong {
    font-size: 1.0625rem;
    letter-spacing: 0.08em;
    color: #fff;
}

.auth-lado-marca small {
    font-size: 0.75rem;
    color: #93a7ba;
}

.auth-lado-icono {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    font-size: 1.3rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    place-items: center;
}

.auth-lado-texto {
    margin: 0;
    font-size: 0.9375rem;
    color: #a9bccd;
}

.auth-lado-lista {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-lado-lista li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-lado-lista i {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    font-size: 1.3rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    place-items: center;
}

.auth-lado-lista strong {
    font-size: 1.0625rem;
    font-weight: 400;
    color: #fff;
}

/* El detalle de cada punto (lo usa la puesta en marcha) va debajo y en tono suave. */
.auth-lado-lista small {
    display: block;
    font-size: 0.8125rem;
    color: #93a7ba;
}

.auth-lado-pie {
    margin: 0;
    font-size: 0.75rem;
    color: #7e93a6;
}

/* Formulario, centrado verticalmente respecto a la presentación. */
.auth-formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Elemento de rejilla: puede encogerse por debajo del ancho de su contenido. */
    min-width: 0;
    padding: 2.75rem 2.5rem;
}

/* Acceso alterno (portal del proveedor / equipo administrativo). */
.auth-cambio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    font-size: 0.875rem;
    border-top: 1px solid var(--sgo-color-borde, #e6ebf1);
}

/*
 * El texto del acceso alterno (por ejemplo «Ingresar al portal del proveedor») no puede imponer un
 * ancho mayor que la tarjeta: se le permite partir palabras largas si hace falta.
 */
.auth-cambio > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Los iconos de los campos no compiten con el texto. */
.auth-formulario .input-group-text {
    color: var(--sgo-color-texto-secundario, #6b7c8f);
    background: #fff;
    border-color: var(--sgo-color-borde, #dfe5ec);
}

/* El campo y su ojo van siempre en la misma línea, también en móvil. */
.auth-formulario .input-group {
    flex-wrap: nowrap;
    /* El grupo y el campo pueden encogerse: el ancho lo pone la columna, no el contenido. */
    min-width: 0;
}

.auth-formulario .input-group > .btn {
    display: inline-grid;
    place-items: center;
    font-size: 1.15rem;
    color: #52657a;
    background: #fff;
    border-color: var(--sgo-color-borde, #dfe5ec);
}

.auth-formulario .form-control {
    /* El campo ocupa el ancho de su columna y nunca la desborda. */
    width: 100%;
    min-width: 0;
    border-color: var(--sgo-color-borde, #dfe5ec);
}

.auth-formulario :focus-visible {
    outline-offset: 2px;
}

/* Mientras se envía el formulario, el icono gira. */
.auth-formulario [data-acceso-boton] .bx-loader-lines {
    animation: auth-girar 0.9s linear infinite;
}

/* El botón de ingreso: más alto y con el icono algo mayor, para que sea el punto de atención. */
.auth-formulario [data-acceso-boton] {
    min-height: 3rem;
    font-size: 0.9375rem;
}

.auth-formulario [data-acceso-boton] i {
    font-size: 1.2rem;
}

@keyframes auth-girar {
    to {
        transform: rotate(1turn);
    }
}

.auth-formulario details summary {
    color: var(--sgo-color-texto-secundario, #6b7c8f);
    font-size: 0.875rem;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    /* Mismo tope que antes (34rem) sin poder superar nunca el ancho disponible. */
    .auth-shell .auth-panel-ancho {
        max-width: min(34rem, 100%);
    }

    /* En una sola columna el alto lo pone el contenido. */
    .auth-acceso {
        min-height: 0;
    }

    /* En pantallas pequeñas queda el título como encabezado de la presentación. */
    .auth-lado {
        gap: 1rem;
        padding: 1.5rem;
    }

    .auth-lado-titulo {
        font-size: 1.25rem;
    }

    .auth-lado-lista {
        display: none;
    }

    .auth-lado-pie {
        display: none;
    }

    .auth-formulario {
        padding: 1.75rem 1.5rem;
    }

    /* Con una sola columna el ojo del campo se baja de línea: se oculta y el campo ocupa el ancho. */
    .auth-formulario .input-group > .btn {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* Más especificidad: `.auth-shell` de proveedores.css se carga después y centra el panel. */
    body .auth-shell {
        padding: 0.75rem;
        /*
         * El panel se estira al ancho disponible (más robusto que un max-width porcentual) y se
         * centra en el ALTO: `center` en el eje vertical y `stretch` en el horizontal. Antes decía
         * `start`, que dejaba el formulario pegado arriba en el móvil. El centrado no recorta nada
         * con el teclado abierto: la fila de la rejilla crece con el contenido (min-height, no
         * height) y la página se desplaza.
         */
        place-items: center stretch;
        /*
         * La barra del navegador móvil (que aparece y desaparece) no cuenta en 100vh: con dvh el
         * centrado no queda desplazado. Si el navegador no entiende dvh, vale el 100vh de arriba.
         */
        min-height: 100dvh;
    }

    /*
     * El panel ocupa todo el ancho disponible y se centra en el ALTO. `width: 100%` con
     * `max-width: 100%` y `min-width: 0` garantizan que quepa entero: antes el tope era `none`, que
     * dejaba crecer la tarjeta con su contenido hasta salirse por la derecha.
     */
    body .auth-shell .auth-panel-ancho {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /*
     * Una sola columna que se ajusta al hueco disponible: sin el mínimo de 23rem, ningún contenido
     * puede empujar la tarjeta más allá de la pantalla (a este ancho ya era una sola columna).
     */
    .auth-acceso {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }

    .auth-formulario {
        padding: 1.25rem 1rem;
    }

    .auth-lado {
        min-width: 0;
        padding: 1.1rem 1rem;
    }

    .auth-lado-titulo {
        font-size: 1.1rem;
        overflow-wrap: anywhere;
    }
}