/* public/mi-espacio/auth.css — estilos compartidos de las pantallas de autenticación
   (confirmar.html, recuperar.html). Extraído de los tokens y clases .db-* que ya existen en
   index.html, para que las páginas nuevas no dupliquen la paleta/tipografía y para que ambas
   compartan un solo archivo entre sí (auditoría de frontend de 3.1, 2026-08-01).
   index.html conserva su copia inline por ahora — no se tocó, fuera del alcance pedido. */

:root {
  --wine-deep: #3D0C11; --wine-primary: #6B1A2A;
  --gold-deep: #7A5C1E; --gold-primary: #B8892A; --gold-medium: #D4A843; --gold-light: #E8C870;
  --charcoal-deep: #150D11; --charcoal: #1E1218; --charcoal-soft: #2A1C21;
  --text-light: #F0E6EA; --text-muted: #C4A8B0; --text-faint: rgba(196,168,176,.6);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', sans-serif;
  --font-elegant: 'Cormorant Garamond', Georgia, serif;
  --font-eyebrow: 'Jost', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--charcoal-deep); min-height: 100vh; }
body { font-family: var(--font-body); color: var(--text-light); }
a { color: inherit; }
button { font: inherit; }

.au-wrap { min-height: 100vh; min-height: 100dvh; padding: 60px 24px; max-width: 440px; margin: 0 auto; display: flex; align-items: center; }
.au-card { width: 100%; text-align: center; }
.db-eyebrow { font-family: var(--font-eyebrow); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-primary); margin-bottom: 18px; }
.db-title { font-family: var(--font-display); font-size: clamp(24px, 6vw, 30px); font-weight: 900; line-height: 1.3; }
.db-sub { font-family: var(--font-elegant); font-style: italic; font-size: 16px; color: var(--text-muted); margin: 14px 0 32px; line-height: 1.5; }

.au-field { text-align: left; margin-bottom: 14px; }
.au-label { display: block; font-family: var(--font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }
.db-input { width: 100%; padding: 16px 18px; border-radius: 12px; border: 1.5px solid rgba(184,137,42,.3); background: rgba(255,255,255,.03); color: var(--text-light); font-family: var(--font-body); font-size: 15px; }
.db-input::placeholder { color: rgba(240,230,234,.35); }
.db-input:focus { outline: 2px solid var(--gold-primary); outline-offset: 1px; }
.au-hint { font-family: var(--font-body); font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.db-btn { width: 100%; padding: 16px; border-radius: 12px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--gold-deep), var(--gold-primary), var(--gold-medium)); color: var(--charcoal-deep); font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-top: 8px; }
.db-btn:disabled { opacity: .6; cursor: default; }

.au-msg { margin-top: 18px; padding: 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; display: none; }
.au-msg.show { display: block; }
.au-msg.au-error { background: rgba(184,137,42,.08); border: 1px solid rgba(184,137,42,.3); color: var(--text-muted); }
.au-msg.au-ok { background: rgba(127,169,127,.1); border: 1px solid rgba(127,169,127,.35); color: var(--text-light); }
.au-msg a { color: var(--gold-light); }

.au-link { display: inline-block; margin-top: 22px; font-family: var(--font-eyebrow); font-size: 12px; color: var(--gold-light); text-decoration: none; }
.au-link:hover { text-decoration: underline; }

/* Visible solo a lectores de pantalla — el resto del formulario ya se apoya en label+input. */
.au-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }