/* Estilos para el modal en modo oscuro */
.dark-mode #welcomeModal .modal-header {
  background-color: #343a40 !important;
  color: #f8f9fa !important;
}

.dark-mode #welcomeModal .modal-content {
  background-color: #212529 !important;
}

.dark-mode #welcomeMessage {
  color: #f8f9fa !important;
}

.dark-mode #welcomeModal .text-muted {
  color: #adb5bd !important;
}

.dark-mode #welcomeModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Variables para facilitar la administración de colores */
:root {
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --dark-surface-2: #2c2c2c;
  --dark-border: #333;
  --dark-text-primary: #e0e0e0;
  --dark-text-secondary: #a0a0a0;
  --dark-hover: rgba(255, 255, 255, 0.075);
  --dark-active: rgba(255, 255, 255, 0.1);
}

/* Estilos generales para el modo oscuro - SIN transition en body */
body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text-primary);
}

/* Header y elementos principales */
body.dark-mode .header {
  background-color: var(--dark-surface);
  border-bottom-color: var(--dark-border);
}

body.dark-mode .dropdown-menu {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
}

body.dark-mode .dropdown-item {
  color: var(--dark-text-primary);
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--dark-hover);
}

body.dark-mode .dropdown-divider {
  border-color: var(--dark-border);
}

/* Cards y contenedores */
body.dark-mode .card {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
}

body.dark-mode .card-header {
  background-color: var(--dark-surface-2) !important;
  border-bottom-color: var(--dark-border);
}

body.dark-mode .card-footer {
  background-color: var(--dark-surface-2);
  border-top-color: var(--dark-border);
}

body.dark-mode .list-group-item {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

/* Tablas */
body.dark-mode .table {
  color: var(--dark-text-primary);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dark-hover);
}

body.dark-mode .table-light, 
body.dark-mode .table thead th {
  background-color: var(--dark-surface-2);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
  border-color: var(--dark-border);
}

/* Navegación */
body.dark-mode .nav-tabs {
  border-bottom-color: var(--dark-border);
}

body.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--dark-surface);
  border-color: var(--dark-border) var(--dark-border) var(--dark-surface);
  color: var(--dark-text-primary);
}

body.dark-mode .nav-tabs .nav-link:not(.active) {
  color: var(--dark-text-secondary);
}

body.dark-mode .nav-tabs .nav-link:hover:not(.active) {
  border-color: var(--dark-border);
  background-color: var(--dark-hover);
}

/* Inputs y formularios */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--dark-surface-2);
  box-shadow: 0 0 0 0.25rem rgba(65, 90, 255, 0.25);
  border-color: #415aff;
  color: var(--dark-text-primary);
}

body.dark-mode .form-control::placeholder {
  color: var(--dark-text-secondary);
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: rgba(44, 44, 44, 0.6);
  color: var(--dark-text-secondary);
}

body.dark-mode .form-control-plaintext {
  color: var(--dark-text-primary) !important;
  background-color: transparent !important;
}

body.dark-mode .input-group-text {
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .form-check-input {
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
}

body.dark-mode .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Estilos para labels y textos de formulario */
body.dark-mode .form-label,
body.dark-mode label {
  color: var(--dark-text-primary);
}

/* Botones */
body.dark-mode .btn-outline-dark {
  color: var(--dark-text-primary);
  border-color: var(--dark-text-primary);
}

body.dark-mode .btn-outline-dark:hover {
  background-color: var(--dark-text-primary);
  color: var(--dark-bg);
}

body.dark-mode .btn-outline-primary {
  color: #81b4ff;
  border-color: #81b4ff;
}

body.dark-mode .btn-outline-primary:hover {
  background-color: #1a3b6d;
  color: #fff;
}

body.dark-mode .btn-outline-danger {
  color: #ff8181;
  border-color: #ff8181;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: #6d1a1a;
  color: #fff;
}

body.dark-mode .btn-light {
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .btn-light:hover {
  background-color: var(--dark-hover);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modales */
body.dark-mode .modal-content {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--dark-border);
  background-color: var(--dark-surface-2);
}

body.dark-mode .modal-footer {
  border-top-color: var(--dark-border);
  background-color: var(--dark-surface-2);
}

body.dark-mode .modal-title {
  color: var(--dark-text-primary);
}

/* Animaciones del modal - SOLO para modales, no para todo */
body.dark-mode .modal.fade .modal-dialog {
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease;
}

body.dark-mode .modal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}

/* Alerts */
body.dark-mode .alert {
  border-color: var(--dark-border);
}

body.dark-mode .alert-danger {
  background-color: #422 !important;
  color: #f8f9fa !important;
  border-color: #842029 !important;
}

body.dark-mode .alert-success {
  background-color: #1a422a !important;
  color: #f8f9fa !important;
  border-color: #0f5132 !important;
}

body.dark-mode .alert-warning {
  background-color: #42391a !important;
  color: #f8f9fa !important;
  border-color: #664d03 !important;
}

body.dark-mode .alert-info {
  background-color: #1a3b42 !important;
  color: #f8f9fa !important;
  border-color: #055160 !important;
}

/* Badges y etiquetas */
body.dark-mode .badge.bg-warning {
  color: #212529 !important;
}

body.dark-mode .badge.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

body.dark-mode .badge.bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

body.dark-mode .badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

body.dark-mode .badge.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

body.dark-mode .badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* Textos y tipografía */
body.dark-mode .text-muted {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-dark {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .text-dark-mode {
  color: white !important;
}

body.dark-mode .text-price {
  color: white !important;
}

/* Mantener texto negro en la sección de resumen de pago, incluso en modo oscuro */
body.dark-mode #resumenPagoMixto p,
body.dark-mode #resumenEfectivo,
body.dark-mode #resumenTarjeta,
body.dark-mode #faltaPagar,
body.dark-mode #resumenPagoMixto .fw-bold {
  color: #000000 !important;
}

/* Para el nombre del producto */
body.dark-mode .product-name {
  color: var(--dark-text-primary) !important;
}

/* Para el símbolo $ */
body.dark-mode .currency-symbol {
  color: var(--dark-text-primary) !important;
}

/* Para la fila del producto */
body.dark-mode .product-row {
  color: var(--dark-text-primary);
}

/* Reloj */
body.dark-mode #reloj {
  background-color: #343a40;
  color: #ffffff !important;
  border-color: #6c757d;
}

.clock-container {
  padding: 5px 10px;
  font-weight: bold;
}

.clock-icon {
  color: inherit;
}

.clock-time {
  color: inherit;
}

/* Bordes y divisores */
body.dark-mode hr {
  border-color: var(--dark-border);
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-end,
body.dark-mode .border-bottom,
body.dark-mode .border-start {
  border-color: var(--dark-border) !important;
}

/* Tooltips y Popovers */
body.dark-mode .tooltip .tooltip-inner {
  background-color: var(--dark-surface);
  color: var(--dark-text-primary);
}

body.dark-mode .tooltip .tooltip-arrow::before {
  border-top-color: var(--dark-surface);
}

body.dark-mode .popover {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
}

body.dark-mode .popover-header {
  background-color: var(--dark-surface-2);
  border-bottom-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .popover-body {
  color: var(--dark-text-primary);
}

/* Scrollbars personalizados para navegadores WebKit (Chrome, Safari, etc.) */
body.dark-mode::-webkit-scrollbar {
  width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

body.dark-mode::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 6px;
  border: 3px solid var(--dark-bg);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

/* Footer o pie de página */
body.dark-mode .powered-text {
  color: #adb5bd !important;
}

/* ============================================ */
/* TRANSICIONES OPTIMIZADAS - SOLO ELEMENTOS ESPECÍFICOS */
/* ============================================ */
/* NO usar selector universal (*) que causa lentitud */

/* Transiciones solo en body y header para cambio suave */
body {
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.dark-mode .header {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Transiciones en elementos interactivos */
body.dark-mode .btn,
body.dark-mode .dropdown-item,
body.dark-mode .nav-link {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ============================================ */

/* Encabezado en modo oscuro */
body.dark-mode .header {
  background-color: #1f1f1f;
  border-bottom: 1px solid #333;
}

/* Tarjetas en modo oscuro */
body.dark-mode .card {
  background-color: #1f1f1f;
  border-color: #333;
}

body.dark-mode .card-header {
  background-color: #2d2d2d !important;
  color: #e0e0e0;
  border-bottom-color: #333;
}

/* Tablas en modo oscuro */
body.dark-mode .table {
  color: #e0e0e0;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-hover > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

body.dark-mode .table-light th {
  background-color: #2d2d2d;
  color: #e0e0e0;
  border-color: #333;
}

/* Formularios en modo oscuro */
body.dark-mode .form-control,
body.dark-mode .input-group-text {
  background-color: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .form-control:focus {
  background-color: #2d2d2d;
  border-color: #5a5a5a;
  color: #e0e0e0;
}

/* Botones en modo oscuro */
body.dark-mode .btn-outline-dark {
  color: #e0e0e0;
  border-color: #e0e0e0;
}

body.dark-mode .btn-outline-dark:hover {
  color: #121212;
  background-color: #e0e0e0;
}

body.dark-mode .btn-outline-warning,
body.dark-mode .btn-outline-primary {
  color: inherit;
}

/* Dropdown menú en modo oscuro */
body.dark-mode .dropdown-menu {
  background-color: #2d2d2d;
  border-color: #444;
}

body.dark-mode .dropdown-item {
  color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
  background-color: #3d3d3d;
  color: #ffffff;
}

/* Modales en modo oscuro */
body.dark-mode .modal-content {
  background-color: #1f1f1f;
  border-color: #333;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #333;
}

/* Alertas en modo oscuro */
body.dark-mode .alert-info {
  background-color: #2d3748;
  color: #cbd5e0;
  border-color: #4a5568;
}

/* Badges en modo oscuro */
body.dark-mode .badge.bg-success {
  background-color: #2c6e49 !important;
}

body.dark-mode .badge.bg-danger {
  background-color: #9b2c2c !important;
}

/* Reloj en modo oscuro */
body.dark-mode .clock-container {
  background-color: #2d2d2d;
  border-color: #444;
}

body.dark-mode .clock-time,
body.dark-mode .clock-icon {
  color: #e0e0e0;
}

/* Actualización específica para texto en modales y tarjetas en modo oscuro */
body.dark-mode .modal-body {
  color: #e0e0e0;
}

body.dark-mode .card-body {
  color: #e0e0e0;
}

body.dark-mode .modal .card .fw-bold {
  color: #ffffff;
}

body.dark-mode .modal .card span:not(.fw-bold) {
  color: #e0e0e0;
}

body.dark-mode .card-header h6 {
  color: #ffffff;
}

body.dark-mode .card-header.bg-light {
  background-color: #2d2d2d !important;
}

body.dark-mode .modal-footer .btn-secondary {
  background-color: #4a4a4a;
  border-color: #555;
  color: #ffffff;
}

body.dark-mode .modal-footer .btn-secondary:hover {
  background-color: #555;
}