/* Estilos base compartidos por todas las pantallas. Colores y fuentes vienen de
   /config/marca.css (cargado antes). Acá: tamaños, espaciados y componentes.
   Todo GRANDE: el público mezcla gente joven y gente mayor poco habituada a apps. */
:root {
  --texto-chico: 15px;
  --texto-base: 18px;
  --texto-grande: 22px;
  --texto-enorme: 34px;
  --radio: 16px;
  --radio-chico: 12px;
  --espacio: 16px;
  --alto-boton: 64px;
  --alto-control: 56px;
  --ancho-maximo: 720px;
}

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

html {
  font-size: var(--texto-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  line-height: 1.4;
}
body.sin-scroll { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  line-height: 1.1;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; color: var(--color-primario-texto); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 0.6em; }
a { color: var(--color-primario-texto); }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio);
}

.tarjeta {
  background: var(--color-tarjeta);
  border-radius: var(--radio);
  padding: calc(var(--espacio) * 1.25);
  margin-bottom: var(--espacio);
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alto-boton);
  padding: 0 calc(var(--espacio) * 1.5);
  border: 0;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: var(--color-texto);
  font-weight: 800;
  font-size: var(--texto-grande);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { filter: brightness(0.94); }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton--grande { width: 100%; }
.boton--mediano { min-height: var(--alto-control); font-size: var(--texto-base); padding: 0 20px; }
.boton--secundario { background: var(--color-tarjeta); color: var(--color-primario-texto); box-shadow: inset 0 0 0 2px var(--color-primario); }
.boton--exito { background: var(--color-exito); color: var(--color-fondo); }
.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--color-primario-texto);
}

/* Pastilla de estado */
.pill {
  display: inline-block;
  padding: 0.35em 1em;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--texto-base);
  text-transform: uppercase;
  background: var(--color-primario);
  color: var(--color-texto);
  white-space: nowrap;
}
.pill--abierto { background: var(--color-exito); color: var(--color-fondo); }
.pill--cerrado { background: var(--color-texto); color: var(--color-tarjeta); }

/* Campos de formulario */
.campo { display: block; margin-bottom: calc(var(--espacio) * 1.25); }
.campo__etiqueta { display: block; font-weight: 800; margin-bottom: 6px; }
.campo__ayuda { display: block; font-size: var(--texto-chico); opacity: 0.7; margin-bottom: 6px; }
.campo__entrada {
  width: 100%;
  min-height: var(--alto-control);
  padding: 12px 16px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-fondo);
  font-size: var(--texto-base);
}
.campo__entrada:focus { border-color: var(--color-primario); outline: none; box-shadow: 0 0 0 3px var(--color-tarjeta); }
textarea.campo__entrada { min-height: 88px; resize: vertical; }
.campo--error .campo__entrada { border-color: var(--color-error); }
.campo__error { display: block; color: var(--color-error); font-weight: 700; font-size: var(--texto-chico); margin-top: 6px; }

/* Contador de cantidad */
.contador {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 2px solid var(--color-primario);
  background: var(--color-fondo);
}
.contador__boton {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primario-texto);
  cursor: pointer;
}
.contador__boton:disabled { opacity: 0.35; cursor: not-allowed; }
.contador__valor { min-width: 40px; text-align: center; font-weight: 800; font-size: var(--texto-grande); }

/* Chips seleccionables (franjas, categorías, atajos) */
.chip {
  min-height: var(--alto-control);
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--color-borde);
  background: var(--color-fondo);
  font-weight: 700;
  font-size: var(--texto-base);
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--color-primario); border-color: var(--color-primario); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Tarjetas de opción excluyente (métodos de pago) */
.opcion-radio { display: block; margin-bottom: 10px; position: relative; }
.opcion-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-radio__caja {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--alto-boton);
  padding: 12px 16px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-fondo);
  cursor: pointer;
}
.opcion-radio__marca {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-borde);
  flex: none;
}
.opcion-radio input:checked + .opcion-radio__caja { border-color: var(--color-primario); background: var(--color-tarjeta); }
.opcion-radio input:checked + .opcion-radio__caja .opcion-radio__marca {
  border-color: var(--color-primario);
  background: radial-gradient(var(--color-primario) 45%, transparent 52%);
}
.opcion-radio input:focus-visible + .opcion-radio__caja { outline: 3px solid var(--color-primario); outline-offset: 2px; }
.opcion-radio__titulo { font-weight: 800; }
.opcion-radio__detalle { font-size: var(--texto-chico); opacity: 0.75; }

/* Avisos (toast) */
.avisos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--espacio);
  pointer-events: none;
  z-index: 40;
}
.aviso {
  max-width: var(--ancho-maximo);
  padding: 14px 20px;
  border-radius: var(--radio-chico);
  background: var(--color-texto);
  color: var(--color-tarjeta);
  font-weight: 700;
  box-shadow: var(--sombra);
}
.aviso--error { background: var(--color-error); color: var(--color-fondo); }
.aviso--exito { background: var(--color-exito); color: var(--color-fondo); }

/* Hoja inferior */
.hoja { position: fixed; inset: 0; z-index: 30; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(44, 44, 42, 0.5); }
.hoja__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  overflow: auto;
  margin: 0 auto;
  max-width: var(--ancho-maximo);
  background: var(--color-fondo);
  border-radius: 24px 24px 0 0;
  padding: var(--espacio) var(--espacio) calc(var(--espacio) + env(safe-area-inset-bottom));
  box-shadow: var(--sombra);
}
.hoja__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hoja__titulo { margin: 0; font: 800 var(--texto-grande) var(--fuente-cuerpo); text-transform: none; letter-spacing: 0; color: var(--color-texto); }
.hoja__cerrar { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--color-sutil); font-weight: 700; cursor: pointer; }

/* Utilidades */
.destacado { color: var(--color-primario-texto); font-weight: 700; }
.silenciado { opacity: 0.7; }
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}