/* --- inicio del css --- */

/* personalizados.css */

.card {
  margin-top: 20px;
  max-width: 400px;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  padding: 20px; /* Agregar espacio interno */
}

.card-header {
  background-color: transparent;
  color: #000;
  font-weight: bold;
  border: none;
}

.card-body {
  padding: 20px;
  background-color: transparent;
}

.form-group {
  margin-bottom: 1.5rem; /* Aumentar el espacio entre grupos */
}

.form-label {
  font-weight: bold;
}

.form-control {
  padding: 0.5rem;
  width: 100%;
  border: 2px solid black; /* Establece los bordes en negro */
  border-radius: 4px;
  background-color: transparent;
  color: #000;
  outline: none; /* Elimina el contorno al enfocar el campo */
  transition: none; /* Elimina cualquier transición para los campos */
}

.form-control:focus {
  box-shadow: none; /* Elimina la sombra al enfocar */
}

.transparent-input {
  border-bottom: 1px solid #000;
}

.btn-primary {
  background-color: transparent;
  color: rgb(109 118 126) !important;
  padding: 0.5rem 1rem;
  border: 1px solid white;
  border-radius: 4px;
  cursor: pointer;
}

.btn-green {
  background-color: #0BBE00;
  color: #000;
}

.transparent-card {
  margin-top: 9%;
  width: 400px; /* Determina el ancho del recuadro */
  height: 404px;
  margin-left: auto; /* Mueve el recuadro hacia la derecha */
  margin-right: 0; /* Agrega un margen en el lado derecho para mayor desplazamiento */
  border: 2px solid black; /* Borde negro */
  border-radius: 2.25rem !important;
  padding: 20px;
}

.card-header {
  background-color: transparent;
  color: #000;
  font-weight: bold;
  border: none;
}

.card-body {
  padding: 20px;
  background-color: transparent;
}

.btn-custom {
  background-color: black; /* Fondo negro */
  color: white; /* Texto blanco */
  padding: 12px 24px; /* Aumenta el padding para hacerlo más largo */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none; /* Elimina los efectos de texto */
}

.btn-custom:hover {
  background-color: black; /* Cambia de color en hover */
  color: white;
}

.form-label {
  font-weight: normal; /* Cambia el peso de la fuente a normal */
  font-size: 14px; /* Ajusta el tamaño de la fuente según sea necesario */
  color: #066d8e; /* Cambia el color del texto a un tono más suave, por ejemplo, gris */
}

.checkbox input[type="checkbox"] {
  appearance: none; /* Elimina los estilos predeterminados del checkbox */
  -webkit-appearance: none; /* Para navegadores webkit como Chrome y Safari */
  -moz-appearance: none; /* Para Firefox */
  width: 16px; /* Ajusta el ancho del checkbox */
  height: 16px; /* Ajusta la altura del checkbox */
  border: 2px solid #066d8e; /* Añade un borde alrededor del checkbox */
  border-radius: 4px; /* Hace que el checkbox sea redondeado */
}

.checkbox input[type="checkbox"]:checked {
  background-color: #777; /* Cambia el fondo del checkbox cuando está marcado */
}

.checkbox input[type="checkbox"] + label {
  margin-left: 8px; /* Agrega un margen entre el checkbox y el texto */
  font-weight: normal; /* Cambia el peso de la fuente a normal */
}

.btn-custom {
  background-color: black; /* Color de fondo */
  color: white; /* Color del texto */
  padding: 8px 16px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cursor al posicionarse sobre el botón */
  width: 300px; /* Ancho deseado para el botón, puedes ajustar el valor según tu preferencia */
}

#reset, #ing {
  text-align: center; /* Centra el contenido dentro de form-group */
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%; /* Ajusta el ancho deseado para la imagen de fondo */
  height: 100%;
  z-index: -1; /* Coloca la imagen detrás del contenido */
}

.nav-item .nav-link {
    transition: background-color 0.3s ease;
    color: #8958ef;
}
.nav-item .nav-link:hover {
    background-color: #e0e0e0; /* Color gris para el efecto hover */
    color: black; /* Aseguramos que el texto siga siendo negro */
}

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
}

.card-custom-body {
  padding: 30px;
}

.profile-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.btn-custom {
  background-color: #066d8e;
  border: none;
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.btn-custom:hover {
  background-color: #0056b3;
}

#rect {
  font-size: 16px;
  font-weight: bold;
  color: #232323;
  background-color: #d9d9d9;
  padding: 15px 0 9px 0;
  text-align: center;
}
.nav-link {
  color: black;
  text-decoration: none;
  transition: all 0.3s;
}

.nav-link:hover {
  color: #007BFF;
}

.nav-item {
  padding: 10px 0;
}

.sidebar {
  background-color: #f8f9fa;
  border-right: 2px solid #007BFF;
}

.sidebar-sticky {
  padding-top: 20px;
}

.nav-item.active {
  background-color: #007BFF;
  color: white;
}


body, html {
  height: 100%;
  margin: 0;
}

/* .chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chat-box {
  flex-grow: 1;
  background-color: #f9f9f9;
  padding: 20px;
  overflow-y: auto;
}

.message {
  background-color: #f0f0f0;
  color: #333;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.sent {
  background-color: #dcf8c6;
}

.received {
  background-color: #ece5dd;
}

#message-input {
  width: calc(100% - 65px);
  padding: 10px;
  border: none;
  border-top: 1px solid #ccc;
}

#send-button {
  width: 60px;
  padding: 10px;
  background-color: #128C7E;
  color: white;
  border: none;
  border-radius: 5px;
}

body {
  background-color: #f8f9fa;
} */

/* .chat-container {
  display: flex;
  flex-direction: column;
}

.chat-box {
  overflow-y: auto;
  padding: 10px;
}

.message {
  margin: 10px 0;
  padding: 8px 15px;
  border-radius: 8px;
  width: fit-content;
  max-width: 70%;
  line-height: 1.4;
  clear: both;
}

.message.received {
  background-color: #ffffff;
  align-self: flex-start;
  border-radius: 8px 8px 8px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message.sent {
  background-color: #dcf8c6;
  align-self: flex-end;
  border-radius: 8px 8px 0 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
} */


#mainNavbar.login-route {
  background-color: #37323275 !important;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
}
.loading-text {
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
}
.loading-overlay img {
  width: 120px;
  height: 100px;
  animation: swing 1s ease-in-out infinite;
}

@keyframes swing {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(-10deg);
  }
  50% {
      transform: rotate(10deg);
  }
  100% {
      transform: rotate(0deg);
  }
}
.highlight {
    font-weight: bold;
}
.my-custom-table {
    /* background-color: #ffffff1f !important; */
    background-color: white !important;
}
td.updated::after {
    content: '✔';
    color: #232323 !important;
    margin-left: 5px;
    font-size: 14px;
}
.btn-success {
    background-color: #8958ef !important;
    border-color: transparent !important;
}
.container-flex {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.sidebarwith {
    width: 50%;
    padding: 20px;
    transition: width 0.3s;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 73px);
    margin: 73px 0 0 0;
}
.sidebarwith.collapsed {
    width: 50px;
}
.sidebarwith .btn-collapse {
    position: absolute;
    top: 10px;
    right: -40px;
    cursor: pointer;
    font-size: 1.5rem;
}
.template-area {
    width: 100%;
    min-height: 100px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    resize: vertical;
}
.template-select {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}
.content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    margin-right: 20px;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  color: #232323 !important;
}

