/* ============================================================
   NUEZ — Componentes de interfaz
   ------------------------------------------------------------
   Piezas compartidas por las pantallas. Todo se construye con los
   tokens de np-tokens.css: si un componente necesita un color, se
   agrega el token alla, no un hex aqui.

   Se carga DESPUES del vendor (ver plantilla.php), asi que a igual
   especificidad gana por orden. Solo se usa !important donde el
   vendor lo usa — y en este archivo no hay ninguno.
   ============================================================ */

/* ============================================================
   KPI
   Cifra grande en Fraunces + etiqueta en mayusculas + hairline
   degradado en el borde superior.
   ============================================================ */
.nz-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px 16px;
  background-color: var(--nz-card);
  border: 1px solid var(--nz-borde);
  border-radius: var(--nz-radius-lg);
  box-shadow: var(--nz-shadow-xs);
}

/* El hairline: verde Nuez que se apaga hacia la derecha. */
.nz-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
              var(--nz-primario) 0%,
              var(--nz-apoyo) 45%,
              transparent 100%);
}

.nz-kpi-label {
  font-size: var(--nz-label-size);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nz-text-muted);
}

.nz-kpi-value {
  font-family: var(--nz-font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--nz-tinta);
  font-variant-numeric: tabular-nums;
}

.nz-kpi-meta {
  font-size: .76rem;
  color: var(--nz-text-muted);
}

.nz-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font-size: .76rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--nz-radius-pill);
}

.nz-kpi-delta.is-up {
  background-color: var(--nz-exito-bg);
  color: var(--nz-exito);
}

.nz-kpi-delta.is-down {
  background-color: var(--nz-peligro-bg);
  color: var(--nz-peligro);
}

/* ============================================================
   TABLA DENSA
   Reemplaza los `td { font-size: 10px }` que cada pantalla
   sembraba por su cuenta (y que se filtraban a los modales).
   ============================================================ */
.nz-table {
  --nz-dense-py: .42rem;
  --nz-dense-px: .6rem;
  font-size: .82rem;
  margin-bottom: 0;
}

.nz-table > thead > tr > th {
  padding: var(--nz-dense-py) var(--nz-dense-px);
  font-size: var(--nz-table-head-size);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nz-table > tbody > tr > td {
  padding: var(--nz-dense-py) var(--nz-dense-px);
  vertical-align: middle;
}

/* Cifras, folios y cantidades: alineadas a la derecha y tabulares,
   para que las columnas se puedan comparar de un vistazo. */
.nz-table .nz-num,
.nz-table td.nz-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--nz-font-mono);
  font-size: .78rem;
}

/* Un poco mas aire cuando la tabla es la unica cosa en pantalla */
.nz-table.is-comoda {
  --nz-dense-py: .62rem;
  --nz-dense-px: .8rem;
  font-size: .875rem;
}

/* Celdas construidas via DOM API (createElement + className).
   Antes cada celda llevaba setAttribute("style","font-size:11px;..."),
   lo que ignoraba los tokens, el modo oscuro y se filtraba a los modales.
   Estas clases reemplazan todos esos inline styles. */
.nz-cell           { text-align: left;   vertical-align: middle; }
.nz-cell-center    { text-align: center; vertical-align: middle; }
.nz-cell-muted     { opacity: .45; text-align: center; vertical-align: middle; }
.nz-cell-num       { text-align: center; vertical-align: middle;
                     font-variant-numeric: tabular-nums; }

/* Aviso de peso bajo el input de cantidad (pedidostienda.js).
   Antes era <small style="font-size:11px;">. */
.nz-cell-hint {
  display: block;
  font-size: .72rem;
  line-height: 1.2;
}

/* ============================================================
   TOOLBAR DE FILTROS
   ============================================================ */
.nz-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 12px 0;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--nz-borde);
}

.nz-toolbar > .nz-toolbar-field {
  flex: 0 1 auto;
  min-width: 0;
}

.nz-toolbar > .nz-toolbar-field.is-grow {
  flex: 1 1 200px;
}

/* En movil cada control ocupa el ancho completo: apilar es mejor que
   dejar un select de 90px al lado de un input de 300px. */
@media (max-width: 575.98px) {
  .nz-toolbar > .nz-toolbar-field,
  .nz-toolbar > .nz-toolbar-field.is-grow {
    flex: 1 1 100%;
    width: 100%;
  }

  .nz-toolbar .form-select,
  .nz-toolbar .form-control {
    width: 100%;
  }
}

.nz-toolbar-spacer {
  flex: 1 1 auto;
}

/* ============================================================
   BADGE CON PUNTO
   Para rol y estado: el punto da la senal sin depender solo del
   color (quien no distingue verde de rojo igual ve la forma).
   ============================================================ */
.nz-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .6em;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--nz-radius-pill);
  white-space: nowrap;
}

.nz-badge::before {
  content: "";
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}

