/* ==========================================================================
   MiniMarket Cliente — Hoja de Estilos Principal (HTML + Tailwind + FastAPI)
   Identidad visual inspirada en el logo oficial de MiniMarket (#f67300)
   ========================================================================== */

:root {
  color-scheme: light;
  --ink: #1f2421;
  --muted: #68706c;
  --line: #e8e2dc;
  --surface: #ffffff;
  --canvas: #faf8f5;
  --brand: #f67300;
  --brand-dark: #d95b00;
  --brand-soft: #fff3e6;
  --brand-border: #ffd8b5;
  --accent-amber: #ff9800;
  --green: #f67300;
  --green-dark: #d95b00;
  --green-soft: #fff3e6;
  --orange: #f67300;
  --orange-dark: #d95b00;
  --red: #b93838;
  --amber: #9b6500;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--canvas);
}

/* Ocultar barra de scroll horizontal en cintas de categorías */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Encabezado translúcido limpio */
.mm-header-glass {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.mm-eyebrow {
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Paneles y contenedores */
.mm-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(31, 36, 33, 0.04);
}

/* ==========================================================================
   Nuevo diseño de categorías con la identidad naranja de MiniMarket
   ========================================================================== */

.cat-tile {
  position: relative;
  border-radius: 12px;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.cat-tile:hover {
  transform: translateY(-1px);
}

/* Botón principal "Todas las Categorías" en degradado naranja del logo */
.cat-tile-lime,
.cat-tile-brand {
  background: linear-gradient(135deg, #ff8010 0%, #e55f00 100%);
  color: #ffffff;
  border: 1px solid #dc5a00;
  box-shadow: 0 5px 14px rgba(246, 115, 0, 0.24);
}
.cat-tile-lime:hover,
.cat-tile-brand:hover {
  background: linear-gradient(135deg, #f67300 0%, #cc5200 100%);
  box-shadow: 0 7px 18px rgba(246, 115, 0, 0.32);
}

/* Pastillas de departamentos: fondo blanco cálido, indicador naranja y activo vibrante */
.cat-tile-ink,
.cat-tile-pill {
  background: #ffffff;
  color: var(--ink);
  border: 1.5px solid #e9dfd5;
  box-shadow: 0 2px 6px rgba(31, 36, 33, 0.03);
}
.cat-tile-ink:hover,
.cat-tile-pill:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  box-shadow: 0 5px 12px rgba(246, 115, 0, 0.12);
}

.cat-tile-ink .cat-dot,
.cat-tile-pill .cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
  flex-shrink: 0;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.cat-tile-ink:hover .cat-dot,
.cat-tile-pill:hover .cat-dot {
  transform: scale(1.2);
}

.cat-tile-ink.active,
.cat-tile-pill.active {
  background: linear-gradient(135deg, #ff7e0d 0%, #e05c00 100%);
  color: #ffffff;
  border-color: #d95b00;
  box-shadow: 0 6px 15px rgba(246, 115, 0, 0.28);
}

.cat-tile-ink.active .cat-dot,
.cat-tile-pill.active .cat-dot {
  background: #ffffff;
}

/* Tarjeta de producto con hover cálido naranja */
.super-product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(31, 36, 33, 0.035);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.super-product-card:hover {
  border-color: #ffc28a;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(246, 115, 0, 0.09);
}

/* Controles de formulario */
.mm-input {
  border: 1px solid #dfd8d0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mm-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(246, 115, 0, 0.16);
}

/* Botones principales y de carrito con el naranja del logo MiniMarket */
.mm-btn-primary {
  background: linear-gradient(135deg, #ff7e0d 0%, #e56000 100%);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.mm-btn-primary:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(246, 115, 0, 0.25);
}
.mm-btn-primary:active {
  transform: translateY(0);
}

.mm-btn-green {
  background: linear-gradient(135deg, #ff7e0d 0%, #e56000 100%);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.mm-btn-green:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(246, 115, 0, 0.28);
}

.mm-btn-secondary {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid #dfd8d0;
  border-radius: 9px;
  font-weight: 700;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.mm-btn-secondary:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* Botones de paginación */
.mm-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #e4dcd3;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s ease;
}
.mm-page-btn:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.mm-page-btn.active {
  background: linear-gradient(135deg, #ff7e0d 0%, #e56000 100%);
  border-color: #d95b00;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(246, 115, 0, 0.25);
}
.mm-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Badges semánticos y de inventario */
.mm-stock {
  display: inline-block;
  min-width: 36px;
  padding: 3px 9px;
  border-radius: 8px;
  background: #fff3e6;
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.mm-stock.low {
  background: #fff2d9;
  color: var(--amber);
}

.mm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3efeb;
  color: #4a4540;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.mm-badge.pendiente { background: #fff2d9; color: var(--amber); }
.mm-badge.preparado { background: #e5f0ff; color: #265394; }
.mm-badge.en_ruta { background: #ede9fe; color: #5b21b6; }
.mm-badge.entregado, .mm-badge.pagado { background: #fff3e6; color: #d95b00; }
.mm-badge.cancelado { background: #fee2e2; color: #991b1b; }

/* Alertas */
.mm-alert {
  padding: 11px 14px;
  border: 1px solid #ffd8b5;
  border-radius: 10px;
  background: #fff8f0;
  color: #9a4200;
  font-size: 13px;
  font-weight: 500;
}
.mm-alert.error {
  border-color: #f0cfcb;
  background: #fff5f4;
  color: #9e322e;
}

/* Placeholder limpio cuando un producto de FastAPI tiene imagen_url nula o sin conexión */
.img-placeholder-box {
  background: var(--canvas);
  border: 1px dashed var(--line);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.img-placeholder-box::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 14px solid rgba(246, 115, 0, 0.12);
  pointer-events: none;
}

/* Recorte limpio de texto a 2 líneas */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Transiciones para modales y carrito lateral */
.overlay-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.overlay-fade.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.open {
  transform: translateX(0);
}

/* Animación de pulso para el cuadro de espera de verificación de correo */
@keyframes mm-spin {
  to { transform: rotate(360deg); }
}
.mm-spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3.5px solid #ffe2c4;
  border-top-color: var(--brand);
  animation: mm-spin 0.85s linear infinite;
}

/* Ocultar flechas de inputs numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Checkboxes con el naranja de MiniMarket */
.super-checkbox {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Google Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── Rastreo GPS en vivo (Leaflet + OpenStreetMap) ─── */
.mm-map {
  height: 340px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line, #e8e2dc);
  z-index: 0;
}

.mm-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 4px 10px rgba(31, 36, 33, 0.28);
  line-height: 1;
}

.mm-pin .material-symbols-outlined {
  font-size: 20px;
}

.mm-pin.sucursal { border-color: #1f2421; color: #1f2421; }
.mm-pin.destino { border-color: #16a34a; color: #16a34a; }
.mm-pin.moto { position: relative; background: var(--brand); border-color: #fff; color: #fff; }

.mm-pin-flecha {
  position: absolute;
  inset: -9px;
  pointer-events: none;
  transition: transform 0.6s ease;
}

.mm-pin-flecha::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #1f2421;
}

.mm-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: mm-pulse 1.6s infinite;
}

.mm-live-dot.off { background: #d97706; animation: none; }

@keyframes mm-pulse {
  70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ─── Modal de pago con tarjeta ─── */
.mm-card-preview {
  border-radius: 14px;
  padding: 16px 18px;
  color: #f8fafc;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 62%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}

.mm-card-chip {
  display: inline-block;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #facc15 0%, #eab308 55%, #ca8a04 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(120, 53, 15, 0.25);
  position: relative;
}

.mm-card-chip::after {
  content: "";
  position: absolute;
  inset: 5px 8px;
  border: 1px solid rgba(120, 53, 15, 0.35);
  border-radius: 2px;
}