/* =============================================================
   POSWEB Restaurante v0.19.16 - Responsive Stability Hotfix
   PC / Tablet / Celular. Capa únicamente visual: no altera
   eventos ni lógica de pedidos/comandas.
   ============================================================= */

:root{
  --pwr-safe-top:env(safe-area-inset-top,0px);
  --pwr-safe-right:env(safe-area-inset-right,0px);
  --pwr-safe-bottom:env(safe-area-inset-bottom,0px);
  --pwr-safe-left:env(safe-area-inset-left,0px);
  --pwr-visual-height:100dvh;
}

/* El tema de WordPress no debe asomarse detrás de ninguna pantalla POSWEB. */
body.pwr-fullscreen-page .entry-header,
body.pwr-fullscreen-page .entry-title,
body.pwr-fullscreen-page .page-title,
body.pwr-fullscreen-page .wp-block-post-title,
body.pwr-management-page .entry-header,
body.pwr-management-page .entry-title,
body.pwr-management-page .page-title,
body.pwr-management-page .wp-block-post-title,
body.pwr-dashboard-page .entry-header,
body.pwr-dashboard-page .entry-title,
body.pwr-reports-page .entry-header,
body.pwr-reports-page .entry-title,
body.pwr-kds-page .entry-header,
body.pwr-kds-page .entry-title{
  display:none!important;
}

body.pwr-fullscreen-page,
body.pwr-management-page,
body.pwr-dashboard-page,
body.pwr-reports-page,
body.pwr-kds-page{
  width:100%!important;
  max-width:none!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Mensajes del POS siempre deben quedar por encima de barras fijas. */
#pwr-app .pwr-toast{
  z-index:2147483646!important;
  right:max(12px,var(--pwr-safe-right))!important;
  bottom:max(12px,var(--pwr-safe-bottom))!important;
  max-width:min(440px,calc(100vw - 24px))!important;
  font-size:13px!important;
  line-height:1.35!important;
}

/* =============================================================
   APP SHELL / ADMINISTRACIÓN
   ============================================================= */
.pwr-commercial-app,
.pwr-dashboard-v17,
.pwr-reports-shell{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
}

.pwr-commercial-main{
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

.pwr-commercial-content{
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

.pwr-commercial-footer{
  flex:0 0 auto!important;
}

/* Mantiene botones legibles: corrige el "Nuevo producto" casi invisible. */
.pwr-commercial-primary,
.pwr-new-product-button,
.pwr-product-edit-button,
.pwr-product-modifier-button-v188{
  opacity:1!important;
}
.pwr-commercial-primary,
.pwr-new-product-button{
  color:#fff!important;
}
.pwr-new-product-button span{
  color:inherit!important;
  opacity:1!important;
}

/* Desktop/portátil: el contenido usa el ancho real disponible. */
@media (min-width:881px){
  .pwr-commercial-content{
    width:min(1440px,calc(100% - 40px))!important;
    padding:20px 0 34px!important;
  }
  .pwr-dashboard-content-v17{
    width:min(1440px,calc(100% - 40px))!important;
  }
}

/* Tablet y celular: barra móvil fija dentro del shell, no en el body. */
@media (max-width:880px){
  .pwr-app-mobilebar{
    flex:0 0 calc(60px + var(--pwr-safe-top))!important;
    min-height:calc(60px + var(--pwr-safe-top))!important;
    padding:max(8px,var(--pwr-safe-top)) 12px 8px!important;
    position:relative!important;
    z-index:50!important;
  }
  .pwr-app-mobilebar strong{
    min-width:0!important;
    max-width:52vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:14px!important;
  }
  .pwr-mobile-home{
    min-width:44px!important;
    min-height:44px!important;
    justify-content:center!important;
  }
  .pwr-commercial-content{
    width:100%!important;
    padding:14px 12px calc(24px + var(--pwr-safe-bottom))!important;
  }
  .pwr-commercial-section-head{
    margin-bottom:14px!important;
  }
  .pwr-commercial-section-head h2{
    font-size:22px!important;
  }
  .pwr-commercial-section-head p{
    max-width:none!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .pwr-catalog-live-search input{
    font-size:16px!important;
  }
  .pwr-product-card-body>h3{
    font-size:16px!important;
  }
  .pwr-product-card-price{
    font-size:19px!important;
  }
  .pwr-product-card-actions a,
  .pwr-product-card-actions button{
    min-height:42px!important;
    font-size:11px!important;
  }
}

@media (max-width:600px){
  .pwr-catalog-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .pwr-catalog-heading .pwr-new-product-button{
    width:100%!important;
    min-height:48px!important;
    justify-content:center!important;
    font-size:12px!important;
  }
  .pwr-catalog-toolbar{
    margin-bottom:12px!important;
  }
  .pwr-catalog-live-search{
    min-height:50px!important;
    padding-left:42px!important;
  }
  .pwr-catalog-live-search input{
    height:48px!important;
    min-height:48px!important;
  }
  .pwr-product-card-v188{
    grid-template-columns:112px minmax(0,1fr)!important;
  }
  .pwr-product-card-media{
    min-width:0!important;
    width:100%!important;
  }
  .pwr-product-card-media>img{
    object-position:center!important;
  }
  .pwr-product-card-body{
    min-width:0!important;
    padding:11px!important;
  }
  .pwr-product-card-kicker{
    font-size:8px!important;
  }
  .pwr-product-card-info-row{
    gap:4px!important;
  }
  .pwr-commercial-footer{
    padding-bottom:calc(12px + var(--pwr-safe-bottom))!important;
  }
}

@media (max-width:390px){
  .pwr-product-card-v188{
    grid-template-columns:96px minmax(0,1fr)!important;
  }
  .pwr-product-card-actions{
    grid-template-columns:1fr!important;
  }
}

/* =============================================================
   PUNTO DE VENTA - PC
   PC amplio: mesas a la izquierda y orden a la derecha; dentro de
   la orden se ven catálogo y comanda al mismo tiempo.
   ============================================================= */
@media (min-width:1181px){
  #pwr-app .pwr-layout{
    grid-template-columns:minmax(320px,28%) minmax(0,72%)!important;
  }
  #pwr-app .pwr-order-panel{
    overflow:hidden!important;
  }
  #pwr-app.pwr-order-active #pwr-order-ui:not([hidden]){
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(320px,43%) minmax(0,57%)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    grid-template-areas:
      "head head"
      "products ticket"
      "products actions"!important;
    gap:12px!important;
  }
  #pwr-app.pwr-order-active .pwr-order-head{
    grid-area:head!important;
    margin:0!important;
  }
  #pwr-app.pwr-order-active .pwr-order-flow-nav{
    display:none!important;
  }
  #pwr-app.pwr-order-active .pwr-product-search{
    grid-area:products!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    margin:0!important;
  }
  #pwr-app.pwr-order-active .pwr-products{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:auto!important;
    align-content:start!important;
  }
  #pwr-app.pwr-order-active .pwr-ticket{
    grid-area:ticket!important;
    min-width:0!important;
    min-height:0!important;
    overflow:auto!important;
    margin:0!important;
  }
  #pwr-app.pwr-order-active .pwr-order-actions{
    grid-area:actions!important;
    position:static!important;
    margin:0!important;
    padding:10px 0 0!important;
    box-shadow:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #pwr-app.pwr-order-active #pwr-open-checkout{
    grid-column:1/-1!important;
  }
  #pwr-app.pwr-order-active .pwr-mobile-cart-bar{
    display:none!important;
  }
}

/* =============================================================
   TABLET - 760 a 1180 px
   Al abrir una orden usamos todo el ancho de la tablet. La lógica
   original sigue intacta; sólo cambia la distribución visual.
   ============================================================= */
@media (min-width:760px) and (max-width:1180px){
  #pwr-app .pwr-layout{
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
  }
  #pwr-app .pwr-tables-panel,
  #pwr-app .pwr-order-panel{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
  }
  #pwr-app:not(.pwr-order-active) .pwr-tables-panel{
    display:block!important;
  }
  #pwr-app:not(.pwr-order-active) .pwr-order-panel{
    display:none!important;
  }
  #pwr-app.pwr-order-active .pwr-tables-panel{
    display:none!important;
  }
  #pwr-app.pwr-order-active .pwr-order-panel{
    display:block!important;
    overflow:hidden!important;
  }
  #pwr-app.pwr-order-active .pwr-back-tables{
    display:inline-flex!important;
  }
  #pwr-app.pwr-order-active #pwr-order-ui:not([hidden]){
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,54%) minmax(300px,46%)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    grid-template-areas:
      "head head"
      "products ticket"
      "products actions"!important;
    gap:10px 12px!important;
  }
  #pwr-app.pwr-order-active .pwr-order-head{grid-area:head!important;margin:0!important}
  #pwr-app.pwr-order-active .pwr-order-flow-nav{display:none!important}
  #pwr-app.pwr-order-active .pwr-product-search{
    grid-area:products!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    margin:0!important;
  }
  #pwr-app.pwr-order-active .pwr-products{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:auto!important;
    align-content:start!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #pwr-app.pwr-order-active .pwr-ticket{
    grid-area:ticket!important;
    min-width:0!important;
    min-height:0!important;
    overflow:auto!important;
    margin:0!important;
  }
  #pwr-app.pwr-order-active .pwr-order-actions{
    grid-area:actions!important;
    position:static!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:8px 0 0!important;
    margin:0!important;
    box-shadow:none!important;
  }
  #pwr-app.pwr-order-active #pwr-open-checkout{
    grid-column:1/-1!important;
  }
  #pwr-app.pwr-order-active .pwr-mobile-cart-bar{
    display:none!important;
  }
}

@media (min-width:760px) and (max-width:930px) and (orientation:portrait){
  #pwr-app.pwr-order-active #pwr-order-ui:not([hidden]){
    grid-template-columns:minmax(0,51%) minmax(285px,49%)!important;
  }
  #pwr-app.pwr-order-active .pwr-products{
    grid-template-columns:1fr!important;
  }
}

/* =============================================================
   CELULAR - flujo por pasos conservando la lógica original.
   ============================================================= */
@media (max-width:759px){
  #pwr-app{
    height:var(--pwr-visual-height,100dvh)!important;
    min-height:var(--pwr-visual-height,100dvh)!important;
  }
  #pwr-app .pwr-topbar{
    min-height:calc(64px + var(--pwr-safe-top))!important;
    flex-basis:calc(64px + var(--pwr-safe-top))!important;
    padding:max(7px,var(--pwr-safe-top)) 8px 7px!important;
  }
  #pwr-app .pwr-top-action-icon,
  #pwr-app .pwr-top-action-text{
    width:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  #pwr-app .pwr-tables-panel,
  #pwr-app .pwr-order-panel{
    padding:11px 10px calc(14px + var(--pwr-safe-bottom))!important;
  }
  #pwr-app .pwr-order-flow-nav{
    top:-11px!important;
  }
  #pwr-app .pwr-product-search input[type=search]{
    min-height:48px!important;
    font-size:16px!important;
  }
  #pwr-app .pwr-products{
    grid-template-columns:1fr!important;
  }
  #pwr-app .pwr-product{
    min-height:70px!important;
  }
  #pwr-app .pwr-item-controls{
    grid-template-columns:42px 44px 42px 42px!important;
    grid-template-areas:
      "minus qty plus delete"
      "note note note note"!important;
  }
  #pwr-app .pwr-item-controls input[data-action="notes"]{
    min-height:44px!important;
    font-size:16px!important;
  }
  #pwr-app .pwr-order-actions{
    bottom:calc(-11px - var(--pwr-safe-bottom))!important;
    padding-bottom:calc(12px + var(--pwr-safe-bottom))!important;
    grid-template-columns:1fr 1fr!important;
  }
  #pwr-app .pwr-order-actions .pwr-btn{
    min-height:48px!important;
    font-size:13px!important;
  }
  #pwr-app #pwr-open-checkout{
    grid-column:1/-1!important;
    min-height:54px!important;
    font-size:16px!important;
  }
  #pwr-app .pwr-mobile-cart-bar:not([hidden]){
    bottom:calc(4px + var(--pwr-safe-bottom))!important;
  }
  #pwr-app .pwr-modal-card{
    max-height:calc(var(--pwr-visual-height,100dvh) - 20px)!important;
    padding-bottom:calc(18px + var(--pwr-safe-bottom))!important;
  }
}

@media (max-width:390px){
  #pwr-app .pwr-pos-brand-copy h2{
    max-width:23vw!important;
    font-size:11px!important;
  }
  #pwr-app .pwr-top-actions{
    gap:3px!important;
  }
  #pwr-app .pwr-top-action-icon,
  #pwr-app .pwr-top-action-text{
    width:39px!important;
    min-width:39px!important;
    min-height:39px!important;
  }
}