/* =============================
   AbastoGo - Estilos base
   ============================= */
*{box-sizing:border-box;}

.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* =============================
   Refuerzo de contraste en el front del cliente
   Garantiza texto legible sin depender solo del render de Tailwind.
   ============================= */
/* Precios "si pagas en divisas" en verde oscuro (legible sobre fondo claro) */
.text-emerald-600{color:#047857 !important;}
.text-emerald-700{color:#065f46 !important;}
/* Enlaces y textos de marca: índigo oscuro (legible) */
.text-brand-600{color:#4338ca !important;}
.text-brand-700{color:#3730a3 !important;}

/* =============================
   Front del cliente: resoluciones mínimas garantizadas en CSS puro
   (fallbacks si la CDN de Tailwind no renderiza)
   ============================= */
body.app-client{ background-color:#f9fafb; color:#111827; }
body.app-client > header{ background-color:#ffffff; box-shadow:0 1px 3px rgba(15,23,42,.08); }
body.app-client .max-w-7xl, body.app-client .max-w-6xl, body.app-client .max-w-4xl{ margin-left:auto; margin-right:auto; width:100%; }

/* =============================
   Menú lateral (admin/vendedor): resaltar el módulo activo.
   Se refuerza con CSS propio para no depender del render de Tailwind.
   ============================= */
aside nav a.nav-active{
  background-color:#4338ca !important;
  color:#ffffff !important;
  font-weight:600;
}
aside nav a.nav-active i{color:#ffffff !important;}
aside nav a.nav-active:hover{background-color:#3730a3 !important;}

/* =============================
   Nav de la tienda (cliente): resaltar la sección activa (desktop y móvil).
   ============================= */
.store-nav-active{
  background-color:#e0e7ff !important;
  color:#3730a3 !important;
  font-weight:600;
}
.store-nav-active i{color:#3730a3 !important;}

/* Botones de acción primarios: fondo oscuro sólido + texto blanco */
button, a{
  -webkit-font-smoothing: antialiased;
}
/* Hero de la tienda: evitar texto blanco sobre fondo claro */
.text-white{color:#ffffff;}

/* Cartón flotante del carrito (icono animado fijo en todas las secciones) */
.cart-fab{
  position: fixed; bottom: 84px; right: 24px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(79,70,229,.5);
  cursor:pointer; transition: transform .2s;
}
.cart-fab:hover{transform:scale(1.08);}
.cart-fab .card-badge{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px;
  background:#ef4444; border-radius:999px; font-size:12px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.cart-fab.bump .cart-icon{animation:cart-bump .35s ease;}
@keyframes cart-bump{
  0%{transform:scale(1);}40%{transform:scale(1.3) rotate(-10deg);}100%{transform:scale(1);}
}

/* Mini-carrtito desplegable */
.mini-cart{
  position:fixed; bottom:150px; right:24px; z-index:910; width:min(92vw,340px);
  background:#fff; border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.18);
  max-height:min(70vh,480px); display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
}
.mini-cart .mini-list{overflow-y:auto; flex:1; max-height:340px;}

/* =============================
   CLIENT APP · UX/UI NATIVA (móvil y tableta)
   Barra de navegación inferior estilo Android Material 3,
   app bar compacta, safe-area y botones con área táctil 48dp.
   NOTA: la barra/noótonos móviles quedan OCULTOS por defecto en CSS puro
   (no dependen de la CDN de Tailwind) para que NUNCA aparezcan en desktop.
   ============================= */
.app-tabbar{ display:none; }
.app-hamburger{ display:none; }
.app-tabbar-spacer{ display:none; }
.app-pie-spacer{ display:none; }
@media (min-width:1024px){
  .app-pie-spacer{ display:block; height:3rem; }
  .app-tabbar-spacer{ display:none; }
}
@media (max-width:1023px){
  #overlay{ z-index:960; }
  #sidebar{ z-index:970; }
  body.app-client{
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-tap-highlight-color: transparent;
  }
  .app-hamburger{ display:inline-flex; }
  .app-tabbar{
    position:fixed; bottom:0; left:0; right:0; z-index:950;
    display:flex; align-items:stretch;
    height:calc(64px + env(safe-area-inset-bottom));
    padding:6px 8px calc(env(safe-area-inset-bottom)); 
    background:#ffffff; border-top:1px solid #e5e7eb;
    box-shadow:0 -6px 24px rgba(15,23,42,.08);
  }
  .app-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:transparent; border:0; color:#6b7280; text-decoration:none;
    border-radius:16px; min-height:52px; padding:2px 0; cursor:pointer;
    transition:color .15s ease, background-color .15s ease, transform .08s ease;
  }
  .app-tab:active{ transform:scale(.95); background:#eef2ff; }
  .app-tab-on{ color:#4338ca; background:#f1f0ff; }
  .app-tab-icon{ position:relative; font-size:22px; line-height:1; height:24px; display:flex; align-items:center; }
  .app-tab-label{ font-size:11px; font-weight:600; letter-spacing:.01em; }
  #tabCartBadge{
    position:absolute; top:-6px; right:-10px; min-width:16px; height:16px; padding:0 4px;
    background:#ef4444; color:#ffffff; border-radius:999px;
    font-size:10px; font-weight:700; line-height:16px; text-align:center;
    display:flex; align-items:center; justify-content:center;
  }
  .app-tab-badge{
    position:absolute; top:-6px; right:-12px; min-width:16px; height:16px; padding:0 4px;
    background:#ef4444; color:#ffffff; border-radius:999px;
    font-size:10px; font-weight:700; line-height:16px; text-align:center;
    display:flex; align-items:center; justify-content:center;
  }
  .app-tabbar-spacer{ display:block; height:calc(74px + env(safe-area-inset-bottom)); }
  .cart-fab{ bottom:calc(80px + env(safe-area-inset-bottom)); }
  .mini-cart{ bottom:calc(152px + env(safe-area-inset-bottom)); right:16px; }
}

/* =============================
   MENÚ HAMBURGUESA (drawer lateral) SOLO móvil/tableta
   Barra lateral deslizante con las opciones de navegación.
   ============================= */
.app-drawer{ position:fixed; inset:0; z-index:960; display:none; }
@media (min-width:1024px){ .app-drawer{ display:none !important; } .app-hamburger{ display:none !important; } }
.app-drawer.open{ display:block; }
.app-drawer-backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.55);
  opacity:0; transition:opacity .25s ease;
}
.app-drawer.open .app-drawer-backdrop{ opacity:1; }
.app-drawer-panel{
  position:absolute; top:0; bottom:0; left:0; width:min(84vw,320px);
  background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(-105%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.app-drawer.open .app-drawer-panel{ transform:translateX(0); }
.app-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 12px; border-bottom:1px solid #eef2f7;
}
.app-drawer-user{ padding:14px 16px; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.app-drawer-nav{ flex:1; overflow-y:auto; padding:10px; -webkit-overflow-scrolling:touch; }
.app-drawer-link{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  font-size:15px; font-weight:500; color:#1f2937;
  border-radius:14px; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.app-drawer-link i{ font-size:20px; color:#6b7280; width:24px; text-align:center; flex-shrink:0; }
.app-drawer-link:hover{ background:#f3f4f6; }
.app-drawer-link:active{ background:#eef2ff; }
.app-drawer-link.store-nav-active{ background:#e0e7ff !important; color:#3730a3 !important; font-weight:600; }
.app-drawer-link.store-nav-active i{ color:#3730a3 !important; }
.app-drawer-foot{ padding:14px; border-top:1px solid #eef2f7; }

/* =============================
   Refuerzo de contraste en el front del cliente: bloques con texto blanco
   (se ven correctos aunque la CDN de Tailwind no renderice)
   ============================= */
.hero-perfil{
  background-color:#4338ca;
  background-image:linear-gradient(135deg,#4338ca,#4f46e5,#9333ea);
}
.app-client a[class*="bg-brand-600"],.app-client button[class*="bg-brand-600"],.app-client .bg-brand-600{ background-color:#4f46e5 !important; color:#ffffff !important; }
.app-client a[class*="bg-emerald-600"],.app-client button[class*="bg-emerald-600"],.app-client .bg-emerald-600{ background-color:#059669 !important; color:#ffffff !important; }
.app-client button[class*="bg-amber-500"],.app-client a[class*="bg-amber-500"]{ background-color:#d97706 !important; color:#ffffff !important; }
.app-client a[class*="bg-black"],.app-client button[class*="bg-black"]{ background-color:#111111 !important; color:#ffffff !important; }

/* =============================
   Botón "Añadir al carrito": color garantizado (no depende de Tailwind)
   ============================= */
.btn-add-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  width:100%; padding:.55rem .75rem; border-radius:.6rem;
  background:#4f46e5; color:#ffffff !important;
  font-size:.8rem; font-weight:600; cursor:pointer; border:none;
  transition: background .15s ease, transform .1s ease;
}
.btn-add-cart:hover{background:#4338ca;}
.btn-add-cart:active{transform:scale(.97);}
.btn-add-cart i{color:#ffffff !important;}
/* Variante para combos */
.btn-add-cart.purple{background:#7c3aed;}
.btn-add-cart.purple:hover{background:#6d28d9;}

/* =============================
   Contenedor de imagen de mini card / producto.
   Función 100% en CSS puro (sin depender de Tailwind ni aspect-ratio)
   para que la foto se vea igual en móviles y desktop.
   ============================= */
.img-box{
  width:100%;
  height:170px;              /* alto fijo generoso en todos los tamaños */
  overflow:hidden;
  background:#f3f4f6;
  display:block;
}
.img-box img{
  width:100%;
  height:100%;
  object-fit:cover;           /* recorta centralmente, sin deformar */
  display:block;
}
/* En pantallas medianas y grandes se mantiene proporcional */
@media (min-width:768px){
  .img-box{ height:190px; }
}
/* Contenedor de la imagen principal de la página de producto (más alto) */
.img-box-lg{
  width:100%;
  height:260px;               /* prioriza visibilidad en móvil */
  overflow:hidden;
  background:#f3f4f6;
  display:block;
}
.img-box-lg img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (min-width:768px){
  .img-box-lg{ height:360px; }
}

/* =============================
   ANTI-DESBORDE HORIZONTAL GLOBAL
   Garantiza que nunca exista scroll horizontal en la página:
   solo scroll vertical (estilo app nativa) en teléfonos, tabletas y desktop.
   Se aplica a TODAS las vistas (tienda del cliente, login y panel admin) porque
   todas cargan este CSS.
   - overflow-x hidden/clip en html y body absorbe cualquier desborde.
   - overflow:clip (cuando el navegador lo soporta) NO crea contenedor de scroll,
     por lo que position:fixed (tabbar, carrito, drawer) y position:sticky
     (navbar) siguen funcionando correctamente incluso en iOS.
   ============================= */
html, body{ max-width:100%; }
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }
@supports (overflow:clip){
  html, body{ overflow-x:clip; }
}
/* Imágenes, vídeo y otros medios incrustados nunca más anchos que su contenedor */
img, video, svg, canvas, iframe, embed, object{ max-width:100%; }
table{ max-width:100%; }
/* Texto largo sin espacios (cédulas, enlaces, números): parte de línea
   en lugar de empujar el ancho de la página */
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th, label, button, figcaption, small{ overflow-wrap:break-word; word-wrap:break-word; }
/* Tablas del panel admin: si el navegador permite el "pull" horizontal
   dentro del contenedor, que no arrastre a la página con él */
html, body{ overscroll-behavior-x:none; }

/* Solo en móvil/tableta: los hijos de contenedores flex/grid pueden
   encogerse (min-width:0) para no desbordar el viewport. En desktop se
   respeta el ancho natural (sin tocar el diseño existente). */
@media (max-width:1023px){
  [class*="flex"] > *, [class*="grid"] > *{ min-width:0; }
}
/* Línea base táctil para el front del cliente: evita el doble tap para zoom
   accidental en elementos interactivos y mantiene el texto pequeño legible */
@media (max-width:767px){
  body.app-client button, body.app-client a,
  body.app-admin button, body.app-admin a{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
}