.sidebar {
  width: 280px;
  background-color: #f1f3f4;
  padding: 16px;
  height: 100vh;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
  border: none !important;
  overflow: hidden !important;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.menu-item {
  margin-bottom: 1px;
}

.menu-item a {
  display: flex;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: #202124;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
}

.menu-item a:hover, .menu-item.active a {
  background-color: #e8eaed;
  color: black;
}

.menu-item i {
  margin-right: 15px;
  font-size: 20px;
  color: #5f6368;
}

.menu-item span {
  font-weight: 200;
}

.sidebar {
  height: 100vh;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar {
  -ms-overflow-style: none;
}

.sidebar {
  scrollbar-width: none;
}
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #8958ef;
  z-index: 1000;
  transition: width 1s;
}

.my-custom-table {
    background-color: rgba(95, 83, 53, 0.14);
    border-collapse: collapse;
}

.my-custom-table th,
.my-custom-table td {
    background-color: transparent;
    color: black;
    font-weight: 400;
}

.my-custom-table thead {
    background-color: rgba(95, 83, 53, 0.14) !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

.my-custom-table tbody tr:hover {
    background-color: rgba(95, 83, 53, 0.1);
}

body {
    font-family: 'Inter', sans-serif;
}

.dark-mode {
    background-color: #1e1e2f !important;
    color: #fff !important;
}

.dark-mode .card {
    background-color: #2a2a3c;
    color: #fff;
}

.dark-mode aside {
    background: linear-gradient(180deg, #6f42c1, #4c6ef5, #1fb6ff);
}

body:not(.dark-mode) {
    background-color: #e5e5e5;
    color: #212529;
}

.card {
    border-radius: 12px;
}

aside {
    transition: background 0.3s;
}
.chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
  background: linear-gradient(135deg, #6f42c1, #1fb6ff) !important;
  border: none;
  color: white;
  padding: 0 !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.chat-window {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 280px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: none;
    overflow: hidden;
}

.chat-window.dark-mode {
    background-color: #2a2a3c;
    color: #fff;
}

.chat-header {
    padding: 10px;
    background-color: #1fb6ff;
    color: white;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body {
    padding: 12px;
    font-size: 0.9rem;
}

.chat-input {
    border-top: 1px solid #ddd;
    padding: 10px;
}

.chat-input textarea {
    width: 100%;
    height: 60px;
    resize: none;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid #ccc;
}

.chat-input button {
    margin-top: 6px;
    width: 100%;
    background: linear-gradient(to right, #6f42c1, #4c6ef5, #1fb6ff);
    border: none;
    color: white;
    padding: 8px;
    border-radius: 8px;
}
    .panel-dark {
    background-color: #2a2a3c !important;
    color: #fff !important;
    border-color: #444 !important;
}

.panel-dark table thead {
    background-color: #3a3a4c !important;
}

.panel-dark .btn-outline-primary {
    border-color: #1fb6ff;
    color: #1fb6ff;
}

.panel-dark .btn-outline-danger {
    border-color: #f44336;
    color: #f44336;
}

.panel-dark .btn-outline-primary:hover {
    background-color: #1fb6ff;
    color: #fff;
}

.panel-dark .btn-outline-danger:hover {
    background-color: #f44336;
    color: #fff;
}

.container-dashboard {
    max-width: 1400px;
    margin: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.dark-mode .list-group-item {
    background-color: #1e1e30;
    color: #fff;
    border-color: #2f2f3f;
}

.light-mode .list-group-item {
    background-color: #fff;
    color: #000;
}

.dark-mode .card-header {
    background-color: transparent;
    color: #ffffff;
    border-bottom: 1px solid #444;
}

.light-mode .producto-codigo {
    color: #6c757d; /* Bootstrap "text-muted" gris oscuro */
}

.dark-mode .producto-codigo {
    color: #ffffffb3; /* Blanco con opacidad */
}

.dark-mode .dark-mode-card {
    background-color: #1e1e2e !important;
    color: #fff !important;
}

.dark-mode .producto-codigo {
    color: #ccc !important;
}

/* Adaptar bordes a modo oscuro o claro */
.card-mode {
    border: 1px solid transparent;
}
.light-mode .card-mode {
    border-color: #00000033;
}
.dark-mode .card-mode {
    border-color: #ffffff33;
}

/* Código de producto visible en ambos modos */
.light-mode .producto-codigo {
    color: #6c757d;
}
.dark-mode .producto-codigo {
    color: #f0f0f0;
}

.card-equal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-mode {
    border: 1px solid transparent;
}

.light-mode .card-mode {
    border-color: #00000033;
}

.dark-mode .card-mode {
    border-color: #ffffff33;
}

.producto-codigo {
    color: var(--bs-body-color, #333);
}
.dark-mode .producto-codigo {
    color: #ccc;
}

.text-muted-adapt {
    color: #6c757d;
}
.dark-mode .text-muted-adapt {
    color: rgba(255, 255, 255, 0.5);
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image img {
  width: 120%;
  height: 113%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .background-image img {
    height: 100%;
    width: 125%;
  }
}

@media (min-width: 1201px) {
  .background-image img {
    height: 100%;
    width: 125%;
  }
}

.form-group {
    margin-bottom: 1rem;
}

.invalid-feedback {
    color: red;
    font-size: 0.9rem;
}

.sidebar-collapsed {
    width: 70px !important;
}

.sidebar-collapsed .link-text,
.sidebar-collapsed .logo {
    display: none !important;
}

.sidebar-collapsed .nav-link {
    text-align: center;
    padding: 0.75rem 0;
}

.dark-mode {
    background-color: #1a1a2e;
    color: #f0f0f0;
}

.dark-mode .card {
    background-color: #2a2a40;
    color: #ffffff;
    border: none;
    max-width: 100%;
}

.dark-mode .card-header {
    background-color: transparent;
    border-bottom: 1px solid #444;
}

.dark-mode .list-group-item {
    background-color: #1e1e30;
    color: #fff;
    border-color: #2f2f3f;
}

.dark-mode input,
.dark-mode .form-control {
    background-color: #2a2a3c;
    color: #fff;
    border: 1px solid #444;
}

.dark-mode .chat-window {
    background-color: #2b2b3c;
    color: #fff;
}

.container-dashboard {
    max-width: 1400px;
    margin: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.table td, .table th {
    vertical-align: middle;
}

.table-responsive {
    max-height: 100%;
}

.table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.card {
    border-radius: 14px;
}

.bg-dark .table-dark thead th {
    background-color: #2a2a3c;
}

body.dark-mode {
    background-color: #1a1a2e;
}

/* =========================
   Paleta base (modo claro)
   ========================= */
.vc-container{
  /* Colores base */
  --panel:   white;
  --panel2:  #f6f7fb;
  --text:    #0f172a;
  --muted:   black;
  --chip:    #eef2ff;

  /* Bond */
  --brand1:  #6f42c1; /* morado Bond */
  --brand2:  #0ea5e9; /* celeste Bond */

  /* Bordes Bond también en claro */
  --stroke:  #6f42c1;

  /* Layout */
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 16px;
  color: var(--text);
}

/* Utilidades */
.vc-muted{color:var(--muted)}
.vc-label{font-size:12px;color:var(--muted)}
.vc-right{text-align:right}

/* Chips y botones */
.vc-chip{
  display:inline-flex;gap:8px;align-items:center;
  background:var(--chip);
  border:1px solid var(--stroke);
  padding:8px 10px;border-radius:10px
}
.vc-btn{
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
  color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer
}
.vc-btn-sm{padding:6px 10px;border-radius:10px;font-size:13px}
.vc-btn-outline,.vc-btn-ghost{
  background:transparent;border:1px solid var(--stroke);color:var(--text)
}
.vc-btn-primary{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;border:0}

/* Toolbar */
.vc-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:16px}
.vc-toolbar-actions{display:flex;gap:8px}

/* Filtros */
.vc-filters{
  display:grid;grid-template-columns:repeat(12,1fr);gap:10px;
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:16px;padding:12px;box-shadow:0 8px 24px rgba(17,24,39,.08)
}
.vc-field{display:flex;flex-direction:column;gap:6px;grid-column:span 3}
.vc-sm{grid-column:span 2}
.vc-lg{grid-column:span 4}
.vc-controls{display:flex;gap:8px;align-items:end;grid-column:span 12;justify-content:flex-end}
.vc-input,.vc-select{
  appearance:none;background:var(--panel2);
  border:1px solid var(--stroke);color:var(--text);
  height:40px;border-radius:10px;padding:0 12px
}
/* Focus accesible (ambos modos) */
.vc-input:focus,.vc-select:focus{
  outline:2px solid var(--stroke);
  box-shadow:0 0 0 2px rgba(111,66,193,.18);
}

/* KPIs / Cards */
.vc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.vc-card{
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(17,24,39,.08)
}
.vc-kpi{display:flex;flex-direction:column;gap:6px}
.vc-val{font-size:22px;font-weight:700}
.vc-hint{color:var(--muted);font-size:12px}

/* Tabla */
.vc-table-card{
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(17,24,39,.08)
}
.vc-table-toolbar{
  display:flex;gap:8px;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--stroke)
}
.vc-table-wrap{overflow:auto;max-height:60vh}
.vc-table{width:100%;border-collapse:separate;border-spacing:0}
.vc-table thead th{
  position:sticky;top:0;background:linear-gradient(180deg,var(--panel),var(--panel2));
  color:var(--muted);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.4px;
  border-bottom:1px solid var(--stroke);padding:10px
}
.vc-table tbody td{padding:12px 10px;border-bottom:1px solid var(--stroke)}
.vc-table tbody tr{cursor:pointer}
.vc-table tbody tr:hover{background:rgba(96,165,250,.08)}

.vc-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:999px;font-size:12px;border:1px solid var(--stroke)
}
.vc-badge.paid{background:rgba(32,201,151,.12);color:#2dd4bf;border-color:rgba(32,201,151,.25)}
.vc-badge.pending{background:rgba(255,193,7,.15);color:#e0a800;border-color:rgba(255,193,7,.25)}
.vc-badge.void{background:rgba(255,107,107,.12);color:#ff6b6b;border-color:rgba(255,107,107,.25)}

/* Paginación */
.vc-pagination{display:flex;justify-content:flex-end;gap:6px;padding:10px;border-top:1px solid var(--stroke)}
.vc-page-btn{
  background:transparent;border:1px solid var(--stroke);
  color:var(--text);padding:6px 9px;border-radius:8px;cursor:pointer
}
.vc-page-btn[aria-current="page"]{background:var(--panel2)}

/* Drawer */
.vc-drawer{
  position:fixed;top:0;right:-460px;width:420px;height:100%;
  background:var(--panel);border-left:1px solid var(--stroke);
  box-shadow:-10px 0 30px rgba(0,0,0,.35);transition:right .35s ease;
  z-index:1080;display:flex;flex-direction:column
}
.vc-drawer.open{right:0}
.vc-d-head{
  padding:14px 16px;border-bottom:1px solid var(--stroke);
  display:flex;justify-content:space-between;align-items:center
}
.vc-d-body{padding:14px 16px;overflow:auto}
.vc-pill-group{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.vc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.vc-subtable{width:100%;margin-top:6px;border-collapse:separate;border-spacing:0}
.vc-subtable th,.vc-subtable td{padding:8px 6px;border-bottom:1px solid var(--stroke)}

/* Skeleton */
.vc-skel{
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);
  background-size:200% 100%;animation:vc-sk 1.2s linear infinite
}
@keyframes vc-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Responsive */
@media (max-width: 980px){
  .vc-filters{grid-template-columns:1fr 1fr}
  .vc-field,.vc-sm,.vc-lg{grid-column:span 1}
  .vc-stats{grid-template-columns:1fr 1fr}
  .vc-drawer{width:100%}
}

/* ===================================
   Overrides para modo oscuro estricto
   (usar clase .dark en .vc-container)
   =================================== */
.vc-container.dark{
  --panel:   #0e0f13;
  --panel2:  #0b0c10;
  --text:    #ffffff;
  --muted:   #cfd3e0;
  --chip:    #0b0c10;

  /* Bond en oscuro */
  --stroke:  #6f42c1;
  --brand1:  #6f42c1;
  --brand2:  #0ea5e9;
}

/* Refuerza bordes con Bond en dark */
.vc-container.dark .vc-filters,
.vc-container.dark .vc-card,
.vc-container.dark .vc-table-card,
.vc-container.dark .vc-drawer,
.vc-container.dark .vc-chip,
.vc-container.dark .vc-table thead th,
.vc-container.dark .vc-subtable th,
.vc-container.dark .vc-subtable td,
.vc-container.dark .vc-pagination,
.vc-container.dark .vc-table-toolbar{
  border-color: var(--stroke) !important;
}

/* Inputs/Selects dark + focus Bond */
.vc-container.dark .vc-input,
.vc-container.dark .vc-select{
  background: var(--panel2);
  border-color: var(--stroke);
  color: var(--text);
}
.vc-container.dark .vc-input:focus,
.vc-container.dark .vc-select:focus{
  outline: 2px solid var(--stroke);
  box-shadow: 0 0 0 2px rgba(111,66,193,.25);
}

/* Hover/encabezado tabla en dark */
.vc-container.dark .vc-table thead th{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  color: var(--muted);
}
.vc-container.dark .vc-table tbody tr:hover{
  background: rgba(14,165,233,.08);
}

/* Drawer en dark */
.vc-container.dark .vc-drawer{
  border-left-color: var(--stroke);
  background: var(--panel);
}

/* Skeleton dark */
.vc-container.dark .vc-skel{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* Badges en dark (bordes más visibles) */
.vc-container.dark .vc-badge.paid   { border-color: rgba(32,201,151,.35); }
.vc-container.dark .vc-badge.pending{ border-color: rgba(255,193,7,.35); }
.vc-container.dark .vc-badge.void   { border-color: rgba(255,107,107,.35); }

.bd{
--bond1:#6f42c1; --bond2:#0ea5e9;
--panel:#ffffff; --panel-2:#f6f7fb; --text:#0f172a; --muted:#6b7280;
--stroke:#6f42c1; /* bordes Bond en claro */
}
.bd.dark{
--panel:#0f1116; --panel-2:#131620; --text:#ffffff; --muted:#cfd3e0;
--stroke:#6f42c1; /* bordes Bond en oscuro también */
}

.bd .card.bd-card{border:1px solid var(--stroke); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 6px 22px rgba(0,0,0,.08)}
.bd .card-header{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border-bottom:1px solid var(--stroke)}
.bd .bd-muted{color:var(--muted)}
.bd .bd-pill{border:1px solid var(--stroke); padding:4px 8px; border-radius:999px; font-size:12px}

/* Tarjetas compactas con scroll optimizado */
.bd .bd-card-compact .card-body{padding:0.75rem !important; display:flex; flex-direction:column; height:100%}
.bd .bd-card-compact .card-title{font-size:0.95rem; margin-bottom:0}
.bd .bd-card-compact .bd-scroll{flex:1; overflow-y:auto; margin-top:0.5rem !important}
.bd .bd-card-compact .list-group-item{padding:0.4rem 0.5rem !important; font-size:0.85rem}
.bd .bd-card-compact .bd-dot{width:8px; height:8px; min-width:8px}
.bd .bd-card-compact .bd-badge{padding:2px 6px !important; font-size:9px !important}
.bd .bd-pill--warn{background:#fef3c7; border-color:#f59e0b; color:#92400e}
.bd .bd-pill--danger{background:#fee2e2; border-color:#ef4444; color:#991b1b}
.bd.dark .bd-pill--warn{background:#78350f; border-color:#f59e0b; color:#fef3c7}
.bd.dark .bd-pill--danger{background:#7f1d1d; border-color:#ef4444; color:#fee2e2}
.bd .bd-dot--warn{background:#f59e0b}
.bd .bd-dot--danger{background:#ef4444}
.bd .bd-badge--danger{background:#fee2e2; color:#991b1b; border:1px solid #ef4444}
.bd.dark .bd-badge--danger{background:#7f1d1d; color:#fee2e2; border-color:#ef4444}
.bd .bd-kpi{font-size:28px; font-weight:800}

/* Barras */
.bd .bd-bars{display:flex; align-items:flex-end; gap:10px; height:150px; position:relative; padding-bottom:4px}
.bd .bd-bars:before{ /* grid sutil */
content:""; position:absolute; inset:0 0 24px 0;
background:linear-gradient(to top, transparent 22px, rgba(0,0,0,.06) 23px, transparent 24px);
background-size:100% 24px; pointer-events:none; opacity:.35
}
.bd .bd-bars--mini{height:80px}
.bd .bd-bars__col{width:40px; text-align:center; white-space:nowrap; line-height:1}
.bd .bd-bars__bar{
height:var(--h,0px); border-radius:10px 10px 0 0; background:rgba(255,255,255,.8);
transition:height .25s ease;
}
.bd.dark .bd-bars__bar{background:#22d3ee}
.bd .bd-bars__bar--brand{background:linear-gradient(135deg,var(--bond1),var(--bond2))}

/* Top vendidos */
.bd .bd-item{background:var(--panel); border:0; border-bottom:1px solid rgba(0,0,0,.08)}
.bd.dark .bd-item{border-bottom:1px solid rgba(255,255,255,.08)}
.bd .bd-rank{min-width:28px; height:28px; border:1px solid var(--stroke); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700}
.bd .bd-progress{height:8px; border-radius:999px; border:1px solid var(--stroke); background:linear-gradient(90deg, rgba(111,66,193,.15), transparent); position:relative}
.bd .bd-progress::after{
content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct,0%);
background:linear-gradient(135deg,var(--bond1),var(--bond2)); border-radius:999px
}
.bd .bd-badge{border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; font-size:12px; display:inline-block}
.bd .bd-badge--ok{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35)}

/* Timeline & feed */
.bd .bd-timeline{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.bd .bd-dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; border:1px solid var(--stroke)}
.bd .bd-dot--ok{background:#22c55e}
.bd .bd-dot--info{background:#0ea5e9}
.bd .bd-feed{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.bd .bd-tag{border:1px solid var(--stroke); border-radius:6px; padding:2px 6px; font-size:12px; margin-right:6px}

/* Scroll & states */
.bd ::-webkit-scrollbar{height:6px; width:6px}
.bd ::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--bond1),var(--bond2)); border-radius:999px}

.bd .card.bd-card{
border: 2px solid var(--stroke) !important;
}
.bd .card.bd-card .card-header{
border-bottom: 2px solid var(--stroke) !important;
}
.bd .list-group-item{
border-color: var(--stroke) !important;
}

 .bd-item--critical{
    position: relative;
    border-left: 4px solid #dc3545;
    background: linear-gradient(90deg, rgba(220,53,69,.06), transparent 60%);
  }

  /* Puntito rojo que late */
  .bd-dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 0 rgba(220,53,69,.7);
    animation: bd-dot-ping 1.6s infinite;
    flex: 0 0 auto;
  }
  @keyframes bd-dot-ping{
    0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.7); transform: scale(1); }
    60%  { box-shadow: 0 0 0 10px rgba(220,53,69,0); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); transform: scale(1); }
  }

  /* Barra de progreso roja si es crítico */
  .bd-item--critical .bd-progress::after{
    background: #dc3545 !important;
  }

  /* Badge “Reponer” con pulso */
  .bd-badge--warn{
    animation: bd-warn-pulse 1.2s ease-in-out infinite;
  }
  @keyframes bd-warn-pulse{
    0%,100%{ transform: scale(1); }
    50%    { transform: scale(1.08); }
  }

  .bd{
    --bond1:#6f42c1; --bond2:#0ea5e9;
    --panel:#ffffff; --panel-2:#f6f7fb; --text:#0f172a; --muted:#6b7280;
    --stroke:#6f42c1;
  }
  .bd.dark{
    --panel:#0f1116; --panel-2:#131620; --text:#ffffff; --muted:#cfd3e0;
    --stroke:#6f42c1;
  }

  .bd .card.bd-card{
    border:1px solid var(--stroke);
    border-radius:16px;
    background:var(--panel);
    color:var(--text);
    box-shadow:0 6px 22px rgba(0,0,0,.08)
  }
  .bd .card-header{
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border-bottom:1px solid var(--stroke)
  }
  .bd .bd-muted{ color:var(--muted) }
  .bd .bd-pill{ border:1px solid var(--stroke); padding:4px 8px; border-radius:999px; font-size:12px }
  .bd .bd-kpi{ font-size:28px; font-weight:800 }

  .bd .bd-bars{ display:flex; align-items:flex-end; gap:10px; height:150px; position:relative; padding-bottom:4px }
  .bd .bd-bars:before{
    content:""; position:absolute; inset:0 0 24px 0;
    background:linear-gradient(to top, transparent 22px, rgba(0,0,0,.06) 23px, transparent 24px);
    background-size:100% 24px; pointer-events:none; opacity:.35
  }
  .bd .bd-bars--mini{ height:80px }
  .bd .bd-bars__col{ width:40px; text-align:center; white-space:nowrap; line-height:1 }
  .bd .bd-bars__bar{
    height:var(--h,0px); border-radius:10px 10px 0 0; background:rgba(255,255,255,.8);
    transition:height .25s ease;
  }
  .bd.dark .bd-bars__bar{ background:#22d3ee }
  .bd .bd-bars__bar--brand{ background:linear-gradient(135deg,var(--bond1),var(--bond2)) }

  .bd .bd-item{ background:var(--panel); border:0; border-bottom:1px solid rgba(0,0,0,.08) }
  .bd.dark .bd-item{ border-bottom:1px solid rgba(255,255,255,.08) }
  .bd .bd-rank{ min-width:28px; height:28px; border:1px solid var(--stroke); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700 }
  .bd .bd-progress{ height:8px; border-radius:999px; border:1px solid var(--stroke); background:linear-gradient(90deg, rgba(111,66,193,.15), transparent); position:relative }
  .bd .bd-progress::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct,0%);
    background:linear-gradient(135deg,var(--bond1),var(--bond2)); border-radius:999px
  }
  .bd .bd-badge{ border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; font-size:12px; display:inline-block }
  .bd .bd-badge--ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35) }

  .bd .bd-timeline{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
  .bd .bd-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; border:1px solid var(--stroke) }
  .bd .bd-dot--ok{ background:#22c55e } .bd .bd-dot--info{ background:#0ea5e9 }
  .bd .bd-feed{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0 }
  .bd .bd-tag{ border:1px solid var(--stroke); border-radius:6px; padding:2px 6px; font-size:12px; margin-right:6px }
  .bd-card { max-width: none; width: 100%; }
  .bd { overflow: visible; }

.footer-alert {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #28a745;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  z-index: 9999;
  pointer-events: none;          /* no interfiere con clics */
  opacity: 0;                    /* animación entrada/salida */
  transition: opacity .25s ease;
  max-width: 520px;              /* no ocupa todo el ancho */
  width: max-content;            /* se ajusta al contenido */
}
.footer-alert.show { opacity: 1; }

/* Estructura base para permitir scroll interno */
.bd-card{display:flex !important;flex-direction:column !important}
.bd-card .card-body{display:flex !important;flex-direction:column !important;min-height:0 !important}
.bd-scroll{flex:1 1 auto !important;overflow:auto !important}
.bd-scroll{scrollbar-gutter:stable !important}

/* Altura FIJA para TODAS las cards en desktop */
@media (min-width:992px){
  .bd-card{ height:250px !important }
  .bd-card .card-body{ min-height:0 !important }
}
/* Opcional: estética del scroll */
.bd-scroll{scrollbar-gutter:stable !important}
.vc-center{text-align:center}
.vc-icon-btn{
background:transparent;border:1px solid var(--stroke);
padding:4px 6px;border-radius:8px;cursor:pointer
}
.vc-row-check{width:16px;height:16px}
.vc-table tbody tr.selected{background: rgba(111,66,193,.12)}
  /* Subir el bloque completo un poco */
.vc-container {
  margin-top: -20px;
}
/* Achicar el scroll de la tabla */
.vc-table-wrap {
  max-height: 150px !important; /* antes debe estar en algo más alto */
  overflow-y: auto;
}

/* =========================
   Densidad "notebook +" (más grande)
   Para 1366×768 y 1280×800
   ========================= */
@media (max-width: 1366px) and (max-height: 820px),
       (max-width: 1280px) and (max-height: 820px) {

  /* 1) Tipografía y gutters globales (ligeramente más grande que antes) */
  html { font-size: 97%; } /* antes 93% */
  .row.g-3 { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }
  .bd.container-fluid { padding-left: .85rem !important; padding-right: .85rem !important; }

  /* 2) Sidebar compacta con iconos, pero no tan extrema */
  .sidebar { width: 84px !important; } /* antes 72px */
  .sidebar .logo, .sidebar .link-text { display: none !important; }
  .sidebar .nav-link { text-align: center; padding: .7rem 0; }
  .menu-item i { margin-right: 0; font-size: 19px; }

  /* 3) Cards y bloques */
  .card.bd-card { padding: 0 !important; border-width: 1px !important; }
  .card.bd-card .card-body { padding: .75rem .85rem !important; gap: .6rem !important; }
  .card.bd-card .card-header { padding: .6rem .85rem !important; }

  /* altura target para cards (fila de arriba e inferiores) */
  @media (min-width: 992px){
    .bd-card { height: 200px !important; } /* antes 180px */
  }

  /* 4) KPIs, barras y listas */
  .bd-kpi { font-size: 24px !important; }     /* antes 22px */
  .bd .bd-bars      { height: 110px !important; } /* antes 95px */
  .bd .bd-bars--mini{ height: 78px !important; }
  .bd .bd-bars__col small { font-size: .82rem; }

  .list-group-item { padding: .55rem .7rem !important; }
  .bd .bd-badge, .bd .bd-pill { padding: 3px 7px !important; font-size: 11.5px !important; }
  .bd .bd-rank { min-width: 24px; height: 24px; font-size: 12px; }

  /* 5) Tablas/scroll: mostrar un poco más de filas */
  .vc-table thead th { padding: 7px !important; font-size: .8rem !important; }
  .vc-table tbody td { padding: 8px !important; }
  .vc-table-wrap { max-height: 38vh !important; } /* antes ~32vh */

  /* 6) Formularios / botones un toque más cómodos */
  .form-group   { margin-bottom: .75rem !important; }
  .form-label   { font-size: .9rem !important; }
  .form-control { padding: .4rem .6rem !important; border-width: 1px !important; }
  .btn, .btn-custom, .vc-btn { padding: .5rem .75rem !important; font-size: .9rem !important; }

  /* 7) Componentes puntuales del dashboard */
  .transparent-card { width: 320px !important; height: 320px !important; margin-top: 4% !important; }

  /* 8) Imagen/hero de fondo */
  .background-image img { width: 112% !important; object-position: center; }

  /* 9) Títulos */
  .card-title { font-size: 1.06rem !important; margin-bottom: .1rem !important; }
}

/* PLUS si el alto es chico: comprimí apenas, pero menos que antes */
@media (max-height: 740px) {
  html { font-size: 95%; } /* antes 90% */
  .vc-table-wrap { max-height: 32vh !important; } /* antes 28vh */
  @media (min-width: 992px){ .bd-card { height: 185px !important; } } /* antes 165px */
}


/* Alto base (desktop) para la zona de tabla */
.vc-table-wrap{
  max-height: clamp(360px, 50vh, 68vh);  /* mucho más alto que antes */
  overflow-y: auto;
}

/* Modo “expansivo” manual (sumalo a la tabla que quieras) */
.vc-table-wrap.scroll-xl{
  max-height: clamp(480px, 62vh, 78vh);
}

/* Notebook “+” (1366×768 / 1280×800): subimos aún más */
@media (max-width: 1366px) and (max-height: 820px),
       (max-width: 1280px) and (max-height: 820px){
  .vc-table-wrap{ max-height: clamp(420px, 58vh, 75vh) !important; }
  .vc-table-wrap.scroll-xl{ max-height: clamp(520px, 62vh, 80vh) !important; }
}

/* Si el alto es chico, igual damos aire al scroll */
@media (max-height: 740px){
  .vc-table-wrap{ max-height: clamp(360px, 52vh, 70vh) !important; }
}