/* ==========================================================================
   FoxCRM — Auth pages (login, recuperar/cambiar contraseña, selección de entorno)
   ========================================================================== */

/* This stylesheet is only ever linked from the auth pages themselves, so it's
   safe to reset the shared Vuexy shell's padding here without leaking into
   the rest of the app: the theme still pads .content-wrapper/.app-content
   even under .blank-page, which left a visible gap around the auth-page
   background. */
html, body {
    height: 100%;
}

.blank-page {
    height: 100%;
    min-height: 100vh;
}

.blank-page .app-content,
.blank-page .content-wrapper,
.blank-page .content-body {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}

.blank-page .content-header {
    padding: 0 !important;
    margin: 0 !important;
}

:root {
    --auth-amber: #FCAF03;
    --auth-orange: #F98000;
    --auth-red: #F83800;
    --auth-ink: #26232f;
    --auth-ink-soft: #6c6a78;
    --auth-muted: #9997a3;
    --auth-border: #ebe9f0;
    --auth-bg: #f7f7fb;
    --auth-gradient: linear-gradient(155deg, var(--auth-amber) 0%, var(--auth-orange) 48%, var(--auth-red) 100%);
}

.auth-page {
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(252, 175, 3, 0.14), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(248, 56, 0, 0.10), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(249, 128, 0, 0.10), transparent 45%),
        var(--auth-bg);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

