/* LIA-S Plataforma: base compartida por Acceso y el panel de clientes.
   Mismo mundo que Studio (basalto y una sola señal dorada), pero más grande y tranquilo. */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-var.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

:root {
  --bg0: #0b0b0a; --bg1: #121210; --bg2: #1a1a17; --bg3: #23231f;
  --line: #2a2a25; --line2: #3a3a34;
  --text: #ecebe4; --muted: #a9a69b; --faint: #77756c;
  --accent: #e3b230; --accent2: #f0c449; --accent-bg: rgba(227, 178, 48, .12); --on-accent: #0b0b0a;
  --ok: #8fd19a; --danger: #ef7a62;
  --r: 4px;
  --font: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Cascadia Code', Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg0); color: var(--text); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wordmark { font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; font-size: 20px; color: var(--text); text-decoration: none; }
.wordmark b { color: var(--accent); font-weight: 800; }

/* Formularios */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; font: inherit; color: var(--text); background: var(--bg1);
  border: 1px solid var(--line2); border-radius: var(--r); padding: 12px 14px; min-height: 48px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:hover, textarea:hover, select:hover { border-color: #4a4a43; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); background: var(--bg2); }
input[aria-invalid=true] { border-color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  font: 600 15px/1 var(--font); color: var(--text); background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--r); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: #2c2c27; border-color: #4a4a43; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--text); background: var(--bg2); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.msg { border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.msg.error { color: #ffc4b8; border-color: rgba(239, 122, 98, .5); background: rgba(239, 122, 98, .08); }
.msg.ok { color: #cdeed3; border-color: rgba(143, 209, 154, .45); background: rgba(143, 209, 154, .08); }
.msg[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }