/* =========================================================
   GoEldo - PWA + modo movil
   Safe areas, barra inferior, hoja lateral, tarjetas
   en lugar de tablas y targets tactiles grandes.
   ========================================================= */

/* ---------- Variables de viewport dinamico ---------- */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --bottom-nav-h: 62px;
}

/* ---------- Reset tactil ---------- */
*{
  -webkit-tap-highlight-color: rgba(138,154,91,.18);
  touch-action: manipulation;
}
body{
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Scroll visible en movil ---------- */
@media(hover:none){
  *{
    scrollbar-width: thin;
    scrollbar-color: #C6CDAF transparent;
  }
  ::-webkit-scrollbar{width:5px;height:5px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#C6CDAF;border-radius:6px}
}

/* =========================================================
   BARRA INFERIOR DE NAVEGACION (solo movil)
   ========================================================= */
.pp-tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid #E3E7D5;
  padding-bottom:var(--sab);
  box-shadow:0 -4px 18px rgba(46,51,30,.08);
}
.pp-tabbar-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:var(--bottom-nav-h)}
.pp-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#8B9179;font-size:10px;font-weight:800;text-decoration:none;
  position:relative;transition:color .15s;-webkit-tap-highlight-color:transparent;
}
.pp-tab svg{width:22px;height:22px;stroke-width:2}
.pp-tab.is-active{color:#5C673C}
.pp-tab.is-active::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;background:#8A9A5B
}
.pp-tab .badge-dot{
  position:absolute;top:8px;right:calc(50% - 18px);
  min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:#A2423A;color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1
}

/* =========================================================
   HOJA LATERAL (drawer) en movil
   ========================================================= */
.pp-scrim{
  display:none;position:fixed;inset:0;z-index:1400;
  background:rgba(46,51,30,.5);opacity:0;transition:opacity .22s;
}
body.nav-open .pp-scrim{display:block;opacity:1}

/* =========================================================
   ADAPTACIONES DEL PORTAL
   ========================================================= */
