/* ==========================================================================
   Hoja de las pantallas de acceso: inicio de sesión, recuperar y restablecer
   la contraseña, doble factor, registro, invitación y configuración inicial.
   Solo estética, sin JS.

   - Fichero estático escrito a mano: se publica tal cual y no pasa por
     Laravel Mix.
   - Sus tokens replican, con los mismos nombres y valores, los de la hoja
     base de la aplicación; el tema sustituye el primario, el acento y sus
     derivados por sus colores, ya normalizados.
   ========================================================================== */

/* ------------------------------------------------------------ fuentes */

/* Geist autoalojada (public/fonts/geist), copiada de ui.css: fuentes variables, pesos 100-900. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist/geist-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist/geist-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens */

body.ui-auth {
    --ui-primary: #1E4694;
    --ui-primary-dark: #1A3E82;
    --ui-primary-soft: rgba(30, 70, 148, .1);
    --ui-accent: #D93654;
    --ui-accent-soft: rgba(217, 54, 84, .1);
    --ui-bg: #F8FAFC;
    --ui-surface: #FFFFFF;
    --ui-text: #0F172A;
    --ui-text-2: #334155;
    --ui-text-3: #64748B;
    --ui-border: #E5E7EB;
    --ui-field-border: #E2E8F0;
    --ui-radius: 16px;
    --ui-radius-s: 8px;
    --ui-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ui-danger: #DC2626;
}

/* Tema oscuro del acceso (Ajustes > Tema, «auth_theme» oscuro): solo cambian los neutros; el primario y el acento se
   mantienen. Sin rediseño propio del modo oscuro. */
body.ui-auth.dark-theme {
    --ui-bg: #111827;
    --ui-surface: #0F172A;
    --ui-text: #F1F5F9;
    --ui-text-2: #CBD5E1;
    --ui-text-3: #94A3B8;
    --ui-border: #1F2937;
    --ui-field-border: #334155;
}

/* ------------------------------------------------------------ base */

html {
    height: 100%;
}

body.ui-auth {
    margin: 0;
    min-height: 100%;
    font-family: var(--ui-font);
    color: var(--ui-text);
    background: var(--ui-bg);
    -webkit-font-smoothing: antialiased;
}

/* main.css fija Roboto en los títulos. */
.ui-auth h1,
.ui-auth h2,
.ui-auth h3,
.ui-auth h4,
.ui-auth h5,
.ui-auth h6,
.ui-auth input,
.ui-auth button {
    font-family: var(--ui-font);
}

/* ------------------------------------------------------------ fondo y bola */

/* Capa fija detrás de todo (primer hijo del <body>): la foto base, sin círculo, y encima la «bola» del color de acento.
   El círculo es el del fondo de siempre (centro 3839, 3373 y radio 3805 sobre el lienzo de 2000×1536 de la foto):
   «xMidYMid slice» lo encaja igual que «cover» en cualquier pantalla y «multiply» deja ver la foto a través del color.
   Es una capa fija y no «background-attachment: fixed», que iOS no respeta. */
.login-fondo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    background: var(--ui-bg) url('../images/fondo_acceso_base.jpg') center / cover no-repeat;
}

.login-bola {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}

.login-bola circle {
    fill: var(--ui-accent);
}

/* Sin mezcla de capas (navegadores antiguos), la bola taparía la foto: se aclara un poco. */
@supports not (mix-blend-mode: multiply) {
    .login-bola {
        opacity: .85;
    }
}

/* Tema oscuro: la misma foto y la misma bola del color de acento que en claro; solo la tarjeta y sus controles van en
   oscuro. La hoja compilada de la aplicación pinta .login_section de un azul oscuro con !important, que taparía la
   foto: se deja transparente. */
body.ui-auth.dark-theme .login_section {
    background-color: transparent !important;
}

/* ------------------------------------------------------------ sección, logo y tarjeta */

.login_section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 0;
    background: transparent;
}

.login_section > .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.login_section .logo {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 240px;
    max-width: min(240px, 70vw);
    max-height: 88px;
    margin-bottom: 28px;
    border-radius: 0;
}

/* Sin logo en Ajustes: el nombre de la empresa en texto. */
.login_section .login-marca {
    margin: 0 0 28px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ui-text);
    text-align: center;
    overflow-wrap: anywhere;
}

