/* factux — forgot password & reset screens
 * Builds on /css/factux-login.css (same two-column light layout and
 * brand tokens as the login); only the recovery-specific pieces live here.
 *
 * Formatting: every CSS rule must stay on a single line. See CLAUDE.md
 * § "Formato CSS — regla obligatoria". */

/* Login heading sits below the step label; keep the status flash in flow */
.login-card .login-status { margin: 0 0 22px; }
.recovery-email { color: var(--tinta); font-weight: 500; background: var(--papel); border: 1px solid var(--linea-warm); padding: 1px 8px; border-radius: 5px; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.expiry-note { font-size: 14px; color: var(--carbon); margin: -16px 0 24px; line-height: 1.5; }
.expiry-note b { color: var(--tinta); font-weight: 600; }

/* Primary action rendered as a link (expired step) */
a.submit-btn { text-decoration: none; }
.submit-btn[disabled] { opacity: .45; cursor: not-allowed; }
.submit-btn[disabled]:hover { background: var(--cielo); }

/* Resend button with countdown */
.ghost-btn { width: 100%; height: 50px; background: transparent; color: var(--tinta); border: 1px solid var(--linea-warm); border-radius: 7px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, border-color .15s ease; }
.ghost-btn:hover:not([disabled]) { background: var(--papel); border-color: #C8C2AE; }
.ghost-btn[disabled] { color: var(--carbon); cursor: not-allowed; }
.ghost-btn .countdown { font-family: var(--mono); font-size: 12px; color: var(--carbon); font-variant-numeric: tabular-nums; }

/* Strength meter */
.strength { margin-top: 6px; }
.strength-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.strength-bar i { flex: 1; height: 4px; border-radius: 999px; background: var(--linea-warm); transition: background .2s ease; }
.strength-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--carbon); }
.strength-label b { font-weight: 600; color: var(--tinta-3); }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--rechazado); }
.strength[data-score="2"] i:nth-child(-n+2) { background: #C77B12; }
.strength[data-score="3"] i:nth-child(-n+3) { background: #5E8F1E; }
.strength[data-score="4"] i:nth-child(-n+4) { background: #14663F; }
.strength[data-score="1"] .strength-label b { color: var(--rechazado); }
.strength[data-score="2"] .strength-label b { color: #9A5E0C; }
.strength[data-score="3"] .strength-label b { color: #4A7217; }
.strength[data-score="4"] .strength-label b { color: #14663F; }

/* Requirements checklist */
.req-list { list-style: none; margin-top: 8px; padding: 12px 14px; background: var(--papel-soft); border: 1px solid var(--linea-warm); border-radius: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.req-list li { font-size: 12.5px; color: var(--carbon); display: flex; align-items: center; gap: 7px; transition: color .15s ease; }
.req-list li .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--niebla); flex: none; transition: background .15s ease, border-color .15s ease; }
.req-list li.ok { color: #14663F; }
.req-list li.ok .dot { background: #14663F; border-color: #14663F; }

/* Match hint under confirmation field */
.match-hint { font-size: 12px; color: var(--carbon); display: flex; align-items: center; gap: 5px; }
.match-hint.match { color: #14663F; }
.match-hint.miss { color: var(--rechazado); }
.match-hint .icon { width: 12px; height: 12px; }

/* Back to login */
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: var(--carbon); transition: color .15s ease; }
.back-link:hover { color: var(--tinta); }
.back-link .arr { font-family: var(--mono); }

@media (max-width: 480px) { .req-list { grid-template-columns: 1fr; } .recovery-email { white-space: normal; word-break: break-all; } }

/* Last so it wins over any display set above at equal specificity */
.is-hidden { display: none; }