/* base.css — puesta a cero y reglas del documento. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  /* Zonas seguras del iPhone. Funcionan porque index.html declara
     viewport-fit=cover; sin eso valen 0 y el contenido queda bajo el reloj. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button {
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  cursor: pointer;
}

/* 16px es el minimo que evita que iOS haga zoom al enfocar un campo.
   Con menos, la pantalla salta cada vez que se escribe un peso. */
input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--texto);
  background: var(--tarjeta);
}

/* `-webkit-appearance: none` quita el dibujo que el sistema pone en un campo.
   Sirve para que un campo de texto no traiga el borde gris de iOS — pero
   aplicado a una casilla o a un botón de opcion, les quita el dibujo ENTERO y
   quedan INVISIBLES. Medido el 2026-08-12: los interruptores de la pantalla de
   avisos habian desaparecido por esto.
   Por eso la regla se limita a los campos que de verdad la necesitan. */
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"],
select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Las casillas conservan su dibujo del sistema, solo se les da el color de la
   app y un tamaño que se pueda tocar con el dedo. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--verde);
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}