.nz-badge.is-ok      { background-color: var(--nz-exito-bg);   color: var(--nz-exito); }
.nz-badge.is-off     { background-color: var(--nz-card-soft);  color: var(--nz-text-muted); }
.nz-badge.is-warn    { background-color: var(--nz-aviso-bg);   color: var(--nz-aviso); }
.nz-badge.is-danger  { background-color: var(--nz-peligro-bg); color: var(--nz-peligro); }
.nz-badge.is-info    { background-color: var(--nz-info-bg);    color: var(--nz-info); }
.nz-badge.is-brand   { background-color: var(--nz-primario-suave); color: var(--nz-primario-texto); }

/* ============================================================
   SKELETON
   Sustituye al spinner en las cargas de listado: muestra la forma
   de lo que va a llegar en vez de una rueda.
   ============================================================ */
.nz-skeleton {
  display: block;
  border-radius: var(--nz-radius-sm);
  background-image: linear-gradient(90deg,
                    var(--nz-card-soft) 25%,
                    var(--nz-borde) 37%,
                    var(--nz-card-soft) 63%);
  background-size: 400% 100%;
  animation: nz-shimmer 1.4s ease infinite;
}

.nz-skeleton-text {
  height: .8em;
  margin-bottom: .5em;
}

.nz-skeleton-text:last-child {
  width: 60%;
  margin-bottom: 0;
}

.nz-skeleton-card {
  height: 100%;
  min-height: 210px;
  border-radius: var(--nz-radius-lg);
}

.nz-skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

@keyframes nz-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   ESTADO VACIO
   ============================================================ */
.nz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  gap: 6px;
}

.nz-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  background-color: var(--nz-primario-suave);
  color: var(--nz-primario-texto);
  font-size: 1.7rem;
}

.nz-empty-title {
  font-family: var(--nz-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nz-tinta);
  margin: 0;
}

.nz-empty-text {
  max-width: 42ch;
  font-size: .875rem;
  color: var(--nz-text-muted);
  margin: 0;
}

.nz-empty .btn {
  margin-top: 12px;
}

/* ============================================================
   TARJETA CON HOVER
   El movimiento va en la tarjeta (translateY) y el zoom en la
   imagen; el overflow:hidden del marco es lo que impide que el
   zoom se salga y rompa el layout.
   ============================================================ */
.nz-card-hover {
  overflow: hidden;
  transition: transform var(--nz-trans),
              box-shadow var(--nz-trans),
              border-color var(--nz-trans);
}

.nz-card-hover:hover,
.nz-card-hover:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--nz-shadow-md);
  border-color: var(--nz-borde-fuerte);
}

.nz-card-media {
  overflow: hidden;
  border-radius: calc(var(--nz-radius-lg) - 1px) calc(var(--nz-radius-lg) - 1px) 0 0;
}

.nz-card-media img {
  display: block;
  width: 100%;
  transition: transform var(--nz-trans);
}

.nz-card-hover:hover .nz-card-media img,
.nz-card-hover:focus-within .nz-card-media img {
  transform: scale(1.06);
}

/* ============================================================
   BOTON FLOTANTE
   Usa los rellenos fijos (--nz-fill-*) porque llevan texto blanco
   encima: un relleno claro no soportaria .text-white en oscuro.
   ============================================================ */
.nz-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--nz-radius-pill);
  background-color: var(--nz-fill-primary);
  color: #FFFFFF;
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: var(--nz-shadow-md);
  transition: transform var(--nz-trans), box-shadow var(--nz-trans), background-color var(--nz-trans);
}

.nz-fab:hover,
.nz-fab:focus {
  background-color: var(--nz-primario-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--nz-shadow-lg);
}

.nz-fab:active {
  transform: translateY(0);
}

/* ============================================================
   BUSCADOR DE LA BARRA SUPERIOR
   El icono va dentro del campo y el conjunto crece hasta el toggle
   de tema. flex:1 + min-width:0 es lo que le permite encogerse en
   movil en vez de desbordar la navbar.
   ============================================================ */
.nz-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 1rem;
}

.nz-search-icon {
  position: absolute;
  top: 50%;
  left: .9rem;
  transform: translateY(-50%);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--nz-text-muted);
  pointer-events: none;   /* el clic atraviesa y enfoca el input */
}

.nz-search-input {
  height: 40px;
  padding-left: 2.6rem;
  padding-right: 1rem;
  background-color: var(--nz-card-soft);
  border: 1px solid transparent;
  border-radius: var(--nz-radius-pill);
  color: var(--nz-tinta);
  transition: background-color var(--nz-trans),
              border-color var(--nz-trans),
              box-shadow var(--nz-trans);
}

.nz-search-input::placeholder {
  color: var(--nz-text-soft);
  opacity: 1;
}

.nz-search-input:hover {
  border-color: var(--nz-borde);
}

