/* Diálogos (producto y carrito), contador de cantidad y botón flotante. Mobile-first. */

/* ---------- Diálogo: hoja inferior en móvil, centrado en pantallas grandes ---------- */
.dialogo {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
}

.dialogo::backdrop {
  background: var(--color-velo);
}

.dialogo__contenido {
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
}

.dialogo__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-4) var(--esp-2);
}

.dialogo__titulo {
  margin: 0;
  font-size: var(--texto-lg);
}

.dialogo__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--esp-4) var(--esp-3);
  overscroll-behavior: contain;
}

.dialogo__descripcion {
  margin: 0 0 var(--esp-2);
  color: var(--color-texto-suave);
}

.dialogo__precio {
  margin: 0 0 var(--esp-4);
  font-weight: var(--peso-fuerte);
}

.dialogo__pie {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-borde);
}

.dialogo__pie .boton {
  flex: 1;
}

.dialogo__pie--columna {
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-2);
}

.dialogo__contenido > .campo__error {
  padding: 0 var(--esp-4) var(--esp-3);
}

@media (min-width: 600px) {
  .dialogo {
    max-width: 480px;
    margin: auto;
    border-radius: var(--radio-lg);
  }
}

/* ---------- Grupos de opciones ---------- */
.opciones {
  margin: 0 0 var(--esp-4);
  padding: 0;
  border: 0;
}

.opciones__titulo {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--esp-2);
  font-weight: var(--peso-fuerte);
}

.opciones__indicacion {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}

.opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--objetivo-tactil);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--color-borde);
  cursor: pointer;
}

.opcion input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primario);
}

.opcion__nombre {
  flex: 1;
}

.opcion__extra {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

.opcion:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Contador de cantidad ---------- */
.contador {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pildora);
}

.contador__boton {
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  border: 0;
  background: none;
  color: var(--color-texto);
  font-size: var(--texto-lg);
  cursor: pointer;
}

.contador__boton:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.contador__valor {
  min-width: 2ch;
  font-weight: var(--peso-fuerte);
  text-align: center;
}

.contador--chico .contador__boton {
  width: 36px;
  height: 36px;
}

/* ---------- Líneas del carrito ---------- */
.carrito__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carrito__linea {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--color-borde);
}

.carrito__info {
  flex: 1;
  min-width: 0;
}

.carrito__nombre,
.carrito__importe {
  margin: 0;
  font-weight: var(--peso-fuerte);
}

.carrito__detalle {
  margin: var(--esp-1) 0 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

.carrito__notas {
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
}

.carrito__notas summary {
  color: var(--color-primario);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.carrito__form-nota {
  display: flex;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.carrito__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--esp-2);
}

.carrito__subtotal {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-weight: var(--peso-fuerte);
}

.carrito__nota {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* ---------- Botón flotante ---------- */
.carrito-flotante {
  position: fixed;
  right: var(--esp-3);
  bottom: calc(var(--esp-3) + env(safe-area-inset-bottom));
  left: var(--esp-3);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 52px;
  padding: 0 var(--esp-4);
  border: 0;
  border-radius: var(--radio-pildora);
  background: var(--color-primario);
  box-shadow: var(--sombra-2);
  color: var(--color-primario-contraste);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

.carrito-flotante[hidden] {
  display: none;
}

.carrito-flotante__cantidad {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--esp-1);
  border-radius: var(--radio-pildora);
  background: var(--color-primario-contraste);
  color: var(--color-primario);
  font-size: var(--texto-sm);
}

.carrito-flotante__texto {
  flex: 1;
  text-align: left;
}

/* Espacio para que el botón flotante no tape el último producto. */
body.con-carrito main {
  padding-bottom: 96px;
}

@media (min-width: 600px) {
  .carrito-flotante {
    left: auto;
    min-width: 320px;
  }
}

/* El pie (aviso de privacidad) también queda arriba del botón flotante. */
body.con-carrito .pie {
  padding-bottom: 112px;
}