/* Estilos comunes. Inspirados en la referencia que eligió Marcos (Dala): negro puro, texto
   blanco, un único acento violeta y destellos ámbar; titulares grandes y finos; sin sombras;
   botones y etiquetas en forma de píldora. Tipografía Geist (libre). El texto de lectura es
   algo más grueso que en la referencia porque esta herramienta se usa a diario. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap');

:root {
  --fondo: #000000;
  --superficie: #0e0e10;
  --linea: #1f1f23;
  --texto: #ffffff;
  --suave: #9a9a9a;
  --tenue: #bdbdbd;
  --acento: #8052ff;
  --acento-hover: #9670ff;
  --aviso: #ffb829;
  --ok: #2bb39a;
  --error: #ff6b6b;
  --radio: 24px;
  color-scheme: dark;
  font-family: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

h1, h2 { font-weight: 400; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }

input {
  width: 100%; font: inherit; font-weight: 400; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--superficie); color: var(--texto);
}
input::placeholder { color: var(--suave); }
input:focus { outline: none; border-color: var(--acento); }

button {
  font: inherit; font-weight: 500; padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--acento); color: #fff; cursor: pointer;
}
button:hover { background: var(--acento-hover); }

/* Pantalla de entrada */
.centrado { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.tarjeta { width: 100%; max-width: 400px; }
.tarjeta h1 { font-size: 2.6rem; margin-bottom: 8px; }
.sub { color: var(--suave); margin: 0 0 32px; font-weight: 300; font-size: 1.1rem; }
label { display: block; font-size: 0.9rem; color: var(--tenue); margin-bottom: 8px; }
.tarjeta button { width: 100%; margin-top: 14px; }
.error { color: var(--error); font-size: 0.95rem; margin: 14px 0 0; }
.pie { color: var(--suave); font-size: 0.8rem; margin-top: 24px; }

.marca-entrar { display: flex; align-items: center; gap: 14px; }
.marca-entrar svg { width: 48px; height: 48px; }