body{
  margin:0;
  font-family:Arial;
  background-color:#071a3a; /* respaldo */
  min-height:100vh;
  color:white;
}

.hidden{display:none}
.wrap{max-width:760px;margin:24px auto;padding:0 14px}
.top{display:flex;align-items:center;margin-bottom:14px}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:40px;height:40px;border:2px solid orange;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:bold}
.title{
  font-weight:900;
  font-size:19px;
}

.subtitle{
  opacity:.9;
  font-size:14px;
}


.card{background:white;color:black;padding:16px;border-radius:14px;border:2px solid orange;margin-bottom:12px}
.regTop{display:flex;justify-content:space-between;align-items:center;gap:10px}

input,textarea,button{width:100%;padding:10px;margin-top:10px;border-radius:10px;border:2px solid orange;box-sizing:border-box}
textarea{min-height:72px}
.btn{background:white;font-weight:bold;cursor:pointer}
.btnGray{border-color:#999}
.btnSmall{width:auto;padding:8px 12px;border:2px solid orange;border-radius:10px;background:white;font-weight:bold;cursor:pointer}

.hint{font-size:13px;margin-top:6px;opacity:.85}
.hint.small{font-size:12px;opacity:.75}

.delivery{display:flex;gap:12px;border:2px solid orange;border-radius:12px;padding:10px;margin-top:10px;cursor:pointer}
.avatar{width:56px;height:56px;border-radius:50%;border:2px solid orange;object-fit:cover}
.info .name{font-weight:bold}
.info .meta{font-size:12px;opacity:.8}

.row{display:flex;gap:12px;align-items:center}
.rowBetween{display:flex;justify-content:space-between;align-items:center;gap:10px}
.avatarBig{width:80px;height:80px;border-radius:50%;border:2px solid orange;object-fit:cover}

.dName{font-weight:900;font-size:18px}
.dMeta{font-size:13px;opacity:.85;margin-top:3px}

.chatHeader{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

.chatBox{border:2px solid orange;border-radius:12px;padding:8px;margin-top:10px;max-height:220px;overflow:auto;background:white}
.bubble{border:2px solid orange;border-radius:12px;padding:8px;margin:6px 0;white-space:pre-line}
.bClient{margin-right:40px}
.bAdmin{margin-left:40px;background:#eee}

.pedidoItems{margin-top:10px}
.pedidoRow{display:flex;justify-content:space-between;align-items:center;border:2px solid orange;border-radius:12px;padding:10px;margin-top:10px}
.pedidoLeft{display:flex;flex-direction:column;gap:4px}
.pedidoName{font-weight:900}
.pedidoPrice{font-size:12px;opacity:.8}

.qtyBox{display:flex;align-items:center;gap:8px}
.qtyBtn{width:auto;padding:8px 12px;border-radius:10px;border:2px solid orange;background:#fff;font-weight:900;cursor:pointer}
.qtyNum{min-width:26px;text-align:center;font-weight:900}

.pedidoTotalRow{display:flex;justify-content:space-between;align-items:center;margin-top:12px;border:2px dashed orange;border-radius:12px;padding:10px}
.pedidoTotalLabel{font-weight:900}
.pedidoTotalValue{font-weight:900;font-size:18px}

.adminTabs{display:flex;gap:10px;margin-bottom:10px}
.tabBtn{flex:1;padding:10px;border-radius:12px;border:2px solid orange;background:#fff;font-weight:900;cursor:pointer}
.tabActive{outline:3px solid rgba(255,165,0,.35)}

.inboxItem{border:2px solid orange;border-radius:12px;padding:10px;margin-top:10px;cursor:pointer}

.adminInfo{border:2px dashed orange;border-radius:12px;padding:8px;margin-bottom:8px}

.adminBox{border:2px dashed orange;border-radius:12px;padding:12px;margin:10px 0}
.checkRow{display:flex;gap:10px;align-items:center;margin-top:10px}
.checkRow input{width:auto;margin:0}

.row2{display:flex;gap:10px}
.row2 .btn{margin-top:10px}

.repItem{border:2px solid orange;border-radius:12px;padding:10px;margin-top:10px}
.repRow{display:flex;justify-content:space-between;gap:10px}
.repName{font-weight:900}
.repMeta{font-size:12px;opacity:.8;margin-top:3px}
.repBtns{display:flex;flex-direction:column;gap:8px;min-width:120px}
.btnMini{padding:8px 10px;border-radius:10px;border:2px solid orange;background:#fff;font-weight:900;cursor:pointer;width:100%}
.btnMiniGray{border-color:#999}

.priceBox{margin-top:10px}
.priceRow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid orange;border-radius:12px;padding:10px;margin-top:10px}
.priceLabel{font-weight:900}
.priceInput{max-width:160px}
/* ===== HOME NUEVO (botones + tarjetas) ===== */

#screenHome{
  min-height:100vh;
  padding:14px;
  background: transparent;
}

.homeGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.homeBtn{
  height:95px;
  border-radius:18px;
  border:5px solid #0b2fa8;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
  background:#fff;
  margin-top:0; /* porque tu CSS actual mete margin-top a todos los botones */
}

/* colores tipo tu imagen */
.homeBtn.restaurante{ background:#ffe600; border-color:#ff3c3c; }
.homeBtn.farmacia{ background:#ffffff; border-color:#0047b3; }
.homeBtn.varios{ background:#ffe600; border-color:#0047b3; font-size:34px; }
.homeBtn.abarrotes{ background:#ffffff; border-color:#79d857; }
.homeBtn.rapido{ background:#ffffff; border-color:#0047b3; }
.homeBtn.transporte{ background:#c9f7ff; border-color:#000; }

#homeLocalesPreview{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.localCard{
  display:flex;
  align-items:center;
  gap:12px;
  background:#ffd94d;
  border-radius:18px;
  padding:10px;
  border:4px solid #0b2fa8;
}

.localImg{
  width:60px;
  height:60px;
  border-radius:12px;
  object-fit:cover;
}

.localName{
  flex:1;
  font-weight:800;
  font-size:18px;
  color:#000;
}

.localActions{
  display:flex;
  gap:10px;
}

.localBtn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:3px solid #0047b3;
  background:white;
  font-size:20px;
  cursor:pointer;
}
.homeBtn,
.localBtn{
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}




/* ===== PANTALLAS NUEVAS (locales/productos/ofertas) ===== */
.backLink{
  display:inline-block;
  font-weight:900;
  margin:8px 0 12px;
  cursor:pointer;
}
.metaLine{
  font-size:13px;
  opacity:.9;
  margin-bottom:10px;
}

.sectionTitle{
  font-weight:900;
  margin-top:14px;
  margin-bottom:8px;
}

.offers{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.offerCard{
  border:3px solid #0b2fa8;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  color:#000;
}
.offerCard img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
.offerCard .cap{
  padding:10px;
  font-weight:900;
}

.localHeader{
  display:flex;
  gap:12px;
  align-items:center;
  margin:10px 0 12px;
}
.localHeader img{
  width:64px;
  height:64px;
  border-radius:14px;
  border:3px solid orange;
  object-fit:cover;
  background:#fff;
}
.h1{font-weight:1000;font-size:18px;color:#fff;}
.p{font-size:13px;opacity:.9;color:#fff;}

.prodGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.prodCard{
  background:#fff;
  color:#000;
  border-radius:16px;
  overflow:hidden;
  border:3px solid orange;
}
.prodCard img{
  width:100%;
  height:80px;
  object-fit:cover;
  display:block;
  background:#eee;
}
.prodCard .body{ padding:8px; }
.prodCard .name{ font-weight:900; font-size:13px; min-height:34px; }
.prodCard .price{ font-weight:1000; margin-top:4px; }
.prodCard .add{
  margin-top:8px;
  width:100%;
  border:2px solid #0b2fa8;
  border-radius:12px;
  background:#fff;
  font-weight:1000;
}

.bottomBar{
  position:sticky;
  bottom:0;
  margin-top:12px;
  padding:10px;
  border-radius:18px;
  border:3px solid rgba(255,165,0,.9);
  background:rgba(7,26,58,.85);
  backdrop-filter: blur(6px);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.bottomBar .total{ font-weight:1000; }
.bottomBar .go{
  width:auto;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid orange;
  background:#fff;
  font-weight:1000;
  cursor:pointer;
}

/* chat alignment */
.msg{ display:flex; }
.msg.me{ justify-content:flex-end; }
.msg.them{ justify-content:flex-start; }
.msg .bubble{ max-width:78%; background:#fff; color:#000; }
.msg.me .bubble{ background:#eaeaea; }
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topRight{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}



.appLogo{
  width:40px;
  height:40px;
  border-radius:6px;   /* 👈 poquito redondeado, tipo app */
  object-fit:cover;
}
/* Admin invisible pero tocable */
#btnGoAdmin{
  opacity: 0;
  background: transparent;
  border: none;
  box-shadow: none;

  /* zona grande para tocar */
  width: 120px;
  height: 42px;

  cursor: pointer;
  pointer-events: auto;
}
/* la tarjeta del login será el contenedor */
#screenRegister .card{
  position: relative;
}

/* botón admin flotante, invisible, a la derecha del Entrar */
#btnGoAdmin{
  position: absolute;
  right: 18px;
  bottom: 18px;

  opacity: 0;
  background: transparent;
  border: none;
  box-shadow: none;

  width: 120px;
  height: 42px;

  cursor: pointer;
  pointer-events: auto;
}


/* ===== Textos del encabezado más visibles sobre fondos claros ===== */
.title, .subtitle, .backLink, .metaLine, .h1, .p, .sectionTitle{
  color: #111 !important; /* negro */
  font-weight: 800;
  text-shadow:
    -2px -2px 0 #ffffff,
     2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,
     2px  2px 0 #ffffff,
     0px  3px 6px rgba(0,0,0,0.25);
}

/* Nota de envío debajo de totales */
.shippingNote{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  opacity: 0.9;
  text-shadow:
    -1px -1px 0 #ffffff,
     1px -1px 0 #ffffff,
    -1px  1px 0 #ffffff,
     1px  1px 0 #ffffff;
}

/* Asegura que el bloque de total en la barra inferior no se vea blanco */
.bottomBar .total{ color:#111 !important; font-size:18px; }



/* ===== FIX VISUAL BORDE BLANCO Y TEXTO BORROSO ===== */
.title, .subtitle, .backLink, .metaLine, .h1, .p, .sectionTitle{
  text-shadow: none !important;
  color: #ffffff !important;
}

.title, .subtitle, .backLink, .metaLine, .h1, .p, .sectionTitle{
  display: inline-block;
  background: rgba(0,0,0,0.45);
  padding: 3px 8px;
  border-radius: 10px;
}

/* ===== FIX BARRA INFERIOR TOTAL ===== */
.bottomBar .total,
.bottomBar .shippingNote{
  color: #ffffff !important;
  text-shadow: none !important;
}


/* ===== Lista rápida + buscador ===== */
.prodSearchWrap{margin:8px 0 12px;}
.prodSearchWrap input{
  margin-top:0;
  background:#fff;
  color:#000;
  font-weight:700;
  border:3px solid #0b2fa8;
  border-radius:14px;
}

.prodGrid.prodGridList{
  grid-template-columns:1fr;
  gap:8px;
  align-items:start;
}
.prodCardList{
  border-width:2px;
  border-radius:14px;
}
.prodCardList .bodyList{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}
.prodCardList .listMain{flex:1; min-width:0;}
.prodCardList .name{
  min-height:auto;
  font-size:16px;
  line-height:1.15;
}
.prodCardList .price{
  margin-top:4px;
  font-size:22px;
}
.qtyMini{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qtyMiniList{margin-top:0; flex-shrink:0;}
.qtyMiniList .qtyBtn{
  width:38px;
  height:38px;
  padding:0;
}

.checkoutSummary{
  margin-top:10px;
  padding:12px;
  border:2px dashed orange;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  color:#000;
}
.checkoutLine{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
  margin-bottom:6px;
}
.checkoutLine.total{
  margin-top:8px;
  padding-top:8px;
  border-top:2px solid rgba(255,165,0,.5);
  font-size:18px;
}

/* ===== Ofertas más vistosas ===== */
.offerCard{
  border:4px solid #0b2fa8;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  color:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.offerCard img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  background:#111;
}
.offerCard .cap{
  padding:16px 18px;
  font-weight:1000;
  font-size:28px;
  line-height:1.05;
  color:#fff;
  text-align:left;
  background:linear-gradient(135deg,#112a80 0%, #0b2fa8 40%, #163fb5 100%);
  text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.15);
  letter-spacing:.3px;
}

@media (max-width: 640px){
  .prodGrid{grid-template-columns:repeat(2,1fr);}
  .prodCardList .bodyList{padding:10px;}
  .prodCardList .name{font-size:15px;}
  .prodCardList .price{font-size:20px;}
  .offerCard img{height:170px;}
  .offerCard .cap{font-size:22px; padding:14px;}
}

.prodCard img[src=""],
.prodCard img:not([src]){
  display:none;
}

.offerCard .cap{
  min-height:72px;
  display:flex;
  align-items:center;
}


.offerStyleRow input[type="color"]{
  height:46px;
  padding:6px;
}
.offerLabel{
  display:block;
  font-weight:900;
  margin-bottom:6px;
}

.offerCard{
  position:relative;
}
.offerCard.overlayText .cap{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  min-height:auto;
  padding:12px 16px;
  border-radius:16px;
  background:transparent !important;
  text-shadow:0 3px 10px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.95);
  font-size:34px;
  line-height:1.05;
  z-index:2;
  pointer-events:none;
}
.offerCard.overlayText::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0));
  pointer-events:none;
}



/* ========= FIX FINAL ESTABLE ========= */

/* Login */
#screenRegister .loginInlineBanner{
  margin-top:18px;
  border:3px solid #0b2fa8;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
#screenRegister .loginInlineBannerImg{
  width:100%;
  height:clamp(300px, 42vw, 450px);
  object-fit:contain;
  display:block;
  background:#fff;
}
@media (max-width:640px){
  #screenRegister .loginInlineBannerImg{
    height:clamp(240px, 70vw, 360px);
  }
}

/* Servicios del home: SOLO aquí */
#screenHome .homeGrid{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
#screenHome .homeBtn{
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  padding:0 !important;
  margin-top:0 !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  display:block !important;
}
#screenHome .homeBtn:hover,
#screenHome .homeBtn:active{
  transform:none !important;
  box-shadow:none !important;
}
#screenHome .homeBtn img,
#screenHome .homeBtn span,
#screenHome .serviceCardInner,
#screenHome .serviceCardImg,
#screenHome .serviceCardText{
  display:none !important;
}
@media (max-width:640px){
  #screenHome .homeBtn{
    height:170px !important;
    min-height:170px !important;
    border-radius:18px !important;
  }
}

/* Locales/negocios cliente: SOLO pantalla locales */
#screenLocales .localCard{
  background:#ffffff !important;
  border:none !important;
  box-shadow:0 4px 10px rgba(0,0,0,0.08) !important;
  min-height:120px !important;
  padding:14px !important;
  gap:16px !important;
  align-items:center !important;
}
#screenLocales .localImg{
  width:90px !important;
  height:90px !important;
  min-width:90px !important;
  border-radius:16px !important;
  object-fit:cover !important;
  display:block !important;
  background:#fff !important;
}
#screenLocales .localName{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
}
#screenLocales .localNombreMain{
  font-weight:800 !important;
  font-size:20px !important;
  line-height:1.05 !important;
  color:#000 !important;
}
#screenLocales .localHorario{
  font-size:14px !important;
  font-weight:400 !important;
  opacity:.82 !important;
  color:#222 !important;
}
#screenLocales .localActions button,
#screenLocales .localBtn{
  border:none !important;
  background:#f5f5f5 !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.12) !important;
}
@media (max-width:640px){
  #screenLocales .localCard{
    min-height:112px !important;
    padding:12px !important;
  }
  #screenLocales .localImg{
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
  }
  #screenLocales .localNombreMain{
    font-size:18px !important;
  }
  #screenLocales .localHorario{
    font-size:13px !important;
  }
}

