/* ==========================================================================
   BASE · Precios Tienda
   Reinicio, tipografía y estructura de pantalla. Sin componentes: eso es
   componentes.css. Sin colores propios: todo sale de tokens.css.
   ========================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* La app es táctil: nada de resaltado azul al tocar. */
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,p,figure{ margin:0; }

button,input,select,textarea{
  font:inherit;
  color:inherit;
}

button{
  cursor:pointer;
  border:none;
  background:none;
}

img{ max-width:100%; display:block; }

a{ color:var(--verde); }

/* Foco visible siempre: parte del público navega con teclado o lector. */
:focus-visible{
  outline:3px solid var(--verde);
  outline-offset:2px;
}

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

/* --- Tipografía ---------------------------------------------------------- */

/* Marca y títulos de cabecera (§1.2) */
.display{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* Todo número de dinero o porcentaje (§1.2) */
.dato{
  font-family:var(--dato);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.texto-secundario{ font-size:13px; color:var(--tinta-suave); }
.nota{ font-size:13px; color:var(--tinta-suave); }

.titulo-seccion{
  font-size:13px;
  font-weight:600;
  color:var(--tinta-suave);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
}

/* --- Estructura de pantalla ---------------------------------------------- */

/* Toda vista de la app se envuelve en .pantalla: cabecera fija arriba y
   contenido que crece. En escritorio se centra a --ancho-app. */
.pantalla{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  max-width:var(--ancho-app);
  margin-inline:auto;
  background:var(--papel);
}

.contenido{
  flex:1;
  padding:var(--margen);
  display:flex;
  flex-direction:column;
  gap:var(--hueco);
  /* Aire al final para que el último botón no quede pegado al borde. */
  padding-bottom:24px;
}

/* Pila vertical con separación uniforme. */
.pila{ display:flex; flex-direction:column; gap:var(--hueco); }
.pila-8{ display:flex; flex-direction:column; gap:8px; }

/* Hueco reservado para algo que llega después (una consulta al servidor).
   Mientras está vacío no ocupa NADA: dentro de una pila o de .contenido, que
   llevan `gap`, un div vacío sigue contando y deja un escalón de aire debajo
   del último botón, visible siempre aunque el aviso no llegue nunca. */
.hueco:empty{ display:none; }

/* Fila de botones: el que se marca --ancho ocupa más (p. ej. Aceptar). */
.fila{ display:flex; gap:var(--hueco); }
.fila > *{ flex:1; }
.fila > .ancho{ flex:1.6; }

/* --- Tarjeta (§1.3) ------------------------------------------------------ */

.tarjeta{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  padding:var(--margen);
}

.tarjeta-lista{ padding:0; overflow:hidden; }
.tarjeta-lista > * + *{ border-top:1px solid var(--linea); }

/* --- Iconos --------------------------------------------------------------- */

/* Los iconos son SVG en línea: la app funciona sin conexión y no depende de
   ninguna tipografía de iconos externa. */
.icono{
  width:24px;
  height:24px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icono-20{ width:20px; height:20px; }
.icono-34{ width:34px; height:34px; stroke-width:1.5; }
.icono-52{ width:52px; height:52px; stroke-width:1.4; }

.oculto{ display:none !important; }

/* Visible solo para lectores de pantalla. */
.solo-lectores{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}