/* ==========================================================================
   vDevMetrics — sistema de diseno
   --------------------------------------------------------------------------
   Identidad Grupo Klasiko: negro, blanco y tipografia espaciada en versalitas.
   Fuente unica de estilos para TODOS los modulos. Antes cada plantilla traia
   su propio bloque <style>: el dashboard en negro, vendedores con degradados
   de colores, clientes en morado y turquesa, requisiciones en azul.

   Regla: si necesitas un estilo nuevo, agregalo aqui con prefijo .vd- y
   reusalo. No vuelvas a meter CSS a medida en las plantillas.
   ========================================================================== */

:root {
  --vd-negro: #000;
  --vd-tinta: #131313;
  --vd-gris: #6f6f6f;
  --vd-gris-claro: #9a9a9a;
  --vd-linea: #e6e6e6;
  --vd-linea-suave: #f1f1f1;
  --vd-fondo: #f6f6f7;
  --vd-blanco: #fff;

  --vd-ok-texto: #1b5e20;
  --vd-ok-fondo: #e9f5ea;
  --vd-mal-texto: #b3261e;
  --vd-mal-fondo: #fdecea;

  --vd-radio: 14px;
  --vd-radio-sm: 10px;
  --vd-sombra: 0 2px 14px rgba(0, 0, 0, .05);
  --vd-fuente: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.g-sidenav-show,
body.vd-body {
  background: var(--vd-fondo);
  font-family: var(--vd-fuente);
  color: var(--vd-tinta);
}

/* --------------------------------------------------- Encabezado de modulo */
.vd-page {
  padding: 1.5rem 0 0;
}

.vd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--vd-negro);
  padding-bottom: .85rem;
  margin-bottom: 1.75rem;
}

.vd-head-titulo {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.vd-head-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--vd-radio-sm);
  flex: none;
}

.vd-head h1 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
}

.vd-head p {
  font-size: .78rem;
  color: var(--vd-gris);
  margin: .2rem 0 0;
}

.vd-head-meta {
  font-size: .72rem;
  color: var(--vd-gris-claro);
  text-align: right;
}

/* ------------------------------------------------------------------ Cards */
.vd-card {
  background: var(--vd-blanco);
  border: 1px solid var(--vd-linea);
  border-radius: var(--vd-radio);
  box-shadow: var(--vd-sombra);
  margin-bottom: 1.5rem;
}

.vd-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--vd-linea-suave);
}

.vd-card-head h2 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-tinta);
  margin: 0;
}

.vd-card-head p {
  font-size: .78rem;
  color: var(--vd-gris);
  margin: .15rem 0 0;
}

.vd-card-body {
  padding: 1.35rem;
}

.vd-card-body--flush {
  padding: 0;
}

/* -------------------------------------------------------------------- KPIs */
.vd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.vd-kpi {
  background: var(--vd-blanco);
  border: 1px solid var(--vd-linea);
  border-radius: var(--vd-radio);
  box-shadow: var(--vd-sombra);
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vd-kpi-etiqueta {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-gris-claro);
  margin: 0 0 .35rem;
}

.vd-kpi-valor {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.1;
}

.vd-kpi-icono {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--vd-radio-sm);
  background: var(--vd-negro);
  color: var(--vd-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

/* ----------------------------------------------------------------- Filtros */
.vd-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  align-items: end;
}

.vd-campo {
  min-width: 0;
}

.vd-label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vd-gris);
  margin-bottom: .4rem;
}

.vd-input,
.vd-select {
  width: 100%;
  box-sizing: border-box;
  height: 2.65rem;
  padding: 0 .85rem;
  font-family: inherit;
  font-size: .92rem;
  color: var(--vd-tinta);
  background: var(--vd-blanco);
  border: 1px solid var(--vd-linea);
  border-radius: var(--vd-radio-sm);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.vd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236f6f6f' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.1rem;
}

