/* =========================================================
   PideAPP — Menú Premium SaaS
   Paso 18.3 (Frontend ONLY)
   ========================================================= */

/* ===================== VARIABLES BASE ===================== */
:root{
  --bg: #0b0f14;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --border: rgba(255,255,255,.12);

  --brand: #22c55e;
  --brand-2: #16a34a;

  --radius-xl: 22px;
  --radius-lg: 18px;

  --shadow: 0 10px 35px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.22);

  --maxw: 1100px;
}

/* ===================== RESET BÁSICO ===================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(34,197,94,.18), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.12), transparent 55%),
              var(--bg);
  color: var(--text);
}

/* ===================== CONTENEDOR APP ===================== */
.pideapp-shell,
.menu-wrapper{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
}

/* ===================== HEADER COMERCIAL ===================== */
.menu-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}

/* ===================== GRID RESPONSIVE ===================== */
.menu-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 720px){
  .menu-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1100px){
  .menu-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* ===================== CARD PREMIUM ===================== */
.menu-card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.menu-card:active{
  transform: scale(.99);
}

@media (hover:hover){
  .menu-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
}

.menu-body{
  padding: 16px;
}

.menu-body h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 780;
}

.menu-body p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ===================== FOOTER CARD ===================== */
.menu-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.menu-price{
  font-size: 18px;
  font-weight: 820;
}

/* ===================== BOTÓN WHATSAPP ===================== */
.menu-footer a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #06120a;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(34,197,94,.18);
  transition: transform .12s ease, filter .12s ease;
}

.menu-footer a:active{
  transform: scale(.98);
}

@media (hover:hover){
  .menu-footer a:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
  }
}

/* ===================== THEME: GOURMET LIGHT ===================== */
body.theme-gourmet-light{
  --bg: #f6f5f1;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.92);
  --text: rgba(12,18,26,.92);
  --muted: rgba(12,18,26,.62);
  --border: rgba(12,18,26,.10);

  --brand: #16a34a;
  --brand-2: #15803d;

  background: radial-gradient(1200px 600px at 10% 0%, rgba(22,163,74,.10), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(245,158,11,.10), transparent 55%),
              var(--bg);
}

/* ===================== THEME: DARK MODERN ===================== */
body.theme-dark-modern{
  --bg: #070a0f;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.12);

  --brand: #22c55e;
  --brand-2: #16a34a;
}


/* =========================================================
   18.4.1 — ESTADO ACTIVO DE PLATILLO
   ========================================================= */

.menu-card.is-active{
  outline: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(34,197,94,.25);
  transform: translateY(-2px);
}

.menu-card.is-active::after{
  content: "Seleccionado";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--brand);
  color: #06120a;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
}

/* =========================================================
   FIX CRÍTICO — ADAPTAR CSS A product-card (HTML REAL)
   ========================================================= */

/* Card clickeable */
.product-card{
  cursor: pointer;
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}

.product-card:active{
  transform: scale(.99);
}

@media (hover:hover){
  .product-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
}

/* Estado activo (seleccionado) */
.product-card.is-active{
  outline: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(34,197,94,.25);
  transform: translateY(-2px);
}

.product-card.is-active::after{
  content: "Seleccionado";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--brand);
  color: #06120a;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
}


/* =====================================================
   18.4 — ACCORDION DE CATEGORÍAS
   ===================================================== */

