/* === Variables ENPEX === */
:root {
  --color-primario: #007bff;    /* Azul ENPEX */
  --color-secundario: #17a2b8;  /* Celeste */
  --color-fondo: #f4f6f9;       /* Fondo claro */
  --color-texto: #333;          /* Texto principal */
  --color-blanco: #fff;
  --color-footer: #e9ecef;
  --color-hover: #0056b3;
}

/* === Fondo general === */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* === Navbar === */
.main-header {
  background-color: var(--color-primario);
  border-bottom: 1px solid #004080;
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--color-blanco);
}
.navbar-dark .navbar-nav .nav-link:hover {
  background-color: var(--color-hover);
}

/* === Sidebar === */
.main-sidebar {
  background-color: var(--color-primario) !important;
}
.sidebar .nav-link {
  color: var(--color-blanco);
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background-color: var(--color-hover);
}
.sidebar .nav-icon {
  color: var(--color-blanco);
}

/* === Títulos === */
h1, h2, h3, h4, h5 {
  color: var(--color-texto);
}

/* === Tarjetas en dashboard === */
.small-box {
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.small-box .inner h3,
.small-box .inner p {
  color: var(--color-blanco);
}
.small-box-footer {
  background-color: rgba(0,0,0,0.1);
  color: var(--color-blanco);
}

/* === Footer === */
.main-footer {
  background-color: var(--color-footer);
  color: #666;
  border-top: 1px solid #ccc;
}

/* === Botones de DataTables y generales === */
button,
.btn {
  border-radius: 0.3rem;
}

/* === Escáner QR === */
#modalEscanerQR .modal-content {
  background-color: #000;
  padding: 10px;
  border-radius: 12px;
}
#modalEscanerQR video {
  border: 2px solid #00aaff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}

/* === Estilos Responsive === */
@media (max-width: 768px) {
  .modal-lg {
    max-width: 95%;
    margin: auto;
  }

  .modal-dialog {
    margin: 1rem auto;
  }

  .table-responsive {
    overflow-x: auto;
  }

  .content-wrapper {
    padding: 1rem;
  }

  #modalEscanerQR .modal-dialog {
    max-width: 90% !important;
  }

  #modalEscanerQR .modal-content {
    padding: 10px;
    border-radius: 12px;
  }

  #modalEscanerQR video {
    border: 2px solid #A16A38;
  }
}

/* Estilos móviles para el modal de producto */
@media (max-width: 576px) {
  .modal-content {
    margin: 10px;
    border-radius: 10px;
    font-size: 15px;
  }

  .modal-body {
    padding: 10px;
  }

  .form-group label {
    font-weight: 600;
    font-size: 14px;
  }

  .form-control {
    font-size: 14px;
    padding: 8px 10px;
  }

  #modalProducto .modal-header,
  #modalEscanerQR .modal-header {
    padding: 12px 15px;
  }

  #modalProducto .modal-footer,
  #modalEscanerQR .modal-footer {
    padding: 10px 15px;
  }

  #btnEscanearQR, #btnGuardarProducto {
    width: 100%;
    margin-top: 10px;
  }

  #video {
    width: 100%;
    height: auto;
    max-height: 300px;
    border-radius: 10px;
  }
}

/* Extra: modal de producto siempre responsivo */
#modalProducto .modal-dialog {
  max-width: 95% !important;
  margin: 1rem auto;
}
#modalProducto .modal-content {
  padding: 15px;
  border-radius: 12px;
}