/* ==========================================================================
   GELÉE — ordenar.css
   Formulario de pedido. Solo se carga en ordenar.html.
   Una sola columna, campos de 48px de alto, etiquetas siempre visibles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Envoltura
   La página es una tarea, no una lectura: se limita el ancho para que el
   formulario no se estire y se centra el bloque completo.
   -------------------------------------------------------------------------- */
.pedido {
  max-width: 560px;
}

.pedido__intro {
  margin-bottom: var(--esp-24);
}

.pedido__intro p {
  margin-top: var(--esp-8);
}

/* --------------------------------------------------------------------------
   2. Aviso previo al formulario
   -------------------------------------------------------------------------- */
/* Sobre el crema de la página, el bloque rosa lleno daba poco contraste con
   el texto y ninguna jerarquía. Ahora es una tarjeta blanca con una regla
   rosa a la izquierda: se lee como nota al margen, no como relleno. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-16);
  max-width: none;
  margin-bottom: var(--esp-32);
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--marca);
  border-radius: var(--radio);
  padding: var(--esp-16);
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--texto);
}

.aviso__icono {
  width: 18px;
  height: 18px;
  flex: none;
  /* Alinea el ícono con la primera línea de texto, no con el borde de la caja */
  margin-top: 1px;
  color: var(--marca);
}

/* --------------------------------------------------------------------------
   2b. Foto del sabor elegido
   Aparece bajo el select y cambia con él; sin sabor no se muestra nada.
   -------------------------------------------------------------------------- */
.sabor-vista {
  margin: var(--esp-8) 0 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-foto);
  background-color: var(--rosa); /* se ve mientras carga la foto */
}

.sabor-vista__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

@media (min-width: 700px) {
  /* En pantallas anchas la foto a todo lo ancho del formulario sería enorme */
  .sabor-vista { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   3. Formulario
   -------------------------------------------------------------------------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-24);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
}

.campo__etiqueta {
  font-size: var(--t-chico);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto);
}

.campo__opcional {
  font-weight: 400;
  color: var(--texto-suave);
}

/* Un único estilo para input, select y textarea */
.campo__control {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--esp-16);
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-cuerpo); /* 16px: evita el zoom automático en iOS */
  line-height: 1.4;
  transition: border-color var(--transicion);
}

.campo__control:hover { border-color: var(--texto-suave); }

.campo__control:focus-visible {
  border-color: var(--marca);
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}

textarea.campo__control {
  min-height: 96px;
  resize: vertical;
}

/* Select: se quita la flecha del sistema y se dibuja una propia */
select.campo__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--esp-40);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-16) center;
  background-size: 18px 18px;
}

/* El calendario nativo hereda el acento de la marca */
input[type="date"].campo__control {
  accent-color: var(--marca);
}

/* Nota de ayuda bajo un campo. Gris y de 14px, informa sin alarmar.
   El rojo de --error queda reservado para la validación. */
.campo__ayuda {
  max-width: none;
  margin: 0;
  font-size: var(--t-chico);
  line-height: 1.4;
  color: var(--texto-suave);
}

/* --- Estado de error --- */
.campo__control--error,
.campo__control--error:hover {
  border-color: var(--error);
}

.campo__error {
  max-width: none;
  margin: 0;
  font-size: var(--t-chico);
  line-height: 1.4;
  color: var(--error);
}

/* --------------------------------------------------------------------------
   3b. Tamaño — chico y grande
   -------------------------------------------------------------------------- */
/* Dos botones en lugar de un select. Son solo dos opciones y cada una tiene
   que enseñar su precio, cosa que un <option> no permite. */
.tamanos {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tamanos__titulo { padding: 0; }

.tamanos__opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-8);
}

/* La etiqueta es la celda; la caja se estira para que ambos botones midan
   lo mismo aunque uno lleve una línea más de texto. */
.tamano { display: grid; }

/* El radio real se esconde pero sigue existiendo, así conserva el foco, el
   teclado y el anuncio del lector de pantalla. */
.tamano__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tamano__caja {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: var(--esp-8) var(--esp-16);
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.tamano__caja:hover { border-color: var(--marca); }

.tamano__radio:checked + .tamano__caja {
  background-color: var(--rosa);
  border-color: var(--marca);
}

.tamano__radio:focus-visible + .tamano__caja {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* Sabor sin grande. El botón sigue visible para que se entienda que el tamaño
   existe en el resto del menú, pero no se puede elegir. */
.tamano__radio:disabled + .tamano__caja {
  background-color: transparent;
  border-style: dashed;
  color: var(--texto-suave);
  cursor: not-allowed;
}

.tamano__nombre { font-weight: 500; }

.tamano__precio {
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   4. Cantidad — menos / número / más
   -------------------------------------------------------------------------- */
.cantidad {
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--transicion);
}

.cantidad--error { border-color: var(--error); }

.cantidad__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  flex: 0 0 auto;
  color: var(--marca);
  transition: background-color var(--transicion), color var(--transicion);
}

.cantidad__boton:hover {
  background-color: var(--rosa);
  color: var(--marca-oscuro);
}

.cantidad__boton:disabled {
  color: var(--linea);
  cursor: default;
}

.cantidad__boton:disabled:hover { background-color: transparent; }

.cantidad__icono {
  width: 18px;
  height: 18px;
}

/* El número: sin borde propio, solo separadores verticales */
.cantidad__campo {
  width: 72px;
  min-height: 48px;
  flex: 0 0 auto;
  border: 0;
  border-inline: 1px solid var(--linea);
  border-radius: 0;
  background-color: transparent;
  text-align: center;
  font-size: var(--t-cuerpo);
  font-weight: 500;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cantidad__campo::-webkit-outer-spin-button,
.cantidad__campo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cantidad__campo:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   5. Resumen en vivo
   -------------------------------------------------------------------------- */
.resumen {
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--esp-24);
}

.resumen__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.4;
  margin-bottom: var(--esp-16);
}

.resumen__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  margin: 0;
  font-size: var(--t-chico);
}

.resumen__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-16);
}

.resumen__clave {
  color: var(--texto-suave);
}

.resumen__valor {
  text-align: right;
  font-weight: 500;
}

.resumen__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-16);
  margin-top: var(--esp-16);
  padding-top: var(--esp-16);
  border-top: 1px solid var(--linea);
}

.resumen__total-clave {
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

/* El único número grande de la página */
.resumen__total-valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--marca);
}

/* --------------------------------------------------------------------------
   6. Envío
   -------------------------------------------------------------------------- */
.formulario__enviar {
  width: 100%;
}

.formulario__nota {
  max-width: none;
  margin-top: calc(var(--esp-16) * -1); /* acerca la nota al botón */
  font-size: var(--t-chico);
  color: var(--texto-suave);
  text-align: center;
}