/*
  Estilos aislados para el render MIX (Mayorista + Minorista)
  Diseño estilo Mercado Libre: fondo blanco, Proxima Nova, sin negritas > 600.
  Importante: no toca ni modifica CSS legacy. Todo va bajo .po-mix.
*/

/* ── Fuente Mercado Libre (Proxima Nova) desde CDN oficial de ML ── */
@import url('https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/400.css');
@import url('https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/600.css');

/* ── Override global de fuente para todas las páginas /new/
      css/main.css del legado declara body con Open Sans !important;
      como mix-products.css se carga después, este !important gana. ── */
body {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── Aplicar la fuente a todo el scope MIX ── */
.po-mix,
.po-mix *,
.po-breadcrumb,
.po-breadcrumb *,
.po-mix-wrap,
.po-mix-wrap *,
.po-mix-toolbar,
.po-mix-toolbar * {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.po-mix{
  --po-mix-bg:#f5f5f5;
  --po-mix-card:#ffffff;
  --po-mix-text:#333333;
  --po-mix-muted:#666666;
  --po-mix-border:#e6e6e6;
  --po-mix-white:#fff;
  --po-mix-red:#c70000;
  --po-mix-red2:#a80000;
  --po-mix-yellow:#ffe400;
  --po-mix-radius: 8px;
}

.po-mix-wrap{
  width: min(1600px, 95vw);
  margin-left: 1.2%;
  margin-right: 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.po-breadcrumb{
  width: min(1600px, 95vw);
  margin: 8px 0 8px 1.2%;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.po-breadcrumb a{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 10px;
  border:1px solid #d2daec;
  background:#ffffff;
  border-radius:999px;
  font-size:11px;
  font-weight:400;
  color:#3483fa !important;
  text-decoration:none;
  text-transform:uppercase;
  line-height:1;
  transition: background .15s;
}

.po-breadcrumb a:hover{
  background:#eef3ff;
  color:#2968c8 !important;
}

.po-breadcrumb-current{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 10px;
  border:1px solid #d2daec;
  background:#eef3ff;
  border-radius:999px;
  font-size:11px;
  font-weight:400;
  color:#333333;
  text-transform:uppercase;
  line-height:1;
}

.po-breadcrumb-sep{
  font-size:10px;
  color:#8c97b8;
  font-weight:400;
}

.po-mix-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 680px){
  .po-mix-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px){
  .po-mix-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .po-mix-wrap,
  .po-breadcrumb{
    width: calc(100% - 12px);
    margin-left: 6px;
    margin-right: 0;
  }
}

  /* En /new el mega menu legacy debe quedar por encima de las cards MIX y sus badges */
  .flexCat,
  .flexCat .dark,
  .flexCat .bgNavMayoristas,
  .flexCat .main-nav,
  .flexCat .main-nav > li,
  .flexCat .sub-menu-block {
    position: relative;
    z-index: 3000;
  }

  .contentProducts,
  .po-mix-wrap,
  .po-mix-grid,
  .po-mix-card,
  .po-mix-img,
  .po-mix-badge {
    position: relative;
  }

  .po-mix-card,
  .po-mix-img,
  .po-mix-badge {
    z-index: 1;
  }

  /* En desktop, el desplegable debe medir contra todo el menu y no contra cada item padre */
  @media (min-width: 769px) {
    .flexCat .dark nav,
    .flexCat .dark ul.main-nav {
      position: relative;
    }

    .flexCat .dark ul.main-nav {
      width: 100%;
    }

    .flexCat .dark ul.main-nav > li,
    .flexCat .top-level-link {
      position: static;
    }

    .flexCat .dark ul.main-nav > li > div.sub-menu-block {
      left: 0;
      right: 0;
      width: 100%;
      min-width: 100%;
    }
  }

/* ── Card ── */
/* ── Highlight de bloque de precio al cambiar modo ── */
@keyframes po-box-flash {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,0); border-color: var(--po-mix-border); }
  25%  { box-shadow: 0 0 0 4px rgba(245,166,35,.45); border-color: #f5a623; }
  70%  { box-shadow: 0 0 0 4px rgba(245,166,35,.15); border-color: #f5a623; }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); border-color: var(--po-mix-border); }
}
.po-mix-box--highlight {
  animation: po-box-flash .7s ease forwards;
}

/* ── Highlight del input de cantidad y del botón "Agregar" al elegir precio ── */
@keyframes po-input-flash {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  25%  { box-shadow: 0 0 0 4px rgba(245,166,35,.45); border-color: #f5a623; }
  70%  { box-shadow: 0 0 0 4px rgba(245,166,35,.15); border-color: #f5a623; }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
.po-qty-ml__inline-input--highlight {
  animation: po-input-flash .8s ease 2;
}

@keyframes po-add-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,131,250,.55); transform: scale(1); }
  30%  { box-shadow: 0 0 0 6px rgba(52,131,250,.25); transform: scale(1.035); }
  60%  { box-shadow: 0 0 0 6px rgba(52,131,250,0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(52,131,250,0); transform: scale(1); }
}
.po-mix-add--highlight {
  animation: po-add-pulse .8s ease 2;
}

.po-mix-card{
  position: relative;
  background-color: var(--po-mix-card);
  border: 1px solid var(--po-mix-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  color: var(--po-mix-text);
  display:flex;
  flex-direction:column;
  height:100%;
  transition: box-shadow .18s;
}

.po-mix-card:hover{
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
}

/* ── Imagen ── */
.po-mix-img{
  position:relative;
  background:#f5f5f5;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-bottom: 1px solid #f0f0f0;
  border-radius: var(--po-mix-radius) var(--po-mix-radius) 0 0;
}

.po-mix-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center top;
  display:block;
}

.po-mix-img .po-mix-ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#aaa;
  font-weight:400;
  font-size:12px;
}

/* ── Badge de descuento ── */
.po-mix-badge{
  position:absolute;
  top:8px;
  right:8px;
  min-width:80px;
  padding:6px 8px 6px 14px;
  background:#c70000;
  color:#fff;
  text-align:right;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  line-height:1;
  z-index:2;
}

.po-mix-badge-val{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:1px;
}

.po-mix-badge-num{ font-size: 28px; font-weight: 600; line-height: .85; }
.po-mix-badge-pct{ font-size: 15px; font-weight: 600; line-height: 1; }
.po-mix-badge-off{ font-size: 14px; font-weight: 600; letter-spacing: .2px; margin-top: 1px; display:block; text-align:right; }
.po-mix-badge-msg{ font-size: 8px; font-weight: 400; margin-top: 3px; line-height: 1.1; text-transform: uppercase; opacity: .9; text-align:right; }

/* ── Cuerpo ── */
.po-mix-body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  flex:1;
  background:#fff;
}

.po-mix-title{
  font-size: 14px;
  font-weight: 400;
  margin:0 0 4px 0;
  line-height: 1.3;
  text-align: left;
}

.po-mix-note{ color:#999; font-size: 10px; font-weight: 400; text-align: left;}

/* ── Stack de boxes precio ── */
.po-mix-stack{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 0;
  margin-top: 6px;
  align-items: start;
}

.po-mix-stack .po-mix-box:last-child{
  /* hereda el grid del stack */
}

.po-mix-stack .po-mix-box:last-child .po-mix-deal{
  margin-top:auto;
}

/* ── Box de precio (Minorista / Mayorista) ── */
.po-mix-box{
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow:hidden;
  background-color: #FAFAFA;
  width: 100%;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.po-mix-boxHead{
  padding: 7px 10px;
  font-weight: 400;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.po-mix-boxHead .po-mix-t{ font-size: 12px; color: var(--po-mix-muted); font-weight: 400; }

.po-mix-boxHead-min{ align-items: flex-start; }
.po-mix-min-priceWrap{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.1; }
.po-mix-min-price{ font-size: 16px; font-weight: 600; color: #333 !important; }
.po-mix-min-sub{ margin-top: 2px; font-size: 10px; font-weight: 400; color: #999; text-transform: lowercase; }
.po-mix-min-priceTxt{ font-size: 12px; font-weight: 400; color: var(--po-mix-muted); }

.po-mix-row{
  padding: 6px 10px;
  border-top: 1px solid #ededee;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:baseline;
  color:#555 !important;
  background:#fff;
}

.po-mix-row,
.po-mix-row *{ color:#555 !important; }

.po-mix-row .po-mix-l{ color: #666 !important; font-size: 12px; font-weight: 400; }
.po-mix-row .po-mix-eq-price{ font-size: 14px; font-weight: 600; color: #333 !important; }

.po-mix-row .po-mix-eq-price.po-mix-eq-price--strike{
  text-decoration: line-through;
  opacity: .55;
}

/* ── Deal (descuento bonificacion) ── */
.po-mix-deal{ border-top: 1px solid #ededee; }

.po-mix-dealTop{
  background: var(--po-mix-yellow);
  color:#7a0000;
  font-weight: 600;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.po-mix-dealTop .po-mix-msg{ font-size: 11px; font-weight: 600; text-transform: uppercase; }
.po-mix-dealTop .po-mix-deal-price{ font-size: 16px; font-weight: 600; text-align: left; line-height: 1.1; display:flex; flex-direction:column; align-items:flex-start; }
.po-mix-dealTop .po-mix-deal-unit{ margin-top: 2px; font-size: 10px; font-weight: 400; text-transform: lowercase; display:block; text-align:right; align-self:flex-end; }

.po-mix-dealBody{
  background: var(--po-mix-red);
  color: var(--po-mix-white);
  padding: 6px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.po-mix-dealBox{
  background: rgba(0,0,0,.12);
  border-radius: 4px;
  padding: 6px 8px;
}

.po-mix-dealBox .po-mix-tt{ font-size: 10px; font-weight: 400; opacity:.9; line-height: 1.1; }
.po-mix-dealBox .po-mix-n{ font-size: 18px; font-weight: 600; line-height: 1.1; }
.po-mix-dealBox .po-mix-s{ font-size: 10px; font-weight: 400; opacity:.9; margin-top: 2px; line-height: 1.1; }

.po-mix-empty{
  padding: 10px 12px;
  background: #f5f5f5;
  border: 1px dashed #ccc;
  border-radius: 8px;
  color: #666;
  font-weight: 400;
}

/* ── Toolbar (resumen carrito + boton tutorial) ── */
.po-mix-toolbar{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin: 0 0 8px 0;
}

.po-mix-summary{
  margin: 0;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px 16px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  margin-right: auto;
}

.po-mix-summary-row{ display:flex; flex-direction:column; }
.po-mix-summary-label{ font-size:9px; color:#999; text-transform:uppercase; font-weight:400; line-height:1; }
.po-mix-summary-value{ font-size:13px; color:#333; font-weight:400; line-height:1.2; }

.po-mix-tutorial-btn{
  border: 1px solid #3483fa;
  border-radius: 6px;
  min-height:34px;
  padding:0 16px;
  background:#fff;
  color:#3483fa;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  text-transform:uppercase;
  transition: background .15s, color .15s;
}

.po-mix-tutorial-btn:hover{
  background:#3483fa;
  color:#fff;
}

.po-mix-tutorial-btn:disabled{
  opacity:.45;
  cursor:default;
}

/* ── Tutorial overlay ── */
.po-tutorial-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:7000;
  display:none;
}

.po-tutorial-backdrop.show{
  display:block;
}

.po-tutorial-host{
  position:relative !important;
  z-index:7001 !important;
}

.po-tutorial-highlight{
  position:relative !important;
  z-index:7002 !important;
  outline:3px solid #ffe400;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,228,0,.2);
}

.po-tutorial-panel{
  position:fixed;
  width:min(360px, calc(100vw - 20px));
  background:#fff;
  color:#333;
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  padding:16px;
  z-index:7003;
  display:none;
}

.po-tutorial-panel.show{
  display:block;
}

.po-tutorial-panel:before{
  content:'';
  position:absolute;
  top:-7px;
  left:18px;
  width:14px;
  height:14px;
  background:#fff;
  transform:rotate(45deg);
}

.po-tutorial-count{
  font-size:10px;
  font-weight:600;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.po-tutorial-title{
  margin-top:4px;
  font-size:17px;
  font-weight:600;
  color:#333;
}

.po-tutorial-text{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:#555;
  font-weight:400;
}

.po-tutorial-actions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.po-tutorial-btn{
  border:none;
  border-radius:6px;
  min-height:32px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition: opacity .15s;
}

.po-tutorial-btn.prev{
  background:#f0f0f0;
  color:#333;
}

.po-tutorial-btn.next{
  background:#c70000;
  color:#fff;
}

.po-tutorial-btn.close{
  background:#333;
  color:#fff;
}

.po-tutorial-btn:disabled{
  opacity:.4;
  cursor:default;
}

/* ── Area de acciones (qty + botones) ── */
.po-mix-actions{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ededee;
}

.po-mix-body .po-mix-actions{
  margin-top: auto;
  padding-top: 16px;
}

.po-mix-actions-top{
  display:flex;
  gap:8px;
  align-items:flex-end;
}

.po-mix-qty-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.po-mix-mode-label{
  min-height:14px;
  font-size:11px;
  line-height:14px;
  font-weight:400;
  color:#666;
  padding-left:2px;
  text-transform:none;
}

.po-mix-stepper{
  display:flex;
  align-items:center;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow:hidden;
  background:#fff;
}

.po-mix-step{
  width:28px;
  height:30px;
  border:none;
  background:#f0f0f0;
  color:#333;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition: background .12s;
}

.po-mix-step:hover{
  background:#e0e0e0;
}

.po-mix-qty{
  width:44px;
  height:30px;
  border:none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align:center;
  background:#fff;
  color:#333;
  font-weight:600;
  font-size:14px;
}

.po-mix-qty:focus{
  color:#333;
  outline:none;
}

.po-mix-mode-toggle{
  display:flex;
  border:1px solid #ccc;
  border-radius: 6px;
  overflow:hidden;
  min-height:30px;
  background:#fff;
}

.po-mix-mode-btn{
  border:none;
  background:#f0f0f0;
  color:#555;
  min-width:58px;
  padding:0 8px;
  font-size:12px;
  font-weight:400;
  cursor:pointer;
  text-transform:capitalize;
  border-right:1px solid #ccc;
  transition: background .12s;
}

.po-mix-mode-btn:last-child{
  border-right:none;
}

.po-mix-mode-btn:hover{
  background:#e8e8e8;
}

.po-mix-mode-btn.active{
  background:#ffe400;
  color:#7a0000;
  font-weight:600;
}

.po-mix-add{
  width:100%;
  margin-top:10px;
  border: none;
  border-radius: 8px;
  height:40px;
  background: #3483FA;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: .2px;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.po-mix-add:hover{
  background: #a80000;
}

.po-mix-add:disabled{
  opacity:.6;
  cursor:default;
}

.po-mix-add svg {
  vertical-align: sub;
}

.po-mix-remove{
  width:100%;
  margin-top:6px;
  border:1px solid #ccc;
  border-radius: 6px;
  height:32px;
  background:#f0f0f0;
  color:#555;
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  cursor:pointer;
  display:none;
  transition: background .12s;
}

.po-mix-remove:hover{
  background:#e0e0e0;
}

.po-mix-remove:disabled{
  opacity:.6;
  cursor:default;
}

.po-mix-feedback{
  min-height:16px;
  margin-top:6px;
  font-size:11px;
  font-weight:400;
}

.po-mix-feedback.ok{ color:#067a3d; }
.po-mix-feedback.err{ color:#c70000; }

/* ── Estado: producto en carrito ── */
.po-mix-card.po-in-cart{
  outline:2px solid #F4A71B;
  outline-offset:-2px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(255,228,0,.4) inset;
}

.po-mix-card.po-in-cart .po-mix-add{ display:none; }
.po-mix-card.po-in-cart .po-mix-remove{ display:block; }

/* ── Popup de carrito ── */
#notificationContainer{
  position: fixed !important;
  top: 68px !important;
  right: 10px !important;
  left: auto !important;
  margin-left: 0 !important;
  width: min(420px, calc(100vw - 20px)) !important;
  min-width: 0 !important;
  height: min(82vh, calc(100vh - 70px)) !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  z-index: 5000 !important;
  display:none;
  flex-direction:column;
}

#notificationTitle{
  flex: 0 0 auto;
}

#notificationsBody{
  padding: 8px !important;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

#po-cart-footer-dynamic{
  flex: 0 0 auto;
  padding: 8px;
  border-top: 1px solid #e6e6e6;
  background:#fff;
}

#notificationFooter,
#notificationLinkFooter{
  display:none !important;
}

.po-cart-popup-summary{
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #f7f9fb;
  padding: 8px;
  margin-bottom: 8px;
}

.po-cart-popup-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size: 12px;
  font-weight:400;
  color:#555;
  margin-bottom: 4px;
}

.po-cart-popup-row:last-child{ margin-bottom: 0; }

.po-cart-empty{
  padding: 14px 10px;
  text-align:center;
  font-size: 13px;
  font-weight:400;
  color:#999;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
}

.po-cart-lines{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.po-cart-line{
  border:1px solid #e6e6e6;
  border-radius:6px;
  padding:6px 8px;
  background:#fff;
}

.po-cart-line-main{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.po-cart-thumb{
  width:48px;
  min-width:48px;
  height:57px;
  border:1px solid #e6e6e6;
  border-radius:4px;
  background:#f5f5f5;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.po-cart-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.po-cart-thumb.ph{
  font-size:9px;
  color:#aaa;
  text-align:center;
  font-weight:400;
}

/* ── Precio estilo Mercado Libre: dos columnas precio | info ── */

/* Contenedor de las dos columnas */
.po-mix-price-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  gap: 8px;
  padding: 7px 10px;
}

.po-mix-box[data-price-box="may"] .po-mix-price-row{
  /*min-height: 72px;*/
  min-height: auto;
}

/* Columna izquierda: precio tachado + precio principal */
.po-mix-price-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Columna derecha: label + chip + subtexto */
.po-mix-info-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 2px;
  min-width: 0;
  word-break: break-word;
}

.po-mix-box-label{
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1;
}

.po-mix-price-original{
  font-size: 13px;
  font-weight: 400;
  color: #aaa;
  text-decoration: line-through;
  line-height: 1.2;
  margin-bottom: 0;
}

.po-mix-price-main{
  font-size: 24px;
  font-weight: 300;
  color: #333;
  line-height: 1;
  display: block;
}

.price-small {
  font-size: 20px;
}

.po-mix-off-chip{
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: #00a650;
  color: #e8f9ee;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 4px;
}

.po-mix-price-sub{
  font-size: 12px;
  font-weight: 400;
  color: #999;
  line-height: 1.3;
  word-break: break-word;
}

.po-mix-caja-row{
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 0px 10px 8px;
}

.po-mix-caja-label{
  font-size: 12px;
  font-weight: 400;
  color: #01A74F;
}

.po-mix-caja-val{
  font-size: 15px;
  font-weight: 800 !important;
  color: #01A74F;
}

.po-mix-caja-row--regular .po-mix-caja-label {
  color: #777;
}

.po-mix-caja-row--regular .po-mix-caja-val {
  color: #333;
  font-weight: 600 !important;
}

.po-mix-caja-row--total {
  border-top: 1px solid #e8f5e9;
  padding-top: 4px;
  margin-top: 2px;
}

.po-mix-caja-val--total {
  font-size: 17px;
}

.po-mix-no-price{
  font-size: 12px;
  font-weight: 400;
  color: #999;
  display: block;
}

/* ── Link imagen + título ── */
.po-mix-card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: var(--po-mix-radius) var(--po-mix-radius) 0 0;
}

.po-mix-card-link:hover .po-mix-img img{
  transform: scale(1.03);
  transition: transform .25s ease;
}

.po-mix-img img{
  transition: transform .25s ease;
}

.po-mix-title-link{
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  min-height: calc(14px * 1.3 * 3);
  text-decoration: none;
  margin: 0 0 4px 0;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}

.po-mix-title-link:hover{
  color: #3483fa;
  text-decoration: underline;
}

.po-cart-line-content{
  min-width:0;
  flex:1;
}

.po-cart-line-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

.po-cart-line-name{
  font-size:12px;
  font-weight:400;
  color:#333;
  line-height:1.2;
  text-align: left;
}

.po-cart-line-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.po-cart-unit-price {
  font-size: 10px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}
.po-cart-line-sub{
  font-size:12px;
  font-weight:600;
  color:#333;
  white-space:nowrap;
}

.po-cart-line-meta{
  margin-top:4px;
  font-size:11px;
  font-weight:400;
  color:#888;
}

.po-cart-line-remove{
  display:inline-block;
  margin-top:6px;
  padding:0;
  background:none;
  border:none;
  color:#c0392b;
  font-size:11px;
  cursor:pointer;
  line-height:1;
}
.po-cart-line-remove:hover{ text-decoration:underline; }
.po-cart-line-remove:disabled{ opacity:0.5; cursor:default; }

.po-cart-total-end{
  margin-top:0;
  border:1px solid #e6e6e6;
  background:#f7f9fb;
  border-radius:6px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  color:#333;
  font-weight:600;
}

.po-cart-actions-end{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.po-cart-btn-end{
  width:100%;
  min-height:38px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.2px;
  border:1px solid transparent;
  cursor:pointer;
  transition: opacity .15s;
}

.po-cart-btn-end.checkout{
  background:#c70000;
  border-color:#a80000;
  color:#fff !important;
}

.po-cart-btn-end.checkout:hover{
  background:#a80000;
}

.po-cart-btn-end.continue{
  background:#fff;
  border-color:#c70000;
  color:#c70000 !important;
}

.po-cart-btn-end.continue:hover{
  background:#fff5f5;
}

.po-cart-toast{
  position: fixed;
  right: 12px;
  top: 68px;
  z-index: 2000;
  background: #333;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(360px, calc(100vw - 24px));
}

.po-cart-toast.show{
  opacity: 1;
  transform: translateY(0);
}

.po-cart-toast.ok{ background:#067a3d; }
.po-cart-toast.err{ background:#c70000; }

/* ── Layout compacto de líneas en el popup del carrito ── */
#notificationsBody .po-cart-line--popup {
  padding: 2px 8px;
}

/* Fila 1: badge + precio — alineados en los extremos */
#notificationsBody .po-cart-line--popup .po-cart-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0px;
}

/* Fila 2: controles chicos */
.po-cart-edit-actions--popup {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  margin-bottom: 2px;
}

.po-cart-edit-actions--popup .po-cart-edit-btn {
  width: 20px !important;
  height: 20px !important;
  font-size: 13px !important;
  min-width: 20px !important;
}

.po-cart-edit-actions--popup .po-cart-edit-qty {
  width: 26px !important;
  height: 20px !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  text-align: center;
}

/* Fila 3: nombre completo, sin truncar */
.po-cart-line-name--popup {
  font-size: 10px;
  color: #555;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  margin-top: 0;
}

.po-cart-qty-unit-lbl {
  font-size: 11px;
  color: #888;
  font-weight: 400;
  white-space: nowrap;
}

.po-cart-line-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.po-cart-btn-trash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c03929' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
  background-color: #fff5f5 !important;
}

.po-cart-btn-trash:hover:not(:disabled) {
  background-color: #c03929 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") !important;
  border-color: #c03929 !important;
}

.po-cart-off-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: #00a650;
  color: #e8f9ee;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 3px;
  white-space: nowrap;
}

@media (max-width: 768px){
  #notificationContainer{
    width: calc(100vw - 12px) !important;
    right: 6px !important;
    top: 50px !important;
    height: min(84vh, calc(100vh - 58px)) !important;
  }

  #notificationsBody{
    max-height: none !important;
  }

  .po-cart-toast{
    right: 6px;
    top: 58px;
    max-width: calc(100vw - 12px);
  }
}

/* ── Paginación estilo MercadoLibre ── */
.po-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px 0 24px;
  margin: 0;
}

.po-pagination__item,
.po-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
}

.po-pagination__item:hover,
.po-pagination__nav:hover {
  border-color: #3483fa;
  color: #3483fa;
  text-decoration: none;
}

.po-pagination__item--active {
  border-color: #3483fa;
  color: #3483fa;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.po-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 36px;
  color: #666;
  font-size: 14px;
  padding: 0 2px;
}

.po-pagination__nav {
  padding: 0 14px;
  gap: 4px;
  color: #3483fa;
  border-color: #e6e6e6;
}

.po-pagination__nav:hover {
  background: #f5f9ff;
}

/* ── Botón favoritos (corazón estilo ML) ── */
.po-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #3483fa;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Mostrar en hover de la tarjeta */
.po-mix-card:hover .po-fav-btn {
  opacity: 1;
  transform: scale(1);
}

/* Siempre visible si está marcado como favorito */
.po-fav-btn.is-fav {
  opacity: 1;
  transform: scale(1);
  color: #3483fa;
}

.po-fav-btn:hover {
  background: #fff;
  transform: scale(1.12) !important;
}

.po-fav-btn:active {
  transform: scale(0.95) !important;
}

/* Íconos del corazón: sólo mostrar el que corresponde */
.po-fav-icon--filled {
  display: none;
}

.po-fav-btn.is-fav .po-fav-icon--outline {
  display: none;
}

.po-fav-btn.is-fav .po-fav-icon--filled {
  display: block;
}

@keyframes po-fav-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.po-fav-btn.po-fav-pop {
  animation: po-fav-pop 0.4s ease forwards;
}

/* ── Panel / Drawer de favoritos ── */
#po-fav-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}

#po-fav-panel.is-open {
  display: block;
}

#po-fav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: po-fav-fade-in 0.22s ease;
}

#po-fav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  animation: po-fav-slide-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@keyframes po-fav-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes po-fav-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

#po-fav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
}

#po-fav-drawer-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

#po-fav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

#po-fav-close:hover {
  background: #f5f5f5;
  color: #333;
}

#po-fav-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.po-fav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: #999;
  gap: 10px;
}

.po-fav-empty p {
  font-size: 15px;
  color: #555;
  margin: 0;
}

.po-fav-empty small {
  font-size: 13px;
  color: #aaa;
}

.po-fav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.12s;
}

.po-fav-item:last-child {
  border-bottom: none;
}

.po-fav-item:hover {
  background: #fafafa;
}

.po-fav-item-img-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.po-fav-item-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.po-fav-item-no-img {
  font-size: 9px;
  color: #aaa;
  text-align: center;
  padding: 4px;
}

.po-fav-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-fav-item-name {
  font-size: 13px;
  color: #333;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.po-fav-item-name:hover {
  color: #3483fa;
  text-decoration: none;
}

.po-fav-item-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: #999;
  font-size: 12px;
  padding: 0;
  transition: color 0.15s;
  font-family: inherit;
}

.po-fav-item-remove:hover {
  color: #c70000;
}

@media (max-width: 480px) {
  #po-fav-drawer {
    width: 100vw;
  }
}

/* ── Página de favoritos ── */
.po-fav-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0 16px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 20px;
  width: 100%;
}

.po-fav-page-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.po-fav-page-count {
  font-size: 16px;
  font-weight: 400;
  color: #999;
}

.po-fav-page-clear {
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #666;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}

.po-fav-page-clear:hover {
  border-color: #c70000;
  color: #c70000;
}

.po-fav-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  gap: 12px;
  width: 100%;
}

.po-fav-page-empty h2 {
  font-size: 20px;
  color: #555;
  font-weight: 600;
  margin: 0;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.po-fav-page-empty p {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.po-fav-page-btn-back {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 10px 24px;
  background: #3483fa;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  font-family: inherit;
}

.po-fav-page-btn-back:hover {
  background: #2968c8;
  color: #fff;
  text-decoration: none;
}

/* Botón X sobre la tarjeta en la página de favoritos */
.po-fav-page-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255,255,255,0.9);
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
  color: #999;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.po-fav-page-remove:hover {
  color: #c70000;
  border-color: #c70000;
  background: #fff;
}

/* ---- Picker container ---- */
  .po-qty-ml {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    font-size: 13px;
  }

  /* ---- Botón-header (trigger del accordion) ---- */
  .po-qty-ml__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s;
    gap: 8px;
  }
  .po-qty-ml__header:hover,
  .po-qty-ml__header[aria-expanded="true"] {
    border-color: #f5a623 !important;
    background: #fffdf5 !important;
  }
  .po-qty-ml__header-text {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .po-qty-ml__chevron {
    flex-shrink: 0;
    transition: transform .2s;
    color: #888;
  }
  .po-qty-ml__header[aria-expanded="true"] .po-qty-ml__chevron {
    transform: rotate(180deg);
  }

  /* ---- Panel desplegable ---- */
  .po-qty-ml__body {
    position: fixed; /* JS setea top/left/width via getBoundingClientRect */
    background: #fff;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    z-index: 9999;
    overflow: hidden;
  }

  /* ---- Filas de tiers ---- */
  .po-qty-ml__tiers {
    display: grid;
    grid-template-columns: auto 1fr;
    border-bottom: 1px solid #ebebeb;
  }
  .po-qty-ml__tier-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background .1s, border-left-color .1s;
  }
  .po-qty-ml__tier-row:last-child {
    border-bottom: none;
  }
  .po-qty-ml__tier-row:hover {
    background: #fffdf5 !important;
  }
  .po-qty-ml__tier-row--active {
    background: #fffbe6;
    border-left-color: #f5a623;
  }
  .po-qty-ml__tier-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .po-qty-ml__tier-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .po-qty-ml__tier-price-main {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1;
    white-space: nowrap;
  }
  .po-qty-ml__tier-price-original {
    font-size: 11px;
    color: #bbb;
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
  }
  .po-qty-ml__tier-off {
    background: #00a650;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .po-qty-ml__tier-sub {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    line-height: 1;
  }
  .po-qty-ml__tier-total {
    font-size: 18px;
    font-weight: 600;
    color: #01A74F;
    line-height: 1;
    white-space: nowrap;
  }
  .po-qty-ml__tier-unit-ref {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    line-height: 1;
    white-space: nowrap;
  }

  /* ---- Fila de cantidad personalizada ---- */
  .po-qty-ml__custom-row {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .po-qty-ml__custom-label {
    font-size: 13px;
    color: #555;
    flex: 1;
    min-width: 110px;
  }
  .po-qty-ml__custom-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .po-qty-ml__custom-input {
    width: 72px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    outline: none;
  }
  .po-qty-ml__custom-input:focus {
    border-color: #3483fa;
    box-shadow: 0 0 0 2px rgba(52,131,250,.15);
  }
  .po-qty-ml__apply-btn {
    padding: 6px 14px;
    background: #f0f0f0;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: background .1s;
    white-space: nowrap;
  }
  .po-qty-ml__apply-btn:hover {
    background: #ddd;
  }

  /* ---- Resumen de selección debajo del header (badge) ---- */
  .po-qty-ml__selected-total {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    padding-left: 1px;
    min-height: 15px;
  }

  /* ---- Etiqueta del tipo de tier en el header ---- */
  .po-qty-ml__header-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .po-qty-ml__header-badge--min  { background: #e3f2fd; color: #1565c0; text-transform: uppercase;}
  .po-qty-ml__header-badge--may  { background: #e8f5e9; color: #388e3c; }
  .po-qty-ml__header-badge--bonif { background: #e8f5e9; color: #2e7d32; }

  /* ---- Wrapper tooltip para botón Agregar al carrito ---- */
  .po-mix-add-wrap {
    display: block;
    position: relative;
  }
  .po-mix-add-wrap .po-mix-add:disabled {
    pointer-events: none;
  }
  .po-mix-add-wrap:has(.po-mix-add:disabled):hover::after {
    content: "Debe agregar una cantidad";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 500;
  }
  .po-mix-add-wrap:has(.po-mix-add:disabled):hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    pointer-events: none;
    z-index: 500;
  }

  /* ---- Highlight de bloque de precio al seleccionar tier ---- */
  @keyframes po-box-flash {
    0%   { box-shadow: 0 0 0 0 rgba(245,166,35,0); border-color: #d0d0d0; }
    25%  { box-shadow: 0 0 0 4px rgba(245,166,35,.45); border-color: #f5a623; }
    70%  { box-shadow: 0 0 0 4px rgba(245,166,35,.15); border-color: #f5a623; }
    100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); border-color: #d0d0d0; }
  }
  .po-mix-box--highlight {
    animation: po-box-flash .7s ease forwards;
  }

  /* ---- Input inline de cantidad (siempre visible debajo del header) ---- */
  .po-qty-ml__inline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
  }
  .po-qty-ml__inline-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
  }
  .po-qty-ml__inline-input:focus {
    border-color: #f5a623;
    box-shadow: 0 0 0 2px rgba(245,166,35,.18);
  }
  .po-qty-ml__inline-apply {
    padding: 7px 14px;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    transition: background .1s;
    flex-shrink: 0;
  }
  .po-qty-ml__inline-apply:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .po-qty-ml__inline-apply:hover:not(:disabled) {
    background: #ddd;
  }

  /* ---- Botones +/- del inline ---- */
  .po-qty-ml__step-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid #ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    padding: 0;
    transition: border-color .15s, background .15s;
  }
  .po-qty-ml__step-btn:hover:not(:disabled) {
    border-color: #f5a623;
    background: #fffdf5;
    color: #c47f00;
  }
  .po-qty-ml__step-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* ---- Neutralizar foco verde del CSS legacy en todos los botones del picker ---- */
  .po-qty-ml button:focus,
  .po-qty-ml button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
  }
  .po-qty-ml__step-btn:focus,
  .po-qty-ml__step-btn:focus-visible {
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .po-qty-ml__inline-apply:focus,
  .po-qty-ml__inline-apply:focus-visible {
    background: #f0f0f0 !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .po-qty-ml__header:focus,
  .po-qty-ml__header:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .po-qty-ml__tier-row:focus,
  .po-qty-ml__tier-row:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: #fffdf5 !important;
  }

/* ── Modal de confirmación de cambio de canal ── */
body.po-modal-open { overflow: hidden; }

.po-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: poConfirmFadeIn .15s ease;
}

.po-confirm-box {
  position: relative;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 32px 24px 24px;
  width: min(420px, 100%);
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  animation: poConfirmSlideUp .2s ease;
}

/* Botón X cerrar */
.po-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 4px;
  line-height: 0;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.po-confirm-close:hover {
  color: #333;
  background: #f5f5f5;
}

/* Ícono advertencia estilo ML */
.po-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff7e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.po-confirm-icon svg {
  width: 28px;
  height: 28px;
  color: #f0a000;
}

.po-confirm-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
  line-height: 1.3;
}

.po-confirm-body {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 16px;
}

.po-confirm-missing {
  background: #fff7e0;
  border: 1px solid #f0a000;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #7a5000;
  margin: 0 0 24px;
  text-align: left;
}

.po-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.po-confirm-btn {
  width: 100%;
  padding: 13px 24px;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  letter-spacing: .01em;
}

.po-confirm-btn:active { transform: scale(.98); }

.po-confirm-btn--ok {
  background: #3483fa;
  color: #fff;
}

.po-confirm-btn--ok:hover { background: #2968c8; }

@keyframes poConfirmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Override de fuente Proxima Nova para clases legacy (cuenta.php) ── */
.bgGrey, .containerList, .titleGral, .contentBtnList,
.btnCuenta, .txtCuenta, .contentLoginForm, .titleForm,
.labelForm, .inputForm, .btnForm, .btnFormReg,
.contentListCuenta, .nameFilter, .colOrderLeft,
.colOrderLast, .colOrderDates, .colOrder3Dates,
.titleHistorial, .txtFilter, .filaPar, .filaImpar,
.columna, .txtTotal, .btnAccion, .btnAccionOrderDetailRight,
.contenedor, .contenedorCuenta, .boxValList,
.externalmessagePedido {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}