/* =====================================================================
   Davila CRM — login.css
   Login page layout. Loaded only on the login page.
   ===================================================================== */

.layout-auth {
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(145deg, #0d1117 0%, #1a1f2e 50%, #1e2d4a 100%);
    padding:         var(--space-6) var(--space-4);
}

.auth-card {
    background:    #1e2333;
    border-radius: var(--radius-lg);
    box-shadow:    0 20px 60px rgba(0, 0, 0, .28);
    width:         100%;
    max-width:     420px;
    padding:       var(--space-7) var(--space-6);
}

.auth-brand {
    text-align:    center;
    margin-bottom: var(--space-6);
}

.auth-brand__badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    background:      var(--color-accent);
    color:           var(--color-text-inverse);
    border-radius:   var(--radius-md);
    font-size:       1.125rem;
    font-weight:     700;
    letter-spacing:  .05em;
    margin-bottom:   var(--space-3);
}

.auth-brand__name {
    display:     block;
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--color-primary);
}

.auth-brand__tagline {
    display:    block;
    font-size:  .875rem;
    color:      var(--color-text-muted);
    margin-top: var(--space-1);
}

.auth-heading {
    font-size:     1.375rem;
    font-weight:   600;
    color:         var(--color-primary);
    text-align:    center;
    margin-bottom: var(--space-5);
}

.auth-footer {
    margin-top: var(--space-5);
    text-align: center;
    font-size:  .8125rem;
    color:      rgba(255, 255, 255, .45);
}
.auth-footer a        { color: rgba(255, 255, 255, .65); }
.auth-footer a:hover  { color: #fff; text-decoration: none; }

.auth-subtext {
    font-size:     .9375rem;
    color:         var(--color-text-muted);
    text-align:    center;
    margin-bottom: var(--space-5);
    margin-top:    calc(-1 * var(--space-3));
}

.auth-back-link {
    text-align:  center;
    margin-top:  var(--space-4);
    font-size:   .9375rem;
}

.auth-back-link a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-back-link a:hover {
    color: var(--color-accent);
    text-decoration: none;
}