/**
 * @file carrito-compras.css
 * @description Estilos para el componente web personalizado 'carrito-compras' - Sistema completo de carrito de compras
 * @author Fer Bedolla
 * @version 1.0.0
 * @copyright YEYU 2025
 * @license Proprietary - All Rights Reserved
 * @since Mayo 2025
 * @dependencies carrito-compras.js
 */

/**
 * ============================================
 * CONTENEDOR PRINCIPAL Y BOTÓN FLOTANTE
 * Estilos base del carrito de compras flotante
 * ============================================
 */

/* Contenedor principal del carrito */
carrito-compras {
  position: relative;
  z-index: 1000;
  display: block;
}

/* Botón flotante del carrito - Ajustado para coincidir con selector-tema */
.carrito-flotante {
  position: fixed;
  z-index: 1000;
  top: 9px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  border: none;
  border-radius: 50%;
  background-color: var(--naranja);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2)
}

.carrito-flotante:hover {
  transform: scale(1.1);
  background-color: #FF8C35;
}

.carrito-icono {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrito-icono i {
  font-size: 1rem;
}

.carrito-contador {
  font-size: 0.75rem;
  font-weight: bold;
  position: absolute;
  top: -15px;
  right: -15px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  animation: pulsar 1s ease-out;
  color: white;
  border-radius: 50%;
  background-color: #E74C3C;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes pulsar {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/**
 * ============================================
 * MODAL PRINCIPAL DEL CARRITO
 * Sistema de modal overlay para mostrar productos del carrito
 * ============================================
 */
.carrito-modal {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.carrito-modal.abierto {
  visibility: visible;
  opacity: 1;
}

.carrito-contenido {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

@keyframes entradaModal {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ============================================
 * CABECERA Y CONTENIDO DEL CARRITO
 * Estructura interna del modal de carrito
 * ============================================
 */

.carrito-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.carrito-cabecera h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--texto);
}

.carrito-cerrar {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  color: var(--texto);
  border: none;
  background: none;
}

.carrito-cerrar:hover {
  color: var(--naranja);
}

/**
 * ============================================
 * LISTA DE PRODUCTOS DEL CARRITO
 * Estilos para la visualización de productos añadidos
 * ============================================
 */

.carrito-productos {
  overflow-y: auto;
  flex-grow: 1;
  max-height: 50vh;
  padding: 1.5rem;
}

.carrito-mensaje-vacio {
  font-size: 1.1rem;
  padding: 2rem 0;
  text-align: center;
  color: var(--texto);
}

.carrito-producto {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: calc(var(--arcilla-radio) - 8px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.producto-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

/* Nuevo contenedor para nombre y variante */
.producto-nombre-contenedor {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-grow: 1;
  padding-right: 0.5rem;
}

.producto-nombre {
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  color: var(--texto);
}

.producto-variante {
  font-size: 0.9rem;
  font-weight: normal;
  font-style: italic;
  width: 100%;
  margin-top: 0.2rem;
  color: var(--gris-claro);
}

/**
 * ============================================
 * ESTILOS PARA TEMA OSCURO
 * Adaptaciones de colores y estilos para el tema oscuro
 * ============================================
 */

:root[data-tema="oscuro"] .producto-variante {
  color: #B8B8B8;
}

.producto-precio {
  font-weight: 600;
  white-space: nowrap;
  color: var(--naranja);
}

.producto-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.producto-subtotal {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding-top: 0.8rem;
  color: var(--texto);
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

/**
 * ============================================
 * CONTROLES DE CANTIDAD
 * Botones y inputs para modificar cantidades de productos
 * ============================================
 */

.control-cantidad {
  display: flex;
  overflow: hidden;
  align-items: center;
  width: fit-content;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
}

.control-cantidad button {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: var(--texto);
  border: none;
  background-color: #EBE5E0;
  /* Color más oscuro para mejor contraste en tema claro */
}

.control-cantidad button:hover {
  background-color: rgba(255, 107, 53, 0.1);
}

.control-cantidad .cantidad-input {
  font-size: 1rem;
  font-weight: 600;
  width: 40px;
  height: 28px;
  padding: 0;
  text-align: center;
  color: var(--texto);
  border: none;
  background-color: transparent;
}

.control-cantidad .cantidad-input:focus {
  outline: none;
}

/* Eliminar las flechas del input number */
.control-cantidad .cantidad-input::-webkit-inner-spin-button,
.control-cantidad .cantidad-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.control-cantidad .cantidad-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.producto-eliminar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #E74C3C;
  border: none;
  border-radius: 50%;
  background-color: rgba(231, 76, 60, 0.1);
}

.producto-eliminar:hover {
  color: white;
  background-color: #E74C3C;
}

/**
 * ============================================
 * RESUMEN Y TOTALES DEL CARRITO
 * Sección inferior con totales y botones de acción
 * ============================================
 */

.carrito-resumen {
  padding: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 var(--arcilla-radio) var(--arcilla-radio);
  background-color: rgba(0, 0, 0, 0.03);
}

.carrito-total {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  color: var(--texto);
}

.carrito-total-precio {
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  color: var(--naranja);
}

.carrito-total-precio span:last-child {
  font-weight: 700;
}

.carrito-acciones {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.carrito-acciones button {
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.carrito-vaciar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.carrito-vaciar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.carrito-vaciar[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

:root[data-tema="oscuro"] .carrito-vaciar[disabled] {
  color: var(--crema);
}

.carrito-ordenar {
  color: white;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25);
}

.carrito-ordenar:hover {
  transform: translateY(-2px);
  background-color: #FF8C35;
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

/**
 * ============================================
 * MODAL DE SELECCIÓN DE CANTIDAD
 * Modal para seleccionar cantidad antes de añadir productos
 * ============================================
 */

/* Modal de selección de cantidad */
.modal-cantidad {
  position: fixed;
  z-index: 1002;
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-cantidad.abierto {
  visibility: visible;
  opacity: 1;
}

.modal-cantidad-contenido {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 350px;
  padding: 1.5rem;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

.modal-cantidad-titulo {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 0.8rem;
  text-align: center;
  color: var(--texto);
}

.modal-cantidad-producto {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0;
  text-align: center;
  color: var(--naranja);
}

.producto-nombre-modal {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--naranja);
}

.producto-variante-modal {
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
  color: var(--texto);
}

/* Tema oscuro */
:root[data-tema="oscuro"] .producto-variante-modal {
  opacity: 0.9;
  color: var(--crema);
}

.modal-cantidad .control-cantidad {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.modal-cantidad .control-cantidad button {
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
}

.modal-cantidad .control-cantidad .cantidad-input {
  font-size: 1.2rem;
  width: 50px;
  height: 36px;
}

.modal-cantidad-acciones {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.modal-cantidad-acciones button {
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.cantidad-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.cantidad-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cantidad-agregar {
  font-weight: 600;
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: white;
  border-radius: 20px;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25), inset 0 -2px 5px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

.cantidad-agregar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* Alerta informativa amarilla */
.alerta-informativa {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  padding: 0.8rem;
  border-radius: 8px;
  background-color: rgba(255, 193, 7, 0.2);
  /* Amarillo */
}

.alerta-informativa i {
  font-size: 1.2rem;
  margin-top: 2px;
  margin-right: 10px;
  color: #FFC107;
  /* Amarillo */
}

.alerta-informativa p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--texto);
}

/**
 * ============================================
 * SISTEMA DE ADEREZOS
 * Gestión de aderezos/ingredientes adicionales para productos
 * ============================================
 */

/* Contenedor de lista de aderezos con scroll */
.aderezos-lista-container {
  overflow-y: auto;
  max-height: 300px;
  margin-bottom: 1rem;
  padding-right: 5px;
  /* Espacio para el scroll */
}

/* Lista de aderezos */
.aderezos-lista {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Item de aderezo - Actualización de layout */
.aderezo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem;
  border-radius: 8px;
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* Distribuir espacio uniformemente */
}

.aderezo-nombre {
  font-weight: 500;
  /* Permitir que el nombre tome el espacio disponible */
  flex: 1;
  order: 1;
  margin-right: 5px;
  color: var(--texto);
  /* Nombre primero (izquierda) */
}

.aderezo-badge {
  font-size: 0.75rem;
  font-weight: 600;
  order: 2;
  min-width: 60px;
  margin: 0 8px;
  padding: 0.2rem 0.5rem;
  text-align: center;
  /* Espacio a ambos lados del badge */
  border-radius: 12px;
  /* Badge en medio */
}

.aderezo-item .control-cantidad {
  display: flex;
  overflow: hidden;
  align-items: center;
  order: 3;
  width: fit-content;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  /* Control de cantidad al final (derecha) */
}

/* Badges para indicar precio */
.aderezo-badge.gratis {
  color: white;
  background-color: #2ECC71;
  /* Verde para gratis */
}

.aderezo-badge.extra {
  color: white;
  background-color: #E74C3C;
  /* Rojo para extras */
}

.aderezo-badge.mixto {
  color: white;
  background-color: #F39C12;
  /* Naranja para mixtos */
}

/* Opciones adicionales */
.opciones-adicionales {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 8px;
  background-color: var(--arcilla-fondo-secundario);
}

/* Selector de aplicación */
.selector-aplicacion {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.selector-aplicacion label {
  font-weight: 500;
  margin-bottom: 0.2rem;
  color: var(--texto);
}

.modo-aplicacion-select {
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
  padding: 0.6rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  color: var(--gris-obscuro);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.7);
}

.modo-aplicacion-select:focus {
  border-color: var(--naranja);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.modo-aplicacion-select option {
  padding: 0.6rem;
}

.modo-aplicacion-select option:disabled {
  color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.05);
}

/* Mensaje para entregas a domicilio */
.mensaje-domicilio {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  margin-top: 0.8rem;
  padding: 0.5rem;
  color: var(--gris-obscuro);
  border-radius: 4px;
  background-color: rgba(255, 193, 7, 0.1);
  gap: 0.5rem;
}

.mensaje-domicilio i {
  color: #FFC107;
}

/**
 * ============================================
 * ESTILOS PARA TEMA OSCURO - OPCIONES DE ENTREGA
 * Adaptaciones del tema oscuro para el modal de opciones de entrega
 * ============================================
 */

/* Tema oscuro */
:root[data-tema="oscuro"] .selector-aplicacion label,
:root[data-tema="oscuro"] .selector-aplicacion select {
  color: var(--crema);
}

:root[data-tema="oscuro"] .modo-aplicacion-select {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-tema="oscuro"] .modo-aplicacion-select option {
  background-color: var(--arcilla-fondo);
}

:root[data-tema="oscuro"] .mensaje-domicilio {
  color: var(--crema);
  background-color: rgba(255, 193, 7, 0.05);
}

/* Adaptaciones para móvil */
@media (max-width: 480px) {
  .modo-aplicacion-select {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .mensaje-domicilio {
    font-size: 0.8rem;
  }
}

/* Opciones adicionales */
.opciones-adicionales {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 8px;
  background-color: var(--arcilla-fondo-secundario);
}

.opcion-aplicar {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.opcion-aplicar input[type="checkbox"] {
  margin-right: 10px;
}

.opcion-aplicar span {
  font-weight: 500;
  display: flex;
  align-items: center;
  color: var(--texto);
  gap: 8px;
}

.opcion-descripcion {
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.3rem;
  margin-left: 26px;
  color: var(--gris-claro);
}

/* Mensaje de validación */
.mensaje-validacion {
  font-size: 0.9rem;
  display: none;
  margin-bottom: 0.8rem;
  text-align: center;
  color: #E74C3C;
}

/* Subtotal de aderezos */
.aderezos-subtotal {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-top: 0.8rem;
  color: var(--texto);
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

#aderezos-precio-total {
  font-size: 1.1rem;
  color: var(--naranja);
}

/* Estilos para mostrar aderezos en el carrito */
.producto-aderezos {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0.8rem;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.02);
}

.aderezos-titulo {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--texto);
}

.aderezos-detalles {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  gap: 0.3rem;
}

.aderezo-detalle {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--texto);
}

.etiqueta-gratis {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  color: white;
  border-radius: 8px;
  background-color: #2ECC71;
}

.etiqueta-extra {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  color: white;
  border-radius: 8px;
  background-color: #E74C3C;
}

.etiqueta-mixta {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  color: white;
  border-radius: 8px;
  background-color: #F39C12;
}

.aderezos-modo {
  font-size: 0.8rem;
  font-style: italic;
  margin-bottom: 0.3rem;
  color: var(--gris-claro);
}

.aderezos-precio-extra {
  font-size: 0.85rem;
  font-weight: 500;
  color: #E74C3C;
}

/**
 * ============================================
 * ESTILOS PARA TEMA OSCURO - SISTEMA DE ADEREZOS
 * Adaptaciones del tema oscuro para el sistema de aderezos
 * ============================================
 */

:root[data-tema="oscuro"] .aderezo-item {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] .opciones-adicionales {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] .aderezo-nombre,
:root[data-tema="oscuro"] .opcion-aplicar span,
:root[data-tema="oscuro"] .aderezos-subtotal {
  color: var(--crema);
}

:root[data-tema="oscuro"] .opcion-descripcion,
:root[data-tema="oscuro"] .aderezos-modo {
  color: #B8B8B8;
}

:root[data-tema="oscuro"] .alerta-informativa {
  background-color: rgba(255, 193, 7, 0.1);
}

:root[data-tema="oscuro"] .alerta-informativa p {
  color: var(--crema);
}

:root[data-tema="oscuro"] .producto-aderezos {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
}

:root[data-tema="oscuro"] .aderezos-titulo,
:root[data-tema="oscuro"] .aderezo-detalle {
  color: var(--crema);
}

/* Modificar los controles de cantidad específicamente en aderezo-item para que coincidan con modal-cantidad */
.aderezo-item .control-cantidad {
  display: flex;
  overflow: hidden;
  align-items: center;
  width: fit-content;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
}

.aderezo-item .control-cantidad button {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: var(--texto);
  border: none;
  background-color: #EBE5E0;
  /* Asegurar que los botones tengan un área táctil adecuada */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.aderezo-item .control-cantidad button:hover,
.aderezo-item .control-cantidad button:active {
  background-color: rgba(255, 107, 53, 0.1);
}

.aderezo-item .control-cantidad .cantidad-input {
  font-size: 1rem;
  font-weight: 600;
  width: 40px;
  height: 28px;
  padding: 0;
  text-align: center;
  color: var(--texto);
  border: none;
  background-color: transparent;
}

/* Tema oscuro para botones de aderezo */
:root[data-tema="oscuro"] .aderezo-item .control-cantidad button {
  color: var(--crema);
  background-color: #625A56;
}

:root[data-tema="oscuro"] .aderezo-item .control-cantidad button:hover,
:root[data-tema="oscuro"] .aderezo-item .control-cantidad button:active {
  background-color: rgba(255, 107, 53, 0.2);
}

/* Adaptaciones para móvil */
@media (max-width: 480px) {
  .aderezos-lista-container {
    max-height: 50vh;
    /* Reducir altura para dar espacio a otros elementos */
  }

  /* Aumentar área táctil para botones en móviles */
  .aderezo-item .control-cantidad button {
    width: 32px;
    height: 32px;
  }

  .aderezo-item {
    flex-wrap: nowrap;
    padding: 0.6rem;
    /* Evitar que se envuelvan en móviles */
  }

  .aderezo-nombre {
    font-size: 0.9rem;
    margin-right: 3px;
  }

  .aderezo-badge {
    font-size: 0.7rem;
    min-width: 50px;
    margin: 0 4px;
    padding: 0.1rem 0.3rem;
  }
}

/**
 * ============================================
 * ADAPTACIONES RESPONSIVAS - TABLETS
 * Ajustes para dispositivos medianos (768px y menores)
 * ============================================
 */

/* Adaptaciones para móvil */
@media (max-width: 768px) {
  .aderezo-item {
    padding: 0.6rem;
  }

  .aderezo-badge {
    font-size: 0.7rem;
    min-width: 50px;
  }

  .alerta-informativa p {
    font-size: 0.78rem;
  }

  .aderezos-lista-container {
    max-height: 250px;
  }
}

/**
 * ============================================
 * SISTEMA DE NOTIFICACIONES
 * Notificaciones toast para acciones del carrito
 * ============================================
 */

/* Notificación mejorada */
.carrito-notificacion {
  position: fixed;
  z-index: 1003;
  right: 1.5rem;
  bottom: 1.5rem;
  min-width: 300px;
  max-width: 90%;
  padding: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(100px);
  opacity: 0;
  color: var(--texto);
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

.carrito-notificacion.visible {
  transform: translateY(0);
  opacity: 1;
}

.notificacion-contenido {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
}

.notificacion-icono {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.carrito-notificacion.exito .notificacion-icono {
  color: #2ECC71;
}

.carrito-notificacion.error .notificacion-icono {
  color: #E74C3C;
}

.carrito-notificacion.advertencia .notificacion-icono {
  color: #F39C12;
}

.carrito-notificacion.info .notificacion-icono {
  color: var(--naranja);
}

.notificacion-mensaje {
  font-size: 1rem;
  flex-grow: 1;
}

/**
 * ============================================
 * MODAL DE CONFIRMACIÓN
 * Modal para confirmar acciones como vaciar carrito
 * ============================================
 */

/* Modal de confirmación */
.carrito-confirmacion {
  position: fixed;
  z-index: 1004;
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.carrito-confirmacion.visible {
  visibility: visible;
  opacity: 1;
}

.confirmacion-contenido {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  padding: 1.5rem;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

.confirmacion-mensaje {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.5rem;
  text-align: center;
}

.confirmacion-mensaje i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--naranja);
}

.confirmacion-mensaje p {
  font-size: 1.1rem;
  color: var(--texto);
}

.confirmacion-botones {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: 1rem;
}

.confirmacion-botones button {
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.boton-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.boton-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.boton-confirmar {
  color: white;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25);
}

.boton-confirmar:hover {
  transform: translateY(-2px);
  background-color: #FF8C35;
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

/* Media queries para móvil landscape - Modal de confirmación */
@media (max-height: 500px) and (orientation: landscape) {
  .confirmacion-contenido {
    max-height: 98vh;
    padding: 1rem;
    overflow-y: auto;
  }

  .confirmacion-mensaje {
    margin-bottom: 1rem;
  }

  .confirmacion-mensaje i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .confirmacion-mensaje p {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .confirmacion-botones {
    gap: 0.5rem;
  }

  .confirmacion-botones button {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

@media (max-height: 450px) and (orientation: landscape) {
  .confirmacion-contenido {
    max-height: 98vh;
    padding: 0.8rem;
  }

  .confirmacion-mensaje {
    margin-bottom: 0.8rem;
  }

  .confirmacion-mensaje i {
    margin-bottom: 0.3rem;
  }

  .confirmacion-mensaje p {
    line-height: 1.3;
  }
}

/* Bloquear scroll del body cuando modal de confirmación está abierto */
body.carrito-confirmacion-abierto {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/**
 * ============================================
 * MODAL DE OPCIONES DE ENTREGA
 * Modal para seleccionar método de entrega y capturar datos
 * ============================================
 */

/* Modal de opciones de entrega */
.modal-entrega {
  position: fixed;
  z-index: 1005;
  /* Mayor que otros modales */
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-entrega.abierto {
  visibility: visible;
  opacity: 1;
}

.modal-entrega-contenido {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  padding: 0;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

.entrega-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.entrega-cabecera h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--texto);
}

.entrega-cerrar {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  color: var(--texto);
  border: none;
  background: none;
}

.entrega-cerrar:hover {
  color: var(--naranja);
}

.entrega-opciones {
  overflow-y: auto;
  padding: 1.5rem;
}

.opcion-entrega {
  margin-bottom: 1.2rem;
  padding: 1rem;
  transition: box-shadow 0.3s ease;
  border-radius: calc(var(--arcilla-radio) - 8px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.opcion-entrega:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.opcion-entrega-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.opcion-entrega-header input[type="radio"] {
  margin-right: 10px;
  cursor: pointer;
}

.opcion-entrega-header label {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  color: var(--texto);
}

.opcion-entrega-header i {
  font-size: 1.2rem;
  margin-right: 10px;
  color: var(--naranja);
}

.opcion-entrega-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.opcion-entrega-detalle {
  display: none;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

textarea#direccion-domicilio {
  font-family: inherit;
  width: 100%;
  min-height: 80px;
  margin-bottom: 10px;
  padding: 10px;
  resize: vertical;
  color: var(--gris-obscuro);
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Mejorar contraste del placeholder del textarea en modo oscuro */
:root[data-tema="oscuro"] textarea#direccion-domicilio::placeholder {
  color: rgba(255, 255, 255, 0.7);
  /* Color más claro y visible para el placeholder */
}

/* Asegurar compatibilidad con diferentes navegadores */
:root[data-tema="oscuro"] textarea#direccion-domicilio::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

:root[data-tema="oscuro"] textarea#direccion-domicilio::-moz-placeholder {
  opacity: 1;
  color: rgba(255, 255, 255, 0.7);
}

:root[data-tema="oscuro"] textarea#direccion-domicilio:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.selector-sucursal {
  margin-bottom: 15px;
}

.selector-sucursal label {
  display: block;
  margin-bottom: 8px;
  color: var(--texto);
}

.selector-sucursal select {
  font-family: inherit;
  width: 100%;
  padding: 10px;
  color: var(--gris-obscuro);
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}

:root[data-tema="oscuro"] .selector-sucursal select {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.3);
}

:root[data-tema="oscuro"] .selector-sucursal select option {
  color: var(--crema);
  background-color: var(--arcilla-fondo);
}

.info-metodo-pago {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.3);
}

.info-metodo-pago i {
  font-size: 1rem;
  margin-top: 3px;
  margin-right: 10px;
  color: var(--naranja);
}

.info-metodo-pago p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--texto);
}

.info-cobertura {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.3);
}

.info-cobertura i {
  font-size: 1rem;
  margin-top: 3px;
  margin-right: 10px;
  color: var(--naranja);
}

.info-cobertura p {
  font-size: 0.9rem;
  margin: 0 0 5px 0;
  color: var(--texto);
}

.cobertura-info p:last-child {
  margin-bottom: 0;
}

.cobertura-nota {
  font-style: italic;
  opacity: 0.85;
}

.entrega-acciones {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  gap: 1rem;
}

.entrega-acciones button {
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.entrega-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.entrega-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.entrega-confirmar {
  color: white;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25);
}

.entrega-confirmar:hover:not([disabled]) {
  transform: translateY(-2px);
  background-color: #FF8C35;
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

.entrega-confirmar[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: #CCCCCC;
  box-shadow: none;
}

/* Tema oscuro para opciones de entrega */
:root[data-tema="oscuro"] .entrega-cabecera h3,
:root[data-tema="oscuro"] .entrega-cerrar,
:root[data-tema="oscuro"] .opcion-entrega-header label,
:root[data-tema="oscuro"] .opcion-entrega-header h4,
:root[data-tema="oscuro"] .selector-sucursal label,
:root[data-tema="oscuro"] .info-metodo-pago p,
:root[data-tema="oscuro"] .info-cobertura p,
:root[data-tema="oscuro"] .entrega-cancelar {
  color: var(--crema);
}

:root[data-tema="oscuro"] .opcion-entrega {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] textarea#direccion-domicilio,
:root[data-tema="oscuro"] .selector-sucursal select {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-tema="oscuro"] .info-metodo-pago {
  background-color: rgba(0, 0, 0, 0.2);
}

:root[data-tema="oscuro"] .info-cobertura {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Estilos para la sección de datos del cliente */
.datos-cliente {
  margin-bottom: 1.2rem;
  padding: 1rem;
  border-radius: calc(var(--arcilla-radio) - 8px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.datos-cliente h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.8rem 0;
  color: var(--texto);
}

.campo-formulario {
  margin-bottom: 0.8rem;
}

.campo-formulario label {
  font-weight: 500;
  display: block;
  margin-bottom: 0.4rem;
  color: var(--texto);
}

.campo-formulario input {
  font-family: inherit;
  width: 100%;
  padding: 10px;
  color: var(--gris-obscuro);
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}

.campo-formulario textarea {
  font-family: inherit;
  width: 100%;
  min-height: 80px;
  padding: 10px;
  resize: vertical;
  color: var(--gris-obscuro);
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}

:root[data-tema="oscuro"] .campo-formulario textarea {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-tema="oscuro"] .campo-formulario textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.nombre-producto-destacado {
  font-weight: bold;
  display: block;
  color: #E7941F;
}

.variante-aderezo {
  font-size: 0.9em;
  font-style: italic;
  display: block;
}

/**
 * ============================================
 * MODALES DE PERSONALIZACIÓN
 * Modales para personalizar banderillas y productos individuales
 * ============================================
 */

/* Estilos para el modal de personalización */
.modal-personalizacion,
.modal-banderilla-individual {
  position: fixed;
  z-index: 1002;
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-personalizacion.abierto,
.modal-banderilla-individual.abierto {
  visibility: visible;
  opacity: 1;
}

.modal-personalizacion-contenido,
.modal-individual-contenido {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  /* Limitar altura para evitar que se corte en pantallas pequeñas */
  max-height: 85vh;
  padding: 1.5rem;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
  /* Asegurar que el contenido sea scrollable */
}

/* Mejoras específicas para modal-individual-contenido */
.modal-individual-contenido {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
}

/* Mejorar la cabecera del modal para que ocupe menos espacio */
.individual-cabecera {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.individual-info-contenedor {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 80%;
  /* Para dar espacio a los botones de navegación */
}

.individual-titulo-producto {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  text-align: center;
  color: var(--texto);
}

.individual-navegacion {
  font-size: 0.95rem;
  text-align: center;
  color: var(--gris-claro);
}

/* Compatible con tema oscuro */
:root[data-tema="oscuro"] .individual-titulo-producto {
  color: var(--crema);
}

:root[data-tema="oscuro"] .individual-navegacion {
  color: #B8B8B8;
}

.producto-notas {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0.8rem;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.02);
}

.notas-titulo {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--texto);
}

.notas-contenido {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gris-claro);
}

:root[data-tema="oscuro"] .producto-notas {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
}

:root[data-tema="oscuro"] .notas-titulo {
  color: var(--crema);
}

:root[data-tema="oscuro"] .notas-contenido {
  color: #B8B8B8;
}

select {
  padding-right: 5px !important;
  padding-left: 15px !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666666' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) center;
  /* Posicionar flecha */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

:root[data-tema="oscuro"] select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23cccccc' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
}

.nav-anterior,
.nav-siguiente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--crema);
  border: none;
  border-radius: 50%;
  background-color: var(--naranja);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

.nav-anterior:hover,
.nav-siguiente:hover {
  transform: scale(1.1);
  background-color: #FF8C35;
  /* Slightly lighter orange for hover */
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
}

/* Same styling for dark theme to ensure consistency */
:root[data-tema="oscuro"] .nav-anterior,
:root[data-tema="oscuro"] .nav-siguiente {
  color: var(--crema);
  background-color: var(--naranja);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 480px) {
  .individual-titulo-producto {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
  }

  .individual-navegacion {
    font-size: 0.85rem;
  }
}

/* Para dispositivos muy pequeños */
@media (max-height: 667px) {
  .individual-titulo-producto {
    font-size: 1rem;
    margin-bottom: 0.1rem;
  }
}

/* Hacer el contenido interno scrollable */
.individual-contenido {
  overflow-y: auto;
  flex-grow: 1;
}

/* Ajustar aderezos-lista-container para pantallas pequeñas */
.modal-banderilla-individual .aderezos-lista-container {
  overflow-y: auto;
  /* Quitar altura máxima fija para que sea proporcional */
  flex-grow: 1;
  max-height: none;
}

/* Optimizar área de notas */
.individual-notas {
  flex-shrink: 0;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

/* Garantizar que los botones de acción siempre estén visibles */
.individual-acciones {
  flex-shrink: 0;
  /* No permitir que se contraiga */
  margin-top: auto;
  /* Empujar al fondo */
}

/* Media queries para dispositivos pequeños en modo vertical */
@media (max-height: 700px) {
  .modal-individual-contenido {
    max-height: 90vh;
    padding: 1rem 1rem 0.8rem;
    /* Permitir usar casi toda la pantalla */
  }

  .individual-cabecera {
    margin-bottom: 0.5rem;
  }

  .individual-titulo {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .nav-anterior,
  .nav-siguiente {
    width: 36px;
    height: 36px;
  }

  .modal-banderilla-individual .aderezo-item {
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.6rem;
  }

  .individual-notas label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  #notas-banderilla {
    min-height: 60px;
    padding: 0.5rem;
  }

  .individual-acciones button {
    padding: 0.6rem;
  }

  /* Hacer que la lista de aderezos use menos espacio */
  .modal-banderilla-individual .aderezos-lista-container {
    margin-bottom: 0.5rem;
  }

  /* Reducir espacios en opciones adicionales */
  .modal-banderilla-individual .opciones-adicionales {
    margin-bottom: 0.5rem;
    padding: 0.6rem;
  }

  /* Reducir el tamaño del texto en los selectores */
  .modal-banderilla-individual .modo-aplicacion-select {
    font-size: 0.85rem;
    padding: 0.4rem;
  }
}

/* Media queries para dispositivos muy pequeños (iPhone SE, etc.) */
@media (max-height: 667px) {
  .modal-individual-contenido {
    max-height: 95vh;
    padding: 0.8rem 0.8rem 0.6rem;
    /* Usar casi toda la pantalla */
  }

  .individual-cabecera {
    margin-bottom: 0.4rem;
  }

  /* Permitir que el contenedor de aderezos se adapte mejor */
  .modal-banderilla-individual .aderezos-lista-container {
    max-height: 45vh;
    /* Limitar la altura para dejar espacio a los otros elementos */
  }

  /* Hacer los items de aderezos más compactos */
  .modal-banderilla-individual .aderezo-item {
    padding: 0.4rem;
  }

  .modal-banderilla-individual .aderezo-badge {
    font-size: 0.7rem;
    min-width: 45px;
    padding: 0.15rem 0.3rem;
  }

  /* Reducir tamaño de los controles para ahorrar espacio */
  .modal-banderilla-individual .control-cantidad button {
    width: 26px;
    height: 26px;
  }

  .modal-banderilla-individual .control-cantidad .cantidad-input {
    font-size: 0.9rem;
    width: 35px;
    height: 26px;
  }

  #notas-banderilla {
    font-size: 0.85rem;
    min-height: 45px;
  }
}

/**
 * ============================================
 * ADAPTACIONES RESPONSIVAS - ORIENTACIÓN HORIZONTAL
 * Ajustes específicos para dispositivos en modo landscape
 * ============================================
 */

@media (max-height: 450px) and (orientation: landscape) {
  .modal-individual-contenido {
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 95%;
    max-height: 95vh;
    padding: 0.8rem;
    gap: 0.8rem;
  }

  .individual-cabecera {
    order: 1;
    width: 100%;
    margin-bottom: 0.3rem !important;
  }

  .individual-contenido {
    position: relative;
    order: 2;
    width: 65%;
    max-height: calc(90vh - 11rem);
    padding-bottom: 0;
  }

  .individual-notas-container {
    display: flex;
    flex-direction: column;
    order: 3;
    width: 30%;
    gap: 0.5rem;
  }

  .aderezos-subtotal {
    font-size: 0.8rem;
    margin: 0 !important;
    padding: 0.4rem;
    border-radius: 4px;
    background-color: rgba(255, 107, 53, 0.08);
  }

  #aderezos-precio-total {
    font-size: 0.9rem;
  }

  .individual-notas {
    flex-grow: 1;
    margin-top: -2px !important;
    margin-bottom: -10px !important;
  }

  .individual-acciones {
    order: 4;
    width: 100%;
    margin-top: 0 !important;
  }

  /* Hacer más compacta la lista de aderezos */
  .modal-banderilla-individual .aderezos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
  }

  .modal-banderilla-individual .aderezo-item {
    margin-bottom: 0;
  }

  #notas-banderilla {
    height: 66%;
    min-height: 100px;
  }
}

@media (max-height: 667px) and (orientation: landscape) {
  .modal-personalizacion-contenido {
    max-height: 95vh;
    padding: 1rem;
  }

  .modal-personalizacion-titulo {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .opciones-personalizacion {
    margin: 0.5rem 0;
    gap: 0.7rem;
  }

  .opciones-personalizacion button {
    min-height: 55px;
    padding: 0.7rem;
  }

  .modal-personalizacion-acciones {
    margin-top: 0.8rem;
  }

  .modal-personalizacion-acciones button {
    padding: 0.6rem;
  }

  .carrito-contenido {
    max-height: 95vh !important;
  }

  .carrito-cabecera {
    padding: 0.6rem 1rem;
  }

  .carrito-cabecera h3 {
    font-size: 1.3rem;
  }

  /* Hacer más compacto el área de resumen */
  .carrito-resumen {
    padding: 0.8rem;
  }

  /* Reducir espacio del total */
  .carrito-total,
  .carrito-total-precio {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
  }

  /* Poner los botones de acciones en horizontal */
  .carrito-acocines {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .carrito-acciones button {
    font-size: 0.9rem;
    padding: 0.4rem;
  }

  /* Dar más espacio a los productos */
  .carrito-productos {
    max-height: 55vh;
    /* Mayor espacio para productos */
  }

  /* Hacer los productos más compactos */
  .carrito-producto {
    margin-bottom: 0.7rem;
    padding: 0.7rem;
  }

  .producto-subtotal {
    padding-top: 0.6rem;
  }
}

/**
 * ============================================
 * ADAPTACIONES RESPONSIVAS - ORIENTACIÓN LANDSCAPE GENERAL
 * Ajustes generales para todos los dispositivos en modo horizontal
 * ============================================
 */

@media (orientation: landscape) {
  .carrito-acciones {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }

  .carrito-acciones button {
    font-size: 0.9rem !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
    padding: 0.6rem !important;
  }
}

.cantidad-indicador {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  color: var(--naranja);
  border-radius: 16px;
  background-color: rgba(255, 107, 53, 0.1);
}

:root[data-tema="oscuro"] .cantidad-indicador {
  background-color: rgba(255, 107, 53, 0.2);
}

/* Estilos para tema oscuro */
:root[data-tema="oscuro"] .modal-personalizacion-contenido,
:root[data-tema="oscuro"] .modal-individual-contenido {
  background-color: var(--arcilla-fondo);
}

:root[data-tema="oscuro"] .modal-personalizacion-titulo,
:root[data-tema="oscuro"] .individual-titulo {
  color: var(--crema);
}

/* Opciones de personalización */
.opciones-personalizacion button:hover {
  transform: translateY(-2px);
  border-color: var(--naranja);
  background-color: rgba(255, 107, 53, 0.05);
}

/* Acciones del modal */
.modal-personalizacion-acciones {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.modal-personalizacion-acciones button {
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.personalizacion-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.personalizacion-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

:root[data-tema="oscuro"] .personalizacion-cancelar {
  color: var(--crema);
}

/* Opciones de personalización */
.opciones-personalizacion {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  gap: 15px;
}

.opciones-personalizacion button {
  display: flex;
  align-items: center;
  min-height: 65px;
  padding: 15px;
  /* Tamaño touch-friendly */
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  border-radius: 12px;
  background-color: rgba(255, 107, 53, 0.05);
}

.opciones-personalizacion button i {
  font-size: 1.4rem;
  margin-right: 15px;
  color: var(--naranja);
}

/* Corrección específica para spans en botones de personalización - Safari iOS */
.opciones-personalizacion button span {
  /* Forzar especificidad alta para Safari iOS */
  color: var(--texto) !important;

  /* Prevenir herencia de estilos de link en Safari */
  text-decoration: none !important;

  /* Asegurar tamaño de fuente consistente */
  font-size: 1rem !important;
  font-weight: 500 !important;

  /* Prevenir zoom accidental en iOS */
  -webkit-text-size-adjust: 100%;

  /* Forzar renderizado de fuente */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Asegurar display correcto */
  display: inline !important;

  /* Prevenir comportamiento de enlace */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;

  /* Forzar font-family */
  font-family: "Poppins", sans-serif !important;
}

:root[data-tema="oscuro"] .opciones-personalizacion button span {
  color: var(--crema) !important;
}

/* Navegación entre banderillas */
.individual-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.nav-anterior,
.nav-siguiente {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
}

/* Ajustes responsivos */
@media (max-width: 480px) {
  .individual-cabecera {
    margin-bottom: 10px;
  }

  .individual-notas textarea {
    min-height: 60px;
  }
}

.individual-notas {
  margin-top: 15px;
  margin-bottom: 20px;
}

.individual-notas label {
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
  color: var(--texto);
}

:root[data-tema="oscuro"] .individual-notas label {
  color: var(--crema);
}

#notas-banderilla {
  font-family: inherit;
  font-size: 0.95rem;
  width: 100%;
  min-height: 80px;
  padding: 12px;
  resize: vertical;
  transition: all 0.3s ease;
  color: var(--texto);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

#notas-banderilla:focus {
  border-color: var(--naranja);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

:root[data-tema="oscuro"] #notas-banderilla {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

:root[data-tema="oscuro"] #notas-banderilla::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Estilos para botones de acción individual */
.individual-acciones {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  gap: 1rem;
}

.individual-acciones button {
  font-size: 0.95rem;
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.individual-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.individual-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

:root[data-tema="oscuro"] .individual-cancelar {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.3) !important;
}

:root[data-tema="oscuro"] .individual-cancelar:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.individual-continuar,
.individual-finalizar {
  color: white;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25);
}

.individual-continuar:hover,
.individual-finalizar:hover {
  transform: translateY(-2px);
  background-color: #FF8C35;
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

/* Ajustes responsivos para móviles */
@media (max-width: 480px) {
  #notas-banderilla {
    font-size: 0.9rem;
    min-height: 60px;
    padding: 10px;
  }

  .individual-acciones button {
    font-size: 0.9rem;
    padding: 10px;
  }
}

/* Tema oscuro para los nuevos elementos */
:root[data-tema="oscuro"] .datos-cliente {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] .datos-cliente h4,
:root[data-tema="oscuro"] .campo-formulario label {
  color: var(--crema);
}

:root[data-tema="oscuro"] .campo-formulario input {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-tema="oscuro"] .campo-formulario input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Adaptaciones responsivas */

@media (max-width: 768px) {
  .modal-entrega-contenido {
    width: 95%;
    max-height: 90vh;
  }

  .entrega-opciones {
    padding: 1rem;
  }

  .opcion-entrega {
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  .entrega-cabecera h3 {
    font-size: 1.3rem;
  }

  .opcion-entrega-header h4 {
    font-size: 1rem;
  }

  .entrega-acciones {
    padding: 1rem;
  }
}

/* Tema oscuro */
:root[data-tema="oscuro"] .carrito-contenido,
:root[data-tema="oscuro"] .modal-cantidad-contenido,
:root[data-tema="oscuro"] .carrito-notificacion,
:root[data-tema="oscuro"] .confirmacion-contenido {
  background-color: var(--arcilla-fondo);
}

:root[data-tema="oscuro"] .carrito-producto {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] .producto-nombre {
  color: var(--crema);
}

/* Mejorar contraste de las variantes en tema oscuro */
:root[data-tema="oscuro"] .producto-nombre .variante {
  color: #B8B8B8;
  /* Color más claro que el gris-claro para mejor contraste */
}

:root[data-tema="oscuro"] .carrito-cabecera h3,
:root[data-tema="oscuro"] .carrito-mensaje-vacio,
:root[data-tema="oscuro"] .carrito-total,
:root[data-tema="oscuro"] .cantidad-cancelar,
:root[data-tema="oscuro"] .carrito-vaciar,
:root[data-tema="oscuro"] .modal-cantidad-titulo,
:root[data-tema="oscuro"] .producto-subtotal,
:root[data-tema="oscuro"] .notificacion-mensaje,
:root[data-tema="oscuro"] .confirmacion-mensaje p,
:root[data-tema="oscuro"] .boton-cancelar {
  color: var(--crema);
}

:root[data-tema="oscuro"] .carrito-cerrar,
:root[data-tema="oscuro"] .control-cantidad button {
  color: var(--crema);
}

:root[data-tema="oscuro"] .control-cantidad .cantidad-input {
  color: var(--crema);
}

:root[data-tema="oscuro"] .control-cantidad {
  background-color: rgba(255, 255, 255, 0.2);
}

:root[data-tema="oscuro"] .control-cantidad button {
  background-color: #625A56;
  /* Color más claro que var(--arcilla-fondo) para mejor contraste */
}

:root[data-tema="oscuro"] .control-cantidad button:hover {
  background-color: rgba(255, 107, 53, 0.2);
}

:root[data-tema="oscuro"] .carrito-notificacion.exito .notificacion-icono {
  color: #50FA7B;
}

:root[data-tema="oscuro"] .carrito-notificacion.error .notificacion-icono {
  color: #FF5555;
}

:root[data-tema="oscuro"] .carrito-notificacion.advertencia .notificacion-icono {
  color: #FFB86C;
}

/**
 * ============================================
 * ADAPTACIONES RESPONSIVAS - MÓVILES
 * Ajustes específicos para dispositivos móviles (768px y menores)
 * ============================================
 */

/* Responsivo */
@media (max-width: 768px) {
  .carrito-contenido {
    width: 95%;
    max-height: 90vh;
    /* Aumentar altura máxima en móvil */
  }

  .carrito-productos {
    max-height: 65vh;
    /* Aumentar considerablemente el espacio para productos */
    padding: 1rem 1.5rem;
    /* Reducir padding vertical */
  }

  .carrito-acciones {
    flex-direction: column;
  }

  .modal-cantidad-contenido {
    /* Ancho optimizado para móviles - mejorado para mejor aprovechamiento del espacio */
    width: 98%;
  }

  .carrito-notificacion {
    right: 1rem;
    bottom: 1rem;
    min-width: 250px;
  }

  .confirmacion-contenido {
    width: 95%;
  }

  .confirmacion-mensaje i {
    font-size: 2rem;
  }

  .confirmacion-mensaje p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .carrito-contenido {
    max-height: 95vh;
    /* Casi pantalla completa en móviles pequeños */
  }

  .carrito-productos {
    max-height: 70vh;
    /* Aún más espacio en móviles pequeños */
    padding: 0.8rem 1rem;
    /* Padding más compacto */
  }

  .carrito-cabecera {
    padding: 0.8rem 1rem;
  }

  .carrito-cabecera h3 {
    font-size: 1.3rem;
  }

  .carrito-resumen {
    padding: 1rem;
    /* Reducir padding */
  }

  .producto-nombre {
    font-size: 0.95rem;
  }

  .carrito-total {
    font-size: 1rem;
  }

  .carrito-producto {
    margin-bottom: 0.8rem;
    /* Reducir margen */
    padding: 0.8rem;
    /* Reducir padding */
  }

  /* Mejorar tamaño de texto de botones para mejor legibilidad móvil */
  .personalizacion-cancelar,
  .modal-cantidad-acciones button,
  .carrito-acciones button {
    font-size: 1rem !important;
    /* Texto más grande para mejor legibilidad en móvil */
  }

  .cantidad-agregar {
    font-size: 1rem !important;
    /* Botón principal más legible */
  }
}

.aderezos-subtotal {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: rgba(255, 107, 53, 0.1);
}

#aderezos-precio-total {
  color: var(--naranja);
}

body.modal-abierto {
  overflow: hidden;
}

.carrito-productos {
  overflow-y: auto;
  max-height: 60vh;
}

.carrito-modal.abierto {
  overflow: hidden;
}

.carrito-contenido {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}


@media (max-height: 667px) and (orientation: landscape) {
  .modal-entrega-contenido {
    width: 95%;
    max-height: 95vh;
  }

  .entrega-cabecera {
    padding: 0.6rem 1rem;
  }

  .entrega-cabecera h3 {
    font-size: 1.2rem;
    margin: 0;
  }

  .entrega-cerrar {
    font-size: 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
  }

  .entrega-opciones {
    max-height: 65vh;
    padding: 0.8rem;
  }

  .opcion-entrega {
    margin-bottom: 0.8rem;
    padding: 0.7rem;
  }

  .datos-cliente {
    margin-bottom: 0.8rem;
    padding: 0.7rem;
  }

  .datos-cliente h4 {
    font-size: 1rem;
    margin: 0 0 0.6rem 0;
  }

  .campo-formulario {
    margin-bottom: 0.6rem;
  }

  .campo-formulario label {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }

  .campo-formulario input {
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  .campo-formulario textarea {
    font-size: 0.9rem;
    min-height: 60px;
    padding: 0.5rem;
  }

  .opcion-entrega-header h4 {
    font-size: 0.95rem;
  }

  .entrega-acciones {
    padding: 0.7rem 1rem;
    gap: 0.7rem;
  }

  .entrega-acciones button {
    font-size: 0.9rem;
    padding: 0.6rem;
  }

  .direccion-domicilio,
  #direccion-domicilio {
    font-size: 0.9rem;
    min-height: 60px;
  }

  .selector-sucursal label {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }

  .selector-sucursal select {
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  .info-metodo-pago,
  .info-cobertura {
    margin-bottom: 0.6rem;
    padding: 0.6rem;
  }

  .info-metodo-pago p,
  .info-cobertura p {
    font-size: 0.8rem;
    margin: 0 0 0.3rem 0;
  }

  .cobertura-nota small {
    font-size: 0.75rem;
  }
}

/* Para dispositivos extremadamente pequeños en landscape */
@media (max-height: 450px) and (orientation: landscape) {
  .entrega-opciones {
    max-height: 70vh;
    padding: 0.6rem;
  }

  .datos-cliente {
    padding: 0.6rem;
  }

  .campo-formulario textarea {
    min-height: 45px;
  }

  #direccion-domicilio {
    min-height: 45px;
  }
}

.producto-notas .nota-numero {
  font-weight: 600;
  margin-right: 4px;
  color: var(--naranja);
}

.producto-notas .notas-contenido {
  margin-bottom: 4px;
  padding-left: 4px;
  border-left: 2px solid rgba(255, 107, 53, 0.3);
}

.producto-notas .notas-contenido:last-child {
  margin-bottom: 0;
}

.modal-cantidad-precio {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  color: var(--naranja);
}

.producto-precio-modal {
  padding: 0.3rem 0;
}

:root[data-tema="oscuro"] .producto-precio-modal {
  color: var(--naranja);
}

.subtotal-etiqueta {
  margin-right: 5px;
  color: var(--naranja);
}

.subtotal-valor {
  color: var(--gris-obscuro);
}

:root[data-tema="oscuro"] .subtotal-valor {
  color: var(--crema);
}

@media (max-height: 450px) and (orientation: landscape) {

  /* Cuando el contenido de aderezos está oculto, expandir el área de notas */
  .modal-individual-contenido .individual-contenido[style*="display: none"]~.individual-notas-container {
    width: 100%;
  }

  /* Ajustar la cabecera en este caso */
  .modal-individual-contenido .individual-contenido[style*="display: none"]~.individual-notas-container .aderezos-subtotal {
    display: none;
  }

  /* Asegurar que la lista de aderezos sea scrollable */
  .modal-banderilla-individual .aderezos-lista-container {
    overflow-y: auto;
    max-height: calc(90vh - 15rem);
  }

  /* Mejorar la visualización de controles de cantidad */
  .modal-banderilla-individual .aderezo-item .control-cantidad {
    display: flex;
    flex-shrink: 0;
  }

  /* Asegurar que los badges de aderezos sean visibles */
  .modal-banderilla-individual .aderezo-item .aderezo-badge {
    display: inline-block;
    min-width: 50px;
    text-align: center;
  }

  /* Hacer más compactos los aderezos para mostrar más */
  .modal-banderilla-individual .aderezo-item {
    margin-bottom: 4px;
    padding: 5px;
  }

  /* Mejorar la visibilidad de los nombres de aderezos */
  .modal-banderilla-individual .aderezo-nombre {
    font-size: 0.9rem;
    overflow: hidden;
    max-width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/**
 * ============================================
 * MODAL DE NOTAS DE PRODUCTO
 * Modal especializado para añadir notas a productos
 * ============================================
 */

.modal-notas-producto {
  position: fixed;
  z-index: 1002;
  top: 0;
  left: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-notas-producto.abierto {
  visibility: visible;
  opacity: 1;
}

.modal-notas-contenido {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  padding: 1.5rem;
  animation: entradaModal 0.3s ease-out;
  border: var(--arcilla-borde);
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
}

.notas-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Distribuye los elementos horizontalmente */
  margin-bottom: 1rem;
  width: 100%;
}

.notas-info-contenedor {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.5rem;
}

.notas-titulo-producto {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  text-align: center;
  color: var(--texto);
}

.notas-navegacion {
  font-size: 0.95rem;
  display: block;
  text-align: center;
  color: var(--gris-claro);
}

.notas-navegacion-botones {
  display: none;
}

.notas-navegacion-botones button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--crema);
  border: none;
  border-radius: 50%;
  background-color: var(--naranja);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

.notas-navegacion-botones button:hover {
  transform: scale(1.1);
  background-color: #FF8C35;
}

.notas-cuerpo {
  flex-grow: 1;
  margin-bottom: 1.2rem;
}

.notas-input-container {
  margin-bottom: 0.2rem;
}

.notas-input-container label {
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--texto);
}

.notas-input-container textarea {
  font-family: inherit;
  font-size: 0.95rem;
  width: 100%;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
  transition: all 0.3s ease;
  color: var(--texto);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.notas-input-container textarea:focus {
  border-color: var(--naranja);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.notas-acciones {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.notas-acciones button {
  font-size: 0.95rem;
  font-weight: 600;
  flex-grow: 1;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 25px;
}

.notas-cancelar {
  color: var(--texto);
  border: 1px solid var(--gris-claro) !important;
  background-color: transparent;
}

.notas-cancelar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.notas-continuar,
.notas-finalizar {
  color: white;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25);
}

.notas-continuar:hover,
.notas-finalizar:hover {
  transform: translateY(-2px);
  background-color: #FF8C35;
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

.notas-cabecera .nav-anterior,
.notas-cabecera .nav-siguiente {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/**
 * ============================================
 * ESTILOS PARA TEMA OSCURO - MODAL DE NOTAS
 * Adaptaciones del tema oscuro específicas para el modal de notas
 * ============================================
 */

/* Tema oscuro para modal de notas */
:root[data-tema="oscuro"] .modal-notas-contenido {
  background-color: var(--arcilla-fondo);
}

:root[data-tema="oscuro"] .notas-titulo-producto {
  color: var(--crema);
}

:root[data-tema="oscuro"] .notas-navegacion {
  color: #B8B8B8;
}

:root[data-tema="oscuro"] .notas-input-container label {
  color: var(--crema);
}

:root[data-tema="oscuro"] .notas-input-container textarea {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

:root[data-tema="oscuro"] .notas-input-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

:root[data-tema="oscuro"] .notas-cancelar {
  color: var(--crema);
  border-color: rgba(255, 255, 255, 0.3) !important;
}

:root[data-tema="oscuro"] .notas-cancelar:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/**
 * ============================================
 * CORRECCIONES ESPECÍFICAS PARA SAFARI IOS
 * Soluciona problemas de renderizado en Safari móvil
 * ============================================
 */

/* Corrección adicional para Safari - Botón completo */
.opciones-personalizacion button {
  /* Forzar herencia de color */
  color: var(--texto) !important;

  /* Prevenir comportamiento de enlace en Safari */
  -webkit-appearance: none;
  appearance: none;

  /* Asegurar que el botón no sea tratado como enlace */
  text-decoration: none !important;

  /* Forzar font-family */
  font-family: "Poppins", sans-serif !important;
}

/* Corrección para el tema oscuro del botón completo */
:root[data-tema="oscuro"] .opciones-personalizacion button {
  color: var(--crema) !important;
}

/* Corrección para hover en Safari iOS */
@media (hover: hover) {
  .opciones-personalizacion button:hover span {
    color: inherit !important;
  }
}

/* Corrección específica para WebKit (Safari) */
@supports (-webkit-appearance: none) {
  .opciones-personalizacion button span {
    /* Resetear completamente los estilos en WebKit */
    all: unset;

    /* Reestablecer solo lo necesario */
    color: var(--texto) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: "Poppins", sans-serif !important;
    display: inline !important;
  }

  :root[data-tema="oscuro"] .opciones-personalizacion button span {
    color: var(--crema) !important;
  }
}

/* Corrección para diferentes versiones de Safari iOS */
@supports (-webkit-hyphens: none) {
  .opciones-personalizacion button {
    /* Asegurar que Safari renderice correctamente */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .opciones-personalizacion button span {
    /* Forzar re-renderizado en Safari */
    will-change: color;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* Corrección específica para iOS - Prevenir auto-detección de números */
.opciones-personalizacion button span,
.opciones-personalizacion button {
  /* Prevenir auto-detección de teléfonos/enlaces en iOS */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}