.vd-input::placeholder {
  color: #bdbdbd;
}

.vd-input:focus,
.vd-select:focus {
  border-color: var(--vd-negro);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

/* ----------------------------------------------------------------- Botones */
.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.65rem;
  padding: 0 1.35rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vd-blanco);
  background: var(--vd-negro);
  border: 1px solid var(--vd-negro);
  border-radius: var(--vd-radio-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, opacity .18s;
}

.vd-btn:hover {
  background: var(--vd-blanco);
  color: var(--vd-negro);
}

.vd-btn:disabled {
  opacity: .5;
  cursor: default;
}

.vd-btn--ghost {
  color: var(--vd-negro);
  background: var(--vd-blanco);
}

.vd-btn--ghost:hover {
  background: var(--vd-negro);
  color: var(--vd-blanco);
}

.vd-btn--bloque {
  width: 100%;
}

.vd-btn--sm {
  height: 2.25rem;
  padding: 0 1rem;
  font-size: .66rem;
}

.vd-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

/* ----------------------------------------------------------------- Tablas */
.vd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.vd-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: .92rem;
}

table.vd-table thead th {
  background: var(--vd-negro);
  color: var(--vd-blanco);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  padding: .85rem 1rem;
  border: 0;
}

table.vd-table tbody td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--vd-linea-suave);
  vertical-align: middle;
  color: var(--vd-tinta);
}

table.vd-table tbody tr:hover {
  background: #fafafa;
}

table.vd-table tbody td strong {
  font-weight: 600;
}

.vd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vd-diff-pos {
  background: var(--vd-ok-fondo);
  color: var(--vd-ok-texto);
  font-weight: 600;
}

.vd-diff-neg {
  background: var(--vd-mal-fondo);
  color: var(--vd-mal-texto);
  font-weight: 600;
}

.vd-chip {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--vd-linea);
  color: var(--vd-gris);
  background: var(--vd-blanco);
}

.vd-chip--ok {
  color: var(--vd-ok-texto);
  background: var(--vd-ok-fondo);
  border-color: transparent;
}

.vd-chip--negro {
  color: var(--vd-blanco);
  background: var(--vd-negro);
  border-color: var(--vd-negro);
}

.vd-chip--mal {
  color: var(--vd-mal-texto);
  background: var(--vd-mal-fondo);
  border-color: transparent;
}

/* ------------------------------------------------------ Avisos y vacios */
.vd-aviso {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  line-height: 1.45;
  border-radius: var(--vd-radio-sm);
  padding: .8rem .95rem;
  margin: 0 0 1rem;
}

.vd-aviso--info {
  color: var(--vd-gris);
  background: #f7f7f8;
  border: 1px solid var(--vd-linea);
}

.vd-aviso--ok {
  color: var(--vd-ok-texto);
  background: var(--vd-ok-fondo);
  border: 1px solid rgba(27, 94, 32, .18);
}

.vd-aviso--error {
  color: var(--vd-mal-texto);
  background: var(--vd-mal-fondo);
  border: 1px solid rgba(179, 38, 30, .2);
}

.vd-vacio {
  padding: 2.5rem 1.35rem;
  text-align: center;
  color: var(--vd-gris-claro);
  font-size: .92rem;
}

/* ---------------------------------------------------------------- Spinner */
.vd-relativo {
  position: relative;
}

.vd-spinner {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  background: rgba(255, 255, 255, .8);
  border-radius: var(--vd-radio);
}

.vd-spinner.activo {
  display: flex;
}

.vd-spinner-aro {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--vd-linea);
  border-top-color: var(--vd-negro);
  border-radius: 50%;
  animation: vd-girar .7s linear infinite;
}

.vd-spinner-texto {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-gris);
}

