/* ====== Reset mínimo + fuente ====== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.45;
  color: #1f2937; /* gris 800 */
  background: #fafafa;
}

/* ====== Tokens ====== */
:root{
  --accent:#B8860B;
  --accent-600:#9f6f08;
  --bg:#fafafa;
  --ink:#1f2937;           /* gris 800 */
  --muted:#ffffff;         /* gris 500 */
  --line:#e5e7eb;          /* gris 200 */
  --card:#ffffff;
  --radius:14px;
  --shadow:0 8px 24px rgba(17,24,39,.06);
}

/* ====== Layout base ====== */
.container{
  max-width: 1100px;
  margin: 24px auto 80px;
  padding: 0 16px;
}
.page-title{
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 22px;
}

/* ====== Header + Nav ====== */
.header{
  position: sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
}
.header > div, .header > nav, .header > .session{
  display:flex; align-items:center;
}
.header .brand{
  font-weight:800; padding:12px 16px;
}
.header .nav{
  gap:8px; padding:8px 0;
}
.header .session{
  margin-left:auto; gap:8px; padding:8px 16px;
}

.btn, .btn-primary, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:9px 13px; border-radius: 12px; cursor:pointer;
  border:1px solid transparent; text-decoration:none; font-weight:700;
  background:#fff; color:#374151; border-color:#d1d5db;
  transition: transform .04s ease, background .18s, border-color .18s, color .18s;
}
.btn:hover{ background:#f9fafb; }
.btn:active, .btn-primary:active, .btn-outline:active{ transform: translateY(1px); }

.btn-primary{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn-primary:hover{ background:var(--accent-600); border-color:var(--accent-600); }

.btn-outline{
  color:var(--accent); border-color:var(--accent); background:#fff;
}
.btn-outline:hover{ background:#fff6e0; }

.nav .btn.active{ background:#fff6e0; border-color:#f1d79c; color:#7c5a06; }

/* Dropdown simple */
.dropdown{ position: relative; }
.dropdown-menu{
  position:absolute; top:100%; left:0; min-width:160px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: var(--shadow); padding:6px; display:none;
}
.dropdown-menu a{
  display:block; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--ink);
}
.dropdown-menu a:hover{ background:#f3f4f6; }
.dropdown:hover .dropdown-menu{ display:block; }

/* Badge sucursal */
.badge{
  padding:6px 10px; border-radius: 999px; background:#fff7e6; color:#7c5a06; 
  border:1px solid #f5e6c6; font-weight:700; font-size:12px;
}

/* ====== Cards & grid ====== */
.cards-grid{ display:grid; gap:22px; }
@media (min-width: 980px){
  .cards-grid{ grid-template-columns: 1.2fr 1fr; align-items:start; }
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  position: relative; z-index: 1; /* evita overlays */
}
.card h2{
  font-size: 18px; font-weight: 800; margin:0 0 10px;
}
.card .muted{ color:var(--muted); font-size: 13px; }

/* Encabezado con iconito */
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.icon-dot{
  width:36px; height:36px; border-radius:50%;
  background:#fff5d9; border:1px solid #f3e3bd; display:grid; place-items:center;
  color:#9a6b0a; font-weight:900; font-size:18px;
}

/* ====== Forms ====== */
.field{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
label{ font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"]{
  appearance:none; width:100%;
  padding:12px 13px; border:1px solid var(--line); border-radius: 10px; background:#fff; outline:none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(184,134,11,.12); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.form-grid{ display:grid; gap:14px; }
@media (min-width: 660px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

/* ====== Toast ====== */
.toast{
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #111827; color:#fff; padding: 12px 16px; border-radius: 12px;
  box-shadow: var(--shadow); font-weight:700; z-index:9999;
}

/* ===== FIX HEADER EN UNA LÍNEA ===== */
.header { position: sticky; top:0; z-index: 50; background:#fff; border-bottom:1px solid #e5e7eb; }
.header-inner { display:flex; align-items:center; gap:12px; padding:8px 12px; }
.header .brand { font-weight:800; }
.header .nav { display:flex; gap:8px; flex-wrap:nowrap; flex:1; min-width:0; }
.header .session { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
#userEmail { font-weight:700; color:#374151; }

/* ===== LISTADO EDITABLE (ej. usuarios/productos) ===== */
.products-list { display:flex; flex-direction:column; gap:12px; }
.product-item {
  display:grid; grid-template-columns: 72px 1fr auto; gap:12px; align-items:center;
  padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
}
.product-thumb { width:72px; height:72px; object-fit:cover; border-radius:10px; background:#f3f4f6; }
.product-meta { display:flex; flex-direction:column; gap:2px; }
.product-title { font-weight:800; }
.product-sub { color:#6b7280; font-size:13px; }
.product-actions { display:flex; gap:8px; }

.product-edit { display:none; grid-column:1/-1; padding-top:8px; border-top:1px dashed #e5e7eb; margin-top:8px; }
.product-item.editing .product-edit { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.product-edit .field { display:flex; flex-direction:column; gap:6px; }
.product-edit input[type="text"], .product-edit input[type="number"], .product-edit input[type="url"] {
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
}
.product-edit .edit-actions { grid-column:1/-1; display:flex; gap:8px; justify-content:flex-end; }

/* ===== Usuarios apilado (listado arriba / crear abajo) ===== */
.cards-stack { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px){ .cards-stack { grid-template-columns: 1fr; } }
.users-page .card--compact { padding: 16px; }
.users-page .products-list { display: grid; gap: 10px; }
.users-page .product-item { padding: 10px 12px; }
.users-page .product-meta .product-title { margin-bottom: 2px; }
.users-page .product-sub { font-size: .92rem; }
.form-grid--tight { gap: 10px; }
.actions--tight { margin-top: 10px; }

/* ===== Collapse Card (detalles/summary) ===== */
.collapse-card { border-radius: 14px; overflow: clip; }
.collapse-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* Safari fix */
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid #eee; border-radius: 10px;
  background: #fafafa;
}
.collapse-summary::-webkit-details-marker { display: none; }
.collapse-summary .summary-left { display: flex; align-items: center; gap: 10px; }
.collapse-summary h2 { font-size: 18px; margin: 0; }
.collapse-summary .chev { transition: transform .2s ease; }
.collapse-card[open] .collapse-summary .chev { transform: rotate(180deg); }
.collapse-content { padding: 12px 4px 4px; }
.collapse-summary:hover { background: #f5f5f5; }

/* =========================================================
   CATÁLOGO
   ======================================================= */

/* Paginador */
.catalog .pager-toolbar{
  display:flex; align-items:center; gap:8px;
  margin: 10px 0 12px;
}

/* Grid de productos del catálogo */
.catalog .catalog-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 780px){
  .catalog .catalog-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1120px){
  .catalog .catalog-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tarjeta de producto del catálogo */
.catalog .catalog-card{
  display:flex; flex-direction: column;
  border:1px solid var(--line); border-radius:16px; background:#fff;
  overflow:hidden; box-shadow: var(--shadow);
}
.catalog .catalog-media{ position: relative; background:#f3f4f6; aspect-ratio: 4/3; }
.catalog .catalog-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.catalog .catalog-media .badge{ position:absolute; top:10px; left:10px; }
.catalog .badge-out{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }

.catalog .catalog-body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.catalog .catalog-title{ font-size:15px; font-weight:800; line-height:1.25; max-height:3.2em; overflow:hidden; }
.catalog .catalog-sub{ display:flex; gap:10px; flex-wrap:wrap; color:#6b7280; font-size:12px; }
.catalog .catalog-row{ display:flex; align-items:center; justify-content:space-between; }
.catalog .catalog-price{ font-weight:800; font-size:16px; }
.catalog .catalog-stock{ font-weight:800; font-size:13px; padding:4px 8px; border-radius: 10px; border:1px solid #e5e7eb; }
.catalog .catalog-stock.high{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.catalog .catalog-stock.low{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.catalog .catalog-stock.zero{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }

/* =========================================================
   FILTROS — versión pulida (Marca + Buscador ancho + Acciones)
   ======================================================= */

.container.catalog { overflow: visible; }

.filters-card{
  position: relative;
  z-index: 50;
  margin: 22px auto 14px;
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px 14px;
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
  border: 1px solid #eef0f3;
}

.filters-row{
  display: grid;
  /* Marca | Buscador (muy ancho) | Acciones */
  grid-template-columns: minmax(360px, 420px) minmax(520px, 1fr) 208px;
  gap: 18px 22px;
  align-items: center;
}

/* Etiquetas */
.field label{
  display:block;
  font-weight: 650;
  color:#111827;
  margin-bottom: 8px;
}

/* Buscador (más alto y ancho) */
.field--wide input[type="search"],
.filters-row input[type="search"]{
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  font-size: 14px;
}
.field--wide input[type="search"]::placeholder{
  color:#6b7280;
}

/* Acciones a la derecha: columna con dos botones */
.filters-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  justify-content: center;
  align-items: flex-end;
}
.filters-actions .btn{
  height: 44px;
  width: 100%;
  max-width: 208px;
  font-weight: 600;
  border-radius: 12px;
}

/* Botones (si no tienes sistema de botones, estas clases ayudan) */
.btn-primary{
  background:#B8860B;
  color:#fff;
  border: none;
}
.btn-ghost{
  background:#fff;
  color:#374151;
  border: 1px solid #e5e7eb;
}

/* ====== MULTISELECT MARCAS ====== */
.ms{
  position: relative;
  width: 100%;
}
.ms-toggle{
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;

  /* 🔒 Una sola línea, sin cortes */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-values{
  display:flex;
  gap:8px;
  /* 🔒 Evita salto de línea dentro del botón cerrado */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ms-placeholder{
  color:#9ca3af;
  /* 🔒 También en placeholder */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ms-dropdown{
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,.12);
  padding: 10px;
  max-height: 360px;
  overflow: auto;
  z-index: 1000;
  display: none;
}
.ms.open .ms-dropdown{ display:block; }

.ms-search input{
  width: 100%;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 14px;
}
.ms-clear{ margin-bottom: 10px; }

.ms-list{ max-height: 260px; overflow:auto; }
.ms-empty{ padding:8px; color:#6b7280; }

.ms-option{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:8px; cursor:pointer;
}
.ms-option:hover{ background:#f4f6f8; }

.ms-badge{
  background:#eef2ff; color:#3442d9;
  border-radius:999px; padding:2px 8px; font-size:12px; white-space:nowrap;
}

/* Asegura que el grid/cards no tape el dropdown */
.catalog-grid{ position: relative; z-index: 1; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1280px){
  .filters-row{
    grid-template-columns: minmax(320px, 380px) minmax(420px, 1fr) 200px;
  }
}
@media (max-width: 980px){
  .filters-row{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .filters-actions{ align-items: stretch; }
  .filters-actions .btn{ max-width: none; }
}
/* --- Catálogo: arregla desbordes y hace que las fotos respeten márgenes --- */

/* separa bien el bloque de filtros del grid y evita solapes */
.filters-card { margin-bottom: 18px; }
.catalog .catalog-grid { position: relative; z-index: 1; margin-top: 6px; }

/* tarjeta base segura */
.catalog-grid .catalog-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;           /* <- clave para que nada se salga */
}

/* marco de imagen con relación 4:3, sin desbordes */
.catalog-grid .catalog-card .catalog-media,
.catalog-grid .catalog-card__media,
.catalog-grid .media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;        /* alto consistente para todas */
  background: #f3f4f6;
  border-radius: 12px;
  overflow: hidden;           /* <- recorta la imagen dentro */
}

/* imagen dentro del marco: llena y recorta sin deformarse */
.catalog-grid .catalog-card .catalog-media > img,
.catalog-grid .catalog-card__media > img,
.catalog-grid .media > img,
.catalog-grid .catalog-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* <- muestra siempre foto completa sin estirar */
  display: block;
}

/* cuerpo de la tarjeta y filas, para que nada “salte” */
.catalog-grid .catalog-card .catalog-body,
.catalog-grid .catalog-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-grid .catalog-card .catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* por si alguna imagen llega sin wrapper: evita que rompa el layout */
.catalog-grid .catalog-card > img:first-child {
  width: 100%;
  height: auto;
  display: block;
}
/* --- FIX: botones de la barra de filtros no se desborden --- */

/* Damos más ancho a la columna de acciones y que el botón use el 100% */
.filters-row{
  grid-template-columns: minmax(360px, 420px) minmax(520px, 1fr) 240px; /* antes ~208px */
}

.filters-actions{
  min-width: 240px;           /* coincide con la 3ª columna */
  align-items: stretch;       /* los botones ocupan todo el ancho de su columna */
}

.filters-actions .btn{
  width: 100%;
  max-width: none;            /* evitamos límites que corten el botón */
}

/* Un pelín más de aire a la derecha dentro de la tarjeta */
.filters-card{ padding-right: 24px; } /* antes 20px; opcional pero ayuda */

/* Breakpoints coherentes */
@media (max-width: 1280px){
  .filters-row{
    grid-template-columns: minmax(320px, 380px) minmax(420px, 1fr) 240px;
  }
}

@media (max-width: 980px){
  .filters-row{ grid-template-columns: 1fr; }
  .filters-actions{
    min-width: 0;
    align-items: stretch;
  }
  .filters-actions .btn{ width: 100%; }
}
/* === Filtros: botón siempre visible, sin recortes === */
.filters-card{
  /* sin recorte; el contenido se ve completo dentro del padding */
  overflow: visible;
  padding: 18px 22px 14px;     /* ↑ ajusta si quieres más/menos aire */
  background-clip: padding-box;
}

/* Grid: marca | buscador (ancho) | acciones (columna fija) */
.filters-row{
  display: grid;
  gap: 18px 20px;
  grid-template-columns:
    minmax(340px, 420px)
    minmax(520px, 1fr)
    236px;                     /* columna estable para los botones */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Columna de acciones 100% dentro del card */
.filters-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  padding-right: 4px;          /* pequeño aire interno a la derecha */
}

/* Botones: anchos, legibles y clickeables */
.filters-actions .btn{
  width: 90%;
  min-height: 44px;
  border-radius: 12px;
  white-space: nowrap;         /* evita salto en “Filtrar productos” */
}

/* Opcional: enfatiza el primario */
.filters-actions .btn-primary{
  background: #B8860B;
  color: #fff;
  border: none;
}
.filters-actions .btn-outline{
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Responsive: en pantallas medianas y chicas, se apilan sin desbordar */
@media (max-width: 1280px){
  .filters-row{
    grid-template-columns:
      minmax(300px, 380px)
      minmax(420px, 1fr)
      228px;                   /* un pelín más compacta */
  }
}
@media (max-width: 980px){
  .filters-row{
    grid-template-columns: 1fr;   /* todo en una columna */
    align-items: stretch;
  }
  .filters-actions{ padding-right: 0; }
  .filters-actions .btn{ width: 100%; }
}
/* Botones de la derecha siempre dentro del fondo blanco */
.filters-card { padding: 18px 22px; }           /* sin overflow raro */
.filters-row{
  display: grid;
  gap: 16px 18px;
  /* Marca | Buscador (flexible) | Acciones (fijo)  */
  grid-template-columns: minmax(280px, 360px) 1fr 200px;
  box-sizing: border-box;
}

@media (min-width: 1280px){
  /* Un poco más de aire en pantallas grandes, pero siempre caben */
  .filters-row{
    grid-template-columns: minmax(300px, 380px) 1fr 210px;
  }
}

@media (max-width: 980px){
  /* En mobile se apila todo, sin desbordes */
  .filters-row{ grid-template-columns: 1fr; }
}

/* === Tabla de catálogo =================================================== */
.table-wrap { width: 100%; overflow-x: auto; }
.table-catalog { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.table-catalog thead th {
  font-weight: 800; color:#111827; padding: 10px 12px; background: transparent; text-align: left;
}
.table-catalog th.num, .table-catalog td.num { text-align: right; }

.table-catalog tbody tr td {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  vertical-align: middle;
}
.table-catalog tbody tr td:first-child {
  border-left: 1px solid #e5e7eb; border-radius: 12px 0 0 12px;
}
.table-catalog tbody tr td:last-child {
  border-right: 1px solid #e5e7eb; border-radius: 0 12px 12px 0;
}

.table-catalog .imgcell { width: 64px; }
.table-catalog .thumb {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background:#f3f4f6; display:block;
}

.table-catalog .stock-badge {
  display:inline-block; min-width: 28px; text-align:right;
  font-weight: 800; color:#065f46;
}
.table-catalog .stock-badge.zero { color:#b91c1c; }

.table-catalog .qty {
  width: 90px; padding: 6px 8px; border:1px solid #e5e7eb; border-radius: 10px; text-align: right;
}
.table-catalog .qty:disabled { background:#f9fafb; color:#9ca3af; }
.table-catalog .obs {
  width: 100%; padding: 6px 10px; border:1px solid #e5e7eb; border-radius: 10px;
}

/* ===== Tabla bonita (zebra + hover + tipografía) ===== */
.ps-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.06);
  overflow:hidden;
}
.ps-table-wrap{ overflow:auto; }
.ps-table{
  width:100%; border-collapse:separate; border-spacing:0; min-width: 880px;
}
.ps-table thead th{
  position: sticky; top: 0; z-index: 1;
  background:#fbfbfc; border-bottom:1px solid #e5e7eb; color:#0f172a;
  text-align:left; font-weight:800; letter-spacing:.02em;
  padding:12px 14px; font-size:13px; text-transform:uppercase;
}
.ps-table tbody td{
  padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align: middle;
  font-size:14px;
}
.ps-table tbody tr:nth-child(odd)  { background:#fff; }
.ps-table tbody tr:nth-child(even) { background:#fcfcfd; }
.ps-table tbody tr:hover { background:#fafafa; }

/* Nombre y etiquetas pequeñas */
.ps-name { font-weight:800; line-height:1.25; }
.ps-sku  { font-size:12px; color:#6b7280; }
.ps-muted{ font-size:12px; color:#8991a1; }

/* Imagen miniatura */
.ps-thumb {
  width:56px; height:56px; border-radius:12px; object-fit:cover; background:#f3f4f6; border:1px solid #eef2f7;
  cursor: zoom-in;
}

/* Precio / Neto */
.ps-price { font-weight:800; }
.ps-net   { font-size:12px; color:#6b7280; }

/* Chips de stock */
.ps-chip { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px;
  padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; }
.ps-chip.high { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.ps-chip.low  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.ps-chip.zero { background:#fee2e2; color:#991b1b; border-color:#fecaca; }

/* Inputs */
.ps-input {
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; outline:none;
  transition: box-shadow .18s ease, border-color .18s ease; background:#fff;
}
.ps-input:focus { border-color:#B8860B; box-shadow:0 0 0 4px rgba(184,134,11,.12); }
.ps-input::-webkit-outer-spin-button,
.ps-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ===== Modal de imagen ===== */
.ps-modal{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000;
  background: rgba(0,0,0,.6); padding: 28px;
}
.ps-modal.show{ display:flex; }
.ps-modal img{
  max-width: min(92vw, 1080px); max-height: 86vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  background:#fff;
}
.ps-modal__close{
  position:absolute; top:22px; right:22px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px 10px;
  font-weight:800; cursor:pointer;
}
.ps-modal__close:hover{ background:#fff6e0; border-color:#f1d79c; }
/* --- 1) Ocultar el badge de Sucursal en esta vista pública --- */
.header .badge { 
  display: none !important;
}

/* --- 2) Prioridad visual: el header siempre arriba de todo --- */
.header { 
  z-index: 500 !important;   /* estaba ~50 */
}
.filters-card { 
  z-index: 10 !important;     /* antes era 50; ahora está por debajo del header */
}

/* --- 3) Más ancho de página para que quepa mejor Observación --- */
.container { 
  max-width: 1320px;          /* antes 1100px; ajusta si quieres más */
}

/* La tabla puede respirar más (evita scroll horizontal prematuro) */
.ps-table { 
  min-width: 1120px;          /* antes ~880px */
}

/* Observación: dale un ancho realmente cómodo */
.ps-table td.obs-cell { 
  min-width: 420px;           /* sube desde 220px → 420px (ajústalo si deseas) */
}
.ps-input.note { 
  width: 100%;
}

/* ===== ORDER PANEL — LOOK & FEEL ===== */
#orderPanel .order-wrap{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  align-items:start;
}

#orderPanel .order-card{ padding:16px; background:#fff; border-radius:16px; box-shadow:0 6px 24px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.04); }
#orderPanel .summary-card{ position:sticky; top:18px; padding:18px; background:#b8860b; color:#fff; border-radius:16px; box-shadow:0 6px 24px rgba(2,6,23,.35); }
#orderPanel .summary-card h3{ font-size:16px; font-weight:700; margin:0 0 12px; letter-spacing:.3px; }
#orderPanel .summary-row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0; font-size:14px; opacity:.9; }
#orderPanel .summary-row.total{ margin-top:12px; padding-top:10px; border-top:1px dashed #ffffff40; font-weight:800; font-size:18px; opacity:1; }
#orderPanel .kpi{ display:flex; gap:10px; margin-bottom:10px; }
#orderPanel .kpi .chip{ background:rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:12px; }

#orderPanel .ps-table{ width:100%; border-collapse:separate; border-spacing:0; }
#orderPanel .ps-table thead th{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:#ffffff; padding:10px 12px; background:#b8860b; position:sticky; top:0; z-index:1; }
#orderPanel .ps-table tbody tr{ background:#fff; }
#orderPanel .ps-table tbody tr+tr td{ border-top:1px solid #eef2f7; }
#orderPanel .ps-table td{ padding:12px; vertical-align:middle; }
#orderPanel .ps-table td.num{ text-align:right; font-variant-numeric: tabular-nums; }

#orderPanel .order-thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; border:1px solid #eef2f7; box-shadow:0 1px 2px rgba(0,0,0,.03); }

#orderPanel .order-actions{ display:flex; gap:10px; align-items:center; margin-top:14px; }
#orderPanel .summary-card .btn-primary{ width:100%; padding:12px; border-radius:12px; border:0; cursor:pointer; font-weight:700; background:#b8860b; color:#0f172a; }
#orderPanel .summary-card .btn-primary:disabled{ background:#9ca3af; cursor:not-allowed; color:#1f2937; }
#orderPanel .summary-card label{ display:flex; gap:8px; align-items:center; margin:10px 0 4px; font-size:13px; opacity:.95; }

#orderPanel .tag-sku{ display:inline-block; font-size:12px; background:#f1f5f9; color:#b8860b; padding:2px 8px; border-radius:999px; }

#orderPanel .order-thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; border:1px solid #eef2f7; box-shadow:0 1px 2px rgba(0,0,0,.03); }

#orderPanel .order-actions{ display:flex; gap:10px; align-items:center; margin-top:14px; }
#orderPanel .summary-card .btn-primary{ width:100%; padding:12px; border-radius:12px; border:0; cursor:pointer; font-weight:700; background:#000000; color:#ffffff; }
#orderPanel .summary-card .btn-primary:disabled{ background:#9ca3af; cursor:not-allowed; color:#1f2937; }
#orderPanel .summary-card label{ display:flex; gap:8px; align-items:center; margin:10px 0 4px; font-size:13px; opacity:.95; }

#orderPanel .tag-sku{ display:inline-block; font-size:12px; background:#f1f5f9; color:#334155; padding:2px 8px; border-radius:999px; }

/* small screens */
@media (max-width: 1100px){
  #orderPanel .order-wrap{ grid-template-columns: 1fr; }
  #orderPanel .ps-table thead th:nth-child(6), /* Precio neto */
  #orderPanel .ps-table tbody td:nth-child(6){ display:none; }
}

/* =========================================================
   (AQUÍ EMPIEZAN LAS ÚNICAS ADICIONES)
   Paginación numérica y toolbar
   ======================================================= */

/* Contenedor de barra superior/inferior cuando el JS inserta paginación */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* Paginador numérico */
.pager{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.pager[hidden]{ display:none !important; }

.page-btn{
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.page-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.page-btn.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.ellipsis{
  padding:0 6px;
  color:#b8860b;
}

/* === Overrides de filtros para acercar Marca/Buscar y reubicar botones === */

/* Grid a 4 columnas: Marca | Buscar (más corta) | Acciones | CSV */
.filters-row--compact{
  display:grid;
  gap: 10px 12px; /* ↑ menos separación horizontal/vertical */
  grid-template-columns:
    minmax(260px, 340px)      /* Marca */
    minmax(320px, 520px)      /* Buscar (más corta) */
    210px                     /* Acciones (filtrar/limpiar) */
    210px;                    /* CSV (descargar/importar) */
  align-items:center;
}

/* Bajar levemente el padding del card para compactar visualmente */
.filters-card{ padding:16px 18px 12px; }

/* Input de búsqueda con ancho tope y sin separaciones extra */
.field--search-tight input[type="search"]{
  max-width: 520px;
}

/* Columnas de botones apiladas (dos alturas iguales) */
.filters-actions{
  display:flex; flex-direction:column; gap:10px;
  align-items:stretch; justify-content:center;
}
.filters-actions .btn{ height:44px; }

/* Columna CSV con mismo look */
.filters-actions--csv .btn{ height:44px; }

/* Responsive: en tablets/móviles todo en una columna, sin desbordes */
@media (max-width: 980px){
  .filters-row--compact{
    grid-template-columns: 1fr;
  }
  .filters-actions, .filters-actions--csv{
    align-items:stretch;
  }
}

/* Opcional: acerca un pelín más los campos entre sí */
.field{ margin: 10px 0; }

/* === Filtros compactos: misma separación que los botones (12px) === */
.filters-row--compact{
  display: grid;
  /* Marca | Buscar | Botones izq | Botones CSV */
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.15fr) 220px 220px;
  column-gap: 12px;   /* ← separación horizontal más corta */
  row-gap: 12px;
  align-items: end;   /* alinea las cajas en la misma línea visual */
}

/* Asegura que ambas columnas de botones usen el mismo espaciado vertical */
.filters-actions,
.filters-actions--csv{
  gap: 12px;
}

/* Ajuste intermedio opcional para 1280px− */
@media (max-width: 1280px){
  .filters-row--compact{
    grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.1fr) 220px 220px;
    column-gap: 12px;
  }
}

/* En mobile sigue apilado como ya lo tenías */
@media (max-width: 980px){
  .filters-row--compact{ grid-template-columns: 1fr; }
}
/* Marca: el botón del multiselect debe estirar al 100% del ancho */
#brandFilterWrap .ms { width: 100%; }
#brandFilterWrap .ms-toggle{
  width: 100%;
  max-width: none;      /* sin tope de ancho */
  min-height: 46px;     /* mismo alto que el input de Buscar */
}

/* El dropdown ya usa 100%, reforzamos por si hay herencias */
#brandFilterWrap .ms-dropdown,
#brandFilterWrap .ms-search input{
  width: 100%;
}
/* ====== LOGO GLOBAL (aplica a todos los headers) ====== */
:root{
  /* Ruta del logo. Si usas el endpoint dinámico, pon: url('/api/logo') */
  --app-logo-url: url('/api/logo/Logo.png');

  /* Tamaño visible del logo (ajústalo a tu imagen) */
  --app-logo-h: 72px;                           /* alto del logo */
  --app-logo-w: clamp(180px, 22vw, 280px);      /* ancho flexible */
}

/* El header crece lo suficiente para no cortar el logo */
.header{ overflow: visible; }
.header .header-inner{
  min-height: calc(var(--app-logo-h) + 12px);
  align-items: center;
}

/* ===== Logo proporcional (sin deformación) — Reemplazo total ===== */
:root{
  --app-logo-url: url('/api/logo/Logo.png');
  --logo-h-sm: 32px;   /* móvil */
  --logo-h:    44px;   /* desktop */
  --logo-h-lg: 54px;   /* desktop grande */

  /* Relación de aspecto (ancho/alto) de tu PNG/SVG */
  /* Ajusta fino si hiciera falta (p.ej. 5.2, 5.4, etc.) */
  --logo-aspect: 5.3;
}

/* Contenedor del logo (usa la altura como referencia) */
.header .brand{
  display:inline-block;
  height: var(--logo-h);
  padding-left: calc(var(--logo-h) * var(--logo-aspect)); /* ancho calculado */
  background-image: var(--app-logo-url);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;            /* ← escala por altura, sin deformar */
  line-height: 0;
  overflow: visible;

  /* Oculta el texto pero conserva el espacio del elemento */
  font-size: 0 !important;
  color: transparent !important;
  white-space: nowrap !important;
  text-indent: -9999px !important;
}

/* Afinado de altura por breakpoints */
@media (max-width: 640px){
  .header .brand{
    height: var(--logo-h-sm);
    padding-left: calc(var(--logo-h-sm) * var(--logo-aspect));
  }
}
@media (min-width: 1280px){
  .header .brand{
    height: var(--logo-h-lg);
    padding-left: calc(var(--logo-h-lg) * var(--logo-aspect));
  }
}

/* Encabezado alineado y con línea sutil */
.header .header-inner{ align-items:center; gap:16px; }
.header{ border-bottom: 1px solid rgba(184,134,11,.10); }
/* ===== Fix paginador centrado y con respiro arriba ===== */

/* El contenedor donde montamos el paginador (#pagerBottom | #pager | #pageBottom)
   lo usamos como “centrador” */
#pagerBottom, #pager, #pageBottom{
  display: grid;            /* más simple que flex para centrar 1 hijo */
  place-items: center;      /* centra horizontal/vertical */
}

/* El propio paginador */
#pagerBottom .pager,
#pager .pager,
#pageBottom .pager{
  margin-top: 20px;         /* separa del bloque de arriba */
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

/* Botones del paginador (por si algún estilo previo los desalineó) */
.page-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.page-btn:hover{ transform: translateY(-1px); }
.page-btn.active{
  background: #B8860B;
  color: #fff;
  border-color: #B8860B;
  box-shadow: 0 8px 18px rgba(184,134,11,.22);
}
.page-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  background: #f6f7f9;
}

/* Puntos suspensivos coherentes con el look */
.ellipsis{ padding: 0 2px; opacity:.6; }

/* =========================================================
   LOGIN / AUTH
   ======================================================= */

.auth-page{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  background:
    radial-gradient(circle at top left, rgba(184,134,11,.22), transparent 55%),
    radial-gradient(circle at bottom right, rgba(15,23,42,.8), #020617);
  color:#e5e7eb;
}

.auth-shell{
  width:100%;
  max-width: 960px;
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:32px;
  align-items:stretch;
}

@media (max-width: 900px){
  .auth-shell{
    grid-template-columns: 1fr;
  }
}

/* Columna izquierda: texto / beneficios */
.auth-hero{
  padding:24px 6px;
  color:#e5e7eb;
}

.auth-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#facc6b;
  margin-bottom:8px;
}

.auth-hero h1{
  font-size:clamp(26px, 3vw, 32px);
  font-weight:800;
  margin:0 0 12px;
}

.auth-text{
  font-size:14px;
  color:#cbd5ff;
  max-width: 420px;
}

.auth-bullets{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:#e5e7eb;
}

.auth-bullets li::before{
  content:"•";
  color:#facc6b;
  margin-right:6px;
}

/* Columna derecha: tarjeta de login */
.auth-card{
  background:#ffffff;
  border-radius: 18px;
  padding:24px 22px 26px;
  box-shadow:0 24px 70px rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.25);
}

.auth-card h2{
  margin:0 0 6px;
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}

.auth-subtitle{
  margin:0 0 18px;
  font-size:13px;
  color:#6b7280;
}

/* Campos del formulario */
.auth-form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.auth-form-group label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6b7280;
}

.auth-card input[type="email"],
.auth-card input[type="password"]{
  width:100%;
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:11px 12px;
  font-size:14px;
  background:#fff;
}

.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus{
  border-color:#B8860B;
  box-shadow:0 0 0 3px rgba(184,134,11,.20);
  outline:none;
}

/* Recordarme + posibles enlaces (recuperar) */
.auth-remember{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  font-size:13px;
  color:#4b5563;
}

.auth-remember label{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Botón principal */
.auth-primary-btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:11px 16px;
  font-weight:700;
  font-size:15px;
  background:#111827;
  color:#f9fafb;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:
    transform .06s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.auth-primary-btn:hover{
  background:#020617;
  box-shadow:0 14px 28px rgba(15,23,42,.55);
  transform: translateY(-1px);
}

.auth-primary-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Notita inferior */
.auth-footnote{
  margin-top:14px;
  font-size:12px;
  color:#6b7280;
}

.auth-footnote a{
  color:#B8860B;
  text-decoration:none;
  font-weight:600;
}

.auth-footnote a:hover{
  text-decoration:underline;
}