/* modules/productos/productos.css */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar .input{max-width:360px}


/* Header layout for Productos */
.productos-head{display:flex;flex-direction:column;gap:14px}
.ph-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ph-controls .input{flex:1;min-width:220px}
.ph-buttons{display:flex;gap:10px;align-items:center}
.count-badge{margin-left:10px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(25,162,128,.22);border:1px solid rgba(25,162,128,.45);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.ph-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pager{display:flex;align-items:center;gap:8px}
.pager__info{min-width:86px;text-align:center}
.perpage{display:flex;align-items:center;gap:8px}
.select{height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;padding:0 12px;outline:none}

/* Mobile: split rows */
@media (max-width: 600px){
  .ph-controls{flex-direction:row;align-items:stretch}
  .ph-controls .input{flex:1;min-width:0}
  .ph-buttons .btn{padding:0 12px}
  .btn__text{display:none}
  .ph-buttons{gap:8px}
  .ph-pagination{justify-content:space-between}
}

/* Desktop header spacing */
@media (min-width: 601px){
  .ph-controls{justify-content:space-between}
  .ph-controls .input{max-width:420px}
  .ph-pagination{justify-content:space-between}
}


/* FIX23 layout: keep head aligned and stable */
.productos-head{align-items:stretch}
.ph-controls, .ph-pagination{width:100%}
@media (min-width: 601px){
  .ph-controls{justify-content:space-between}
  .ph-pagination{justify-content:space-between}
}
@media (max-width: 600px){
  .ph-controls{justify-content:space-between}
  .ph-buttons .btn{min-width:44px}
}