/* =============================================================
   AUTH SCREENS — Códice Customs Control v3.0
   Requiere tokens.css cargado antes de este archivo.
============================================================= */

/* BASE */
body {
    margin: 0;
    font-family: var(--font-base);
    background: var(--s-app);
    color: var(--t-primary);
}

/* CONTAINER */
.auth-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CARD */
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--s-default);
    border: 1px solid var(--b-default);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}

/* HEADER */
.auth-header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

    .auth-header .logo {
        font-weight: bold;
        margin-bottom: var(--sp-2);
    }

    .auth-header h1 {
        font-size: var(--fs-h2);
        font-weight: var(--fw-h2);
        color: var(--t-primary);
    }

/* FORM */
.auth-body form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.auth-body input {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--b-default);
    border-radius: var(--r-sm);
    font-family: var(--font-base);
    font-size: var(--fs-body);
    color: var(--t-primary);
    background: var(--s-default);
}

    .auth-body input:focus {
        outline: none;
        border-color: var(--b-focus);
        box-shadow: var(--shadow-focus);
    }

/* BUTTON */
.auth-body button {
    background: var(--c-brand);
    color: #FFFFFF;
    border: none;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: var(--font-base);
    font-weight: 600;
}

    .auth-body button:hover {
        background: var(--c-brand-hover);
    }

    .auth-body button:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }

/* LINKS */
.auth-footer {
    margin-top: var(--sp-4);
    text-align: center;
    font-size: var(--fs-caption);
    color: var(--t-muted);
}