@keyframes vd-girar {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------- DataTables: mismo lenguaje */
.dataTables_wrapper {
  padding: 0 1.35rem 1.1rem;
  font-size: .85rem;
  color: var(--vd-gris);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding-top: 1.1rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 2.1rem;
  padding: 0 .55rem;
  margin: 0 .35rem;
  border: 1px solid var(--vd-linea);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}

.dataTables_wrapper .dataTables_info {
  font-size: .78rem;
  color: var(--vd-gris-claro);
  padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: .35rem .7rem !important;
  margin-left: .25rem;
  border: 1px solid var(--vd-linea) !important;
  border-radius: 8px !important;
  background: var(--vd-blanco) !important;
  color: var(--vd-tinta) !important;
  font-size: .8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--vd-negro) !important;
  border-color: var(--vd-negro) !important;
  color: var(--vd-blanco) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4;
}

.dataTables_wrapper .dataTables_processing {
  background: var(--vd-negro) !important;
  color: var(--vd-blanco) !important;
  border: 0 !important;
  border-radius: var(--vd-radio-sm);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

table.vd-table thead th.sorting,
table.vd-table thead th.sorting_asc,
table.vd-table thead th.sorting_desc {
  cursor: pointer;
}

table.vd-table thead th.sorting_asc,
table.vd-table thead th.sorting_desc {
  background: #1f1f1f;
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 767.98px) {
  .vd-head {
    align-items: flex-start;
  }

  .vd-head-meta {
    text-align: left;
  }

  .vd-filtros {
    grid-template-columns: 1fr;
  }

  .vd-btn {
    width: 100%;
  }

  .vd-acciones {
    flex-direction: column;
  }

  table.vd-table {
    font-size: .86rem;
    min-width: 640px;
  }

  .vd-kpi-valor {
    font-size: 1.3rem;
  }
}

/* ======================================================================
   Carga: skeletons para la primera pintada, barra fina para refrescos
   ---------------------------------------------------------------------- */

/* Barra indeterminada pegada al borde superior de la tarjeta. Para refrescos:
   no tapa los datos que ya estan en pantalla. */
.vd-barra-carga {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  background: var(--vd-linea-suave);
  border-radius: var(--vd-radio) var(--vd-radio) 0 0;
  display: none;
}

.vd-barra-carga.activo {
  display: block;
}

.vd-barra-carga::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  background: var(--vd-negro);
  animation: vd-desliza 1.1s ease-in-out infinite;
}

@keyframes vd-desliza {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(320%);
  }
}

/* Skeleton: imita la forma final del contenido, sin saltos de layout */
.vd-skel {
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size: 400% 100%;
  animation: vd-brillo 1.3s ease-in-out infinite;
  border-radius: 6px;
  height: .85rem;
}

@keyframes vd-brillo {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.vd-skel-tabla {
  padding: 0;
}

.vd-skel-tabla-head {
  display: flex;
  gap: 1.5rem;
  background: var(--vd-negro);
  padding: .9rem 1rem;
}

.vd-skel-tabla-head .vd-skel {
  height: .6rem;
  flex: 1;
  background: rgba(255, 255, 255, .22);
  animation: none;
}

.vd-skel-fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .95rem 1rem;
  border-top: 1px solid var(--vd-linea-suave);
}

.vd-skel-fila .vd-skel {
  flex: 1;
}

.vd-skel-fila .vd-skel:first-child {
  flex: 1.6;
}

/* Escalona el brillo para que no parpadeen todas las filas a la vez */
.vd-skel-fila:nth-child(2) .vd-skel { animation-delay: .06s; }
.vd-skel-fila:nth-child(3) .vd-skel { animation-delay: .12s; }
.vd-skel-fila:nth-child(4) .vd-skel { animation-delay: .18s; }
.vd-skel-fila:nth-child(5) .vd-skel { animation-delay: .24s; }
.vd-skel-fila:nth-child(6) .vd-skel { animation-delay: .30s; }
.vd-skel-fila:nth-child(7) .vd-skel { animation-delay: .36s; }

.vd-skel-kpi {
  height: 1.5rem;
  width: 55%;
}

