/* =====================================================================
   base.css — Reset ligero y estilos base compartidos por todas las vistas
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: block;
}

/* Controles base */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
input::placeholder { color: var(--faint); }

button { cursor: pointer; border: 0; }

/* Accesibilidad: ocultar visualmente, mantener para lectores de pantalla */
.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;
}

/* Utilidad de carga */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }