/* ===========================================
   SABOR EXPRESS - Sistema de Diseño
   Mobile-first · Premium Compacto
   -------------------------------------------
   Hoja de estilos principal. Define todas las
   variables CSS (colores, tipografía, espaciado)
   y los estilos de cada componente.
   =========================================== */

/* === VARIABLES CSS (Design Tokens) === */
:root {
  /* Paleta principal */
  --color-primary: #FF6B35;        /* Naranja principal: CTAs, logo, íconos activos */
  --color-primary-dark: #E55A2B;   /* Naranja oscuro: estados hover y pressed */
  --color-primary-light: #FFB199;  /* Naranja claro: fondos suaves decorativos */
  --color-bg: #FFF8F0;             /* Crema cálido: fondo general de la app */
  --color-surface: #FFFFFF;        /* Blanco: superficies de tarjetas y modales */
  --color-text: #3E2723;           /* Café oscuro: texto principal y títulos */
  --color-text-secondary: #757575; /* Gris medio: texto secundario y descripciones */
  --color-border: #E0D6CC;         /* Beige claro: bordes y separadores */
  --color-success: #4CAF50;        /* Verde: confirmaciones y mensajes de éxito */
  --color-danger: #E53935;         /* Rojo: alertas, errores, botón eliminar */
  --color-warning: #FFA000;        /* Ámbar: advertencias */

  /* Tipografía */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 11px;                   /* Tamaño extra pequeño (badges, microcopy) */
  --fs-sm: 13px;                   /* Tamaño pequeño (descripciones) */
  --fs-base: 15px;                 /* Tamaño base (cuerpo de texto) */
  --fs-md: 17px;                   /* Tamaño medio (subtítulos) */
  --fs-lg: 20px;                   /* Tamaño grande (títulos de sección) */
  --fs-xl: 24px;                   /* Tamaño extra grande (títulos principales) */
  --fs-2xl: 28px;                  /* Tamaño hero (títulos muy destacados) */

  /* Espaciado (basado en grilla de 8px) */
  --sp-1: 4px;                     /* Espaciado mínimo */
  --sp-2: 8px;                     /* Espaciado pequeño */
  --sp-3: 12px;                    /* Espaciado medio */
  --sp-4: 16px;                    /* Espaciado base (padding lateral) */
  --sp-5: 20px;                    /* Espaciado grande */
  --sp-6: 24px;                    /* Espaciado extra grande */
  --sp-8: 32px;                    /* Espaciado hero */

  /* Radios (esquinas redondeadas) */
  --radius-sm: 6px;                /* Radio pequeño (botones secundarios) */
  --radius-md: 12px;               /* Radio medio (tarjetas, inputs) */
  --radius-lg: 16px;               /* Radio grande (hero, secciones) */
  --radius-pill: 999px;            /* Radio completo (píldoras, chips) */

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);   /* Sombra sutil (hover ligero) */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);  /* Sombra media (tarjetas) */
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);  /* Sombra grande (modales) */
  --shadow-primary: 0 6px 16px rgba(255, 107, 53, 0.35);  /* Sombra naranja (CTAs) */

  /* Layout */
  --nav-height: 64px;              /* Altura de la barra de navegación inferior */
  --max-content: 480px;            /* Ancho máximo del contenido (simula móvil) */
}

/* === RESET CSS === */
/* Restablece márgenes, paddings y comportamiento por defecto */
* {
  box-sizing: border-box;          /* Incluye padding y border en el width */
  margin: 0;                        /* Elimina márgenes por defecto */
  padding: 0;                       /* Elimina paddings por defecto */
  -webkit-tap-highlight-color: transparent;  /* Quita el resaltado azul al tocar en móvil */
}

/* El HTML y el body ocupan toda la altura de la ventana */
html, body { height: 100%; }

/* Estilos base del body */
body {
  font-family: var(--font-family);  /* Aplica la tipografía Inter */
  font-size: var(--fs-base);        /* Tamaño de fuente base */
  color: var(--color-text);         /* Color de texto principal */
  background: var(--color-bg);      /* Fondo crema */
  line-height: 1.5;                 /* Altura de línea para legibilidad */
  -webkit-font-smoothing: antialiased;  /* Suaviza las fuentes en Safari */
  overscroll-behavior: none;        /* Evita el "rebote" al hacer scroll */
}

/* Estilos base para botones */
button {
  font-family: inherit;             /* Hereda la tipografía */
  cursor: pointer;                  /* Cursor de mano al pasar */
  border: none;                     /* Sin borde por defecto */
  background: none;                 /* Sin fondo por defecto */
}

/* Estilos base para enlaces */
a { color: inherit; text-decoration: none; }  /* Hereda color y quita subrayado */

/* Estilos base para imágenes */
img { max-width: 100%; display: block; }     /* Responsive y bloque */

/* Estilos base para listas */
ul { list-style: none; }                       /* Sin viñetas */

/* Estilos base para inputs */
input, select, textarea {
  font-family: inherit;             /* Hereda la tipografía */
  font-size: inherit;               /* Hereda el tamaño */
}

/* === LAYOUT DE LA APP === */
/* El contenedor principal simula un marco de móvil en pantallas grandes */
#app {
  max-width: var(--max-content);    /* Ancho máximo de 480px (móvil) */
  margin: 0 auto;                   /* Centrado horizontal */
  min-height: 100vh;                /* Altura mínima de toda la ventana */
  background: var(--color-bg);      /* Fondo crema */
  position: relative;               /* Contexto para elementos absolutos */
  box-shadow: 0 0 40px rgba(0,0,0,0.05);  /* Sombra sutil en desktop */
  display: flex;                    /* Flexbox */
  flex-direction: column;           /* Apila hijos verticalmente */
  padding-bottom: var(--nav-height);/* Espacio para la nav inferior */
}

/* Área de contenido con scroll */
.app-content {
  flex: 1;                          /* Ocupa todo el espacio disponible */
  overflow-y: auto;                 /* Scroll vertical si es necesario */
  overflow-x: hidden;               /* Sin scroll horizontal */
  scroll-behavior: smooth;          /* Scroll suave */
}

/* ============= HEADER ============= */
/* Cabecera fija de cada pantalla */
.header {
  position: sticky;                 /* Se queda pegada al hacer scroll */
  top: 0;                           /* En la parte superior */
  z-index: 50;                      /* Por encima del contenido */
  background: rgba(255, 248, 240, 0.95);  /* Fondo crema semitransparente */
  backdrop-filter: blur(10px);      /* Efecto de desenfoque (vidrio esmerilado) */
  -webkit-backdrop-filter: blur(10px);     /* Soporte para Safari */
  padding: var(--sp-4);             /* Espaciado interno */
  display: flex;                    /* Flexbox */
  align-items: center;              /* Centra verticalmente */
  justify-content: space-between;   /* Distribuye horizontalmente */
  border-bottom: 1px solid var(--color-border);  /* Línea inferior */
}

/* Botón de "atrás" circular */
.header__back {
  width: 36px; height: 36px;        /* Tamaño fijo cuadrado */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;               /* Completamente redondo */
  font-size: 20px;                  /* Tamaño del ícono */
  transition: background 0.2s;      /* Transición suave al hover */
}
.header__back:hover { background: rgba(0,0,0,0.05); }  /* Fondo gris al pasar */

/* Título del header */
.header__title { font-size: var(--fs-md); font-weight: 700; }

/* Botón de acción a la derecha (ej: ir al carrito) */
.header__action {
  width: 36px; height: 36px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Logo de la marca */
.brand {
  display: flex;                    /* Ícono + texto en línea */
  align-items: center;              /* Centrado vertical */
  gap: var(--sp-2);                 /* Separación entre ícono y texto */
  font-size: var(--fs-lg);          /* Tamaño destacado */
  font-weight: 800;                 /* Muy grueso */
  color: var(--color-text);         /* Color principal */
}

/* Ícono cuadrado del logo con gradiente */
.brand__icon {
  width: 36px; height: 36px;        /* Tamaño fijo */
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 10px;              /* Esquinas redondeadas */
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;                  /* Tamaño del emoji */
  box-shadow: var(--shadow-primary);/* Sombra naranja */
}

/* ============= SEARCH ============= */
/* Contenedor del campo de búsqueda */
.search {
  margin: var(--sp-3) var(--sp-4) var(--sp-2);
  position: relative;
}

/* Input de búsqueda */
.search input {
  width: 100%;                      /* Ocupa todo el ancho */
  padding: 12px 16px 12px 42px;     /* Padding izquierdo para el ícono */
  background: var(--color-surface); /* Fondo blanco */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);/* Completamente redondo */
  font-size: var(--fs-sm);
  transition: all 0.2s;             /* Transición suave al focus */
}

/* Estado de focus (clic en el input) */
.search input:focus {
  outline: none;                    /* Sin outline por defecto */
  border-color: var(--color-primary);/* Borde naranja */
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);  /* Halo naranja */
}

/* Ícono de lupa a la izquierda del input */
.search__icon {
  position: absolute;               /* Posicionado absolutamente */
  left: 14px;                       /* A 14px del borde izquierdo */
  top: 50%;                         /* Centrado vertical */
  transform: translateY(-50%);      /* Ajuste fino de centrado */
  color: var(--color-text-secondary);
  font-size: 16px;
}

/* ============= HERO ============= */
/* Banner promocional grande de la pantalla de inicio */
.hero {
  margin: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;                      /* Texto blanco */
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;                 /* Para que el emoji grande no se salga */
  box-shadow: var(--shadow-primary);
}

/* Emoji decorativo del hero (esquina inferior derecha) */
.hero::before {
  content: '🍕';                    /* Emoji de pizza */
  position: absolute;
  font-size: 120px;
  right: -20px;
  bottom: -30px;
  opacity: 0.25;                    /* Semi transparente */
  transform: rotate(-15deg);        /* Ligeramente rotado */
}

/* Título del hero */
.hero__title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 4px; position: relative; }

/* Subtítulo del hero */
.hero__subtitle { font-size: var(--fs-sm); opacity: 0.95; margin-bottom: var(--sp-3); position: relative; }

/* Botón CTA dentro del hero (píldora blanca) */
.hero__cta {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  color: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  position: relative;
  transition: transform 0.2s;
}
.hero__cta:hover { transform: scale(1.05); }  /* Crece ligeramente al hover */

/* ============= SECTIONS ============= */
/* Sección genérica con padding */
.section { padding: var(--sp-4); }

/* Cabecera de sección: título a la izquierda, link a la derecha */
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;            /* Alineado por la base del texto */
  margin-bottom: var(--sp-3);
}

/* Título de la sección */
.section__title { font-size: var(--fs-lg); font-weight: 700; }

/* Link de "Ver todo" a la derecha */
.section__link {
  font-size: var(--fs-sm);
  color: var(--color-primary);
  font-weight: 600;
}

/* ============= CATEGORIES ============= */
/* Grilla de 4 columnas para las categorías */
.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

/* Tarjeta de categoría */
.category {
  display: flex;
  flex-direction: column;           /* Ícono arriba, texto abajo */
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
  cursor: pointer;
}

/* Estado hover/active de la categoría */
.category:hover, .category:active {
  transform: translateY(-2px);       /* Levanta ligeramente */
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

/* Ícono grande de la categoría */
.category__icon { font-size: 28px; }

/* Nombre de la categoría */
.category__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

/* ============= PRODUCT CARD ============= */
/* Grilla de 2 columnas para los productos populares en home */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* Tarjeta de producto (versión cuadrada para el home) */
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;                 /* Para que la imagen respete el radio */
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  cursor: pointer;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Imagen del producto (emoji grande centrado) */
.product-card__image {
  width: 100%;
  aspect-ratio: 1/1;                /* Cuadrada perfecta */
  background: linear-gradient(135deg, #ffe4d0, #fff0e0);  /* Fondo cálido */
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  position: relative;
}

/* Etiqueta "NUEVO" o "TOP" sobre la imagen */
.product-card__badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* Cuerpo de la tarjeta (texto) */
.product-card__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;                          /* Ocupa el espacio sobrante */
}

/* Nombre del producto */
.product-card__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

/* Descripción truncada a 2 líneas */
.product-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* Máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pie de la tarjeta: precio + botón agregar */
.product-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-2);
}

/* Precio destacado en naranja */
.product-card__price {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* Botón circular "+" para agregar al carrito */
.product-card__add {
  width: 32px; height: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;               /* Circular */
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--shadow-primary);
  transition: all 0.2s;
}
.product-card__add:hover { background: var(--color-primary-dark); transform: scale(1.05); }
.product-card__add:active { transform: scale(0.95); }  /* Efecto de presión */

/* === Tarjeta de producto (versión horizontal para catálogo) === */
.product-row {
  display: flex;                    /* Imagen a la izquierda, info a la derecha */
  gap: var(--sp-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-3);
  transition: all 0.2s;
}
.product-row:hover { box-shadow: var(--shadow-sm); }

/* Imagen cuadrada del producto horizontal */
.product-row__img {
  width: 88px; height: 88px;
  background: linear-gradient(135deg, #ffe4d0, #fff0e0);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  flex-shrink: 0;                   /* No se encoge */
}

/* Contenedor de la información del producto */
.product-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Nombre del producto */
.product-row__name { font-size: var(--fs-base); font-weight: 600; }

/* Descripción del producto */
.product-row__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Pie con precio y botón */
.product-row__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;                 /* Empuja al fondo */
  padding-top: var(--sp-2);
}

/* Precio */
.product-row__price {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* Botón "+ Agregar" en formato píldora */
.product-row__add {
  padding: 6px 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  transition: all 0.2s;
}
.product-row__add:hover { background: var(--color-primary-dark); }
.product-row__add:active { transform: scale(0.95); }

/* ============= FILTERS ============= */
/* Chips de filtro de categorías con scroll horizontal */
.filters {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;                 /* Scroll horizontal si no caben */
  scrollbar-width: none;            /* Oculta scrollbar en Firefox */
}
.filters::-webkit-scrollbar { display: none; }  /* Oculta scrollbar en Chrome/Safari */

/* Chip de filtro individual */
.filter-chip {
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;              /* No se parte en dos líneas */
  transition: all 0.2s;
  color: var(--color-text);
}

/* Chip activo (seleccionado) */
.filter-chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ============= PRODUCT DETAIL ============= */
/* Imagen grande del producto en la pantalla de detalle */
.detail__image {
  width: 100%;
  aspect-ratio: 1/1;                /* Cuadrada */
  background: linear-gradient(135deg, #ffe4d0, #fff0e0);
  display: flex; align-items: center; justify-content: center;
  font-size: 140px;                 /* Emoji muy grande */
  position: relative;
}

/* Cuerpo del detalle (texto) */
.detail__body { padding: var(--sp-4); }

/* Nombre del producto en el detalle */
.detail__name { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: var(--sp-2); }

/* Precio grande en naranja */
.detail__price { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary-dark); margin-bottom: var(--sp-3); }

/* Descripción larga del producto */
.detail__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

/* Bloque de cantidad con etiqueta y controles */
.detail__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* Etiqueta "Cantidad" */
.detail__qty-label { font-weight: 600; }

/* Controles de cantidad (− número +) */
.qty-control { display: flex; align-items: center; gap: var(--sp-3); }

/* Botón redondo de cantidad (− o +) */
.qty-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 18px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  color: var(--color-text);
}
.qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.qty-btn:active { transform: scale(0.92); }  /* Efecto de presión */

/* Número de la cantidad */
.qty-value { min-width: 32px; text-align: center; font-size: var(--fs-lg); font-weight: 700; }

/* Bloque de extras (checkboxes) */
.extras {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Título de la sección de extras */
.extras__title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* Fila individual de un extra (label + precio) */
.extra-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--color-border);
}
/* La primera fila no tiene borde superior (es la primera) */
.extra-item:first-of-type { border-top: none; }

/* Contenedor del checkbox + nombre */
.extra-item__check { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }

/* Precio del extra */
.extra-item__price { color: var(--color-text-secondary); font-weight: 500; }

/* Estilo del checkbox */
input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-primary);  /* Color del check */
  cursor: pointer;
}

/* === Barra inferior fija con el CTA === */
.cta-bar {
  position: sticky;                 /* Se queda pegada abajo */
  bottom: var(--nav-height);        /* Por encima de la nav inferior */
  background: var(--color-bg);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--color-border);
  z-index: 40;
}

/* Botón principal (primario) */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  box-shadow: var(--shadow-primary);
  transition: all 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }

/* Variante: botón primario con borde (transparente) */
.btn-primary--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}

/* Variante: botón de peligro (rojo) */
.btn-primary--danger {
  background: var(--color-danger);
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.3);
}

/* ============= CART ============= */
/* Item individual del carrito */
.cart-item {
  display: flex;
  gap: var(--sp-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-3);
  position: relative;
}

/* Imagen del producto en el carrito */
.cart-item__img {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #ffe4d0, #fff0e0);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}

/* Información del producto en el carrito */
.cart-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;                     /* Para que text-overflow funcione */
}

/* Nombre del producto en el carrito */
.cart-item__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }

/* Precio unitario */
.cart-item__unit { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* Pie del item: controles de cantidad y subtotal */
.cart-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* Controles de cantidad del carrito */
.cart-item__qty { display: flex; align-items: center; gap: var(--sp-2); }

/* Botón pequeño de cantidad del carrito */
.cart-item__qty-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Precio del item (subtotal) */
.cart-item__price { font-size: var(--fs-base); font-weight: 700; color: var(--color-primary-dark); }

/* Botón de eliminar item */
.cart-item__remove {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  font-weight: 600;
  padding: 4px 8px;
  margin-left: var(--sp-2);
}

/* === Resumen del carrito (subtotal, domicilio, total) === */
.cart-summary {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  margin-top: var(--sp-3);
}

/* Fila individual del resumen */
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 4px 0;
  color: var(--color-text-secondary);
}

/* Fila del TOTAL (más destacada, con línea arriba) */
.cart-summary__row--total {
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-text);
}
/* El monto del total va en color naranja */
.cart-summary__row--total span:last-child { color: var(--color-primary-dark); }

/* === Estado vacío del carrito === */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--color-text-secondary);
}
.empty-state__icon { font-size: 80px; margin-bottom: var(--sp-3); opacity: 0.4; }
.empty-state__title { font-size: var(--fs-md); font-weight: 600; color: var(--color-text); margin-bottom: var(--sp-2); }
.empty-state__text { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ============= BOTTOM NAV ============= */
/* Barra de navegación inferior fija */
.nav-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: var(--max-content);
  margin: 0 auto;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;                     /* Por encima de todo */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);  /* Sombra hacia arriba */
}

/* Item individual de la nav */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;           /* Ícono arriba, texto abajo */
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}

/* Ícono del item de nav */
.nav-item__icon { font-size: 22px; line-height: 1; }

/* Item activo (ruta actual) */
.nav-item--active { color: var(--color-primary); }
/* El ícono activo sube ligeramente */
.nav-item--active .nav-item__icon { transform: translateY(-2px); }

/* Badge numérico (ej: cantidad de items en el carrito) */
.nav-item__badge {
  position: absolute;
  top: 2px; right: 25%;
  background: var(--color-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ============= TOAST ============= */
/* Mensaje emergente de feedback */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 80px);  /* Por encima de la nav inferior */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 8px;
}

/* Variante: toast de éxito (verde) */
.toast--success { background: var(--color-success); }

/* Variante: toast de error (rojo) */
.toast--error { background: var(--color-danger); }

/* ============= TRANSITIONS ============= */
/* Transición de slide horizontal entre vistas */
.slide-enter-active, .slide-leave-active {
  transition: all 0.25s ease;
}
.slide-enter-from { opacity: 0; transform: translateX(20px); }   /* Entra desde la derecha */
.slide-leave-to { opacity: 0; transform: translateX(-20px); }    /* Sale hacia la izquierda */

/* Transición del toast (sube y aparece) */
.toast-enter-active, .toast-leave-active {
  transition: all 0.3s ease;
}
.toast-enter-from, .toast-leave-to {
  opacity: 0;
  transform: translate(-50%, 20px);
}

/* ============= CHECKOUT ============= */
/* Pantalla de éxito tras confirmar el pedido */
.checkout-success {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

/* Ícono circular verde con el check */
.checkout-success__icon {
  width: 100px; height: 100px;
  background: var(--color-success);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 50px;
  margin: 0 auto var(--sp-4);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

/* Título del mensaje de éxito */
.checkout-success__title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-2); }

/* Texto descriptivo del éxito */
.checkout-success__text { color: var(--color-text-secondary); margin-bottom: var(--sp-5); }

/* ============= RESPONSIVE ============= */
/* En pantallas grandes (tablet/desktop) */
@media (min-width: 481px) {
  #app {
    border-radius: 0;               /* Sin bordes redondeados en desktop */
  }
}

/* En pantallas pequeñas (móvil puro) */
@media (max-width: 480px) {
  #app {
    box-shadow: none;               /* Sin sombra, ocupa toda la pantalla */
  }
}

/* ============= ACCESIBILIDAD ============= */
/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;  /* Anima casi instantáneo */
    transition-duration: 0.01ms !important; /* Transición casi instantánea */
  }
}