/* Admin locales list */
#adminLocalesList .localCard{
  min-height:120px !important;
  padding:14px !important;
  gap:16px !important;
  align-items:center !important;
}
#adminLocalesList .localImg{
  width:90px !important;
  height:90px !important;
  min-width:90px !important;
  border-radius:16px !important;
  object-fit:cover !important;
}
#adminLocalesList .localName{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
}
#adminLocalesList .localNombreMain{
  font-weight:800 !important;
  font-size:20px !important;
  line-height:1.05 !important;
  color:#000 !important;
}
#adminLocalesList .localHorarioAdmin{
  font-size:13px !important;
  font-weight:400 !important;
  opacity:.82 !important;
  color:#222 !important;
}



/* ===== Ajustes admin y locales clickeables ===== */
.adminToolsRow .btn{
  flex:1;
}

#screenLocales .localCard.localCardClickable{
  cursor:pointer !important;
  transition:transform .12s ease, box-shadow .12s ease;
}
#screenLocales .localCard.localCardClickable:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.12) !important;
}
#screenLocales .localActions{
  display:flex !important;
  align-items:center !important;
}
#screenLocales .localBtnCartOnly{
  width:58px !important;
  height:58px !important;
  border:none !important;
  background:#f5f5f5 !important;
  box-shadow:0 3px 8px rgba(0,0,0,0.14) !important;
  font-size:30px !important;
}
@media (max-width:640px){
  #screenLocales .localBtnCartOnly{
    width:54px !important;
    height:54px !important;
    font-size:28px !important;
  }
}

