/* =========================================================
   PALETA (coherente con el login)
========================================================= */
:root{
  --ink:#0f1317;          /* azul profundo */
  --ink-2:#0e1216;        /* variante */
  --card:#141a20;         /* tarjetas */
  --panel:#10161c;        /* paneles/contendedores */
  --line:#2b323a;         /* líneas/bordes */
  --muted:#b9b9b2;        /* texto secundario */
  --cream:#fffdcf;        /* texto destacado/claro */
  --yellow:#ffe400;       /* CTA/acento */
  --danger:#c40000;       /* alerta */
  --good:#31c35e;         /* abierto */
  --bad:#e24848;          /* cerrado */
}

/* =========================================================
   1) BASE / RESET
========================================================= */
*{box-sizing:border-box}
body{
  font-family:'Roboto',sans-serif;
  margin:0; padding:0;
  background: linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
  color:#fff;
}

/* =========================================================
   2) HEADER (portada, logo, título)
========================================================= */
header{
  text-align:center;
  padding:48px 0 42px;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 100%), var(--ink);
  position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.28) inset;
}
header img.logo{
  border-radius:50%;
  width:150px; height:150px;
  position:relative;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
header h1{
  font-family:'Poppins',sans-serif;
  margin-top:10px; font-size:24px;
  color:var(--cream);
  position:relative; padding:0 10px;
}

/* Portada rectangular (fondo) */
.image-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.image-portada{ width:100%; height:100%; object-fit:cover; opacity:.45; filter:saturate(105%); }
header > *:not(.image-bg){ z-index:1; }

/* =========================================================
   3) NAV DE CATEGORÍAS
========================================================= */
.nav-bar{
  margin-top:-30px;
  position:sticky; top:0; width:100%;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.0)) , var(--ink);
  padding:8px 0;
  z-index:5;
  overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(110%) blur(6px);
}
.nav-buttons{ display:flex; gap:8px; padding:0 12px; margin:auto; width:fit-content; }
.nav-bar button{
  background:transparent;
  border:1px solid transparent;
  padding:7px 14px;
  color:var(--cream);
  font-size:14px; cursor:pointer; border-radius:999px;
  font-family:'Poppins',sans-serif; flex-shrink:0;
  transition:.2s ease;
}
.nav-bar button:hover{ background:#151b22; border-color:#1e2530; }
.nav-bar button.is-active{
  background:var(--yellow); color:var(--ink); font-weight:700;
  box-shadow:0 6px 18px rgba(255,228,0,.25);
}

/* =========================================================
   4) MENÚ / PRODUCTOS
========================================================= */
.menu{ padding:12px 15px 10px; }
.menu-group{ margin-bottom:30px; }
.menu-group h2{
  font-family:'Poppins',sans-serif; font-size:22px; color:var(--yellow);
  text-align:center; padding-bottom:2px; margin:18px 0 14px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}

/* Tarjeta producto */
.menu-item{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px; margin-bottom:18px; padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.menu-item:hover{ box-shadow:0 10px 24px rgba(0,0,0,.28); }

/* Estado agotado */
.menu-item.agotado .image-container, .menu-item.agotado .product-info{ opacity:.45; }
.agotado-label{
  position:absolute; top:8px; right:8px;
  background:var(--danger); color:#fff;
  padding:6px 10px; font-size:12px; border-radius:7px; font-weight:700; z-index:2;
  box-shadow:0 4px 10px rgba(196,0,0,.35);
}

/* Imagen e icono + */
.menu-item img{
  width:100px; height:100px; border-radius:10px; margin-right:16px; position:relative; object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.image-container{ position:relative; display:inline-block; }
.icono{
  position:absolute; bottom:-6px; left:-6px; width:34px; height:34px;
  background:var(--cream); color:var(--ink); font-size:24px; font-weight:400;
  border-radius:999px; display:flex; align-items:center; justify-content:center; pointer-events:none;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* Info del producto */
.menu-item .product-info{ flex:1; margin-right:10px; min-width:0; }
.menu-item h3{
  font-family:'Poppins',sans-serif; font-size:16px; margin:0; color:var(--cream);
}
.menu-item p{
  font-family:'Poppins',sans-serif; font-size:12px; margin:5px 0; color:#e7e7e7;
}
.menu-item .price{
  font-family:'Lexend',sans-serif; margin:5px 0; font-size:14px; font-weight:800; color:#fff;
}

/* =========================================================
   5) MODAL DE PRODUCTO
========================================================= */
.modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.72); z-index:1000; overflow:auto;
  backdrop-filter:blur(2px);
}
.modal-content{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; width:98%; max-width:420px; color:#e9e9e9;
  top:50%; left:50%; transform:translate(-50%,-50%);
  max-height:90vh; overflow:auto; padding-bottom:0;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.close{
  position:sticky; top:18px; left:15px;
  font-size:22px; font-weight:800; color:var(--ink); cursor:pointer;
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  background:var(--yellow); width:40px; height:40px; z-index:1000;
  box-shadow:0 10px 24px rgba(255,228,0,.35);
}
.modal-product-image{ width:100%; max-height:300px; object-fit:cover; margin:-40px 0; }
.modal-content h2{
  font-family:'Poppins',sans-serif; color:var(--yellow); text-align:center; font-size:18px; margin:45px 0 6px;
}
.modal-content p{ font-family:'Lexend',sans-serif; font-size:14px; text-align:justify; padding:0 15px; color:#f2f2f2; }
.modal-content label{ display:block; margin-top:18px; font-weight:700; font-family:'Poppins',sans-serif; font-size:14px; color:var(--cream); }
.modal-content textarea{
  width:100%; height:60px; border:1px solid var(--line); border-radius:8px; padding:8px; resize:none;
  font-family:'Lexend',sans-serif; font-size:14px; background:#0f141a; color:#fff; box-sizing:border-box;
}
.modal-content button{
  padding:10px 15px; background:var(--yellow); color:var(--ink); border:none; border-radius:8px;
  cursor:pointer; font-size:14px; font-family:'Poppins',sans-serif; font-weight:800;
  box-shadow:0 10px 22px rgba(255,228,0,.25);
}

/* Secciones internas */
#extras-section{ margin-top:16px; padding:0 15px; }
#comments-section{ margin-bottom:24px; padding:0 15px; }
#comments-section label{ font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:#fff; margin-bottom:10px; display:block; }
#opciones-section{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:#fff;
  margin-bottom:6px; display:block; padding:0 15px;
}
#extras-section h4{ margin:8px 0; font-size:14px; font-family:'Poppins',sans-serif; color:#fff; }

.optional-label{ color:var(--cream); float:right; font-size:10px; }

/* Zona fija agregar */
.agregar{
  position:sticky; bottom:0; padding:10px 15px;
  background:var(--panel); box-shadow:0 -8px 24px rgba(0,0,0,.35);
}
.quantity-control{
  display:flex; align-items:center; justify-content:space-between;
  width:120px; border:1px solid var(--yellow); border-radius:8px; background:transparent; padding:6px 8px;
  color:#fff;
}
#quantity-display{ color:#fff; font-weight:700; }
#addToCartButton{
  padding:10px 15px; background:transparent; color:var(--yellow); border:1px solid var(--yellow); border-radius:8px;
  cursor:pointer; font-size:14px; font-family:'Poppins',sans-serif; font-weight:800;
  display:flex; justify-content:center; align-items:center; gap:10px;
}

/* Etiquetas auxiliares */
.required-label,.opcional-envio,.obligatorio-envio{
  font-size:10px; font-weight:700; font-family:'Poppins',sans-serif; float:right; color:var(--cream);
}

/* Extras */
.extra-item{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #1f2430; font-size:14px;
}
.extra-name{ flex:1; text-align:left; font-family:'Lexend',sans-serif; font-size:12px; color:var(--cream); }
.extra-wrapper{ display:flex; align-items:center; gap:10px; }
.extra-price{ color:var(--cream); font-weight:800; white-space:nowrap; }
.extra-item input{ transform:scale(1.15); }

/* =========================================================
   6) CARRITO FLOTANTE (burbuja)
========================================================= */
.cart-bubble{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:10px;
  background:var(--yellow); color:var(--ink);
  width:95%; max-width:600px; height:60px;
  border-radius:12px; display:none; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; font-family:'Poppins',sans-serif; cursor:pointer;
  box-shadow:0 16px 40px rgba(255,228,0,.35); z-index:4;
}
.cart-bubble p{ font-family:'Poppins',sans-serif; font-size:16px; }
#cart-total-price{
  font-family:'Poppins',sans-serif; font-size:12px; position:fixed; left:15px; color:var(--ink);
  font-weight:800;
}
.cart-count{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:#fff; color:#3c3c3c; width:35px; height:35px;
  border-radius:999px; font-size:16px; display:flex; align-items:center; justify-content:center; font-weight:800;
}

/* =========================================================
   7) MODAL DEL CARRITO
========================================================= */
.cart-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:9; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; display:none; }
.cart-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:90%; max-width:420px; max-height:90vh; overflow-y:auto;
  background:var(--panel); color:#dfe4ea; padding:15px 15px 0; border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(0,0,0,.45); display:none; z-index:1000;
}
.cart-modal h2{
  font-family:'Poppins',sans-serif; font-size:20px; margin:20px; text-align:center; color:var(--yellow);
}
.cart-modal ul{ list-style:none; padding:0; max-height:260px; overflow-y:auto; margin:0 0 15px 0; }
.cart-modal li{
  flex-direction:column; align-items:flex-start;
  font-family:'Roboto',sans-serif; color:#aab0b6;
  border-bottom:1px solid #1e2530; padding:10px 0;
}