.vd-oculto {
  display: none !important;
}

/* ======================================================================
   DataTables: paginado propio
   ----------------------------------------------------------------------
   Se usa DataTables "pelado" (sin la integracion de Bootstrap 5) porque el
   CSS de .pagination / .page-item de soft-ui-dashboard.css se peleaba con
   ella y dejaba el paginado descuadrado. Todo el estilo sale de aqui.
   ---------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  justify-content: flex-end;
  padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: #f2f2f2 !important;
  border-color: #d8d8d8 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  cursor: default;
  color: var(--vd-gris-claro) !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 .35rem;
  color: var(--vd-gris-claro);
}

/* Indicadores de orden dibujados en CSS (la version pelada los trae como
   imagenes de su propio CDN, que no cargamos) */
table.vd-table thead th.sorting,
table.vd-table thead th.sorting_asc,
table.vd-table thead th.sorting_desc {
  position: relative;
  padding-right: 1.9rem;
}

table.vd-table thead th.sorting::after,
table.vd-table thead th.sorting_asc::after,
table.vd-table thead th.sorting_desc::after {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .6rem;
  opacity: .45;
  content: '\2195';
}

table.vd-table thead th.sorting_asc::after {
  content: '\2191';
  opacity: 1;
}

table.vd-table thead th.sorting_desc::after {
  content: '\2193';
  opacity: 1;
}

.dataTables_wrapper .dataTables_empty {
  padding: 2.5rem 1rem !important;
  text-align: center;
  color: var(--vd-gris-claro);
}

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_paginate {
    justify-content: center;
  }
}

/* ======================================================================
   Navegacion entre modulos
   ----------------------------------------------------------------------
   Cada modulo es una carga de pagina completa. Con el servidor respondiendo
   en unos cientos de ms, lo que se sentia "lento" era la falta de respuesta
   inmediata al hacer clic: la barra y el estado activo optimista dan
   retroalimentacion en el instante del clic.
   ---------------------------------------------------------------------- */

#vd-nav-progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--vd-negro);
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  z-index: 9999;
  opacity: 0;
  transition: width .25s ease-out, opacity .2s;
  pointer-events: none;
}

#vd-nav-progreso.activo {
  opacity: 1;
}

/* El item del menu al que se va se marca al instante, sin esperar al servidor */
.sidenav .nav-link.vd-cargando {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  border-radius: .5rem;
}

.sidenav .nav-link.vd-cargando .nav-link-text {
  font-weight: 600;
}

/* Suaviza la aparicion del contenido en cada carga */
main.main-content > .container-fluid {
  animation: vd-entrada .22s ease-out;
}

@keyframes vd-entrada {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  main.main-content > .container-fluid {
    animation: none;
  }

  .vd-skel,
  .vd-barra-carga::after,
  .vd-spinner-aro {
    animation: none;
  }
}

/* ======================================================================
   Responsive
   ---------------------------------------------------------------------- */

/* Nada debe provocar scroll horizontal de la pagina */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tablet: los filtros en dos columnas antes de colapsar a una */
@media (min-width: 576px) and (max-width: 991.98px) {
  .vd-filtros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {

  /* El span 2 en linea de la tarjeta "Por sucursal" rompe la rejilla estrecha */
  .vd-kpi[style*="span 2"] {
    grid-column: auto !important;
  }
}

@media (max-width: 575.98px) {
  .vd-filtros {
    grid-template-columns: 1fr;
  }

  .vd-kpis {
    grid-template-columns: 1fr;
  }

  .vd-page {
    padding-top: 1rem;
  }

  .vd-card-body {
    padding: 1rem;
  }

  .vd-card-head {
    padding: 1rem;
    align-items: flex-start;
    flex-direction: column;
  }

  .vd-head h1 {
    font-size: .9rem;
    letter-spacing: .12em;
  }

  .vd-head-logo {
    width: 32px;
    height: 32px;
  }

  .vd-kpi {
    padding: 1rem;
  }

  .vd-acciones {
    width: 100%;
  }

  .vd-acciones .vd-btn {
    width: 100%;
  }
}

/* Tablas anchas: mejor scroll horizontal que columnas apretujadas.
   .vd-table--ancha es para las tablas de muchas columnas (tallas). */
@media (max-width: 1199.98px) {
  table.vd-table--ancha {
    min-width: 1150px;
  }
}

@media (max-width: 991.98px) {
  table.vd-table {
    min-width: 780px;
  }
}

/* El scroll horizontal de la tabla debe ser evidente en tactil */
.vd-table-wrap {
  scrollbar-width: thin;
}

.vd-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.vd-table-wrap::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 4px;
}

