/* assets/css/pages/user/catalogo.css
   Catálogo de la tienda: columna de navegación (dónde estoy + para dónde sigo), vitrina,
   barra de orden y paginador. Lenguaje del storefront: esquinas rectas, filetes #e6e6e6,
   negro para lo activo. Nada de Bootstrap acá adentro.

   En pantalla ancha la navegación es una COLUMNA al costado (entran todas las ramas juntas);
   abajo de 992px se convierte sola en una tira horizontal arriba de la vitrina. */

.cat-layout {
  display: flex;
  align-items: flex-start;
}

/* --- Columna de navegación ------------------------------------------------- */
.cat-head {
  flex: 0 0 250px;
  align-self: stretch;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 22px 20px 40px 24px;
}
.cat-head__eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.cat-head__eyebrow a {
  color: #8a8a8a;
  text-decoration: none;
}
.cat-head__eyebrow a:hover {
  color: #000;
  text-decoration: underline;
}
.cat-head__sep {
  margin: 0 6px;
  color: #cfcfcf;
}
.cat-head__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 4px;
}
.cat-head__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #111;
  margin: 0;
}
.cat-head__count {
  font-size: .78rem;
  color: #8a8a8a;
}
.cat-head__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .7rem;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e6e6;
}
.cat-head__label-n {
  color: #b5b5b5;
}
.cat-head__toggle {
  border: 0;
  background: none;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: .72rem;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}
.cat-head__toggle:hover {
  color: #000;
}

