/* usuarios_alterar_senha.css */

/* ── Reset e base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte, 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
    background: #0f172a;
    min-height: 100vh;
}

/* ── Fundo com gradiente animado ────────────────────────────────────────── */
.as-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(16,185,129,0.08) 0%, transparent 50%);
    z-index: 0;
}

/* ── Container centralizado ─────────────────────────────────────────────── */
.as-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-6, 24px) var(--esp-4, 16px);
}

/* ── Card principal ──────────────────────────────────────────────────────── */
.as-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: var(--esp-7, 32px) var(--esp-7, 32px);
    backdrop-filter: blur(20px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 24px 64px rgba(0,0,0,0.4);
    animation: cardEntrance .4s ease;
}

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.as-header { text-align: center; margin-bottom: var(--esp-6, 24px); }

.as-icon-wrap {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
    margin-bottom: var(--esp-4, 16px);
    box-shadow: 0 8px 24px rgba(99,102,241,.4);
}

.as-title {
    font-size: var(--fs-7, 1.4rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 var(--esp-2, 8px);
    letter-spacing: -.3px;
}

.as-subtitle {
    font-size: var(--fs-4, .9rem);
    color: var(--txt-inv-2, #94a3b8);
    margin: 0;
    line-height: 1.5;
}

/* ── Alerta de erro ──────────────────────────────────────────────────────── */
.as-alert {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    color: #fca5a5;
    border-radius: 10px;
    padding: var(--esp-3, 12px) var(--esp-4, 16px);
    font-size: var(--fs-3, .82rem);
    margin-bottom: var(--esp-5, 20px);
}

/* ── Campos ───────────────────────────────────────────────────────────────── */
.as-field { margin-bottom: var(--esp-5, 20px); }

.as-label {
    display: block;
    font-size: var(--fs-3, .82rem);
    font-weight: 600;
    color: var(--txt-inv-2, #94a3b8);
    margin-bottom: var(--esp-2, 8px);
    letter-spacing: .3px;
    text-transform: uppercase;
}

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

.as-input {
    width: 100%;
    padding: var(--esp-3, 12px) var(--esp-8, 48px) var(--esp-3, 12px) var(--esp-4, 16px);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: var(--fs-4, .9rem);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.as-input::placeholder { color: #475569; }

.as-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

.as-input.input-ok    { border-color: #10b981; }
.as-input.input-error { border-color: #ef4444; }

.as-toggle-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: var(--fs-4, .9rem);
    padding: var(--esp-1, 4px);
    transition: color .2s;
}
.as-toggle-btn:hover { color: var(--txt-inv-2, #94a3b8); }

/* ── Força da senha ──────────────────────────────────────────────────────── */
.as-strength-wrap {
    display: flex;
    align-items: center;
    gap: var(--esp-2, 8px);
    margin-top: var(--esp-2, 8px);
}

.as-strength-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
}

.as-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    transition: width .4s ease, background-color .4s ease;
}

.as-strength-fill.fraca   { width: 25%; background: #ef4444; }
.as-strength-fill.media   { width: 50%; background: #f59e0b; }
.as-strength-fill.boa     { width: 75%; background: #3b82f6; }
.as-strength-fill.forte   { width: 100%; background: #10b981; }

.as-strength-label {
    font-size: var(--fs-2, .75rem);
    font-weight: 600;
    min-width: 48px;
    color: #5b6777;
}
.as-strength-label.fraca  { color: #ef4444; }
.as-strength-label.media  { color: #f59e0b; }
.as-strength-label.boa    { color: #3b82f6; }
.as-strength-label.forte  { color: #10b981; }

/* ── Checklist de requisitos ─────────────────────────────────────────────── */
.as-checklist {
    list-style: none;
    padding: var(--esp-2, 8px) 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--esp-1, 4px);
}

.as-checklist li {
    font-size: var(--fs-2, .75rem);
    color: #5b6777;
    display: flex;
    align-items: center;
    gap: var(--esp-2, 8px);
    transition: color .2s;
}

.as-checklist li i { font-size: .75rem; }

.as-checklist li.pending { color: #475569; }
.as-checklist li.ok      { color: #10b981; }
.as-checklist li.ok i::before { content: "\f058"; } /* fa-circle-check */

/* ── Match de confirmação ────────────────────────────────────────────────── */
.as-match-msg {
    font-size: .78rem;
    margin: var(--esp-2, 8px) 0 0;
    min-height: 18px;
}
.as-match-msg.ok    { color: #10b981; }
.as-match-msg.error { color: #ef4444; }

/* ── Botão submit ────────────────────────────────────────────────────────── */
.as-submit {
    width: 100%;
    padding: var(--esp-3, 12px);
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: var(--fs-4, .9rem);
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--esp-2, 8px);
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(99,102,241,.35);
}

.as-submit:hover:not(:disabled) {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,.45);
}

.as-submit:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.as-footer {
    text-align: center;
    margin-top: var(--esp-5, 20px);
    font-size: var(--fs-2, .75rem);
    /* ⚠️ ERA `#334155` — 1,61:1 sobre o fundo real. O `body` destas telas é
       navy (#0f172a) e o cartão é branco a 3% sobre ele (#161e30): um cinza
       ESCURO ali é quase invisível, e o link "Voltar ao login" da recuperação
       de senha era o alvo. Medido no navegador em 03/09/2026.

       ⚠️ É O CASO INVERSO do que as réguas do projeto cobrem. `test_piso_de_
       texto` procura cinza CLARO demais em fundo claro e IGNORA bloco de
       aparência escura — de propósito, porque `#94a3b8` é correto sobre navy.
       Escuro sobre escuro não tem régua estática: quem achou foi o navegador,
       compondo o alfa do cartão. */
    color: var(--txt-inv-2, #94a3b8);
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .as-card { padding: var(--esp-6, 24px) var(--esp-5, 20px); }
    .as-title { font-size: var(--fs-6, 1.15rem); }
}
/* Senha única do dono (Etapa 1): em quais escolas a nova senha vale. */
.senha-unica {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 16px;
    font-size: .9rem;
    text-align: left;
}
.senha-unica__lista { margin: 6px 0 0; padding-left: 18px; }