/* Controles de DataTables apilados en movil */
@media (max-width: 767.98px) {
  .dataTables_wrapper {
    padding: 0 1rem 1rem;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_length {
    padding-bottom: .5rem;
  }
}

/* Requisiciones: el panel de lista no debe comerse la pantalla en movil */
@media (max-width: 991.98px) {
  .req-list {
    max-height: 40vh;
  }
}

/* ======================================================================
   Encabezados: soft-ui pinta h1..h6 con su azul corporativo (#344767) y esa
   regla le gana a la herencia de color del contenedor. Dentro de los
   componentes del sistema el titulo debe heredar: negro sobre fondo claro y
   blanco sobre los paneles negros (marca del login, banda del perfil).
   ---------------------------------------------------------------------- */
.vd-head h1,
.vd-head h2,
.vd-card-head h2,
.vd-card-head h3,
.vd-kpi-valor,
.gk-marca h1,
.gk-form h2,
.perfil-banda h4,
.content-req .header h3 {
  color: inherit;
}

/* ======================================================================
   Menu lateral: blanco y negro
   ----------------------------------------------------------------------
   soft-ui pinta el cuadro de icono del item activo con su degradado primario
   (rosa/morado) y tinta los iconos con su azul. Aqui se fuerza la paleta de
   la marca: cuadro blanco con icono negro, e invertido en el item activo.
   ---------------------------------------------------------------------- */

.sidenav .nav-link .icon {
  background-image: none !important;
  background-color: var(--vd-blanco) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
}

.sidenav .nav-link .icon i {
  color: var(--vd-tinta) !important;
}

.sidenav .nav-link.active,
.sidenav .nav-link.vd-cargando {
  background-color: var(--vd-blanco) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .09) !important;
}

.sidenav .nav-link.active .nav-link-text {
  font-weight: 700;
}

.sidenav .nav-link.active .icon,
.sidenav .nav-link.vd-cargando .icon {
  background-color: var(--vd-negro) !important;
}

.sidenav .nav-link.active .icon i,
.sidenav .nav-link.vd-cargando .icon i {
  color: var(--vd-blanco) !important;
}

/* Tarjeta de soporte del pie: negra, no el degradado morado del template */
#sidenavCard {
  background-color: var(--vd-negro) !important;
  background-image: none !important;
}

#sidenavCard .full-background {
  display: none;
}

#sidenavCard .icon {
  background-color: var(--vd-blanco) !important;
}

#sidenavCard #sidenavCardIcon {
  color: var(--vd-negro) !important;
}

/* Tablas de reporte: una fila por registro, sin partir el texto. El ancho
   extra se resuelve con el scroll horizontal del contenedor; partir el texto
   triplicaba la altura de las filas (con 14 columnas era ilegible). */
table.vd-table thead th,
table.vd-table tbody td,
table.vd-table tfoot td {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Modal */
/* Para las confirmaciones que un confirm() del navegador no sabe explicar:
   ahi solo cabe una linea sin formato y el usuario dice que si sin leerla. */
.vd-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(19, 19, 19, .45);
  backdrop-filter: blur(2px);
  animation: vd-modal-fondo .16s ease-out;
}

