:root{
  --brand:#7c3aed;
  --brand-2:#22d3ee;
}
.navbar-brand strong { color: var(--brand); }
.badge-brand { background: var(--brand); }
.btn-brand { background: var(--brand); color:#fff; border:0; }
.btn-brand:hover { background:#6d28d9; color:#fff; }
.hero {
  background: radial-gradient(ellipse at top, rgba(124,58,237,.12), transparent), 
              radial-gradient(ellipse at bottom, rgba(34,211,238,.15), transparent);
  border-radius: 1.25rem;
}
.card-product:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08);}
.rounded-2xl{ border-radius: 1.25rem !important; }
.avatar { width:40px; height:40px; object-fit:cover; border-radius:50%; }
.store-banner { max-height: 260px; object-fit: cover; width: 100%; border-radius: 1rem; }
.notification-dot{ position:absolute; top:0; right:0; width:10px; height:10px; border-radius:50%; background:#ef4444; }
.chat-bubble{ background:#f8fafc; border-radius:1rem; padding:.75rem 1rem; }
.chat-bubble.me{ background:#e9d5ff; }
/* Botones pill */
.btn, .btn-sm, .btn-lg, .btn-brand, .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-primary { border-radius: 9999px !important; }
/* FAB chat */
#chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1050; width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; border-radius: 50%; }
#chat-fab .notif { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 9999px; background:#ef4444; color:white; font-size:12px; display:none; align-items:center; justify-content:center; padding: 0 6px; }
#chat-fab.show .notif { display:flex; }

/* 1:1 product cards */
.aspect-1-1{ position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:1rem; background:#f3f4f6; }
.aspect-1-1 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Store header */
.store-hero .store-logo-lg{ width:250px; height:250px; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.08); }
.store-hero .store-name{ text-transform:uppercase; font-weight:800; letter-spacing:0.5px; }
.upper-bold{ text-transform:uppercase; font-weight:700; }
/* Round social icons */
.social-round .btn{ border-radius:9999px !important; }
/* Like heart inline */
.btn-like{ border-radius:9999px !important; }
/* Badge pill more rounded */
.badge{ border-radius:9999px; }
/* Owner name small grey */
.owner-small{ font-size:.9rem; color:#6b7280; }
/* Search within store spacing */
.store-search{ border-radius:9999px; }
/* Product card title uppercase bold */
.card-product .title-upper{ text-transform:uppercase; font-weight:700; font-size:.95rem; }

/* Ensure navbar dropdown overlays hero */
.navbar .dropdown-menu{ z-index: 2000; }
/* Store hero without borders/background */
.store-hero{ background: transparent !important; border: none !important; }
/* Remove top/bottom margins that might overlap */
.store-hero .store-name{ margin-top:.25rem; }

/* Force 1:1 images inside Bootstrap ratio */
.ratio .img-cover{width:100%;height:100%;object-fit:cover;display:block}


/* === Forzar imágenes 1:1 en tarjetas ===
   Se aplica a cualquier <img class="card-img-top"> dentro de tarjetas .card-product
   para que sea cuadrada y recorte proporcionalmente.
*/
.card-product .card-img-top{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
  border-radius: 1rem 1rem 0 0;
}


/* === Buscador global (debajo del navbar) === */
.search-pill{
  background: var(--brand);
  border-radius: 9999px;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.search-pill .search-input{
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  width: 100%;
}
.search-pill .search-input::placeholder{ color: rgba(255,255,255,.9); }
.search-pill .btn{ border-radius: 9999px; }


/* === Overrides: buscador blanco con borde gris, botón más delgado === */
.search-pill{
  background: #ffffff;
  border: 1px solid #d1d5db; /* gris */
  border-radius: 9999px;
  padding: .45rem .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.search-pill .search-input{
  border: 0;
  outline: none;
  background: transparent;
  color: #111827; /* texto oscuro */
  width: 100%;
}
.search-pill .search-input::placeholder{ color: #6b7280; } /* gris placeholder */
.search-pill .btn{
  border-radius: 9999px;
  padding: .35rem .9rem; /* un poco más delgado */
}


/* === Igualar alturas de tarjetas y evitar saltos por texto === */
.card-product { display: flex; flex-direction: column; }
.card-product .card-body{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 120px; /* asegura altura similar para tiendas y productos */
}
.card-product .h6{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Wider search pill specifically for store page */
.search-pill--wide{width:100%;max-width:none;}
.search-pill--wide .search-input{width:100%;flex:1;}


/* Dashboard KPIs: prevent chart area from stretching */
.kpi-chart{min-height:280px;}
.kpi-chart canvas{display:block;width:100%;height:260px !important;max-height:420px;}

/* Clickable KPI cards */
.card-link-wrap .card{transition: transform .06s ease, box-shadow .06s ease;}
.card-link-wrap:hover .card{transform: translateY(-1px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08);}