/* ====== Base ====== */
:root { color-scheme: light dark; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background-color .3s, color .3s;
}

/* ====== Tema claro ====== */
.light-mode body {
  background-color: #f8f9fa;
  color: #212529;
}
.light-mode .sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #dee2e6;
}
/* NOTE: limitar al sidebar para no afectar otros .nav-link */
.light-mode .sidebar .nav-link { color: #212529 !important; }

/* ====== Tema oscuro ====== */
.dark-mode body {
  background-color: #181a1b;
  color: #e9ecef;
}
.dark-mode .card { background-color: #242526; color: #e9ecef; }
.dark-mode .navbar, .dark-mode .sidebar { background-color: #212529 !important; }
/* NOTE: limitar al sidebar */
.dark-mode .sidebar .nav-link { color: #adb5bd !important; }

/* Hover/active unificado en ambos temas */
.light-mode .sidebar .nav-link:hover,
.light-mode .sidebar .nav-link.active,
.dark-mode  .sidebar .nav-link:hover,
.dark-mode  .sidebar .nav-link.active {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/* Tablas */
.dark-mode .table { color: #e9ecef; border-color: #343a40; }
.dark-mode .table thead, .dark-mode .table tfoot { background-color: #343a40; color: #e9ecef; }
.dark-mode .table-hover tbody tr:hover { background-color: #2c2e30; }
.dark-mode .table-bordered > :not(caption) > * { border-color: #343a40; }

/* List group */
.dark-mode .list-group-item {
  background-color: #242526; color: #e9ecef; border-color: #3a3b3c;
}

/* Dropdowns */
.dark-mode .dropdown-menu { background-color: #2b2d30; color: #e9ecef; border-color: #3a3b3c; }
.dark-mode .dropdown-item { color: #e9ecef; }
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item.active {
  background-color: #0d6efd; color: #fff;
}
.dark-mode .dropdown-divider { border-top-color: #3a3b3c; }

/* Forms */
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .form-check-input {
  background-color: #3a3b3c; color: #e9ecef; border-color: #555;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background-color: #3a3b3c; color: #fff; border-color: #0d6efd; box-shadow: none;
}
.dark-mode .input-group-text { background-color: #2b2d30; color: #e9ecef; border-color: #555; }
.dark-mode .form-text { color: #adb5bd; }
.dark-mode ::placeholder { color: #adb5bd !important; opacity: 1; }

/* Botones outline sobre navbar oscura */
.dark-mode .btn-outline-light { color: #e9ecef; border-color: #e9ecef; }
.dark-mode .btn-outline-light:hover { background-color: #e9ecef; color: #212529; }

/* Modales */
.dark-mode .modal-content { background-color: #242526; color: #e9ecef; }
.dark-mode .modal-header, .dark-mode .modal-footer { border-color: #3a3b3c; }
.dark-mode .modal-title { color: #e9ecef; }
.dark-mode .modal-backdrop.show { opacity: .75; }

/* Tooltips / Popovers */
.dark-mode .tooltip-inner, .dark-mode .popover {
  background-color: #2b2d30; color: #e9ecef; border-color: #3a3b3c;
}
.dark-mode .popover-header {
  background-color: #343a40; color: #e9ecef; border-bottom-color: #3a3b3c;
}

/* ====== Layout ====== */
.sidebar {
  width: 220px;
  min-height: 100vh;
  padding-top: 20px;
  position: fixed;
  top: 56px;
  left: 0;
  z-index: 1035; /* NOTE: por debajo del backdrop (1040) y modal (1050) */
  transition: transform .3s ease, width .2s ease;
}

/* Enlaces del sidebar (evita que el texto se desborde) */
.sidebar .nav-link {
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Iconos del sidebar con ancho fijo para alinear */
.sidebar .nav-link i {
  width: 1.25rem;
  display: inline-block;
  text-align: center;
}

/* Overlay */
#overlay {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 1030;
}
/* NOTE: usar solo .show para alinearse con Bootstrap */
#overlay.show { display: block; }

.content {
  margin-left: 220px;
  margin-top: 56px;
  padding: 30px;
  transition: margin-left .3s ease;
}

/* Login wrapper cuando no hay sesión */
.login-wrapper {
  min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;
}

/* ===== Colapso coherente con clase global en <html> ===== */
html.sidebar-collapsed .sidebar { width: 64px; }
html.sidebar-collapsed .content { margin-left: 64px; }

/* NOTE: eliminar font-size:0 (era conflictivo) */
/* html.sidebar-collapsed .sidebar .nav-link { font-size: 0; } */

html.sidebar-collapsed .sidebar .nav-link {
  justify-content: center;
  gap: 0;
}

/* Etiqueta de texto en links (mejor control que font-size:0 al enlace completo) */
.sidebar .nav-link .label { font-size: 1rem; line-height: 1; }

/* En colapso: ocultar SOLAMENTE la etiqueta, mantener icono limpio */
html.sidebar-collapsed .sidebar .nav-link .label { 
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; white-space: nowrap;
}

/* Focus visible para accesibilidad */
.sidebar .nav-link:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: .375rem;
}

/* Prefiere menos animaciones: respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .content { transition: none !important; }
}

/* ===== Móvil ===== */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); width: 220px; }
  .sidebar.show,
  .sidebar.open { /* compatibilidad si algún JS usa .open */
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0,0,0,.5);
  }
  .content { margin-left: 0 !important; }

  /* En móvil, ignora el colapso de escritorio */
  html.sidebar-collapsed .sidebar { width: 220px; }
  html.sidebar-collapsed .content { margin-left: 0 !important; }

  /* Mostrar labels dentro del off-canvas */
  .sidebar.show .nav-link .label,
  html.sidebar-collapsed .sidebar.show .nav-link .label {
    position: static; clip: auto; clip-path: none;
    height: auto; width: auto; overflow: visible;
    white-space: nowrap; font-size: 1rem; line-height: 1.1;
  }
}

/* Dropdown de usuario */
.dropdown-user { min-width: 280px; }
.dropdown-user .badge { font-size: .7rem; letter-spacing: .5px; }
.dropdown-user .min-w-0 { min-width: 0; }
/* NOTE: esta ya no es necesaria por la regla global de abajo */
/* .dark-mode .dropdown-user .text-muted { color: #adb5bd !important; } */

/* ===== Ventas: modal y tablas internas ===== */
#modalVenta .modal-content,
#modalVenta .modal-header,
#modalVenta .modal-footer,
#modalVenta .modal-body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Neutraliza elementos “claros” comunes que pueda traer el HTML remoto */
#modalVenta .card,
#modalVenta .list-group-item,
#modalVenta .bg-white,
#modalVenta .bg-light,
#modalVenta .table,
#modalVenta .alert,
#modalVenta .badge,
#modalVenta .btn,
#modalVenta .form-control {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Bordes coherentes en tablas */
#modalVenta table td,
#modalVenta table th {
  border-color: var(--bs-border-color) !important;
}

/* Encabezados de tabla con alto contraste */
#modalVenta .table thead th,
#modalVenta .table thead td,
#modalVenta thead th,
#modalVenta thead td {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color) !important;
  border-color: var(--bs-border-color) !important;
}
/* Variantes bootstrap que suelen forzar claro */
#modalVenta .table-light thead th,
#modalVenta .table-light thead td,
#modalVenta .table-dark thead th,
#modalVenta .table-dark thead td {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color) !important;
  border-color: var(--bs-border-color) !important;
}
/* Inline styles defensivos */
#modalVenta thead[style],
#modalVenta thead *[style],
#modalVenta .table thead th[style],
#modalVenta .table thead td[style] {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color) !important;
  border-color: var(--bs-border-color) !important;
}
#modalVenta th { color: var(--bs-emphasis-color) !important; }

/* Links dentro del modal */
#modalVenta, #modalVenta * {
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary);
}

/* Ventas: tabla responsive compacta */
#ventasListado .table thead th { white-space: nowrap; }
#ventasListado .table td, #ventasListado .table th { vertical-align: middle; }
@media (max-width: 576px) {
  #ventasListado .col-items,
  #ventasListado .col-desc,
  #ventasListado .col-lista { display: none; }
  #ventasListado .table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline-block;
    margin-right: .25rem;
    opacity: .8;
  }
}

/* ===== Parche tema oscuro: legibilidad y utilidades ===== */
.dark-mode .text-muted { color: #adb5bd !important; } /* global */
.text-light-50 { color: rgba(255,255,255,.6) !important; }
.text-dark-50  { color: rgba(0,0,0,.6) !important; }

/* Tokens Bootstrap para herencia en dark/light */
.light-mode {
  --bs-body-bg: #f8f9fa; --bs-body-color: #212529; --bs-border-color: #dee2e6;
  --bs-secondary-bg: #e9ecef; --bs-emphasis-color: #000; --bs-primary: #0d6efd;
}
.dark-mode {
  --bs-body-bg: #181a1b; --bs-body-color: #e9ecef; --bs-border-color: #3a3b3c;
  --bs-secondary-bg: #2b2d30; --bs-emphasis-color: #fff; --bs-primary: #0d6efd;
}

/* Alerts más legibles en dark */
.dark-mode .alert-primary { background-color: #1e2a3a; color: #cfe2ff; border-color: #2a3a52; }
.dark-mode .alert-danger  { background-color: #3a1e1f; color: #f8d7da; border-color: #5a2a2c; }
.dark-mode .alert-warning { background-color: #3a2f1e; color: #ffe8a1; border-color: #5a4a2a; }

/* Badges dentro de alerts en dark */
.dark-mode .badge.text-bg-light { background-color: #e9ecef !important; color: #212529 !important; }
.dark-mode .badge.text-bg-dark  { background-color: #343a40 !important; color: #fff !important; }

/* ===== Navbar compacto / responsive ===== */
.navbar .btn-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.navbar .brand-text-sm { letter-spacing: .5px; }
@media (max-width: 380px) {
  .navbar .brand-text { display: none; }
  .navbar .brand-text-sm { display: inline !important; }
}

/* ===== Dark modal fix (Bootstrap 5.3) ===== */
html.dark-mode .modal .modal-content{
  /* usa los tokens globales que ya manejas con --bs-body-* */
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,.14);
}
html.dark-mode .modal .modal-header,
html.dark-mode .modal .modal-footer{
  border-color: rgba(255,255,255,.12);
}
html.dark-mode .modal .btn-close{
  /* la X del close por defecto es oscura; en dark la invertimos */
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
html.dark-mode .modal-backdrop.show{
  background-color: #000;
  opacity: .75;
}

/* Contenido común dentro del modal */
html.dark-mode .modal .table{
  background-color: color-mix(in srgb, var(--bs-body-bg) 94%, black);
  color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-body-bg) 88%, white);
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-body-bg) 86%, white);
  border-color: rgba(255,255,255,.12);
}
html.dark-mode .modal .form-control,
html.dark-mode .modal .form-select{
  background-color: color-mix(in srgb, var(--bs-body-bg) 92%, black);
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,.16);
}
html.dark-mode .modal .form-control::placeholder{
  color: rgba(255,255,255,.55);
}