/* Tía Vicenta v423 · Pulido integral de interfaz
   Capa no invasiva: solo presentación, sin tocar lógica del carrito. */

:root{
  --tv423-ink:#171927;
  --tv423-muted:#72685f;
  --tv423-accent:#ff9416;
  --tv423-accent-2:#ffb03c;
  --tv423-cream:#fff8ef;
  --tv423-card:#ffffff;
  --tv423-line:rgba(78,54,34,.12);
  --tv423-soft:rgba(255,148,22,.12);
  --tv423-shadow:0 18px 50px rgba(46,29,12,.10);
  --tv423-shadow-sm:0 10px 26px rgba(46,29,12,.075);
  --tv423-radius-xl:28px;
  --tv423-radius-lg:22px;
  --tv423-radius-md:16px;
}

html{
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

html body{
  background:
    radial-gradient(circle at 8% 4%, rgba(255,148,22,.10), transparent 28rem),
    radial-gradient(circle at 94% 16%, rgba(255,193,86,.10), transparent 24rem),
    linear-gradient(180deg,#fffaf3 0%,#fff7ef 48%,#fffaf6 100%)!important;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,148,22,.16), transparent 24rem),
    radial-gradient(circle at 100% 12%, rgba(255,193,86,.10), transparent 22rem),
    linear-gradient(180deg,#171312 0%,#1e1815 52%,#161211 100%)!important;
}

/* Contenedor general */
html body .app{
  width:min(100% - 22px, 1320px)!important;
  margin-inline:auto!important;
  padding-bottom:96px!important;
}

@media (min-width:900px){
  html body .app{
    width:min(100% - 46px, 1320px)!important;
  }
}

/* Header premium, más compacto y estable */
html body .topbar{
  position:sticky!important;
  top:8px!important;
  z-index:70!important;
  margin-bottom:12px!important;
}

html body .topbar-inner{
  border:1px solid rgba(255,148,22,.16)!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.84)!important;
  box-shadow:0 16px 42px rgba(52,32,13,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

html[data-theme="dark"] body .topbar-inner{
  background:rgba(31,25,23,.82)!important;
  border-color:rgba(255,177,74,.16)!important;
  box-shadow:0 16px 46px rgba(0,0,0,.32)!important;
}

html body .brand-logo{
  transform:translateZ(0);
  border-radius:20px!important;
  box-shadow:0 12px 28px rgba(27,20,15,.10)!important;
}

html body .brand-title{
  letter-spacing:-.055em!important;
}

html body .brand-status-row{
  margin-top:5px!important;
}

html body .store-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(25,168,93,.18)!important;
  background:rgba(25,168,93,.09)!important;
  font-size:11px!important;
  font-weight:950!important;
}

html body .store-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

/* Buscador */
html body .search{
  min-height:54px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(67,43,23,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 8px 22px rgba(34,22,12,.05)!important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease!important;
}

html body .search:focus-within{
  border-color:rgba(255,148,22,.44)!important;
  box-shadow:0 0 0 4px rgba(255,148,22,.13), 0 14px 34px rgba(45,29,13,.08)!important;
  transform:translateY(-1px)!important;
}

html body .search input{
  font-size:15px!important;
  font-weight:850!important;
}

html body .search-clear{
  width:34px!important;
  height:34px!important;
  border-radius:12px!important;
}

/* Botones superiores */
html body .pill-btn,
html body .icon-btn{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease!important;
}

html body .pill-btn:hover,
html body .icon-btn:hover,
html body .tv-business-action-v420:hover,
html body .details-btn:hover,
html body .add-btn:hover{
  transform:translateY(-1px);
}

html body .pill-btn:active,
html body .icon-btn:active,
html body .tv-business-action-v420:active,
html body .details-btn:active,
html body .add-btn:active{
  transform:translateY(1px) scale(.99);
}

html body .category-menu-btn{
  background:linear-gradient(180deg,#fff,#fff6e8)!important;
}

html body #themeBtn{
  min-width:98px!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#fff2d4,#ffe3a7)!important;
  border-color:rgba(255,148,22,.24)!important;
}

html[data-theme="dark"] body #themeBtn{
  background:linear-gradient(180deg,#37271f,#241c19)!important;
  color:#fff7ed!important;
}

/* Accesos Horarios / Ubicación / Aplicación */
html body .tv-business-actions-v420{
  position:relative;
  isolation:isolate;
  margin:10px auto 16px!important;
}

html body .tv-business-actions-v420::before{
  content:"";
  position:absolute;
  inset:-8px -4px;
  z-index:-1;
  border-radius:26px;
  background:linear-gradient(90deg, rgba(255,148,22,.08), rgba(255,255,255,0), rgba(255,148,22,.08));
  opacity:.9;
}

html body .tv-business-action-v420{
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,249,239,.94))!important;
  box-shadow:0 12px 28px rgba(62,37,13,.075)!important;
}

html body .tv-business-action-icon-v420{
  color:#24170f;
  background:linear-gradient(180deg,#fff8ed,#ffe4b9)!important;
}

/* Promo banners */
html body #promoBanners,
html body .promo-banners{
  margin-top:2px!important;
  margin-bottom:18px!important;
}

html body .promo-premium-shell,
html body .promo-banners,
html body #promoBanners{
  border-radius:26px!important;
}

html body .promo-premium-shell{
  box-shadow:0 18px 46px rgba(57,33,12,.12)!important;
  background:transparent!important;
}

html body .promo-picture img,
html body .promo-premium-slide img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
}

/* Títulos */
html body .section-head{
  align-items:end!important;
  gap:14px!important;
  margin:18px 0 10px!important;
}

html body .section-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-bottom:5px!important;
  color:#e87500!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
  font-weight:1000!important;
}