/* main.css le da 452 px fijos (95 % en móvil) y 30 px de relleno. */
.login_box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 40px 44px 28px;
    background: var(--ui-surface);
    border: 1px solid rgba(229, 231, 235, .8);
    border-radius: var(--ui-radius);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .08);
    text-align: left;
}

body.ui-auth.dark-theme .login_box {
    border-color: var(--ui-border);
}

/* ------------------------------------------------------------ títulos y etiquetas */

/* Título con la barra del color de acento a la izquierda. La utilidad .text-capitalize lleva !important. */
.login_box h3,
.login_box .login-title {
    position: relative;
    width: auto;
    margin: 0 0 24px;
    padding: 0 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ui-text);
    text-align: left;
    text-transform: none !important;
}

.login_box h3::before,
.login_box .login-title::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--ui-accent);
}

/* Subtítulo de la configuración inicial. */
.login_box h6 {
    margin: -12px 0 24px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ui-text-3);
}

.login_box label,
.login_box .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-text-2);
}

.login_box .form-group label sup {
    color: var(--ui-danger);
}

/* ------------------------------------------------------------ campos */

/* Las utilidades .height-50 y .f-15 y el borde de .form-control de main.css (border: 0) llevan !important. */
.login_box .form-control {
    height: 44px !important;
    padding: 8px 12px;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-field-border) !important;
    border-radius: var(--ui-radius-s);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Tema oscuro: main.css da a los campos su propio azul oscuro (body.dark-theme, con !important); aquí, la superficie de la
   tarjeta, para que el campo y el botón del ojo formen una sola caja. */
body.ui-auth.dark-theme .login_box .form-control {
    background-color: var(--ui-surface) !important;
}

.login_box .form-control::placeholder {
    color: var(--ui-text-3);
    opacity: .8;
}

.login_box .form-control:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px var(--ui-primary-soft);
    outline: 0;
}

/* Contraseña + ojo (y el correo + dominio de la invitación): una sola caja. easyAjax añade el mensaje de error dentro del
   grupo, detrás del botón: baja a su propia línea. */
.login_box .input-group {
    position: relative;
    flex-wrap: wrap;
}

.login_box .input-group > .form-control {
    flex: 1 1 0%;
    min-width: 0;
    border-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.login_box .input-group > .form-control:focus {
    box-shadow: none;
}

/* La utilidad .height-50, .btn de main.css (letra de 12 px y radio) y las utilidades .border y .bg-white de la
   invitación llevan !important. */
.login_box .input-group-append .btn,
.login_box .input-group-append .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px !important;
    padding: 0 12px;
    font-size: 14px !important;
    color: var(--ui-text-3);
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-field-border) !important;
    border-left: 0 !important;
    border-radius: 0 var(--ui-radius-s) var(--ui-radius-s) 0 !important;
    box-shadow: none !important;
}

.login_box .input-group-append .btn:hover,
.login_box .input-group-append .btn:focus {
    color: var(--ui-primary);
}

/* Halo del grupo con el foco dentro: solo sobre la fila del campo (44 px), no sobre el mensaje de error de debajo. */
.login_box .input-group:focus-within::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    height: 44px;
    border-radius: var(--ui-radius-s);
    box-shadow: 0 0 0 3px var(--ui-primary-soft);
    pointer-events: none;
}

.login_box .input-group:focus-within > .form-control,
.login_box .input-group:focus-within > .input-group-append > .btn,
.login_box .input-group:focus-within > .input-group-append > .input-group-text {
    border-color: var(--ui-primary) !important;
}

/* Errores de campo (easyAjax marca el campo con .is-invalid y añade .invalid-feedback; el del reCAPTCHA es .help-block). */
.login_box .form-control.is-invalid {
    border-color: #EF4444 !important;
}

.login_box .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.login_box .input-group > .form-control.is-invalid ~ .input-group-append > .btn,
.login_box .input-group > .form-control.is-invalid ~ .input-group-append > .input-group-text {
    border-color: #EF4444 !important;
}

.login_box .invalid-feedback,
.login_box .help-block {
    flex: 0 0 100%;
    order: 10;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #EF4444;
    text-align: left;
}

/* ------------------------------------------------------------ enlaces */

/* main.css convierte todo enlace de la tarjeta en un bloque a todo el ancho, con borde y letra de 18 px (pensado para los
   inicios de sesión sociales). Primero vuelven a ser enlaces normales y después cada uno recibe su estilo. El :hover
   lleva !important porque main.css pone en negro, con !important, todo enlace al pasar el ratón. */
.login_box a {
    display: inline;
    width: auto;
    padding: 0;
    font-size: inherit;
    color: var(--ui-primary);
    text-decoration: none;
    border: 0;
    justify-content: normal;
}

.login_box a:hover {
    color: var(--ui-primary-dark) !important;
    text-decoration: underline;
}

/* main.css quita el contorno de foco a todo con !important. */
.login_box a:focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 2px;
}

/* «¿Has olvidado tu contraseña?», a la derecha bajo el campo. */
.login_box .forgot_pswd {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 20px;
}

.login_box .forgot_pswd a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ui-primary);
    text-decoration: none;
}

/* Doble factor: avisos y enlaces centrados en el primario. Las utilidades del enlace de reenvío (.text-primary,
   .font-weight-bold, .f-14) llevan !important. */
.login_box .resend-code-container,
.login_box .two-fa-app-info-container,
.login_box .verify-using-recovery-code-container,
.login_box .verify-using-email-container {
    justify-content: center;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.login_box .resend-code-container {
    color: var(--ui-text-3);
}

.login_box .two-fa-app-info-container {
    font-weight: 600;
    color: var(--ui-primary);
}

.login_box .resend-code-container a,
.login_box .verify-using-recovery-code-container a,
.login_box .verify-using-email-container a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ui-primary) !important;
}

/* ------------------------------------------------------------ separador y casilla */

.login_box hr {
    margin: 0 0 16px;
    border: 0;
    border-top: 1px solid var(--ui-border);
}

.login_box #checkbox-signup {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--ui-primary);
    cursor: pointer;
}

.login_box #checkbox-signup:focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 2px;
}

.login_box .form-group label[for="checkbox-signup"] {
    display: inline-block;
    margin: 0 0 0 6px;
    font-size: 13px;
    font-weight: 400;
    vertical-align: middle;
    color: var(--ui-text-2);
    cursor: pointer;
}

/* ------------------------------------------------------------ botones */

/* Son <button class="btn-primary ..."> y <a class="btn-secondary ..."> sin .btn. main.css les pone fondo, borde, color,
   letra y radio con !important, y las utilidades .w-100, .height-50, .f-w-500 y .rounded también lo llevan. */
.login_box .btn-primary,
.login_box .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px;
    font-family: var(--ui-font);
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    border-radius: var(--ui-radius-s) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Los deshabilitados van en la regla base: main.css les cambia el color al pasar el ratón. */
.login_box .btn-primary,
.login_box .btn-primary:disabled,
.login_box .btn-primary.disabled,
.login_box .btn-primary:disabled:hover,
.login_box .btn-primary.disabled:hover {
    color: #fff !important;
    background: var(--ui-primary) !important;
    border: 1px solid var(--ui-primary) !important;
}

.login_box .btn-primary:not(:disabled):not(.disabled):hover,
.login_box .btn-primary:not(:disabled):not(.disabled):focus,
.login_box .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    text-decoration: none;
    background: var(--ui-primary-dark) !important;
    border-color: var(--ui-primary-dark) !important;
}

.login_box .btn-secondary,
.login_box .btn-secondary:disabled,
.login_box .btn-secondary.disabled,
.login_box .btn-secondary:disabled:hover,
.login_box .btn-secondary.disabled:hover {
    color: var(--ui-text-2) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
}

.login_box .btn-secondary:not(:disabled):not(.disabled):hover,
.login_box .btn-secondary:not(:disabled):not(.disabled):focus,
.login_box .btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--ui-text) !important;
    text-decoration: none;
    background: var(--ui-bg) !important;
    border-color: var(--ui-border) !important;
}

.login_box .btn-primary:disabled,
.login_box .btn-primary.disabled,
.login_box .btn-secondary:disabled,
.login_box .btn-secondary.disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Tema oscuro: main.css pinta el botón primario de blanco y el secundario con sus grises (body.dark-theme, con
   !important y más especificidad). En el acceso se mantienen el primario y los neutros de los tokens. */