.vd-modal[hidden] {
  display: none;
}

.vd-modal-caja {
  width: min(30rem, 100%);
  background: var(--vd-blanco);
  border-radius: var(--vd-radio);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  padding: 1.6rem;
  animation: vd-modal-caja .18s ease-out;
}

.vd-modal-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  margin-bottom: .9rem;
  font-size: 1.05rem;
  color: var(--vd-mal-texto);
  background: var(--vd-mal-fondo);
}

.vd-modal-titulo {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vd-tinta);
  margin: 0 0 .6rem;
}

.vd-modal-texto {
  font-size: .87rem;
  line-height: 1.55;
  color: var(--vd-gris);
  margin: 0 0 .7rem;
}

.vd-modal-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.1rem;
}

@keyframes vd-modal-fondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vd-modal-caja {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Analisis de Basicos (.gn-)
   --------------------------------------------------------------------------
   Prefijo propio porque son piezas que solo existen en este modulo: la matriz
   talla x color y la pantalla de gestion de referencias. Los colores de la
   leyenda son los MISMOS que pinta el Excel (apps/guia_nos/excel.py); si
   cambias uno, cambia el otro.
   ========================================================================== */
:root {
  --gn-gris: #d9d9d9;
  --gn-celeste: #bdd7ee;
  --gn-ambar: #ffe699;
  --gn-rojo: #ffc7ce;
}

/* ------------------------------------------------------------- Filtros */
.gn-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}

.gn-grupo {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.gn-grupo legend {
  float: none;
  width: auto;
  margin-bottom: .5rem;
}

.gn-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  margin-bottom: .3rem;
  cursor: pointer;
}

.gn-nota {
  font-size: .76rem;
  color: var(--vd-gris-claro);
  margin: .4rem 0 0;
}

.gn-fechas {
  display: flex;
  gap: .5rem;
}

.gn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}

.gn-chips .vd-chip {
  cursor: pointer;
}

.gn-botones {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}

/* ------------------------------------------------------------- Leyenda */
.gn-leyenda {
  gap: .9rem;
  font-size: .74rem;
  color: var(--vd-gris);
}

.gn-muestra {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 3px;
  border: 1px solid var(--vd-linea);
  vertical-align: -1px;
  margin-right: .25rem;
}

.gn-muestra--gris    { background: var(--gn-gris); }
.gn-muestra--celeste { background: var(--gn-celeste); }
.gn-muestra--ambar   { background: var(--gn-ambar); }
.gn-muestra--rojo    { background: var(--gn-rojo); }

/* --------------------------------------------------------- Vista previa */
.gn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}

.gn-tabs .vd-chip {
  cursor: pointer;
}

.gn-grupo-titulo {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vd-gris);
  margin: 1.5rem 0 .6rem;
}

.gn-bloque {
  border: 1px solid var(--vd-linea);
  border-radius: var(--vd-radio-sm);
  margin-bottom: 1rem;
  overflow: hidden;
}

.gn-bloque-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  background: var(--vd-linea-suave);
}

.gn-bloque-head h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

.gn-bloque-tot {
  font-size: .78rem;
  color: var(--vd-gris);
}

table.gn-matriz {
  font-size: .8rem;
}

table.gn-matriz td,
table.gn-matriz th {
  white-space: nowrap;
}

/* La venta va en negro y el stock debajo en gris: dos numeros por celda sin
   duplicar el ancho de la tabla. */
.gn-v {
  display: block;
  font-weight: 700;
  line-height: 1.1;
}

.gn-s {
  display: block;
  font-size: .72rem;
  color: var(--vd-gris-claro);
  line-height: 1.1;
}

/* Para que se lea cual de los dos numeros es cual: la leyenda con una celda de
   muestra y los totales del bloque usan los mismos estilos que la celda. */
.gn-v-texto {
  font-weight: 700;
  color: var(--vd-negro);
}

.gn-s-texto {
  color: var(--vd-gris-claro);
}

.gn-leyenda-celda {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.15;
}

.gn-muestra-celda {
  display: inline-block;
  min-width: 2.2rem;
  padding: .2rem .45rem;
  font-size: .85rem;
  border: 1px solid var(--vd-linea);
  border-radius: 3px;
  text-align: right;
  background: var(--vd-blanco);
}

.gn-extra {
  background: var(--gn-celeste) !important;
}

.gn-bloqueada {
  background: var(--gn-gris);
}

.gn-fila-roja td:nth-child(-n+4)  { background: var(--gn-rojo); }
.gn-fila-ambar td:nth-child(-n+4) { background: var(--gn-ambar); }

table.gn-matriz tfoot td {
  font-weight: 700;
  background: var(--vd-linea-suave);
}

/* ------------------------------------------- Gestion de referencias */
.gn-columnas {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

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

.gn-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem;
}

.gn-lista a {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .38rem .55rem;
  border-radius: var(--vd-radio-sm);
  color: var(--vd-tinta);
  font-size: .88rem;
}

.gn-lista a:hover {
  background: var(--vd-linea-suave);
}

.gn-lista a.gn-activo {
  background: var(--vd-negro);
  color: var(--vd-blanco);
}

.gn-contador {
  font-size: .72rem;
  opacity: .6;
}

.gn-detalle {
  border-top: 1px solid var(--vd-linea);
  padding-top: .75rem;
  margin-top: .75rem;
}

.gn-detalle summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
}

.gn-form {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .75rem;
}

.gn-form--fila {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.gn-crece {
  flex: 1 1 240px;
}

.gn-resultados {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: .5rem 0;
  max-height: 260px;
  overflow-y: auto;
}

.gn-resultado {
  text-align: left;
  background: var(--vd-blanco);
  border: 1px solid var(--vd-linea);
  border-radius: var(--vd-radio-sm);
  padding: .45rem .6rem;
  font-size: .85rem;
  cursor: pointer;
}

.gn-resultado:hover {
  border-color: var(--vd-negro);
}

.gn-resultado span {
  display: block;
  font-size: .74rem;
  color: var(--vd-gris-claro);
}

.gn-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-bottom: .75rem;
}

.gn-opciones .gn-check {
  margin-bottom: 0;
}

.gn-borrar {
  background: none;
  border: 0;
  color: var(--vd-gris-claro);
  cursor: pointer;
}

.gn-borrar:hover {
  color: var(--vd-mal-texto);
}

/* -------------------------------------------------- Reordenar arrastrando */
/* El orden de las filas es el del Excel, asi que se edita donde se ve: en la
   tabla misma. El asa es la unica zona arrastrable para no estorbar la
   seleccion de texto ni los botones de la fila. */
.gn-col-arrastre {
  width: 2.2rem;
}

.gn-arrastre {
  color: var(--vd-linea);
  cursor: grab;
  text-align: center;
  user-select: none;
}

tr.gn-fila:hover .gn-arrastre {
  color: var(--vd-gris-claro);
}

tr.gn-fila[draggable='true'] .gn-arrastre {
  cursor: grabbing;
  color: var(--vd-negro);
}

tr.gn-arrastrando {
  opacity: .45;
  background: var(--vd-linea-suave);
}

.gn-nota--accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

/* ------------------------------------------------------- Loader de pagina */
/* El reporte tarda ~4 s contra ICG y el envio del formulario es una navegacion
   normal: sin esto la pantalla se queda quieta y parece que no paso nada.
   Va fijo sobre toda la ventana, no dentro de una tarjeta como .vd-spinner. */
.gn-cargando {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .9rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(2px);
}

.gn-cargando.activo {
  display: flex;
}

.gn-cargando-titulo {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-tinta);
}

.gn-cargando-nota {
  font-size: .8rem;
  color: var(--vd-gris);
  max-width: 22rem;
  text-align: center;
  line-height: 1.5;
}

/* Barra indeterminada: no se puede mostrar progreso real, pero deja claro que
   algo sigue corriendo. */
.gn-cargando-barra {
  position: relative;
  width: 12rem;
  height: 2px;
  overflow: hidden;
  background: var(--vd-linea);
  border-radius: 2px;
}

.gn-cargando-barra::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  background: var(--vd-negro);
  animation: vd-desliza 1.1s ease-in-out infinite;
}

/* Botones del formulario mientras se genera */
.vd-btn[disabled] {
  opacity: .55;
  cursor: progress;
}

/* ------------------------------------------------- Auditoria de referencias */
/* Cada referencia rota es un <details> que se abre sobre si mismo: la lista
   entera tiene que caber en una pantalla, porque se trabaja de arriba abajo. */
.gn-caso {
  border: 1px solid var(--vd-linea);
  border-left: 3px solid var(--gn-rojo);
  border-radius: var(--vd-radio-sm);
  margin-bottom: .5rem;
  background: var(--vd-blanco);
}

.gn-caso > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
}

.gn-caso > summary::-webkit-details-marker {
  display: none;
}

.gn-caso[open] > summary {
  border-bottom: 1px solid var(--vd-linea-suave);
}

.gn-caso-code {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gn-caso-desc {
  color: var(--vd-gris);
  font-size: .9rem;
}

.gn-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-left: auto;
}

.gn-etiqueta {
  padding: .1rem .5rem;
  font-size: .72rem;
  color: var(--vd-gris);
  background: var(--vd-linea-suave);
  border-radius: 999px;
  white-space: nowrap;
}

.gn-caso-cuerpo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  padding: .9rem;
}

@media (max-width: 900px) {
  .gn-caso-cuerpo {
    grid-template-columns: 1fr;
  }
}

/* El formulario de reemplazo ocupa la fila entera: lleva el mapa de colores,
   que crece con cuantos colores pida la guia. */
.gn-form-reemplazo {
  grid-column: 1 / -1;
  padding: .8rem;
  background: var(--vd-fondo);
  border-radius: var(--vd-radio-sm);
}

.gn-acciones-caso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}

.gn-acciones-caso .gn-buscar-manual {
  flex: 1 1 16rem;
  width: auto;
  height: 2.2rem;
  font-size: .85rem;
}

.gn-candidatos {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 300px;
  overflow-y: auto;
}

.gn-candidatos .gn-resultado {
  width: 100%;
}

.gn-elegido {
  margin: .2rem 0 .6rem;
  font-size: .88rem;
}

.gn-mapa-colores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-bottom: .7rem;
}

.gn-mapa-linea {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
}

.gn-mapa-viejo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.gn-mapa-linea i {
  color: var(--vd-gris-claro);
  font-size: .7rem;
}

.gn-lista-filas {
  margin: 0 0 .7rem;
  padding-left: 1.1rem;
  font-size: .83rem;
  color: var(--vd-gris);
}

.gn-lista-filas li {
  margin-bottom: .15rem;
}

/* Select corto, para los que viven dentro de una celda o de una linea de
   mapeo y no deben estirarse al ancho de la columna. */
.vd-select--mini {
  width: auto;
  min-width: 7rem;
  height: 2.1rem;
  padding: 0 1.9rem 0 .6rem;
  font-size: .85rem;
}

.gn-form-color {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* El KPI de referencias inexistentes es un enlace a la pantalla de correccion:
   no debe verse distinto a los demas KPIs. */
a.vd-kpi {
  color: inherit;
  text-decoration: none;
}

a.vd-kpi:hover {
  border-color: var(--vd-negro);
}

.gn-acciones-fila {
  display: flex;
  justify-content: flex-end;
  gap: .2rem;
}

.gn-fila-edicion > td {
  background: var(--vd-fondo);
}