@media(max-width:860px){
  .pt-layout{display:block}

  .pt-side{
    position:fixed;left:0;top:0;bottom:0;width:272px;max-width:84vw;
    height:100dvh;z-index:1500;
    transform:translateX(-102%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    padding-top:var(--sat);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  body.nav-open .pt-side{transform:translateX(0)}

  .pt-nav{padding:12px 10px 20px}
  .pt-nav-item{padding:14px 13px;font-size:15px;border-radius:12px}
  .pt-nav-item svg{width:22px;height:22px}
  .pt-side-foot{padding:12px 12px calc(16px + var(--sab))}

  /* topbar pegado con safe-area */
  .pt-top{
    padding:calc(10px + var(--sat)) calc(14px + var(--sar)) 10px calc(14px + var(--sal));
    gap:10px;
  }
  .pt-burger{
    display:flex;width:42px;height:42px;flex:0 0 42px;border-radius:12px;
    background:#F4F6EE;color:#2E331E;align-items:center;justify-content:center
  }
  .pt-burger svg{width:22px;height:22px}

  .pt-store-logo{height:36px}
  .pt-store-txt b{font-size:13.5px;max-width:44vw}
  .pt-store-txt span{display:none}

  .pt-top-link{display:none}
  .pt-user{border-left:none;padding-left:0;gap:6px}
  .pt-user-txt{display:none}
  .pt-avatar{width:38px;height:38px}
  .pt-logout{width:40px;height:40px}

  /* el estado pasa a solo el punto para que la barra quepa en una linea */
  .pt-open{padding:9px 13px;min-height:40px}
  .pt-open .lbl{display:none}
  .pt-open .dot{width:11px;height:11px;flex:0 0 11px}
  .pt-top-left{flex:1 1 auto;min-width:0;overflow:hidden}
  .pt-store{flex:1 1 auto;min-width:0}

  /* contenido con padding y espacio para la barra inferior */
  .pt-wrap{
    padding:16px calc(16px + var(--sar)) calc(var(--bottom-nav-h) + 26px + var(--sab)) calc(16px + var(--sal));
    max-width:100%;
  }

  .pt-page-head{margin-bottom:16px;gap:12px}
  .pt-page-head h1{font-size:20px}
  .pt-page-act{width:100%}
  .pt-page-act .pt-btn{flex:1;min-height:44px}

  /* KPIs en 2 columnas, 1 en pantallas muy chicas */
  .pt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}

  /* la barra inferior solo existe en movil */
  .pp-tabbar{display:block}
  .pt-kpi{padding:13px}
  .pt-kpi .k-val{font-size:20px}
  .pt-kpi .k-lbl{font-size:10px}

  .pt-grid-2,.pt-grid-2b{gap:12px;margin-bottom:14px}
  .pt-card{padding:15px;border-radius:15px}
  .pt-card-head h2{font-size:14.5px}

  /* targets tactiles minimos 44px */
  .pt-btn{min-height:44px;padding:12px 15px}
  .pt-btn-sm{min-height:38px;padding:9px 12px}
  .pt-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pt-tabs::-webkit-scrollbar{display:none}
  .pt-tabs button{white-space:nowrap;flex:0 0 auto;min-height:38px}

  .pt-row{padding:11px 10px;gap:10px}
  .pt-row .r-ico{width:42px;height:42px}
  .pt-row .r-main b{font-size:13.5px}

  .pt-switch{min-height:44px}
  .pt-switch .track{width:50px;height:28px;flex:0 0 50px}
  .pt-switch .track::after{width:22px;height:22px;top:3px;left:3px}
  .pt-switch input:checked + .track::after{transform:translateX(22px)}
  .pt-switch .lbl{font-size:13.5px}

  /* uploader apilado */
  .pt-up{padding:12px;gap:12px}
  .pt-up-body{width:100%;flex:1 1 100%}
  .pt-up-thumb{width:80px;height:80px}
  .pt-up-thumb.wide{height:130px}
  .pt-file-label{min-height:44px;padding:12px 16px;flex:1;justify-content:center}

  .pt-hours-day{padding:12px}
  .pt-hours-day .d-name{font-size:13px}
  .pt-hours-day input[type=time]{min-height:44px;font-size:16px} /* 16px evita el zoom automatico en iOS */

  .pt-modal-wrap{padding:0;align-items:flex-end}
  .pt-modal{border-radius:20px 20px 0 0;padding:22px 18px calc(22px + var(--sab));max-width:100%}
  .pt-modal-lg{
    border-radius:20px 20px 0 0;max-width:100%;max-height:92dvh;
    padding-bottom:var(--sab)
  }
  .pt-modal-lg .m-head{padding:18px 18px 0}
  .pt-modal-lg .m-body{padding:16px 18px}
  .pt-modal-lg .m-foot{padding:0 18px 18px}
  .pt-modal-lg .m-foot .pt-btn{flex:1;min-height:46px}

  .pt-toasts{left:12px;right:12px;bottom:calc(var(--bottom-nav-h) + 16px + var(--sab));align-items:stretch}
  .pt-toast{max-width:100%}

  .pt-donut{width:140px;height:140px}

  /* ---------- Tablas -> tarjetas ---------- */
  .pt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pt-table{min-width:620px}
  .pt-table th{position:sticky;top:0;background:#fff;z-index:1}

  /* en el resumen las tablas no se usan, pero los productos si */
  .pt-menu-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pt-pcard .p-img{height:104px}
  .pt-pcard .p-act{flex-wrap:wrap}
  .pt-pcard .p-act button{min-height:40px;font-size:11px}
}

/* ---------- Banner de instalacion en movil ---------- */
@media(max-width:860px){
  .pwa-install{
    flex-wrap:wrap;padding:14px;gap:10px;border-radius:14px
  }
  .pwa-install .pi-body{flex:1 1 100%;order:2}
  .pwa-install #pwaInstallBtn{order:3;flex:1;min-height:46px;justify-content:center}
  .pwa-install #pwaInstallClose{order:1;margin-left:auto;flex:0 0 auto}
  .pwa-install img{order:0}
  .pwa-offline{font-size:12px}
}

@media(max-width:420px){
  .pt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pt-kpi .k-val{font-size:18px}
  .pt-menu-grid{grid-template-columns:minmax(0,1fr)}
  .pt-form-grid{grid-template-columns:minmax(0,1fr)}
  .pt-store-logo{height:32px}
  .pt-store-txt b{max-width:38vw;font-size:13px}
}

/* ---------- Sin desbordamiento horizontal, pase lo que pase ---------- */
body.pt-body{overflow-x:hidden;overflow-x:clip}
.pt-wrap > *{max-width:100%}

/* ---------- Targets tactiles globales del portal ---------- */
@media(max-width:860px){
  .pt-nav-item,
  .pt-top-link,
  .pt-logout,
  .pt-burger,
  .pt-open{ -webkit-tap-highlight-color:rgba(138,154,91,.2) }

  /* inputs de 16px para que iOS no haga zoom al enfocar */
  .pt-field input,.pt-field select,.pt-field textarea,
  .pt-up input[type=url],.pt-url-input,.pt-switch input[type=search]{
    font-size:16px;min-height:46px
  }
  .pt-field textarea{min-height:92px}
}

/* =========================================================
   LOGIN DEL PORTAL - movil
   ========================================================= */
@media(max-width:860px){
  .pp-body{padding:0}
  .pp-shell{border-radius:0;box-shadow:none;min-height:100dvh}
  .pp-info{padding:26px 20px 30px}
  .pp-info h1{font-size:21px;margin-bottom:20px}
  .pp-benefit{gap:11px}
  .pp-benefit .ico{width:38px;height:38px}
  .pp-benefit p{font-size:13px}
  .pp-form{padding:24px 20px calc(28px + var(--sab))}
  .pp-form h2{font-size:20px}
  .pp-field input{min-height:48px;font-size:16px}
  .pp-submit{min-height:50px;font-size:16px}
  .pp-alt{min-height:50px}
  .pp-logo img{height:34px}
  .pp-lang{min-height:40px}
}

/* =========================================================
   TIENDA (comercio.html) - movil
   ========================================================= */
@media(max-width:860px){
  .store-cover img{height:150px}
  .store-hero{padding:14px;gap:12px}
  .store-logo{width:72px;height:72px}
  .store-info h1{font-size:20px}
  .store-info .meta{gap:8px;font-size:12.5px}
  .store-closed-bar{font-size:12.5px;padding:11px 13px}

  .cat-tabs{
    display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:0 14px 10px;scrollbar-width:none
  }
  .cat-tabs::-webkit-scrollbar{display:none}
  .cat-tab{flex:0 0 auto;white-space:nowrap;min-height:40px;padding:11px 15px}

  .detail-layout{display:block}
  .product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .product-card .add-btn{min-height:44px;font-size:13px}

  .cart-panel{
    position:sticky;bottom:0;z-index:500;border-radius:18px 18px 0 0;
    box-shadow:0 -6px 24px rgba(46,51,30,.16);
    padding-bottom:calc(14px + var(--sab))
  }
  .checkout{min-height:48px;font-size:15px}

  .header-inner{padding:9px 12px;gap:9px}
  .header-search input{font-size:16px}
  .brand img{height:44px}
  .loc-btn{max-width:130px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:18px}
}

@media(max-width:420px){
  .product-grid{grid-template-columns:1fr}
}

/* =========================================================
   INSTALACION DE LA APP
   ========================================================= */
.pwa-install{
  display:none;align-items:center;gap:11px;
  background:#2E331E;color:#fff;border-radius:16px;
  padding:13px 15px;margin-bottom:14px;
  box-shadow:0 8px 24px rgba(46,51,30,.25)
}
.pwa-install.show{display:flex}
.pwa-install img{width:40px;height:40px;border-radius:10px;flex:0 0 40px}
.pwa-install .pi-body{flex:1;min-width:0}
.pwa-install .pi-body b{display:block;font-size:13.5px;font-weight:800}
.pwa-install .pi-body span{display:block;font-size:11.5px;color:#C6CDAF;line-height:1.4}
.pwa-install button{
  background:#8A9A5B;color:#fff;padding:10px 14px;border-radius:11px;
  font-size:12.5px;font-weight:800;white-space:nowrap;flex:0 0 auto;min-height:42px
}
.pwa-install button:active{background:#5C673C}

.pwa-offline{
  display:none;align-items:center;gap:8px;
  background:#FCF1DA;border:1px solid #EBD9AE;color:#8A6520;
  padding:10px 14px;border-radius:12px;font-size:12.5px;font-weight:700;
  margin-bottom:12px
}
.pwa-offline.show{display:flex}
.pwa-offline svg{width:17px;height:17px;flex:0 0 17px}

/* ---------- Impresion ---------- */
@media print{
  .pt-side,.pt-top,.pp-tabbar,.pt-page-act,.pt-burger{display:none !important}
  .pt-wrap{padding:0}
  .pt-card{break-inside:avoid;box-shadow:none;border-color:#ccc}
}

/* ---------- Respeto a la preferencia de reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
}