body.ui-auth.dark-theme .login_box .btn-primary,
body.ui-auth.dark-theme .login_box .btn-primary:disabled,
body.ui-auth.dark-theme .login_box .btn-primary.disabled {
    color: #fff !important;
    background: var(--ui-primary) !important;
    border: 1px solid var(--ui-primary) !important;
}

body.ui-auth.dark-theme .login_box .btn-secondary,
body.ui-auth.dark-theme .login_box .btn-secondary:disabled,
body.ui-auth.dark-theme .login_box .btn-secondary.disabled {
    color: var(--ui-text-2) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
}

/* Foco con teclado: el anillo del primario (main.css quita la sombra de foco a los botones con !important). */
.login_box .btn-primary:focus-visible,
.login_box .btn-secondary:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
}

/* «Volver / Enviar»: dos mitades con 10 px entre ellas (las columnas de Bootstrap traen 15 px de relleno). */
.login_box .d-flex > .col-md-6 {
    flex: 1 1 0%;
    max-width: none;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
}

.login_box .d-flex > .col-md-6 + .col-md-6 {
    margin-left: 10px;
}

/* ------------------------------------------------------------ avisos */

.login_box .alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    border-radius: var(--ui-radius-s);
}

.login_box .alert-danger {
    color: #B91C1C;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
}

.login_box .alert-success {
    color: #15803D;
    background-color: #F0FDF4;
    border: 1px solid #BBF7D0;
}

.login_box .alert ul {
    margin: 0;
    padding-left: 0;
}

.login_box .alert li + li {
    margin-top: 4px;
}

/* El aviso que easyAjax inserta delante del primer campo. */
.login_box #alert .alert {
    margin-bottom: 16px;
}

/* ------------------------------------------------------------ inicio de sesión con redes sociales */

/* main.css pinta el icono dentro de un círculo gris de 28 px; la utilidad .rounded y .f-w-500 llevan !important. */
.login_box a.height_50 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--ui-text-2);
    text-decoration: none;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-s) !important;
    cursor: pointer;
}

.login_box a.height_50:hover {
    color: var(--ui-text) !important;
    text-decoration: none;
    background: var(--ui-bg);
    border-color: var(--ui-field-border);
}

.login_box a.height_50 span {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    line-height: 0;
    background: none;
    border-radius: 0;
}

.login_box a.height_50 img {
    width: 18px;
    height: 18px;
}

/* Separador «o, usa mi e-mail»: las rayas laterales de main.css (que en móvil ya oculta) pasan al color del borde. */
.login_box p.position-relative {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ui-text-3);
    text-align: center;
}

.login_box p.position-relative::before,
.login_box p.position-relative::after {
    background-color: var(--ui-border);
}

/* ------------------------------------------------------------ pie, carga y reCAPTCHA */

.login_box .login-credito {
    margin-top: 24px;
    padding-top: 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ui-text-3);
    text-align: center;
    border-top: 1px solid var(--ui-border);
}

.login_box .login-credito a {
    font-weight: 600;
    color: var(--ui-text-2);
    text-decoration: none;
}

.login_box .login-credito a:hover {
    color: var(--ui-text) !important;
    text-decoration: underline;
}

/* Spinner del bloqueo de easyAjax sobre la tarjeta; el del botón que se está enviando conserva el color del botón. */
.login_box .spinner-border {
    color: var(--ui-primary);
}

.login_box .btn-primary .spinner-border,
.login_box .btn-secondary .spinner-border {
    color: inherit;
}

.login_box #captcha_container {
    max-width: 100%;
}

/* ------------------------------------------------------------ móvil */

@media (max-width:575.98px) {
    .login_section {
        padding: 24px 0;
    }

    .login_box {
        padding: 28px 22px 20px;
    }

    .login_section .logo {
        max-width: 200px;
        max-width: min(200px, 70vw);
    }

    .login_box h3,
    .login_box .login-title {
        font-size: 17px;
    }

    /* iOS Safari amplía la página al enfocar un campo con letra de menos de 16 px. */
    .login_box .form-control {
        font-size: 16px !important;
    }
}

/* El reCAPTCHA v2 mide 304 px fijos. */
@media (max-width:359.98px) {
    .login_box #captcha_container {
        transform: scale(.9);
        transform-origin: 0 0;
    }
}

@media (prefers-reduced-motion:reduce) {
    .login_box *,
    .login_box *::before,
    .login_box *::after {
        transition: none !important;
    }
}