/* =========================================================================
   GRUPO KT — style.css
   Capa de diseño compartida sobre Tailwind (CDN). Define:
   - Curvas de easing personalizadas y tiempos de animación
   - Componentes: topbar, bottom-nav, hero banners, tarjetas de producto,
     carrito flotante, tarjeta de lealtad, panel admin
   - Fondos decorativos SVG sutiles (camarón, sushi, pizza) por marca
   ========================================================================= */

:root{
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);

  --brand-primary:   #0B3C5D;
  --brand-secondary: #0077B6;
  --brand-accent:    #48CAE4;
  --brand-on-primary:#FFFFFF;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior: smooth; }

body{ font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-poppins, h1, h2, h3, .brand-heading{ font-family: 'Poppins', 'Inter', sans-serif; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:#111; padding:.6rem 1rem; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------------- */
/* Top bar                                                                 */
/* ---------------------------------------------------------------------- */
.brand-topbar{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  box-shadow: 0 2px 18px rgba(0,0,0,.12);
}
.topbar-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  color:#fff; background:rgba(255,255,255,.14);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.topbar-icon-btn:hover{ background:rgba(255,255,255,.26); }
.topbar-icon-btn:active{ transform: scale(0.92); }

/* ---------------------------------------------------------------------- */
/* Hero banners fotográficos (usan las fotos reales del negocio)          */
/* ---------------------------------------------------------------------- */
.hero-banner{
  position:relative; overflow:hidden; border-radius: 0 0 28px 28px;
  min-height: 220px;
  background-size: cover; background-position: center;
  isolation:isolate;
}
.hero-banner::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.72) 100%);
}
.hero-banner::after{
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-primary) 55%, transparent), transparent 60%);
  mix-blend-mode: multiply;
}
.hero-banner > *{ position:relative; z-index:1; }

.hero-banner-content{
  animation: heroFadeUp 620ms var(--ease-out) both;
}
@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

.hero-badge{
  backdrop-filter: blur(10px) saturate(160%);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
}

/* Card selector del Hub (grupo-kt) */
.hub-brand-card{
  position:relative; overflow:hidden; border-radius: 1.5rem;
  background-size: cover; background-position:center;
  min-height: 230px;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.hub-brand-card:active{ transform: scale(0.97); }
@media (hover:hover) and (pointer:fine){
  .hub-brand-card:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 40px -14px rgba(0,0,0,.45); }
}
.hub-brand-card::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78));
}
.hub-brand-card > *{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------- */
/* Fondos decorativos sutiles por marca (SVG data-uri, muy baja opacidad) */
/* ---------------------------------------------------------------------- */
.deco-bg{ position:relative; }
.deco-bg::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.05; background-repeat:repeat; background-size: 180px 180px;
}
.deco-bg--kompa-tavo::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%230B3C5D'%3E%3Cpath d='M20 40c8-14 26-14 34 0-8 10-26 10-34 0Zm60 70c10-16 30-16 40 0-10 12-30 12-40 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
.deco-bg--sushicken::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23D90429'%3E%3Cpath d='M30 20a20 20 0 0 1 20 20H30Zm70 80a20 20 0 0 1 20 20h-20Z'/%3E%3C/g%3E%3C/svg%3E");
}
.deco-bg--sol-y-luna::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23E0A906'%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cpath d='M110 100a16 16 0 1 0 16 16 12 12 0 0 1-16-16Z'/%3E%3C/g%3E%3C/svg%3E");
}
.deco-bg > *{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------- */
/* Bottom Navigation Bar (fija, estilo iOS/Android)                       */
/* ---------------------------------------------------------------------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -6px 24px rgba(0,0,0,.06);
}
.bottom-nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding: 9px 4px 8px; color:#8b93a1; font-size:11px; font-weight:600;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.bottom-nav-item:active{ transform: scale(0.93); }
.bottom-nav-item.is-active{ color: var(--brand-primary); }
.bottom-nav-item.is-active svg{ transform: translateY(-1px) scale(1.08); }
.bottom-nav-item svg{ transition: transform 200ms var(--ease-out); }

/* ---------------------------------------------------------------------- */
/* Botones                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius: 1rem; font-weight:700; padding:.75rem 1.25rem;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--brand-primary); color: var(--brand-on-primary);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent);
}
.btn-primary:hover{ background: color-mix(in srgb, var(--brand-primary) 88%, black); }
.btn-outline{
  border:1.5px solid var(--brand-primary); color: var(--brand-primary); background:#fff;
}

/* ---------------------------------------------------------------------- */
/* Tarjetas de producto (menú)                                            */
/* ---------------------------------------------------------------------- */
.product-card{
  background:#fff; border-radius: 1.25rem; overflow:hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  opacity:0; transform: translateY(10px) scale(0.98);
  animation: cardIn 420ms var(--ease-out) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform: translateY(0) scale(1); } }
.product-card:active{ transform: scale(0.98); }