/* Ofertas arriba y con fuente más elegante */
#offersWrap{
  margin-bottom:16px;
}
.offerCard .cap{
  font-family: Georgia, "Times New Roman", serif !important;
  font-size:20px !important;
  line-height:1.15 !important;
  letter-spacing:.1px !important;
}
.offerCard.overlayText .cap{
  font-family: Georgia, "Times New Roman", serif !important;
  font-size:20px !important;
  line-height:1.12 !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  padding:10px 12px !important;
}
@media (max-width:640px){
  .offerCard .cap,
  .offerCard.overlayText .cap{
    font-size:17px !important;
  }
}


/* ===== AJUSTE: slogan en locales + productos más cuadrados ===== */
#screenLocales .localSlogan{
  font-size:13px !important;
  font-weight:700 !important;
  opacity:.78 !important;
  color:#333 !important;
  line-height:1.15 !important;
  margin-top:2px !important;
  max-width:520px !important;
}

/* Productos: imagen cuadrada y texto más comprimido */
#screenProductos .prodCard img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}
#screenProductos .prodCard .body{
  padding:7px 8px 8px !important;
}
#screenProductos .prodCard .name{
  font-size:12.5px !important;
  line-height:1.15 !important;
  min-height:30px !important;
  font-weight:900 !important;
}
#screenProductos .prodCard .price{
  font-size:18px !important;
  margin-top:4px !important;
  line-height:1.1 !important;
}
#screenProductos .qtyMini{
  margin-top:8px !important;
  gap:7px !important;
}
#screenProductos .qtyBtn{
  width:36px !important;
  height:36px !important;
  padding:0 !important;
}

