:root{
  --bg:#0b0b0f;
  --panel:#12121a;
  --panel2:#0f0f16;
  --text:#f6f7f8;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.14);
  --accent:#25D366;
}

body{ background:var(--bg); color:var(--text); }

/* Cards */
.card{ background:var(--panel); border:1px solid var(--line); }
.card-rounded{ border-radius:18px; }
.shadow-soft{ box-shadow:0 16px 50px rgba(0,0,0,.35); }

/* Text helpers */
.small-muted{ color:var(--muted2); font-size:.92rem; }
.strong-muted{ color:var(--muted); }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

/* Buttons */
.btn-lgish{ padding:.9rem 1rem; font-weight:900; border-radius:14px; }

.btn-accent{
  background:var(--accent);
  border:0;
  color:#08110b;
  font-weight:900;
}
.btn-accent:hover{ background:#1fb85a; color:#08110b; }

/* “Datos y enviar” (desktop) letras negras */
#scrollCheckoutDesktop{
  color:#000 !important;
  font-weight:900 !important;
}
#scrollCheckoutDesktop:hover,
#scrollCheckoutDesktop:focus{ color:#000 !important; }

/* Chips & divider */
.chip{
  font-size:.85rem;
  padding:.28rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:rgba(255,255,255,.92);
}
.divider{ border-top:1px dashed rgba(255,255,255,.18); margin:.9rem 0; }

/* Forms */
.form-label{ color:var(--text); font-weight:800; }
.form-control,.form-select{
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--text);
}
.form-control::placeholder{ color:rgba(255,255,255,.58); }
.form-control:focus,.form-select:focus{
  border-color:rgba(37,211,102,.65);
  box-shadow:0 0 0 .2rem rgba(37,211,102,.18);
  background:var(--panel2) !important;
  color:var(--text) !important;
  caret-color:var(--text);
  outline:none;
}

/* iOS/Chrome quirks: keep inputs dark */
input.form-control,
textarea.form-control{
  -webkit-appearance:none;
}
input.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px var(--panel2) inset !important;
}
.form-control:disabled,.form-select:disabled,button:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

/* ===== PRODUCT GRID (siempre 2 columnas) ===== */
#productGrid.product-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:.85rem !important;
  align-items:stretch;
  width:100%;
}

#productGrid .product-card{
  height:100%;
  width:100% !important;
  min-width:0 !important;
}

.product-title{
  color:var(--text) !important;
  font-weight:900;
  line-height:1.15;
  margin-bottom:.15rem;
}
.product-desc{
  color:rgba(255,255,255,.78) !important;
  font-size:.9rem;
}

/* ===== PRODUCT IMAGE: EXPANDIDA en cuadro redondeado ===== */
#productGrid .product-img{
  width:100%;
  height:150px;                 /* móvil */
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,.04);
  padding:0 !important;         /* sin marco interno */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

#productGrid .product-img img{
  width:100%;
  height:100%;
  object-fit:cover;             /* llena el cuadro */
  object-position:center;
  display:block;
}

/* Más grande en escritorio */
@media (min-width: 992px){
  #productGrid .product-img{ height:190px; }
}

/* Bottom bar móvil */
.bottom-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(18,18,26,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:.75rem .9rem;
  z-index:2000;
}

/* Indicativo táctil para abrir/editar carrito en móvil */
.cart-tap-zone{
  cursor:pointer;
  user-select:none;
}
.cart-tap-zone:active{
  transform:scale(0.99);
}
.tap-hint{
  display:block;
  font-size:.75rem;
  opacity:.75;
  margin-top:2px;
}
.chev{
  display:inline-block;
  margin-left:10px;
  opacity:.85;
  transition: transform .2s ease, opacity .2s ease;
}
.cart-tap-zone.is-open .chev{
  transform:rotate(180deg);
  opacity:1;
}
.cart-tap-zone.pulse{
  animation:pulseHint 1.6s ease-in-out infinite;
}
.cart-tap-zone.pulse .chev{
  animation:chevBounce 1.2s ease-in-out infinite;
}
@keyframes pulseHint{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
@keyframes chevBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* Coachmark (solo primera vez) */
.coachmark{
  position:absolute;
  left:12px;
  right:12px;
  bottom:74px; /* arriba de la bottom-bar */
  z-index:2100;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.coachmark[hidden]{
  display:none !important;
}
.coachmark-bubble{
  max-width: 520px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  cursor: pointer;
}
.coachmark-title{ font-weight:700; font-size:12px; opacity:.95; }
.coachmark-text{ font-size:12px; opacity:.85; }
.coachmark-arrow{
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:12px solid rgba(255,255,255,.14);
  margin-left:18px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

@media (min-width: 992px){
  .coachmark{ display:none; }
}
.bottom-spacer{ height:92px; }
@media (min-width: 992px){
  .bottom-bar{ display:none; }
  .bottom-spacer{ display:none; }
}

/* Locked state */
.locked{
  opacity:.64;
  filter:grayscale(25%);
  pointer-events:none;
  user-select:none;
}

/* Banner */
.banner{
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  padding:.9rem 1rem;
}
.banner.closed{
  border-color:rgba(255,193,7,.50);
  background:rgba(255,193,7,.12);
}
.banner.open{
  border-color:rgba(32,201,151,.40);
  background:rgba(32,201,151,.12);
}

/* ===== CONTRASTE: Menú + carrito (evita textos oscuros de Bootstrap) ===== */
#productsLockWrap, #productsLockWrap *{ color:var(--text) !important; }
#productsLockWrap .small-muted, #productsLockWrap .text-muted{ color:var(--muted) !important; }

.col-lg-4 .card, .col-lg-4 .card *{ color:var(--text) !important; }
.col-lg-4 .card .small-muted, .col-lg-4 .card .text-muted{ color:rgba(255,255,255,.78) !important; }

#cartCountDesktop, #cartTotalDesktop{ color:var(--text) !important; }
h2,h3,h4,h5,h6,.fw-bold,.fw-semibold{ color:var(--text) !important; }

/* ===== Botones AGREGAR (contraste + no “hover pegado”) ===== */
.btn-add{
  border-color:rgba(255,255,255,.75) !important;
  color:#fff !important;
  background:transparent !important;
}
.btn-add:hover,.btn-add:focus{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.95) !important;
}
.btn-add:active,.btn-add.active{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,1) !important;
}
.btn-add:focus{ box-shadow:none !important; }


/* ===== Drawer carrito móvil ===== */
.cart-drawer{
  position: fixed;
  left: 0; right: 0;
  bottom: 74px;                 /* espacio para bottom bar */
  max-height: 70vh;
  background: rgba(18,18,26,.98);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: .9rem .9rem calc(.95rem + env(safe-area-inset-bottom));
  z-index: 2500;

  transform: translateY(calc(100% + 24px));
  transition: transform .22s ease;
  overflow: auto;
}

.cart-drawer.open{
  transform: translateY(0);
}

.cart-drawer__handle{
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 0 auto .65rem;
}

.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2400;
}


/* ===== Drawer: oculto de verdad cuando NO está abierto ===== */
.cart-drawer{
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 40px));
  pointer-events: none;
}

.cart-drawer.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Cuando no hay items: ni aparece */
.cart-drawer.hidden{
  display: none !important;
}


/* Banner texto más visible */
#statusBanner .small-muted{ color: rgba(255,255,255,.82) !important; }

/* --- Security/UX hardening additions --- */
.locked {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.2);
}

#adminPanel.admin-locked {
  position: relative;
}
#adminPanel.admin-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  border-radius: inherit;
  pointer-events: none;
}