.menu-accordion{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menu-category{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

/* HEADER CATEGORÍA */
.category-header{
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.category-header .chevron{
  transition: transform .2s ease;
}

/* CUERPO OCULTO */
.category-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0 16px;
}

/* ACTIVO */
.menu-category.open .category-body{
  max-height: 1200px;
  padding-bottom: 16px;
}

.menu-category.open .chevron{
  transform: rotate(180deg);
}

/* PRODUCTOS */
.product-card{
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.product-card:last-child{
  border-bottom: none;
}


/* =====================
   Imagen de producto
===================== */
.menu-image{
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 10px;
  background: rgba(0,0,0,.05);
}

.menu-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================
   BOTÓN MÁS INFO
===================== */
.btn-info{
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* =====================
   MODAL
===================== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden{
  display: none;
}

.modal-content{
  background: var(--surface);
  padding: 20px;
  border-radius: 20px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
}

.modal-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 12px;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 26px;
  cursor: pointer;
}

.modal-price{
  font-size: 20px;
  font-weight: 800;
  margin: 10px 0;
}

.modal-order{
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #06120a;
  font-weight: 800;
  text-decoration: none;
}

/* =====================
   ACCORDION CATEGORÍAS
===================== */
.menu-accordion{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menu-category{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

/* HEADER */
.category-header{
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.category-header .chevron{
  transition: transform .2s ease;
}

/* BODY */
.category-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0 16px;
}

/* OPEN */
.menu-category.open .category-body{
  max-height: 2000px;
  padding-bottom: 16px;
}

.menu-category.open .chevron{
  transform: rotate(180deg);
}

/* =====================================================
   18.6.1 — CATEGORÍAS HORIZONTALES
   ===================================================== */

.menu-categories-horizontal{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 4px 18px;
  margin-bottom: 10px;
}

.menu-categories-horizontal::-webkit-scrollbar{
  display: none;
}

.category-chip{
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}

.category-chip.active{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #06120a;
  border-color: transparent;
}

.category-chip:active{
  transform: scale(.96);
}


/* =====================================================
   18.6.2.1 — VISIBILIDAD POR ESTADO
   ===================================================== */

/* Categorías verticales ocultas por defecto */
#menu-categorias{
  display: none;
}

/* Mostrar solo cuando hay categoría activa */
#menu-categorias.visible{
  display: block;
}

/* Recomendados visibles por defecto */
#home-recomendados{
  display: block;
}

/* Ocultar recomendados cuando se entra a categoría */
#home-recomendados.hidden{
  display: none;
}


/* =========================
   BANNER SUPERIOR MENÚ
========================= */
.menu-hero-banner {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  border-radius: 18px;
  margin: 16px 0 20px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.menu-hero-banner img.menu-hero-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* =========================
   IMÁGENES DE PRODUCTOS
========================= */
.menu-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ===============================
   BADGES - INGENIERÍA DE MENÚ
=============================== */

.menu-card {
  position: relative;
}

/* Base */
.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  color: #fff;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ⭐ ESTRELLA */
.badge-star {
  background: linear-gradient(135deg, #f6c344, #f39c12);
}

/* 🔥 VACA (popular) */
.badge-cow {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* 💰 PUZZLE (alto margen) */
.badge-puzzle {
background: linear-gradient(135deg, #3498db, #2c80b4);
}

/* 👀 PERRO (baja rotación) */
.badge-dog {
  background: linear-gradient(135deg, #7f8c8d, #616a6b);
}


/* ===============================
   BADGE - MÁS VENDIDO
=============================== */
.badge-top {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  z-index: 10;
}

/* === FIX: Cambio de categorías por clase active (PASO 4.6 FIX) === */
.menu-section-view {
  display: none;
}
.menu-section-view.active {
  display: block;
}

/* ===============================
   ESTADO AGOTADO
=============================== */

.menu-card.agotado {
  opacity: 0.6;
  position: relative;
  filter: grayscale(40%);
}

.menu-card.agotado::after {
  content: "AGOTADO";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 14px;
}

.menu-card a.disabled {
  background: #aaa !important;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================
   FASE 1 – MODO APP REAL
============================= */

.topbar{
  display:none !important;
}

.app-shell{
  max-width: 100%;
  padding: 0;
}

.app-header{
  padding: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.app-header-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-header img{
  height:42px;
  width:auto;
  object-fit:contain;
}

.app-header h1{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.app-subtitle{
  font-size:12px;
  color:var(--muted);
}

.app-hero{
  height:200px;
  overflow:hidden;
}

.app-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.categories-sticky{
  position:sticky;
  top:72px;
  background:var(--bg);
  padding:10px 12px;
  z-index:90;
  border-bottom:1px solid var(--border);
}

.categories-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
}

.product-list{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.product-row{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:18px;
}

.row-image{
  width:110px;
  height:110px;
  flex-shrink:0;
  border-radius:14px;
  overflow:hidden;
}

.row-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.row-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.row-body h3{
  margin:0 0 4px;
  font-size:15px;
  font-weight:800;
}

.row-body p{
  font-size:13px;
  color:var(--muted);
  margin:0 0 8px;
}

.row-footer{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

@media(min-width:900px){
  .product-row{
    flex-direction:column;
  }
}