.product-card-img{ aspect-ratio: 1/1; object-fit:cover; width:100%; background:#eef1f4; }

.add-to-cart-btn{
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.add-to-cart-btn:active{ transform: scale(0.9); }

/* Categoría tabs (scroll horizontal) */
.cat-tab{
  white-space:nowrap; padding:.5rem 1rem; border-radius:999px; font-weight:600; font-size:.85rem;
  background:#eef1f4; color:#54606f; transition: all 160ms var(--ease-out);
}
.cat-tab.is-active{ background: var(--brand-primary); color: var(--brand-on-primary); }

/* ---------------------------------------------------------------------- */
/* Selector de menú por sucursal (ej. "La Karreta del Kompa Tavo")         */
/* ---------------------------------------------------------------------- */
.sucursal-switch-card{ box-shadow: 0 10px 25px -12px rgba(0,0,0,.45); }
.suc-tab{
  white-space:nowrap; padding:.55rem 1.1rem; border-radius:999px; font-weight:700; font-size:.82rem;
  background: rgba(255,255,255,.14); color:#fff; transition: all 160ms var(--ease-out); flex-shrink:0;
}
.suc-tab:hover{ background: rgba(255,255,255,.24); }
.suc-tab.is-active{ background:#fff; color: var(--brand-primary); }

/* ---------------------------------------------------------------------- */
/* Carrito flotante + drawer                                              */
/* ---------------------------------------------------------------------- */
.cart-fab{
  position:fixed; right:16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index:45;
  background: var(--brand-primary); color:var(--brand-on-primary);
  border-radius:999px; padding: .85rem 1.15rem; display:flex; align-items:center; gap:.5rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.4);
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.cart-fab:active{ transform: scale(0.95); }
.cart-fab[hidden]{ display:none; }
.cart-fab .badge{
  background: rgba(255,255,255,.92); color: var(--brand-primary); font-weight:800; font-size:.75rem;
  min-width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center;
}

.sheet-overlay{
  position:fixed; inset:0; z-index:60; background:rgba(15,20,25,.5);
  opacity:0; pointer-events:none; transition: opacity 220ms var(--ease-in-out);
}
.sheet-overlay.is-open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:#fff; border-radius: 1.5rem 1.5rem 0 0; max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  transform: translateY(100%);
  transition: transform 340ms var(--ease-drawer);
}
.sheet.is-open{ transform: translateY(0); }
.sheet-handle{ width:40px; height:4px; border-radius:999px; background:#e2e5ea; margin: 10px auto 2px; }
.sheet-body{ overflow-y:auto; padding: 0 1.25rem 1.25rem; }

/* Modales centrados (checkout, confirmaciones) — transform-origin: center por definición */
.modal-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(15,20,25,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition: opacity 200ms var(--ease-in-out);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:#fff; border-radius:1.5rem; max-width:440px; width:100%;
  max-height:90vh; overflow-y:auto; transform-origin:center;
  transform: scale(0.95); opacity:0;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.modal-overlay.is-open .modal-box{ transform: scale(1); opacity:1; }

.qty-btn{
  width:26px; height:26px; border-radius:999px; background:#eef1f4; color:#334155; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.qty-btn:active{ transform: scale(0.88); background:#e2e5ea; }

/* ---------------------------------------------------------------------- */
/* Tarjeta de lealtad — sellos                                            */
/* ---------------------------------------------------------------------- */
.stamp-card{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border-radius: 1.75rem; padding: 1.75rem 1.5rem; color:#fff;
  box-shadow: 0 20px 45px -18px color-mix(in srgb, var(--brand-primary) 70%, transparent);
}
.stamp-dot{
  width:100%; aspect-ratio:1/1; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.14); border:2px dashed rgba(255,255,255,.4);
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.stamp-dot.is-filled{
  background: #fff; border:2px solid #fff; color: var(--brand-primary);
  animation: stampPop 420ms var(--ease-out) both;
}
@keyframes stampPop{
  0%{ transform: scale(0.6); opacity:0; }
  60%{ transform: scale(1.12); opacity:1; }
  100%{ transform: scale(1); }
}
.stamp-dot svg{ width:52%; height:52%; }

/* ---------------------------------------------------------------------- */
/* Toast simple                                                           */
/* ---------------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index:80;
  transform: translate(-50%, 12px); opacity:0;
  background:#111827; color:#fff; padding:.75rem 1.1rem; border-radius:.9rem; font-size:.875rem; font-weight:600;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 90vw; text-align:center;
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
  pointer-events:none;
}
.toast.is-open{ transform: translate(-50%, 0); opacity:1; }

/* ---------------------------------------------------------------------- */
/* Panel Admin                                                             */
/* ---------------------------------------------------------------------- */
.admin-shell{ background:#f5f6f8; min-height:100vh; }
.admin-card{ background:#fff; border-radius:1.25rem; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.admin-input{
  width:100%; border:1.5px solid #e3e6ea; border-radius:.85rem; padding:.6rem .85rem; font-size:.925rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.admin-input:focus{ outline:none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.admin-table tr{ transition: background-color 140ms var(--ease-out); }
.admin-table tr:hover{ background:#f8f9fb; }

/* ---------------------------------------------------------------------- */
/* Stagger util (listas de tarjetas)                                      */
/* ---------------------------------------------------------------------- */
.stagger > *{ animation-delay: calc(var(--i, 0) * 45ms); }

/* ---------------------------------------------------------------------- */
/* Accesibilidad                                                          */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}