.auth-card {
    width: 100%;
    max-width: 960px;
    min-height: 560px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(38, 35, 47, 0.28), 0 12px 30px -14px rgba(38, 35, 47, 0.10);
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.auth-card.auth-card-wide {
    max-width: 1100px;
}

/* ---------- Brand panel (left) ---------- */

.auth-brand-panel {
    flex: 0 0 42%;
    max-width: 42%;
    position: relative;
    background: var(--auth-gradient);
    color: #fff;
    padding: 2.75rem 2.5rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.auth-brand-decoration,
.auth-brand-decoration::before,
.auth-brand-decoration::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.auth-brand-decoration {
    width: 340px;
    height: 340px;
    right: -140px;
    bottom: -120px;
}

.auth-brand-decoration::before {
    width: 160px;
    height: 160px;
    right: 60px;
    bottom: 220px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-brand-decoration::after {
    width: 90px;
    height: 90px;
    left: -30px;
    top: -30px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-brand-top,
.auth-brand-middle,
.auth-brand-bottom {
    position: relative;
    z-index: 1;
}

.auth-brand-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.auth-brand-logo {
    width: 30px;
    height: auto;
    filter: brightness(0) invert(1);
}

.auth-brand-wordmark {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.auth-brand-middle h2 {
    color: #fff;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.85rem;
}

.auth-brand-middle p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.auth-brand-features {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.auth-brand-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.7rem;
}

.auth-brand-features li i {
    flex: 0 0 auto;
    font-size: 1rem;
}

.auth-brand-bottom small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
}

/* ---------- Form panel (right) ---------- */

.auth-form-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem;
}

.auth-form-inner {
    width: 100%;
    max-width: 360px;
}

.auth-form-logo {
    display: block;
    max-width: 150px;
    height: auto;
    margin-bottom: 1.75rem;
}

.auth-form-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin-bottom: 0.4rem;
}

.auth-form-subtitle {
    color: var(--auth-ink-soft);
    font-size: 0.88rem;
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

.auth-form .auth-field {
    margin-bottom: 1.15rem;
}

.auth-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--auth-ink);
    margin-bottom: 0.4rem;
}

.auth-input {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input .auth-input-icon {
    position: absolute;
    left: 1rem;
    color: var(--auth-muted);
    font-size: 1rem;
    pointer-events: none;
}

.auth-input input.form-control {
    height: 50px;
    border-radius: 11px;
    border: 1.5px solid var(--auth-border);
    background: #fbfbfd;
    padding-left: 2.85rem;
    padding-right: 1rem;
    font-size: 0.92rem;
    color: var(--auth-ink);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.auth-input input.form-control::placeholder {
    color: var(--auth-muted);
}

.auth-input input.form-control:focus {
    border-color: var(--auth-orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(249, 128, 0, 0.12);
}

.auth-input input.form-control.is-invalid {
    border-color: var(--auth-red);
}

.auth-input-toggle {
    position: absolute;
    right: 0.15rem;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 42px;
    border: none;
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.auth-input-toggle:hover {
    color: var(--auth-ink-soft);
}

.auth-input input.form-control.has-toggle {
    padding-right: 2.75rem;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.83rem;
    color: var(--auth-ink-soft);
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input {
    width: 15px;
    height: 15px;
    accent-color: var(--auth-orange);
    cursor: pointer;
}

.auth-link {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--auth-orange);
}

.auth-link:hover {
    color: var(--auth-red);
    text-decoration: underline;
}

.auth-hint {
    font-size: 0.8rem;
    color: var(--auth-ink-soft);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

.auth-hint strong {
    color: var(--auth-ink);
}

.btn-auth-primary {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 11px;
    background: var(--auth-gradient);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 14px 24px -10px rgba(248, 86, 0, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-auth-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 30px -10px rgba(248, 86, 0, 0.5);
}

.btn-auth-primary:active {
    transform: translateY(0);
}

.btn-auth-primary:disabled {
    opacity: 0.75;
    cursor: default;
    transform: none;
}

.btn-auth-secondary {
    width: 100%;
    height: 50px;
    border: 1.5px solid var(--auth-border);
    border-radius: 11px;
    background: #fff;
    color: var(--auth-ink);
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-auth-secondary:hover {
    color: var(--auth-orange);
    border-color: var(--auth-orange);
}

.auth-form-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.83rem;
    color: var(--auth-ink-soft);
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--auth-ink-soft);
    margin-bottom: 1.5rem;
}

.auth-back-link:hover {
    color: var(--auth-orange);
}

.auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}

.auth-status-icon.is-success {
    background: rgba(40, 199, 111, 0.12);
    color: #28c76f;
}

.auth-status-icon.is-warning {
    background: rgba(248, 128, 0, 0.12);
    color: var(--auth-orange);
}

/* ---------- Selección de entorno ---------- */

.auth-env-page {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% 18%, rgba(252, 175, 3, 0.14), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(248, 56, 0, 0.10), transparent 40%),
        var(--auth-bg);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

/* Centers vertically when it fits; when the workspace grid is tall enough to
   overflow, the auto margins collapse to 0 so the page scrolls from the very
   top instead of clipping (the classic flex "safe center" pattern). */
.auth-env-inner {
    width: 100%;
    margin: auto 0;
    padding: 3rem 1.25rem;
}

.auth-env-header {
    text-align: center;
    max-width: 480px;
    margin: 0 auto 2.25rem;
}

.auth-env-header img {
    width: 34px;
    margin-bottom: 1rem;
}

.auth-env-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin-bottom: 0.4rem;
}

.auth-env-header p {
    color: var(--auth-ink-soft);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.auth-env-grid {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, 240px);
    justify-content: center;
    gap: 1rem;
}

.auth-env-card {
    background: #fff;
    border: 1.5px solid var(--auth-border);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 12px 24px -16px rgba(38, 35, 47, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.auth-env-card.is-disabled {
    opacity: 0.55;
}

.auth-env-card:not(.is-disabled):hover {
    transform: translateY(-3px);
    border-color: var(--auth-orange);
    box-shadow: 0 18px 30px -16px rgba(248, 86, 0, 0.25);
}

.auth-env-logo {
    /* Los logos de los concesionarios son anchos (marca + texto). Caja
       horizontal + object-fit:contain => se ve el logo entero sin recorte.
       max-width para que no desborde la card en pantallas chicas. */
    width: 100%;
    max-width: 160px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    padding: 8px 12px;
    margin: 0 auto 0.9rem;
    display: block;
    background: var(--auth-bg);
}

.auth-env-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin-bottom: 0.15rem;
}

.auth-env-user {
    font-size: 0.82rem;
    color: var(--auth-ink-soft);
    margin-bottom: 0.2rem;
}

.auth-env-username {
    font-size: 0.78rem;
    color: var(--auth-muted);
    margin-bottom: 1.1rem;
}

.auth-env-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: var(--auth-gradient);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.auth-env-action:hover {
    transform: translateY(-1px);
    color: #fff;
}

.auth-env-action.is-disabled {
    background: #e7e6ec;
    color: var(--auth-muted);
    cursor: default;
}

.auth-env-action.is-disabled:hover {
    transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .auth-brand-panel {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .auth-page {
        padding: 1.5rem 0.9rem;
    }

    .auth-card {
        min-height: 0;
        border-radius: 18px;
    }

    .auth-form-panel {
        padding: 2rem 1.5rem;
    }
}

/* ===========================================================================
   Modo oscuro: las pantallas de auth SIEMPRE van claras.
   ---------------------------------------------------------------------------
   header.tpl.php agrega la clase `dark-layout` al body cuando el usuario tiene
   layout_dark=1, y el tema Vuexy (dark-layout.min.css) pisa con !important los
   colores de login / entornos / recuperar / definir contrasena: los inputs
   salen navy y los titulos y labels quedan casi invisibles sobre el panel
   blanco. Estas pantallas tienen un diseno propio (split naranja/blanco) donde
   el modo oscuro no aplica, asi que se reafirma la paleta clara.
   Va al final del archivo para ganar por orden, con !important para vencer al
   !important de Vuexy. Solo afecta a lo que cuelga de .auth-page.
   =========================================================================== */
body.dark-layout .auth-page,
.dark-layout .auth-page,
body.dark-layout .auth-env-page,
.dark-layout .auth-env-page {
    color-scheme: light;
}

body.dark-layout .auth-form-panel,
.dark-layout .auth-form-panel {
    background: #fff !important;
}

body.dark-layout .auth-form-header h1,
.dark-layout .auth-form-header h1,
body.dark-layout .auth-field label,
.dark-layout .auth-field label {
    color: var(--auth-ink) !important;
}

body.dark-layout .auth-form-subtitle,
.dark-layout .auth-form-subtitle {
    color: var(--auth-ink-soft) !important;
}

/* Inputs: fondo claro y texto oscuro, como en modo claro. */
body.dark-layout .auth-input input.form-control,
.dark-layout .auth-input input.form-control {
    background: #fbfbfd !important;
    color: var(--auth-ink) !important;
    border-color: var(--auth-border) !important;
    -webkit-text-fill-color: var(--auth-ink) !important;
}

body.dark-layout .auth-input input.form-control:focus,
.dark-layout .auth-input input.form-control:focus {
    background: #fff !important;
    border-color: var(--auth-orange) !important;
}

body.dark-layout .auth-input input.form-control::placeholder,
.dark-layout .auth-input input.form-control::placeholder {
    color: var(--auth-muted) !important;
    -webkit-text-fill-color: var(--auth-muted) !important;
}

/* La tarjeta blanca del picker de entornos y sus textos. */
body.dark-layout .auth-env-card,
.dark-layout .auth-env-card {
    background: #fff !important;
}
body.dark-layout .auth-env-name,
.dark-layout .auth-env-name {
    color: var(--auth-ink) !important;
}
body.dark-layout .auth-env-user,
.dark-layout .auth-env-user {
    color: var(--auth-ink-soft) !important;
}