html body .section-kicker::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:99px;
  background:#ff9416;
}

html body #menuTitle{
  font-size:clamp(30px,4.5vw,52px)!important;
  line-height:.92!important;
  letter-spacing:-.07em!important;
}

html body .close-categories-btn{
  border-radius:16px!important;
  border:1px solid rgba(68,44,24,.12)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 8px 20px rgba(44,28,12,.06)!important;
}

/* Categorías */
html body .categories{
  display:grid!important;
  gap:12px!important;
}

html body .category{
  border-radius:24px!important;
  border:1px solid rgba(78,54,34,.12)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 12px 34px rgba(47,30,13,.07)!important;
  overflow:hidden!important;
}

html[data-theme="dark"] body .category{
  background:rgba(35,28,25,.80)!important;
  border-color:rgba(255,255,255,.10)!important;
}

html body .category-head{
  border-radius:24px!important;
  padding:14px!important;
  transition:background .18s ease!important;
}

html body .category.open .category-head{
  background:linear-gradient(90deg,rgba(255,148,22,.13),rgba(255,255,255,0))!important;
}

html body .category-logo{
  background:linear-gradient(180deg,#fff9f1,#ffe5bf)!important;
  border:1px solid rgba(255,148,22,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}

html body .category-title{
  letter-spacing:-.045em!important;
}

html body .category-meta{
  font-weight:850!important;
}

html body .chev{
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(74,50,29,.10)!important;
}

/* Grillas de productos: mobile limpio, desktop premium */
html body .category-body{
  padding-bottom:12px!important;
}

html body .products{
  gap:12px!important;
}

html body .product,
html body .compact-product{
  position:relative!important;
  border-color:rgba(73,49,29,.12)!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 10px 28px rgba(42,27,12,.07)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}

html body .product:hover,
html body .compact-product:hover{
  border-color:rgba(255,148,22,.28)!important;
  box-shadow:0 18px 46px rgba(42,27,12,.12)!important;
  transform:translateY(-2px);
}

html body .product-media{
  background:linear-gradient(135deg,#fff7ed,#fff)!important;
}

html body .product-media img{
  transition:transform .22s ease, filter .22s ease!important;
}

html body .product:hover .product-media img{
  transform:scale(1.025);
}

html body .product[data-id="nuevo-tortilla-papa"] .product-media img{
  transform:none!important;
}

html body .price{
  color:#f07800!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

html body .details-btn{
  border:1px solid rgba(66,42,24,.12)!important;
  background:#fff!important;
  color:#161827!important;
  font-weight:950!important;
}

html body .add-btn,
html body .card-qty-btn:last-child,
html body .cart-addon-pro-control button:last-child{
  background:linear-gradient(180deg,#ffa32b,#ff880d)!important;
  color:#231407!important;
  box-shadow:0 8px 18px rgba(255,136,13,.20)!important;
}

html body .card-buy-control.is-active{
  background:linear-gradient(180deg,#fff7ed,#fff)!important;
  border:1px solid rgba(255,148,22,.20)!important;
}

html body .card-qty-number{
  color:#151724!important;
  font-weight:1000!important;
}

/* Desktop/tablet: vuelve la tarjeta premium vertical */
@media (min-width: 780px){
  html body .products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  html body .product,
  html body .compact-product{
    display:flex!important;
    flex-direction:column!important;
    min-height:372px!important;
    border-radius:24px!important;
  }

  html body .product-media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
  }

  html body .product-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  html body .product-body{
    padding:14px!important;
    gap:9px!important;
    flex:1!important;
  }

  html body .desc{
    display:-webkit-box!important;
    min-height:2.55em!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  html body .product-actions{
    margin-top:auto!important;
  }
}

@media (min-width: 1040px){
  html body .products{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (min-width: 1240px){
  html body .products{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Mobile: filas más legibles y compactas */
@media (max-width: 779px){
  html body .app{
    width:min(100% - 14px, 520px)!important;
  }

  html body .topbar{
    top:6px!important;
  }

  html body .topbar-inner{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px!important;
    border-radius:24px!important;
  }

  html body .brand-logo{
    width:52px!important;
    height:52px!important;
    border-radius:17px!important;
  }

  html body .brand-title{
    font-size:23px!important;
  }

  html body .brand-tag{
    display:none!important;
  }

  html body .top-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  html body .top-actions .install-cta{
    grid-column:1 / -1!important;
  }

  html body .pill-btn{
    min-height:44px!important;
    border-radius:16px!important;
  }

  html body .tv-business-actions-v420{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  html body .tv-business-action-v420{
    min-height:62px!important;
    padding:8px 5px!important;
  }

  html body .promo-premium-shell,
  html body .promo-banners,
  html body #promoBanners{
    border-radius:22px!important;
  }

  html body .section-head{
    align-items:center!important;
  }

  html body .category{
    border-radius:22px!important;
  }

  html body .category-head{
    min-height:64px!important;
    padding:10px!important;
  }

  html body .product,
  html body .compact-product{
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:150px!important;
    border-radius:18px!important;
  }

  html body .product-media{
    min-height:150px!important;
  }

  html body .product h3{
    font-size:16px!important;
    line-height:1.08!important;
  }

  html body .price{
    font-size:16px!important;
  }

  html body .details-btn,
  html body .add-btn,
  html body .card-buy-control{
    height:40px!important;
    min-height:40px!important;
  }
}

/* Carrito y checkout */
html body #cartFloatBtn{
  box-shadow:0 18px 38px rgba(255,136,13,.28)!important;
  border:1px solid rgba(255,255,255,.40)!important;
}

html body #cartFloatBtn:hover{
  transform:translateY(-2px) scale(1.02);
}

html body .drawer{
  border-left:1px solid rgba(255,148,22,.16)!important;
  box-shadow:-24px 0 70px rgba(32,20,12,.22)!important;
}

html body .drawer-head{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,239,.94))!important;
  border-bottom:1px solid rgba(78,54,34,.10)!important;
}

html body .cart-steps{
  background:rgba(255,255,255,.70)!important;
  border-bottom:1px solid rgba(78,54,34,.10)!important;
}

html body .cart-step.active span{
  background:linear-gradient(180deg,#ffa32b,#ff880d)!important;
  color:#231407!important;
}

html body .cart-item{
  border-radius:20px!important;
  border-color:rgba(78,54,34,.10)!important;
  box-shadow:0 10px 26px rgba(42,27,12,.06)!important;
}

html body .cart-thumb-wrap,
html body .cart-thumb{
  border-radius:16px!important;
}

html body .cart-addons-pro{
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,247,235,.95))!important;
}

html body .cart-addon-pro-card{
  border-radius:19px!important;
}

html body .checkout-panel input,
html body .checkout-panel textarea,
html body .checkout-panel select,
html body .drawer input,
html body .drawer textarea,
html body .drawer select{
  border-radius:16px!important;
  border:1px solid rgba(76,53,34,.13)!important;
  background:rgba(255,255,255,.94)!important;
}

html body .checkout-panel input:focus,
html body .checkout-panel textarea:focus,
html body .checkout-panel select:focus,
html body .drawer input:focus,
html body .drawer textarea:focus,
html body .drawer select:focus{
  outline:none!important;
  border-color:rgba(255,148,22,.50)!important;
  box-shadow:0 0 0 4px rgba(255,148,22,.12)!important;
}

/* Modales */
html body .modal-card{
  border-radius:30px!important;
  border-color:rgba(255,148,22,.16)!important;
  box-shadow:0 32px 90px rgba(21,16,12,.34)!important;
}

html body .modal-img{
  border-radius:22px!important;
}

html body .modal-foot{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,248,238,.96))!important;
}

/* Accesibilidad visual */
html body :focus-visible{
  outline:3px solid rgba(255,148,22,.42)!important;
  outline-offset:3px!important;
}

html body button,
html body a,
html body input,
html body textarea,
html body select{
  -webkit-tap-highlight-color:rgba(255,148,22,.18);
}

/* Botón volver arriba */
.tv423-scroll-top{
  position:fixed;
  right:max(82px, calc(env(safe-area-inset-right) + 82px));
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:75;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  color:#171927;
  box-shadow:0 16px 38px rgba(42,27,12,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.96);
  transition:opacity .18s ease, transform .18s ease;
}

.tv423-scroll-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.tv423-scroll-top svg{
  width:22px;
  height:22px;
}

@media (max-width: 779px){
  .tv423-scroll-top{
    right:max(78px, calc(env(safe-area-inset-right) + 78px));
    width:48px;
    height:48px;
    border-radius:16px;
  }
}

html body.drawer-open .tv423-scroll-top{
  opacity:0!important;
  pointer-events:none!important;
}

/* Animación de entrada suave */
html.tv423-ready body .category,
html.tv423-ready body .promo-banners,
html.tv423-ready body .section-head{
  animation:tv423Rise .32s ease both;
}

@keyframes tv423Rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

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


html body .tv423-pressed{
  filter:saturate(1.05) brightness(.99);
}

html body #cartFloatBtn.tv423-cart-updated{
  animation:tv423CartPulse .46s ease both;
}

@keyframes tv423CartPulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.09) rotate(-2deg)}
  100%{transform:scale(1)}
}

html body .product-media:not(.is-loaded){
  position:relative;
}

html body .product-media:not(.is-loaded)::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(-120%);
  animation:tv423MediaShimmer 1.2s ease infinite;
}

@keyframes tv423MediaShimmer{
  to{transform:translateX(120%)}
}