/* Línea de producto */
.product-container{
  position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px;
}
.cart-modal .product-name{ font-size:14px; font-family:'Poppins',sans-serif; font-weight:800; color:var(--cream); flex-grow:1; }
.cart-modal li .extras,
.cart-modal li .comments{ font-family:'Lexend',sans-serif; font-size:12px; color:#9aa1a7; margin-top:4px; }
.cart-modal li .options{ font-family:'Lexend',sans-serif; font-size:12px; color:#cfd6dc; margin-top:4px; }

/* Controles y totales */
.cart-total-container{
  display:flex; justify-content:space-between; align-items:center;
  font-size:20px; font-family:'Poppins',sans-serif; font-weight:800; padding:10px;
  color:var(--cream); border-radius:8px; margin-top:10px;
}
.cart-total-price{ font-size:20px; font-weight:800; color:#fff; }
.cart-modal .buttons-container{
  position:sticky; bottom:0; background:var(--panel); padding:15px 0; display:flex; justify-content:center; gap:10px;
}
.cart-modal button{
  background:var(--yellow); color:var(--ink); border:none; padding:12px; font-size:13px; cursor:pointer;
  border-radius:10px; width:100%; font-weight:800; font-family:'Poppins',sans-serif;
  box-shadow:0 12px 26px rgba(255,228,0,.28);
}
.cart-modal .close-cart-btn{
  position:absolute; margin:18px 0;
  font-size:22px; font-weight:800; color:#fff; cursor:pointer; border-radius:50%;
  display:flex; justify-content:center; align-items:center; background:var(--yellow); width:35px; height:35px; z-index:1000;
}
.cart-modal .close-cart-btn:hover{ filter:brightness(1.05); }

.cart-item{ position:relative; display:flex; align-items:center; padding:10px; border-bottom:1px solid #1e2530; }
.cart-image{ width:50px; height:50px; object-fit:cover; border-radius:8px; }
.cart-img-container{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin-left:6px; }
.cart-details{ flex-direction:column; justify-content:center; flex-grow:1; margin-left:6px; min-width:0; }
.cart-price{ display:flex; align-items:flex-end; }
.product-quantity{ font-weight:800; font-size:12px; width:22px; color:var(--cream); margin-left:6px;  }
.product-total{ font-size:14px; font-weight:800; color:#fff; }
.remove-item{
  display:inline-block; font-size:18px; color:var(--cream); cursor:pointer; transition:.2s;
  font-weight:300; font-family:'Lexend',sans-serif;
}
.remove-item:hover{ color:var(--bad); transform:scale(1.1); }

/* =========================================================
   8) FORMULARIOS / CAMPOS
========================================================= */
.input-group{ margin-bottom:10px; }
.input-group:first-child{ margin-top:12px; }
.input-group label{
  display:block; font-weight:800; margin-bottom:6px; font-size:13px;
  font-family:'Poppins',sans-serif; color:var(--cream);
}
.input-group textarea{
  width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; resize:none;
  font-size:14px; font-family:'Lexend',sans-serif; background:#0f141a; color:#fff;
}
select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#121821;
  appearance:none; -webkit-appearance:none; cursor:pointer; transition:.2s ease;
  color:#e8e8e8; outline:none; font-family:'Poppins',sans-serif; font-size:13px;
}
select:focus{ border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,228,0,.2); }
option{ padding:12px; font-size:14px; background:#0f141a; color:#eaeaea; }
.phone-container{ display:flex; align-items:center; gap:8px; font-size:18px; margin-top:8px; }
.country-code{ color:var(--cream); font-size:16px; font-family:'Roboto',sans-serif; }
#phone{
  flex:1; padding:10px; border:1px solid var(--line); border-radius:8px; width:100%; outline:none;
  font-family:'Lexend',sans-serif; font-size:14px; background:#0f141a; color:#fff;
}
.delivery-options{ margin-top:15px; font-size:14px; }
.delivery-options label{
  font-weight:800; display:block; margin-bottom:6px; color:#fff; font-family:'Poppins',sans-serif;
  font-size:15px; text-align:center;
}
#delivery-method{ width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:#121821; color:#eaeaea; font-size:14px; }
.shipping-note{ font-size:14px; color:var(--cream); margin-top:15px; font-family:'Lexend',sans-serif; text-align:justify; }
#name-container{ margin-top:15px; }
#customer-name{
  width:100%; height:60px; border:1px solid var(--line); border-radius:8px; padding:10px; resize:none;
  font-family:'Lexend',sans-serif; font-size:14px; background:#0f141a; color:#fff;
}
.error-message{ color:#ff7a7a; font-size:12px; display:none; margin-top:5px; }

/* =========================================================
   9) INDICADOR HORARIO (alineación óptica)
========================================================= */
.schedule-indicator{
  --nudge-y: 1px;            /* 👈 microajuste vertical del punto */
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  font-family:'Poppins',sans-serif;
  background:#fff;
  color:#333;
  padding:6px 12px;
  border-radius:999px;
  display:inline-flex;
  flex-direction:row;
  align-items:center;        /* centra geométricamente */
  gap:8px;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.schedule-indicator .status-circle{
  width:12px; height:12px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
  transform: translateY(var(--nudge-y));  /* 👈 centra ópticamente */
}

.schedule-indicator.open  .status-circle{ background:var(--good); }
.schedule-indicator.closed .status-circle{ background:var(--bad); }

.schedule-indicator .status-text{
  font-size:13px;
  font-weight:800;
  color:#222;
  line-height:1;             /* evita exceso de caja del texto */
  margin:0;
}




/* =========================================================
   10) CARRUSEL PUBLICIDAD
========================================================= */
.carousel-container{ position:relative; width:100%; max-width:420px; overflow:hidden; margin:auto; border-radius:12px; }
.carousel{ display:flex; transition:transform .5s ease-in-out; }
.carousel img{ width:100%; border-radius:12px; margin:20px 0; box-shadow:0 12px 28px rgba(0,0,0,.35); }
.indicators{ display:flex; justify-content:center; position:absolute; bottom:22px; width:100%; gap:8px; }
.indicator{ width:8px; height:8px; background:#69707a; border-radius:999px; cursor:pointer; }
.indicator.active{ background:#fff; }

/* =========================================================
   11) FABs SOCIALES + BOTÓN ATRÁS
========================================================= */
.social-fabs{
  position:absolute; top:62px; right:10px; z-index:6;
  display:grid; grid-template-columns:repeat(2,44px); grid-auto-rows:44px; gap:10px; direction:rtl;
}
.social-fabs .sfab{ direction:ltr; }
.sfab{
  --size:44px; width:var(--size); height:var(--size); border-radius:999px; display:grid; place-items:center; text-decoration:none;
  background:var(--cream); color:var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.sfab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 16px 32px rgba(0,0,0,.4); opacity:.97; }
.sfab i{ font-size:18px; }

.back-button{
  position:absolute; top:15px; left:15px; width:50px; height:50px;
  display:flex; align-items:center; justify-content:center; background:#50c878; border-radius:50%;
  text-decoration:none; z-index:7; transition:filter .2s ease;
}
.back-button:hover{ filter:brightness(1.05); }

/* =========================================================
   12) LAYOUT HELPERS
========================================================= */
.main-container{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }

/* =========================================================
   13) RESPONSIVE + truncado
========================================================= */
@media (max-width:480px){
  .sfab{ --size:38px; }
  .social-fabs{ grid-template-columns:repeat(2,38px); grid-auto-rows:38px; }
}
@media (max-width:520px){
  .menu-item .product-info{ min-width:0; }
  .menu-item h3{
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }
  .menu-item p{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }
}

/* ==== Evitar que la burbuja tape el último producto ==== */
:root { --bubble-h: 0px; }
.with-bubble .menu{
  padding-bottom: calc(var(--bubble-h) + 20px + env(safe-area-inset-bottom));
}