/* ============================================================
   auth.css — telas de entrada (login do gestor e do profissional)
   Um só desenho para todas as portas de entrada do sistema.
   ============================================================ */

.auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--t-space-6);
    padding: var(--t-space-6) var(--t-space-4);
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--t-primary-soft), transparent 60%),
        var(--t-bg);
    font-family: var(--t-font);
    color: var(--t-text);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--t-space-5);
    padding: var(--t-space-8) var(--t-space-6);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-pop);
}

.auth-card__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--t-space-3);
    text-align: center;
}

.auth-card__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 26px;
    color: var(--t-on-accent);
    background: var(--t-primary);
    border-radius: var(--t-radius-lg);
}

.auth-card__titulo {
    margin: 0;
    font-size: var(--t-fs-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--t-text);
}

.auth-card__sub {
    margin: 0;
    font-size: var(--t-fs-sm);
    color: var(--t-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-4);
}

.auth-campo {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-1);
}

.auth-campo__label {
    font-size: var(--t-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--t-muted);
}

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

.auth-campo__wrap > i {
    position: absolute;
    left: 13px;
    color: var(--t-muted-2);
    pointer-events: none;
}

.auth-campo input {
    width: 100%;
    height: 46px;
    padding: 0 var(--t-space-4) 0 38px;
    font: inherit;
    font-size: var(--t-fs-md);
    color: var(--t-text);
    background: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    border-radius: var(--t-radius-sm);
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}

.auth-campo input:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-primary-ring);
}

.auth-campo__acao {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--t-muted);
    background: transparent;
    border: 0;
    border-radius: var(--t-radius-sm);
    cursor: pointer;
}

.auth-campo__acao:hover { color: var(--t-text); background: var(--t-surface-soft); }

.auth-submit {
    height: 46px;
    font: inherit;
    font-size: var(--t-fs-md);
    font-weight: 600;
    color: var(--t-on-accent);
    background: var(--t-primary);
    border: 1px solid var(--t-primary);
    border-radius: var(--t-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--t-space-2);
    transition: background var(--t-transition);
}

.auth-submit:hover { background: var(--t-primary-dark); }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-erro {
    display: none;
    align-items: center;
    gap: var(--t-space-2);
    padding: var(--t-space-3) var(--t-space-4);
    font-size: var(--t-fs-sm);
    color: var(--t-crit);
    background: var(--t-crit-soft);
    border: 1px solid var(--t-crit);
    border-radius: var(--t-radius-sm);
}

.auth-erro.is-visivel { display: flex; }

.auth-carregando {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--t-space-2);
    font-size: var(--t-fs-sm);
    color: var(--t-muted);
}

.auth-carregando.is-visivel { display: flex; }

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--t-border);
    border-top-color: var(--t-primary);
    border-radius: 50%;
    animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .auth-spinner { animation-duration: 2.4s; }
}

.auth-rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--t-space-2);
    max-width: 420px;
    text-align: center;
    font-size: var(--t-fs-xs);
    line-height: var(--t-lh-normal);
    color: var(--t-muted);
}

.auth-rodape a { color: var(--t-primary); }

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--t-space-1) var(--t-space-3);
}