/* =====================================================
   TU EXCEDENTE — LOGIN PAGE
   First impression: cream brand surface, elevated card,
   brand-blue focus, Solar-Orange CTA.

   Per DESIGN.md "Action (Orange)" rule the submit button
   uses the semantic CTA alias (--ds-color-cta-bg), the
   vibrant orange reserved for the primary objective.

   Fully tokenized: no raw hex/rgba. All color, spacing,
   radius, typography and motion via var(--ds-*). Brand
   identity (cream surface, #4898cb blue, #fea31e orange)
   resolves from the Tu Excedente override in tokens.css.
   ===================================================== */

/* -----------------------------------------------------
   Page / background — subtle brand gradient on cream.
   Tonal layers (surface → surface-container) plus two
   very soft brand-tinted radial glows (blue + orange)
   built from the brand container tokens, which already
   carry low-saturation tints. No estrident color.
   ----------------------------------------------------- */
.login-body {
    background:
        radial-gradient(circle at 18% 28%,
            var(--ds-color-primary-container) 0%,
            transparent 42%),
        radial-gradient(circle at 84% 84%,
            var(--ds-color-secondary-fixed) 0%,
            transparent 44%),
        linear-gradient(160deg,
            var(--ds-color-surface-bright) 0%,
            var(--ds-color-surface-container) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--ds-space-6);
    color: var(--ds-color-on-surface);
}

/* -----------------------------------------------------
   Container — centered, comfortable max width.
   ----------------------------------------------------- */
.login-container {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: var(--ds-z-base);
}

/* -----------------------------------------------------
   Header / logo — generous presence, centered.
   ----------------------------------------------------- */
.login-header {
    text-align: center;
    margin-bottom: var(--ds-space-8);
}

.login-logo {
    width: 220px;
    max-width: 70%;
    height: auto;
}

/* Theme-aware brand logo: variant A for light, B for dark */
.login-logo--dark { display: none; }
[data-theme="dark"] .login-logo--light { display: none; }
[data-theme="dark"] .login-logo--dark  { display: inline-block; }

.login-welcome {
    margin: var(--ds-space-5) 0 0;
    color: var(--ds-color-on-surface);
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-headline-md-size);
    font-weight: var(--ds-typo-headline-md-weight);
    line-height: var(--ds-typo-headline-md-line-height);
    letter-spacing: var(--ds-typo-headline-md-tracking);
}

.login-subtitle {
    margin: var(--ds-space-1) 0 0;
    color: var(--ds-color-on-surface-variant);
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-body-sm-size);
    font-weight: var(--ds-typo-body-sm-weight);
    line-height: var(--ds-typo-body-sm-line-height);
}

/* -----------------------------------------------------
   Card — elevated white surface, soft brand shadow.
   ----------------------------------------------------- */
.login-card {
    background-color: var(--ds-color-surface-container-lowest);
    border: 1px solid var(--ds-color-outline-variant);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-elevation-4);
}

.login-card .card-body {
    padding: var(--ds-space-10);
}

/* -----------------------------------------------------
   Field labels — label-md scale, above the input.
   ----------------------------------------------------- */
.login-card .form-label {
    display: block;
    margin-bottom: var(--ds-space-2);
    color: var(--ds-color-on-surface);
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-label-md-size);
    font-weight: var(--ds-typo-label-md-weight);
    line-height: var(--ds-typo-label-md-line-height);
    letter-spacing: 0.2px;
}

/* -----------------------------------------------------
   Input group — 1px outline, brand-blue focus ring.
   ----------------------------------------------------- */
.login-card .input-group {
    border: 1px solid var(--ds-color-outline-variant);
    border-radius: var(--ds-radius-default);
    background-color: var(--ds-color-surface-container-low);
    transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
}

.login-card .input-group:hover {
    border-color: var(--ds-color-outline);
}

.login-card .input-group:focus-within {
    border-color: var(--ds-color-primary);
    box-shadow: 0 0 0 var(--ds-focus-ring-width) var(--ds-color-primary-fixed-dim);
}

.login-card .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--ds-color-primary);
    padding-left: var(--ds-space-4);
}

.login-card .form-control {
    border: none;
    padding: var(--ds-space-3) var(--ds-space-4);
    min-height: 48px;
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-body-md-size);
    line-height: var(--ds-typo-body-md-line-height);
    background-color: transparent !important;
    color: var(--ds-color-on-surface) !important;
}

.login-card .form-control::placeholder {
    color: var(--ds-color-on-surface-variant) !important;
    opacity: 1;
}

.login-card .form-control:focus {
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--ds-color-on-surface) !important;
}

/* The brand-blue focus ring lives on the .input-group; the inner
   <input> must not paint its own outline (avoids a double ring). */
.login-card .form-control:focus-visible {
    outline: none;
}

/* Keep autofill on-brand (no white/yellow override of the cream field). */
.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ds-color-on-surface) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ds-color-surface-container-low) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* -----------------------------------------------------
   Primary CTA — Solar Orange, full width, comfortable.
   NOT the cramped --ds-btn-sm-* scale (that is for dense
   CRM rows). cta-text on cta-bg ≈ 8:1 (DESIGN.md).
   ----------------------------------------------------- */
.login-card .btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-6);
    border: none;
    border-radius: var(--ds-radius-default);
    background-color: var(--ds-color-cta-bg) !important;
    color: var(--ds-color-cta-text) !important;
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-label-md-size);
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: var(--ds-elevation-1);
    transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
}

.login-card .btn-login:hover {
    background-color: var(--ds-color-cta-bg-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--ds-elevation-3);
}

.login-card .btn-login:active {
    background-color: var(--ds-color-cta-bg-pressed) !important;
    transform: translateY(0);
    box-shadow: var(--ds-elevation-1);
}

.login-card .btn-login:focus-visible {
    outline: var(--ds-focus-ring-width) var(--ds-focus-ring-style) var(--ds-focus-ring-color);
    outline-offset: var(--ds-focus-ring-offset);
}

/* -----------------------------------------------------
   Error message — error-container surface, AA text,
   icon. Not raw Bootstrap alert-danger styling.
   light: on-error-container #93000a on error-container
   #ffdad6 ≈ 7.7:1. dark: on-error-container #ffdad6 on
   error-container #93000a ≈ 7.7:1.
   ----------------------------------------------------- */
.login-card .alert-danger {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-6);
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid var(--ds-color-error);
    border-radius: var(--ds-radius-default);
    background-color: var(--ds-color-error-container);
    color: var(--ds-color-on-error-container);
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-body-sm-size);
    line-height: var(--ds-typo-body-sm-line-height);
}

.login-card .alert-danger i {
    color: var(--ds-color-error);
    margin-top: 2px;
}

/* -----------------------------------------------------
   Field spacing override (Bootstrap mb-4 kept in markup).
   ----------------------------------------------------- */
.login-card .mb-4 {
    margin-bottom: var(--ds-space-6) !important;
}

/* -----------------------------------------------------
   Reduced motion — drop the lift/transition niceties.
   ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .login-card .input-group,
    .login-card .btn-login {
        transition: none;
    }
    .login-card .btn-login:hover,
    .login-card .btn-login:active {
        transform: none;
    }
}

/* -----------------------------------------------------
   Small screens — keep the card comfortable, not cramped.
   ----------------------------------------------------- */
@media (max-width: 480px) {
    .login-card .card-body {
        padding: var(--ds-space-6);
    }
    .login-logo {
        width: 180px;
    }
}