@media (max-width:640px){
  #screenLocales .localSlogan{
    font-size:12px !important;
  }
  #screenProductos .prodGrid{
    gap:8px !important;
  }
  #screenProductos .prodCard .name{
    font-size:12px !important;
    min-height:28px !important;
  }
}


/* ===== OFERTAS SIN MARCO + TRANSICIÓN LATERAL ===== */
#offers{
  overflow:hidden;
}
.offerCard{
  border:none !important;
  box-shadow:0 8px 20px rgba(0,0,0,.14) !important;
}
.offerSlideIn{
  animation: offerSlideIn .55s ease both;
}
@keyframes offerSlideIn{
  from{ transform:translateX(28px); opacity:.25; }
  to{ transform:translateX(0); opacity:1; }
}

/* ===== NEGOCIOS DESTACADOS POR SERVICIO ===== */
.featuredLocalsWrap{
  margin:10px 0 14px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.featuredLocalsTitle{
  display:inline-block;
  background:#888;
  color:#fff;
  font-weight:1000;
  padding:4px 10px;
  border-radius:10px;
  margin-bottom:10px;
}
.featuredLocalsCarousel{
  position:relative;
  overflow:hidden;
  padding:0 34px;
}
.featuredLocalsTrack{
  display:flex;
  gap:12px;
  overflow:hidden;
  padding:2px 2px 8px;
}
.featuredLocalsTrack.slideRight{
  animation: featuredSlideRight .85s ease both;
}
.featuredLocalsTrack.slideLeft{
  animation: featuredSlideLeft .85s ease both;
}
.featuredLocalBtn{
  margin:0 !important;
  padding:10px !important;
  min-height:132px;
  border:none !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(0,0,0,.13);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 calc((100% - 24px) / 3);
}
.featuredArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:102px;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:14px !important;
  background:rgba(0,0,0,.42) !important;
  color:#fff !important;
  font-size:34px;
  font-weight:900;
  line-height:1;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.featuredArrowLeft{ left:4px; }
.featuredArrowRight{ right:4px; }
.featuredLocalBtn img{
  width:108px;
  height:108px;
  border-radius:18px;
  object-fit:cover;
  display:block;
}
@keyframes featuredSlideRight{
  from{ transform:translateX(24px); opacity:.55; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes featuredSlideLeft{
  from{ transform:translateX(-24px); opacity:.55; }
  to{ transform:translateX(0); opacity:1; }
}
.featLocalesList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.featLocalCheck{
  display:flex;
  align-items:center;
  gap:10px;
  border:2px solid orange;
  border-radius:14px;
  padding:8px;
  font-weight:900;
  background:#fff;
  color:#111;
}
.featLocalCheck input{
  width:auto;
  margin:0;
}
.featLocalCheck img{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
}
@media (max-width:640px){
  .featuredLocalsWrap{ padding:8px; }
  .featuredLocalsCarousel{ padding:0 28px; }
  .featuredLocalsTrack{ gap:8px; padding-bottom:6px; }
  .featuredLocalBtn{
    min-height:112px;
    padding:8px !important;
    flex-basis:calc((100% - 16px) / 3);
  }
  .featuredLocalBtn img{ width:92px; height:92px; border-radius:16px; }
  .featuredArrow{ width:22px; height:88px; font-size:30px; }
}

/* ===== CATÁLOGO POR SECCIONES (supermercados) ===== */
.sectionButtonsWrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:10px 0 14px;
}
.sectionButtonsWrap.hidden{display:none !important;}
.sectionBtn{
  margin-top:0 !important;
  min-height:92px;
  border:2px solid orange;
  border-radius:16px;
  background:#fff;
  color:#111;
  font-weight:1000;
  font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  overflow:hidden;
}
.sectionBtn img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.sectionBtn span{
  display:block;
  line-height:1.1;
}
.sectionBtn.active{
  border-color:#0b2fa8;
  outline:3px solid rgba(11,47,168,.18);
}
.catalogEmpty{
  grid-column:1/-1;
  background:#fff;
  color:#111;
  border:2px dashed orange;
  border-radius:14px;
  padding:12px;
  font-weight:800;
}
.catalogProductRow{
  border:2px solid orange !important;
  border-radius:14px !important;
  background:#fff !important;
}
.catalogSectionAdmin{
  padding:12px;
  border:2px dashed orange;
  border-radius:14px;
  background:rgba(255,255,255,.65);
  margin-bottom:12px;
}
.adminSectionsList{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.sectionAdminRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:2px solid orange;
  border-radius:12px;
  padding:8px;
  background:#fff;
  color:#111;
}
.sectionAdminInfo{display:flex;align-items:center;gap:10px;min-width:0;}
.sectionAdminInfo img{width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid #ddd;}
.sectionAdminName{font-weight:1000;}
.sectionAdminName span{display:block;font-size:12px;opacity:.7;margin-top:2px;}
.sectionAdminBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.sectionAdminBtns button{
  width:42px;
  height:38px;
  margin-top:0 !important;
  padding:0 !important;
  border:2px solid #0b2fa8;
  border-radius:10px;
  background:#fff;
  font-weight:900;
}

/* Subir barra del carrito para que no la tape la navegación del celular */
body{padding-bottom:105px;}
.bottomBar{
  bottom:calc(env(safe-area-inset-bottom, 0px) + 62px) !important;
}
@media (max-width:640px){
  .sectionButtonsWrap{grid-template-columns:repeat(2,1fr);gap:8px;}
  .sectionBtn{min-height:86px;font-size:15px;}
  .sectionBtn img{width:48px;height:48px;}
  body{padding-bottom:125px;}
  .bottomBar{bottom:calc(env(safe-area-inset-bottom, 0px) + 72px) !important;}
}


/* ===== FIX 2026-06: textos negros sin cuadro gris ===== */
.title,
.subtitle,
.backLink,
.metaLine,
.h1,
.p,
.sectionTitle{
  color:#000000 !important;
  text-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}

#localesTitle{
  color:#000000 !important;
  background:transparent !important;
}


/* ===== FIX 2026-06 v37: encabezados elegantes negros + destacados centrados + mejor volver ===== */
.title,
.subtitle,
.backLink,
.metaLine,
.h1,
.p,
.sectionTitle,
.featuredLocalsTitle{
  color:#000000 !important;
  text-shadow:none !important;
}

.title,
.sectionTitle,
.featuredLocalsTitle,
.backLink,
.metaLine{
  font-family: Georgia, "Times New Roman", serif !important;
}

.title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
}

.subtitle,
.metaLine{
  font-size:15px;
  font-weight:700;
}

.backLink{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:#ffffff !important;
  color:#111111 !important;
  padding:10px 16px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  margin:8px 0 12px;
  line-height:1;
}
.backLink:hover{
  transform:translateY(-1px);
}

#localesTitle{
  display:inline-block;
  margin-left:10px;
  color:#000000 !important;
  background:transparent !important;
  font-size:17px;
}