/* --- Ramas hijas ----------------------------------------------------------- */
.cat-kids {
  display: flex;
  flex-direction: column;
}
.cat-kid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  color: #111;
  font-size: .82rem;
  line-height: 1.25;
  text-decoration: none;
  transition: color .15s;
}
.cat-kid:hover,
.cat-kid:focus-visible {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.cat-kid__n {
  color: #9a9a9a;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.cat-kid--extra {
  display: none;
}
.cat-kids.is-expanded .cat-kid--extra {
  display: flex;
}

/* Una hoja del árbol (o una búsqueda) no tiene ramas para ofrecer: sin nada adentro, la
   columna sería una franja vacía comiéndose el ancho de la vitrina. Ahí el encabezado
   vuelve a ser una banda y la grilla se queda con todo. */
.cat-layout--plano {
  display: block;
}
.cat-layout--plano .cat-head {
  border-right: 0;
  border-bottom: 1px solid #e6e6e6;
  padding: 22px 24px 18px;
  margin-bottom: 18px;
}
.cat-layout--plano .cat-head__row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cat-layout--plano .cat-head__title {
  font-size: 1.9rem;
}

/* --- Vitrina --------------------------------------------------------------- */
.cat-layout .product-catalog {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 18px;
}

/* La densidad "compact" está pensada para el ancho completo de la pantalla. Con la columna
   al costado sobran 250px menos, y esas mismas 6 tarjetas quedan de 155px con el nombre
   partido en cinco renglones. Se le saca una columna por tramo; el visitante sigue teniendo
   el selector de densidad si la quiere más apretada. */
@media (min-width: 1400px) {
  .cat-layout:not(.cat-layout--plano) .product-grid.grid-compact > .col {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .cat-layout:not(.cat-layout--plano) .product-grid.grid-compact > .col {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .cat-layout:not(.cat-layout--plano) .product-grid.grid-normal > .col {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
.cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
}
.cat-toolbar__start,
.cat-toolbar__end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.cat-toolbar__end {
  margin-left: auto;
}
.cat-toolbar__field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .78rem;
  color: #777;
}
.cat-select {
  border: 1px solid #000;
  background: #fff;
  color: #111;
  padding: 5px 10px;
  font-size: .82rem;
  max-width: 260px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  padding: 5px 10px;
  font-size: .78rem;
}
.cat-chip a {
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1;
  opacity: .7;
}
.cat-chip a:hover {
  opacity: 1;
  color: #fff;
}
.cat-toolbar__clear {
  font-size: .78rem;
  color: #666;
  text-decoration: underline;
}
.cat-toolbar__clear:hover {
  color: #000;
}

/* --- Vacío + paginador ----------------------------------------------------- */
.cat-empty {
  text-align: center;
  padding: 64px 16px;
}
.cat-empty h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.cat-empty p {
  color: #777;
  font-size: .88rem;
}
.cat-empty__btn {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #000;
  padding: 9px 22px;
  color: #111;
  font-size: .85rem;
  text-decoration: none;
}
.cat-empty__btn:hover {
  background: #000;
  color: #fff;
}
.cat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 34px 0 48px;
}
.cat-pager__item {
  min-width: 38px;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #111;
  font-size: .84rem;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cat-pager__item:hover {
  border-color: #000;
  color: #000;
}
.cat-pager__item.is-current {
  background: #000;
  border-color: #000;
  color: #fff;
}
.cat-pager__meta {
  margin-left: 12px;
  font-size: .78rem;
  color: #8a8a8a;
}

/* --- Angosto: la columna pasa a ser una tira arriba de la vitrina ---------- */
@media (max-width: 991.98px) {
  .cat-layout {
    display: block;
  }
  .cat-head {
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
    padding: 16px 16px 0;
    margin-bottom: 14px;
  }
  .cat-head__row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .cat-head__label {
    margin-top: 16px;
    padding-bottom: 6px;
    border-bottom: 0;
  }
  .cat-kids {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #d5d5d5 transparent;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .cat-kids::-webkit-scrollbar {
    height: 6px;
  }
  .cat-kids::-webkit-scrollbar-thumb {
    background: #d5d5d5;
  }
  .cat-kids.is-expanded {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .cat-kid {
    flex: 0 0 auto;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid #e6e6e6;
    border-right: 0;
    white-space: nowrap;
  }
  .cat-kid:last-child {
    border-right: 1px solid #e6e6e6;
  }
  .cat-kid:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    font-weight: 400;
  }
  .cat-kid:hover .cat-kid__n {
    color: #bdbdbd;
  }
  .cat-toolbar {
    padding: 0 16px;
  }
  .cat-pager__meta {
    width: 100%;
    text-align: center;
    margin: 6px 0 0;
  }
}

/* ===== Vistas del catálogo: grilla, lista y tabla (#1006, #1008) ===== */
.cat-vistas { margin-left: .25rem; }

/* TABLA: kds-table vestida de tienda; en el teléfono cada fila es una tarjeta (lo hace kds-table). */
.cat-tabla {
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-bottom: 1rem;
}
.cat-tabla .kds-table thead th { top: 0; }
.cat-tabla__orden { color: inherit; text-decoration: none; white-space: nowrap; }
.cat-tabla__orden:hover,
.cat-tabla__orden:focus-visible { color: #fff; text-decoration: underline; }
.cat-tabla__marca a { color: inherit; text-decoration: none; font-weight: 600; }
.cat-tabla__marca a:hover { text-decoration: underline; }
.cat-tabla__codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cat-tabla__nombre a { color: #000; text-decoration: none; font-weight: 500; }
.cat-tabla__nombre a:hover { text-decoration: underline; }
.cat-tabla__oem { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cat-tabla__mas,
.cat-tabla__nada { color: #6c757d; font-size: .75rem; }
.cat-tabla__precio { white-space: nowrap; }
.cat-tabla__precio-final { font-weight: 700; color: #000; }
.cat-tabla__precio-antes {
    display: block;
    font-size: .72rem;
    color: #6c757d;
    text-decoration: line-through;
}
.cat-tabla__stock { white-space: nowrap; }
.cat-tabla__col-agregar { width: 1%; }
.cat-tabla .quick-add-btn,
.cat-lista .quick-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    padding: 6px 12px;
    font-size: .85rem;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
}
.cat-tabla .quick-add-btn:hover,
.cat-lista .quick-add-btn:hover { background: #000; color: #fff; }

/* LISTA: un renglón a lo ancho con la foto, el código grande y la compra a la derecha. */
.cat-lista { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.cat-lista__fila {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: .75rem 1rem;
}
.cat-lista__fila:hover { border-color: #000; }
.cat-lista__foto {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}
.cat-lista__foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-lista__datos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cat-lista__marca { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; }
.cat-lista__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #000;
}
.cat-lista__nombre { color: #1a1a1a; text-decoration: none; }
.cat-lista__nombre:hover { text-decoration: underline; }
.cat-lista__oem { font-size: .78rem; color: #6c757d; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cat-lista__compra { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.cat-lista__precio { font-weight: 700; font-size: 1.05rem; color: #000; white-space: nowrap; }

@media (max-width: 575.98px) {
    .cat-lista__fila { grid-template-columns: 72px 1fr; }
    .cat-lista__foto { width: 72px; height: 72px; }
    .cat-lista__compra { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

/* AGREGAR DESDE LA FILA (#1006): cuántos y el carrito, sin abrir nada. Mientras va queda quieto;
   cuando entró, el botón se pone verde un momento. */
.cat-agregar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.cat-agregar .kds-qty { width: 96px; }
.cat-agregar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: #000;
    border: 1px solid #000;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cat-agregar__btn:hover { background: #333; border-color: #333; }
.cat-agregar__btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.cat-agregar.is-agregando .cat-agregar__btn { opacity: .5; cursor: progress; }
.cat-agregar.is-agregado .cat-agregar__btn {
    background: var(--tienda-verde, #A8E6CF);
    border-color: var(--tienda-verde, #A8E6CF);
    color: #000;
}
.cat-tabla .cat-elegir,
.cat-lista .cat-elegir { font-weight: 600; }

/* TABLA EN EL CELULAR (#1008): no entra a lo ancho, así que cada producto se ve como en la lista
   —marca y código arriba, el precio a la derecha, la descripción, OEM y stock, y el agregar—
   en lugar de la tarjeta de siete renglones rótulo/valor del panel. Recta, como la tienda. */
@media (max-width: 767.98px) {
    .cat-tabla { background: transparent; border: 0; }
    .cat-tabla .kds-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "marca   precio"
            "codigo  precio"
            "nombre  nombre"
            "oem     stock"
            "agregar agregar";
        column-gap: .75rem;
        width: auto;
        margin: 0 0 .5rem;
        padding: .75rem;
        border: 1px solid var(--tienda-borde, #e5e5e5);
        border-radius: 0;
        box-shadow: none;
    }
    .cat-tabla .kds-table tbody td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }
    .cat-tabla .kds-table td[data-label]::before { content: none; }
    .cat-tabla .kds-table tbody td.cat-tabla__marca {
        grid-area: marca;
        font-size: .72rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #6c757d;
    }
    .cat-tabla .kds-table tbody td.cat-tabla__codigo { grid-area: codigo; font-size: 1rem; }
    .cat-tabla .kds-table tbody td.cat-tabla__nombre { grid-area: nombre; margin-top: .25rem; }
    .cat-tabla .kds-table tbody td.cat-tabla__precio {
        grid-area: precio;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    .cat-tabla .kds-table tbody td.cat-tabla__oem { grid-area: oem; margin-top: .25rem; font-size: .8rem; color: #6c757d; }
    .cat-tabla .kds-table tbody td.cat-tabla__oem::before { content: "OEM "; }
    .cat-tabla .kds-table tbody td.cat-tabla__stock { grid-area: stock; margin-top: .25rem; font-size: .85rem; text-align: right; }
    .cat-tabla .kds-table tbody td.cat-tabla__stock:has(.tienda-stock--cantidad)::before { content: attr(data-label) ": "; }
    .cat-tabla .kds-table tbody td.cat-tabla__oem::before,
    .cat-tabla .kds-table tbody td.cat-tabla__stock::before {
        font: inherit;
        color: inherit;
        text-transform: none;
        letter-spacing: normal;
    }
    .cat-tabla .kds-table tbody td.cat-tabla__agregar {
        grid-area: agregar;
        display: flex;
        justify-content: flex-end;
        margin-top: .5rem;
        padding: 0;
    }
    .cat-tabla .kds-table tbody td.cat-tabla__agregar:empty { display: none; }
}

/* EQUIVALENCIAS (#1006): el botón que abre el panel con los otros productos del mismo código OEM
   y el mismo rubro. En la lista, texto subrayado bajo el OEM; en la tabla, ícono y número al lado
   del código. Adentro del panel no se repite: el panel ya es de equivalencias. */
.cat-equiv {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    margin-top: .2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tienda-tinta, #000);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cat-equiv:hover { text-decoration-thickness: 2px; }
.cat-equiv:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.cat-equiv--compacto {
    margin: 0 0 0 .35rem;
    padding: 1px 6px;
    border: 1px solid #c9c9c9;
    font-size: .72rem;
    text-decoration: none;
    vertical-align: middle;
}
.cat-equiv--compacto:hover { border-color: #000; }
.cat-equiv-panel .cat-equiv { display: none; }
.cat-equiv-panel .cat-lista { margin-bottom: 0; }