/* Al enfocar, el campo pasa a la superficie de input y el icono toma el
   color de marca: asi se ve cual es el campo activo sin depender solo
   del borde. El borde lo pone la regla compartida de np-tokens.css. */
.nz-search-input:focus {
  background-color: var(--nz-input-bg);
  color: var(--nz-tinta);
  box-shadow: 0 0 0 3px rgba(79, 122, 63, .18);
}

.nz-search:focus-within .nz-search-icon {
  color: var(--nz-primario);
}

@media (max-width: 575.98px) {
  .nz-search {
    margin-right: .5rem;
  }

  .nz-search-input {
    height: 36px;
    padding-left: 2.3rem;
    font-size: .875rem;
  }
}

/* ============================================================
   FOCO UNIFICADO
   Bootstrap pinta un box-shadow azul en :focus. Aqui el foco es
   siempre el mismo anillo verde, y solo con teclado (:focus-visible),
   para que al hacer clic no aparezca el anillo.
   ============================================================ */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nz-fab:focus-visible,
.nz-theme-toggle:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nz-primario);
  outline-offset: 2px;
  box-shadow: none;
}

/* Los controles dentro de un input-group comparten el borde: el
   anillo se dibuja en el grupo, no en cada pieza. */
.input-group:focus-within {
  border-radius: var(--nz-radius-sm);
  outline: 3px solid var(--nz-primario);
  outline-offset: 2px;
}

.input-group:focus-within .form-control:focus-visible,
.input-group:focus-within .input-group-text {
  outline: none;
}

/* ============================================================
   NOMBRE DE PRODUCTO EN TARJETA
   Antes era un bloque solido verde con texto blanco que parecia
   resaltador. Ahora es un fondo suave de marca con texto oscuro,
   en sintonia con .datos, .datosbien y .datosmal.
   ============================================================ */
.nz-product-name {
  display: block;
  padding: .5rem .75rem;
  background-color: var(--nz-primario-suave);
  color: var(--nz-primario-texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  border-radius: var(--nz-radius-sm);
  word-break: break-word;
}

/* ============================================================
   ZOOM DE IMAGEN DE PRODUCTO
   Overlay fullscreen que aparece al hacer clic sobre la imagen
   (.imagen) de una tarjeta de producto. La imagen se muestra
   centrada en grande sobre un fondo oscuro. Se cierra con el
   boton ×, clic en el fondo, o tecla Escape.
   ============================================================ */
.nz-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  cursor: zoom-out;
}

.nz-zoom-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.nz-zoom-overlay img {
  width: min(90vw, 900px);
  height: min(90vh, 900px);
  object-fit: contain;
  background-color: rgba(255, 255, 255, .06);
  border-radius: var(--nz-radius-md);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  pointer-events: none;   /* el clic en la imagen no cierra el overlay */
}

/* Indicar que la imagen del producto es clickeable */
#productos-container img.imagen {
  cursor: zoom-in;
}

/* Miniaturas de recepción: usan el mismo overlay de zoom que el catálogo. */
#tbrecepcion img.nz-recepcion-foto {
  display: block;
  width: 75px;
  height: 75px;
  object-fit: contain;
  border-radius: var(--nz-radius-sm);
  cursor: zoom-in;
  transition: transform var(--nz-trans), box-shadow var(--nz-trans);
}

#tbrecepcion img.nz-recepcion-foto:hover,
#tbrecepcion img.nz-recepcion-foto:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.nz-zoom-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--nz-radius-pill);
  background-color: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease;
}

.nz-zoom-close:hover,
.nz-zoom-close:focus-visible {
  background-color: rgba(255, 255, 255, .3);
}

/* Recepción: los textos largos deben acomodarse en varias líneas para no
   desplazar fuera de pantalla la columna de acciones. */
#tbrecepcion th:nth-child(6),
#tbrecepcion td:nth-child(6) {
  width: 240px;
  min-width: 220px;
  max-width: 300px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

#tbrecepcion th:nth-child(13),
#tbrecepcion td:nth-child(13) {
  width: 180px;
  min-width: 160px;
  max-width: 240px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

#tbrecepcion th:nth-child(17),
#tbrecepcion td:nth-child(17),
#tbrecepcion td.nz-recepcion-acciones {
  min-width: 112px;
  width: 112px;
  white-space: nowrap !important;
  text-align: center;
}

#tbrecepcion td.nz-recepcion-acciones .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   Quien pidio menos animacion no deberia ver shimmer ni zooms.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nz-skeleton {
    animation: none;
    background-image: none;
    background-color: var(--nz-card-soft);
  }

  .nz-card-hover:hover,
  .nz-card-hover:focus-within,
  .nz-fab:hover {
    transform: none;
  }

  .nz-card-hover:hover .nz-card-media img,
  .nz-card-hover:focus-within .nz-card-media img {
    transform: none;
  }

  .nz-zoom-overlay {
    transition: none;
  }
}