/* Tarjetas colapsables (Ajustes: Banners, Categorías, Empleados, Partners...) —
   clic en el <h3> expande/colapsa. Los hijos directos del .card se ocultan
   con CSS, sin necesidad de envolver el contenido en un div extra. */
.card.collapsible > h3{
  cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
}
.card.collapsible > h3::after{
  content:"▾"; font-size:13px; color:var(--muted); margin-left:8px; transition:transform .15s ease;
}
.card.collapsible.collapsed > h3::after{ transform:rotate(-90deg); }
.card.collapsible.collapsed > *:not(h3){ display:none !important; }

/* Calculadora rápida (Registro de Ventas) */
.calcOverlay{
  position:fixed; inset:0; z-index:99997;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(8,12,24,.55);
  backdrop-filter:blur(3px);
  animation:calcFadeIn .15s ease-out both;
}
@keyframes calcFadeIn{ from{opacity:0} to{opacity:1} }
.calcBox{
  width:100%; max-width:300px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(8,12,30,.35);
  overflow:hidden;
  animation:calcPopIn .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes calcPopIn{ from{ transform:scale(.92) translateY(10px); opacity:0 } to{ transform:scale(1) translateY(0); opacity:1 } }
.calcHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  font-weight:800; font-size:14px;
  background:linear-gradient(90deg, var(--pink), var(--purple));
  color:#fff;
}
.calcCloseBtn{
  background:rgba(255,255,255,.18); border:none; color:#fff;
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.calcCloseBtn:hover{ background:rgba(255,255,255,.32); }
.calcDisplay{
  background:#0b0e14;
  color:#fff;
  padding:20px 18px 14px;
  text-align:right;
}
.calcExpr{
  font-size:12.5px; color:rgba(255,255,255,.45); min-height:16px;
  font-family:ui-monospace, "SF Mono", Consolas, monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.calcValue{
  font-size:34px; font-weight:800; margin-top:4px;
  font-family:ui-monospace, "SF Mono", Consolas, monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.calcGrid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  padding:16px;
}
.calcBtn{
  border:none; cursor:pointer;
  height:58px; border-radius:14px;
  font-size:18px; font-weight:700;
  background:#f1f3f8; color:var(--text);
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 0 rgba(20,24,36,.06);
}
.calcBtn:hover{ background:#e6e9f2; }
.calcBtn:active{ transform:scale(.93); }
.calcBtn.calcFn{ background:#eef0f4; color:var(--purple); font-weight:800; }
.calcBtn.calcFn:hover{ background:#e2e5ee; }
.calcBtn.calcOp{
  background:linear-gradient(135deg, var(--pink), var(--purple));
  color:#fff; font-size:20px;
}
.calcBtn.calcOp:hover{ filter:brightness(1.08); }
.calcBtn.calcEq{
  background:linear-gradient(135deg, #16a34a, #0e7c37);
  color:#fff; font-size:20px;
}
.calcBtn.calcEq:hover{ filter:brightness(1.08); }
.calcBtn.calcZero{ grid-column:span 2; }

/* Receipt */
    .receiptWrap{ display:flex; gap:12px; flex-wrap:wrap; }
    .receipt{
      width: 360px; /* default; can be overridden dynamically for ENVÍO */
      background: #ffffff;
      border:1px solid rgba(0,0,0,.08);
      border-radius: 18px;
      padding: 14px;
      box-shadow: 0 18px 34px rgba(0,0,0,.11);
      transform-origin: top center;
      animation: floatIn .35s ease-out both;
      position:relative;
    }
    .cornerLogo{
      position:absolute;
      top:10px;
      right:10px;
      width:60px;
      height:60px;
      object-fit:contain;
      border-radius:14px;
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      padding:4px;
    }
      ${isEnv ? `
      body{ background:#fff !important; color:#000 !important; }
      .box{ border:2px solid #000 !important; background:#fff !important; }
      .bar{ background:#000 !important; }
      h1{ color:#000 !important; }
      .meta{ color:#000 !important; font-weight:900 !important; }
      th{ background:#fff !important; border-bottom:1px solid #000 !important; }
      th,td{ border-bottom:1px solid #000 !important; color:#000 !important; }
      .label{ color:#000 !important; font-weight:900 !important; }
      .val{ color:#000 !important; font-weight:900 !important; }
      .totalRow{ color:#000 !important; }
      .cornerLogo{ border:1px solid #000 !important; }
    ` : ""}
    @keyframes floatIn{
      from{ transform: translateY(10px) scale(.98); opacity:0; }
      to{ transform: translateY(0) scale(1); opacity:1; }
    }
    .receipt .logo{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding-bottom:10px;
      border-bottom:1px dashed rgba(0,0,0,.12);
      margin-bottom:10px;
      padding-right:60px; /* espacio para logo esquina */
    }
    .receipt .logo b{ font-size:15px; letter-spacing:.3px; }
    .receipt .logo small{ display:block; color:#666; font-weight:900 }
    .receipt #rTagline{ font-weight:700; color:#888 !important; font-style:italic; margin-top:2px; }
    .receipt .rShopAddr{ display:block; color:#888; font-weight:700; font-size:10.5px; margin:-6px 0 10px; }
    .receipt .rMetaLine{ font-weight:700; font-size:10.5px; color:#888; margin:0 0 2px; }
    .receipt .rMetaLine span:first-child{ flex:1 1 auto; }
    .receipt .rDateSmall{ display:block; color:#aaa; font-weight:700; font-size:10px; margin-bottom:8px; }
    .receipt .rPayBox{
      background:rgba(47,95,224,.05); border:1px solid rgba(47,95,224,.12);
      border-radius:12px; padding:8px 10px; margin-top:8px;
    }
    .receipt .rPayBox .line{ margin:3px 0; }
    .receipt .rQrBlock{ text-align:center; margin-top:12px; padding-top:10px; border-top:1px dashed rgba(0,0,0,.12); }
    .receipt .rQrImg{ width:74px; height:74px; display:block; margin:0 auto 6px; }
    .receipt .rSocialText{ display:block; color:#888; font-weight:700; font-size:10px; }
    .receipt .rPoweredBy{ display:block; text-align:center; color:#bbb; font-weight:700; font-size:9.5px; margin-top:10px; letter-spacing:.2px; }
    .receipt .line{ display:flex; justify-content:space-between; gap:10px; font-weight:1000; font-size:12px; margin:6px 0 }
    .receipt .line{ align-items:flex-start; }
    .receipt .line span:first-child{ flex:0 0 90px; }
    .receipt .line span:last-child{ flex:1 1 auto; text-align:right; word-break:break-word; overflow-wrap:anywhere; }
    .receipt.envio .line{ font-size:11px; }
    .receipt.envio .big{ font-size:14px; }
    .receipt.envio{ border:2px solid #000; }
    .receipt.envio .hr{ background: rgba(0,0,0,.35); }
    .receipt.envio .cornerLogo{
      /* mantener mismo logo/tamaño del sitio; solo más contraste general se maneja por tipografía */
      border:1px solid rgba(0,0,0,.06);
    }
    /* Ticket térmico 80mm (Ajustes → Tipo de comprobante): look angosto/monoespaciado
       en vez de la tarjeta redondeada normal. Solo aplica a MOSTRADOR. */
    .receipt.thermal80{
      border-radius:0;
      box-shadow:none;
      border:1px dashed rgba(0,0,0,.3);
      font-family:'Courier New', Courier, monospace;
      padding:10px;
    }
    .receipt.thermal80 .logo{
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding-right:0;
      border-bottom-style:dashed;
    }
    .receipt.thermal80 .cornerLogo{
      position:static;
      width:40px; height:40px;
      margin:0 auto 6px;
    }
    .receipt.thermal80 .line{ font-size:11px; }
    .receipt.thermal80 .big{ font-size:13px; }
    .receipt.thermal80 .foot{ text-align:center; }
    .receipt .hr{ height:1px; background:rgba(0,0,0,.08); margin:10px 0 }
    .receipt .big{ font-size:16px; font-weight:1200; display:flex; justify-content:space-between; margin-top:10px; }
    .receipt .foot{ margin-top:10px; font-size:11px; color:#666; font-weight:900 }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:1000;
      font-size:11px;
      padding: 4px 10px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.7);
      margin-top:6px;
    }
    .badge.pending{ border-color: rgba(245,158,11,.40); background: rgba(245,158,11,.12); color:#7a4b00; }
    .badge.paid{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); color:#0e5b2a; }

/* ===== Registro de Ventas (rediseño): buscador+chips+cuadrícula / pestañas / barra inferior ===== */
.posLayout{
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap:14px;
  margin-top:14px;
}
.posBrowseCol, .posSideCol{ display:flex; flex-direction:column; }

.posChipsRow{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin:0 0 4px;
  -webkit-overflow-scrolling:touch;
}
.posChip{
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  font-weight:700; font-size:12.5px; cursor:pointer; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.posChip.active{ background:var(--pink); border-color:var(--pink); color:#fff; }

.posProductGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  max-height:560px;
  overflow-y:auto;
  padding:4px 2px;
}
.posCard{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding:10px;
  box-shadow: var(--shadow2);
  display:flex; flex-direction:column;
}
.posCardImg{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; background:#eef1f9; margin-bottom:8px;
}
.posCardName{
  font-weight:800; font-size:12.5px; color:var(--text); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.posCardPrice{ font-weight:1000; color:var(--pink); font-size:14px; margin-top:3px; }
.posCardStock{ color:var(--muted); font-size:11px; margin-top:2px; font-weight:700; }
.posCardStockZero{ color:var(--danger); }
.posCardAdd{
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border-radius:999px; border:none;
  background:var(--pink); color:#fff; font-size:18px; font-weight:900; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(47,95,224,.35);
}
.posCardAdd:disabled{ background:#cbd2e1; box-shadow:none; cursor:not-allowed; }

.posTabsRow{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.posTabBtn{
  flex:1; min-width:110px; padding:10px 10px;
  border-radius: var(--radius2); border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:800; font-size:12.5px;
  cursor:pointer; transition: background .15s ease, color .15s ease;
}
.posTabBtn.active{ background:var(--pink); border-color:var(--pink); color:#fff; }

.posSummaryBar{
  position:sticky; bottom:0; margin-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: rgba(255,255,255,.97);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px 16px;
  z-index:5;
}
.posSummaryInfo{ display:flex; align-items:center; gap:10px; min-width:0; }
.posSummaryIcon{ font-size:22px; flex:0 0 auto; }
.posSummaryLabel{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.posSummaryValue{ font-size:14px; font-weight:900; color:var(--text); }
.posSummaryActions{ display:flex; gap:10px; flex:0 0 auto; }
.posSummaryActions .btn{ white-space:nowrap; }

@media (max-width:900px){
  .posLayout{ grid-template-columns: 1fr; }
  .posProductGrid{ max-height:420px; }
}
@media (max-width:560px){
  .posSummaryBar{ flex-direction:column; align-items:stretch; }
  .posSummaryActions{ justify-content:stretch; }
  .posSummaryActions .btn{ flex:1; }
  .posProductGrid{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* La columna derecha del POS (#cartTable, pestañas, descuento) no siempre
   mide lo mismo que la pantalla completa — con .posLayout en 2 columnas,
   esta columna es apenas ~40% del ancho total. Por eso estas reglas
   reaccionan al ancho REAL de .posSideCol (container query), no al de toda
   la pantalla — un @media por ancho de pantalla se quedaba corto porque la
   pantalla podía verse "ancha" mientras esta columna seguía angosta. */
.posSideCol{ container-type: inline-size; container-name: posSide; }

@container posSide (max-width:480px){
  .posTabBtn{ padding:9px 6px; font-size:11.5px; min-width:0; }
}

/* Carrito del POS (#cartTable): con pocos productos convertir cada fila en
   una tarjeta apilada se ve bien, pero con muchos productos se vuelve un
   listado enorme (6 líneas por producto). Mejor: la tabla se queda en su
   formato normal de una fila por producto (compacto, fácil de escanear con
   muchos items) y si la columna es angosta, se desliza horizontalmente
   dentro de su propio recuadro — nunca empuja el resto de la página ni
   convierte cada fila en un bloque vertical. */
.cartTableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#cartTable{ table-layout:fixed; }

/* Columnas y controles más compactos para que las 6 quepan sin necesitar
   deslizar — .cartTableWrap con overflow-x:auto se deja solo como respaldo
   por si algún día no alcanza, pero no debería activarse en uso normal. */
#cartTable th, #cartTable td{ padding:8px 4px; font-size:11.5px; }
#cartTable td.name{ overflow:hidden; }
#cartTable td.name .t{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cartTable td.name .s{ font-size:10px; }
#cartTable td.qty{ text-align:center; }
#cartTable td.qty .mini{ width:20px; height:20px; padding:0; font-size:12px; line-height:1; }
#cartTable td.qty .q{ display:inline-block; min-width:14px; margin:0 2px; font-size:11.5px; }
#cartTable td.disc input{ width:100% !important; padding:4px !important; font-size:11px; }
#cartTable td.disc > div{ font-size:9.5px !important; }
#cartTable td.act .mini{ width:22px; height:22px; padding:0; font-size:12px; }
#cartTable td.price, #cartTable td.line{ word-break:break-word; }

/* Descuento: en columnas angostas, select y campo en su propia fila cada
   uno, y los botones Aplicar/Quitar lado a lado abajo — misma función,
   solo mejor acomodado (esto no afecta al listado de productos). */
@container posSide (max-width:480px){
  #posTabCart .rowflex{ flex-direction:column; align-items:stretch; }
  #posTabCart .rowflex > *{ width:100%; }
  #posTabCart .discActionsRow{ flex-direction:row; gap:8px; }
  #posTabCart .discActionsRow .btn{ flex:1; width:auto; }
}
@supports not (container-type: inline-size){
  @media (max-width:520px){
    #posTabCart .rowflex{ flex-direction:column; align-items:stretch; }
    #posTabCart .rowflex > *{ width:100%; }
    #posTabCart .discActionsRow{ flex-direction:row; gap:8px; }
    #posTabCart .discActionsRow .btn{ flex:1; width:auto; }
  }
}

/* Barra de avance de "Confirmar e importar" (Ajustes → Productos) */
.importProgressBarTrack{
  height:10px; border-radius:999px;
  background:rgba(47,95,224,.10);
  overflow:hidden;
}
.importProgressBarFill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--pink), var(--purple));
  transition: width .2s ease;
}