.featuredLocalsTitle{
  display:block !important;
  width:100%;
  text-align:center;
  background:transparent !important;
  color:#000000 !important;
  font-size:28px;
  font-weight:800;
  padding:0 !important;
  margin:2px 0 14px;
  border-radius:0 !important;
}

@media (max-width:640px){
  .title{font-size:20px;}
  .subtitle,.metaLine{font-size:14px;}
  .backLink{padding:9px 14px !important;}
  #localesTitle{font-size:15px; margin-left:8px;}
  .featuredLocalsTitle{font-size:22px; margin-bottom:12px;}
}

/* ===== MOD ADMIN v41: no leídos/vistos, filtros, precios internos y envío editable ===== */
.inboxCard{
  position:relative;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.inboxCard:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.inboxCard.unread{
  border-color:#00a63c !important;
  box-shadow:0 0 0 3px rgba(0,166,60,.12);
}
.inboxCard.read{
  border-color:orange !important;
}
.inboxTitle{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:1000;
  font-size:18px;
  line-height:1.15;
}
.statusDot{
  width:14px;
  height:14px;
  min-width:14px;
  border-radius:50%;
  border:2px solid #ffffff;
  display:inline-block;
}
.unreadDot{
  background:#00c853;
  box-shadow:0 0 0 2px rgba(0,120,40,.35), 0 0 10px rgba(0,200,83,.7);
}
.readDot{
  background:#9ca3af;
  box-shadow:0 0 0 2px rgba(80,80,80,.22);
}
.inboxMeta,
.inboxCostLine{
  margin-top:4px;
  opacity:.88;
  font-size:13px;
}
.inboxCostLine{
  font-weight:900;
  color:#035c22;
}
.adminCostSummary{
  background:#e9fff0;
  color:#063b18;
  border:2px solid #00a63c;
  border-radius:14px;
  padding:10px 12px;
  margin:8px 0 10px;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}

.adminInternalMsg{
  margin-top:4px;
}
.adminInternalMsg .adminInternalBubble{
  background:#e9fff0 !important;
  color:#063b18 !important;
  border:2px solid #00a63c !important;
  box-shadow:0 6px 14px rgba(0,166,60,.12);
  font-weight:800;
  max-width:88%;
}

.adminFilterBox{
  background:#ffffff;
  color:#000;
  border:2px solid orange;
  border-radius:14px;
  padding:12px;
  margin:8px 0 14px;
}
.adminFilterBox label{
  display:block;
  font-weight:1000;
  margin-bottom:6px;
}
.adminFilterBox select,
.adminFilterBox input{
  margin-top:8px;
  width:100%;
  background:#fff;
  color:#000;
  border:2px solid orange;
  border-radius:10px;
  padding:10px;
  box-sizing:border-box;
}
.adminPriceHint{
  margin:5px 0 0;
  font-weight:700;
  color:#333;
}

@media (max-width:640px){
  .inboxTitle{font-size:16px;}
  .adminCostSummary{font-size:13px;}
  .adminFilterBox{padding:10px;}
}