/* ==========================================
   FORZAR SOLO BORDE Y TEXTO DEL CONTENEDOR DE FECHA EN MODO OSCURO
   ========================================== */
body.modo-oscuro [id^="contenedorVisualFecha_"],
body.modo-oscuro [id^="contenedorVisualFechaInicio_"],
body.modo-oscuro [id^="contenedorVisualFechaFin_"],
body.modo-oscuro [id^="contenedorVisualHora_"],
body.modo-oscuro [id^="contenedorVisualHoraInicio_"],
body.modo-oscuro [id^="contenedorVisualHoraFin_"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] {
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  background: transparent !important;
}

body.modo-oscuro [id^="contenedorVisualFecha_"] label,
body.modo-oscuro [id^="contenedorVisualFechaInicio_"] label,
body.modo-oscuro [id^="contenedorVisualFechaFin_"] label,
body.modo-oscuro [id^="contenedorVisualHora_"] label,
body.modo-oscuro [id^="contenedorVisualHoraInicio_"] label,
body.modo-oscuro [id^="contenedorVisualHoraFin_"] label,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] label {
  color: #fff !important;
}

/* ComboMultipleCheck interno en filtros: borde blanco también en modo oscuro */
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_main"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_main"]:hover,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_main"]:focus,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_main"]:focus-within,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_dropdown"] {
  border-color: #fff !important;
  --tw-border-opacity: 1 !important;
}

body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_label"] {
  color: #fff !important;
  background: #12131a !important;
}

body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] input[type="checkbox"] {
  border-color: #fff !important;
}

/* Icono de calendario (input[type=date]::-webkit-calendar-picker-indicator) */
body.modo-oscuro input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
}

/* Icono de hora en inputs time (Chrome/Edge/Safari) */
body.modo-oscuro input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 1;
}

/* Fallback por IDs de filtros de hora */
body.modo-oscuro [id^="entradaHora_"]::-webkit-calendar-picker-indicator,
body.modo-oscuro [id^="entradaHoraInicio_"]::-webkit-calendar-picker-indicator,
body.modo-oscuro [id^="entradaHoraFin_"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 1;
}


/* ==========================================
   SISTEMA DE TEMAS TEMPIA
   Variables CSS para modo claro y oscuro
   ========================================== */

/* ==========================================
   ESTILOS BASE GLOBALES
   ========================================== */

/* Asegurar que el body y html tengan los colores base */
html {
  background-color: var(--fondo-principal);
  color: var(--texto-principal);
}

body {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Aplicar estilos base a todos los elementos principales */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Asegurar que los contenedores principales usen los colores del tema */
.container,
.main-content,
#app,
#root {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
}

/* ==========================================
   MODO CLARO (por defecto)
   ========================================== */
:root {
  /* === COLORES PRINCIPALES === */
  --color-primario: #1C2646;
  --color-primario-hover: #5ac9dc;
  --color-primario-light: #e6f3f7;
  /* === COLORES DE FONDO === */
  --fondo-principal: #ffffff;
  --fondo-secundario: #f8f9fa;
  --fondo-panel: #ffffff;
  --fondo-sidebar: #ffffff;
  --fondo-header: #ffffff;
  --fondo-modal: #ffffff;
  --fondo-card: #ffffff;
  --fondo-input: #ffffff;
  --fondo-hover: #f8f9fa;
  --fondo-seleccion: #e3f2fd;

  /* === COLORES DE TEXTO === */
  --texto-principal: #1f2937;
  --texto-secundario: #6b7280;
  --texto-muted: #9ca3af;
  --texto-light: #d1d5db;
  --texto-blanco: #ffffff;
  --texto-primario: #1C2646;
  --texto-hover: #5ac9dc;
  --texto-link: #3b82f6;
  --texto-link-hover: #1d4ed8;

  /* === COLORES DE BORDE === */
  --borde-principal: #e5e7eb;
  --borde-secundario: #d1d5db;
  --borde-input: #d1d5db;
  --borde-focus: #3b82f6;
  --borde-hover: #9ca3af;
  --borde-divider: #e5e7eb;

  /* === COLORES DE SOMBRA === */
  --sombra-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sombra-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* === BOTONES PRINCIPALES === */
  --btn-primario-fondo: #1C2646;
  --btn-primario-texto: #ffffff;
  --btn-primario-borde: #1C2646;
  --btn-primario-hover-fondo: #5ac9dc;
  --btn-primario-hover-texto: #ffffff;
  --btn-primario-hover-borde: #5ac9dc;

  /* === BOTONES SECUNDARIOS === */
  --btn-secundario-fondo: transparent;
  --btn-secundario-texto: #6b7280;
  --btn-secundario-borde: #d1d5db;
  --btn-secundario-hover-fondo: #f9fafb;
  --btn-secundario-hover-texto: #374151;
  --btn-secundario-hover-borde: #9ca3af;

  /* === BOTONES DE CANCELAR/SALIR/ATRÁS === */
  --btn-cancelar-fondo: transparent;
  --btn-cancelar-texto: #dc2626;
  --btn-cancelar-borde: #dc2626;
  --btn-cancelar-hover-fondo: #fef2f2;
  --btn-cancelar-hover-texto: #b91c1c;
  --btn-cancelar-hover-borde: #b91c1c;

  /* === BOTONES DE ICONOS === */
  --btn-icono-fondo: transparent;
  --btn-icono-texto: #6b7280;
  --btn-icono-borde: transparent;
  --btn-icono-hover-fondo: #f3f4f6;
  --btn-icono-hover-texto: #374151;
  --btn-icono-hover-borde: transparent;

  /* === ESTADOS DE VALIDACIÓN === */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;

  /* === TABLAS === */
  --tabla-header-fondo: #f9fafb;
  --tabla-header-texto: #374151;
  --tabla-row-hover: #f9fafb;
  --tabla-row-selected: #e3f2fd;
  --tabla-borde: #e5e7eb;

  /* === FORMULARIOS === */
  --input-fondo: #ffffff;
  --input-texto: #1f2937;
  --input-placeholder: #9ca3af;
  --input-borde: #d1d5db;
  --input-focus-borde: #3b82f6;
  --input-focus-sombra: 0 0 0 3px rgb(59 130 246 / 0.1);

  /* === DROPDOWNS Y SELECTS === */
  --dropdown-fondo: #ffffff;
  --dropdown-texto: #1f2937;
  --dropdown-borde: #d1d5db;
  --dropdown-hover: #f9fafb;
  --dropdown-selected: #e3f2fd;
  --dropdown-sombra: var(--sombra-lg);

  /* === MODALES === */
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-fondo: #ffffff;
  --modal-sombra: var(--sombra-xl);

  /* === NAVEGACIÓN === */
  --nav-fondo: #ffffff;
  --nav-texto: #374151;
  --nav-item-hover: #f3f4f6;
  --nav-item-active: #e3f2fd;
  --nav-divider: #e5e7eb;
}

/* ==========================================
   MODO OSCURO
   ========================================== */
body.modo-oscuro {
  /* === COLORES PRINCIPALES === */
  --color-primario: #4972db;
  --color-primario-hover: #6b8dff;
  --color-primario-light: #1e2749;
  
  /* === COLORES DE FONDO === */
  --fondo-principal: #161618;
  --fondo-secundario: #161618;
  --fondo-panel: #161618;
  --fondo-sidebar: #1e293b;
  --fondo-header: #1a1f2e;
  --fondo-modal: #1a1f2e;
  --fondo-card: #1a1f2e;
  --fondo-input: #374151;
  --fondo-hover: #374151;
  --fondo-seleccion: #4972db;
  
  /* === COLORES DE TEXTO === */
  --texto-principal: #ffffff;
  --texto-secundario: #e5e7eb;
  --texto-muted: #9ca3af;
  --texto-light: #6b7280;
  --texto-blanco: #ffffff;
  --texto-primario: #4972db;
  --texto-hover: #6b8dff;
  --texto-link: #4972db;
  --texto-link-hover: #6b8dff;
  
  /* === COLORES DE BORDE === */
  --borde-principal: #4b5563;
  --borde-secundario: #6b7280;
  --borde-input: #6b7280;
  --borde-focus: #60a5fa;
  --borde-hover: #9ca3af;
  --borde-divider: #4b5563;
  
  /* === COLORES DE SOMBRA === */
  --sombra-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --sombra-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
  
  /* === BOTONES PRINCIPALES === */
  --btn-primario-fondo: #4972db;
  --btn-primario-texto: #ffffff;
  --btn-primario-borde: #4972db;
  --btn-primario-hover-fondo: #6b8dff;
  --btn-primario-hover-texto: #ffffff;
  --btn-primario-hover-borde: #6b8dff;
  
  /* === BOTONES SECUNDARIOS === */
  --btn-secundario-fondo: transparent;
  --btn-secundario-texto: #e5e7eb;
  --btn-secundario-borde: #6b7280;
  --btn-secundario-hover-fondo: #374151;
  --btn-secundario-hover-texto: #ffffff;
  --btn-secundario-hover-borde: #9ca3af;
  
  /* === BOTONES DE CANCELAR/SALIR/ATRÁS === */
  --btn-cancelar-fondo: transparent;
  --btn-cancelar-texto: #f87171;
  --btn-cancelar-borde: #f87171;
  --btn-cancelar-hover-fondo: #450a0a;
  --btn-cancelar-hover-texto: #fca5a5;
  --btn-cancelar-hover-borde: #fca5a5;
  
  /* === BOTONES DE ICONOS === */
  --btn-icono-fondo: transparent;
  --btn-icono-texto: #ffffff;
  --btn-icono-borde: transparent;
  --btn-icono-hover-fondo: transparent;
  --btn-icono-hover-texto: #4972db;
  --btn-icono-hover-borde: transparent;
  
  /* === ESTADOS DE VALIDACIÓN === */
  --color-success: #34d399;
  --color-success-light: #064e3b;
  --color-warning: #fbbf24;
  --color-warning-light: #451a03;
  --color-error: #f87171;
  --color-error-light: #450a0a;
  --color-info: #60a5fa;
  --color-info-light: #1e3a8a;
  
  /* === TABLAS === */
  --tabla-header-fondo: #22263a;
  --tabla-header-texto: #ffffff;
  --tabla-row-hover: #23263a;
  --tabla-row-selected: #4972db;
  --tabla-borde: #ffffff;
  
  /* === FORMULARIOS === */
  --input-fondo: #374151;
  --input-texto: #ffffff;
  --input-placeholder: #9ca3af;
  --input-borde: #6b7280;
  --input-focus-borde: #4972db;
  --input-focus-sombra: 0 0 0 3px rgb(73 114 219 / 0.2);
  
  /* === DROPDOWNS Y SELECTS === */
  --dropdown-fondo: #374151;
  --dropdown-texto: #ffffff;
  --dropdown-borde: #6b7280;
  --dropdown-hover: #4b5563;
  --dropdown-selected: #4972db;
  --dropdown-sombra: var(--sombra-lg);
  
  /* === MODALES === */
  --modal-overlay: rgba(0, 0, 0, 0.92);
  --modal-fondo: #1a1f2e;
  --modal-sombra: var(--sombra-xl);
  
  /* === NAVEGACIÓN === */
  --nav-fondo: #1f2937;
  --nav-texto: #e5e7eb;
  --nav-item-hover: #374151;
  --nav-item-active: #4972db;
  --nav-divider: #4b5563;
}

/* ==========================================
   CLASES UTILITARIAS PARA TEMAS
   ========================================== */

/* === FONDOS === */
.bg-principal { background-color: var(--fondo-principal) !important; }
.bg-secundario { background-color: var(--fondo-secundario) !important; }
.bg-panel { background-color: var(--fondo-panel) !important; }
.bg-sidebar { background-color: var(--fondo-sidebar) !important; }
.bg-header { background-color: var(--fondo-header) !important; }
.bg-modal { background-color: var(--fondo-modal) !important; }
.bg-card { background-color: var(--fondo-card) !important; }
.bg-input { background-color: var(--fondo-input) !important; }
.bg-hover:hover { background-color: var(--fondo-hover) !important; }
.bg-seleccion { background-color: var(--fondo-seleccion) !important; }

/* === TEXTOS === */
.text-principal { color: var(--texto-principal) !important; }
.text-secundario { color: var(--texto-secundario) !important; }
.text-muted { color: var(--texto-muted) !important; }
.text-light { color: var(--texto-light) !important; }
.text-blanco { color: var(--texto-blanco) !important; }
.text-primario { color: var(--texto-primario) !important; }
.text-hover:hover { color: var(--texto-hover) !important; }
.text-link { color: var(--texto-link) !important; }
.text-link:hover { color: var(--texto-link-hover) !important; }

/* === BORDES === */
.border-principal { border-color: var(--borde-principal) !important; }
.border-secundario { border-color: var(--borde-secundario) !important; }
.border-input { border-color: var(--borde-input) !important; }
.border-focus:focus { border-color: var(--borde-focus) !important; }
.border-hover:hover { border-color: var(--borde-hover) !important; }
.border-divider { border-color: var(--borde-divider) !important; }

/* === SOMBRAS === */
.shadow-sm { box-shadow: var(--sombra-sm) !important; }
.shadow-md { box-shadow: var(--sombra-md) !important; }
.shadow-lg { box-shadow: var(--sombra-lg) !important; }
.shadow-xl { box-shadow: var(--sombra-xl) !important; }

/* ==========================================
   BOTONES CON VARIABLES DE TEMA
   ========================================== */

/* === BOTÓN PRIMARIO (Añadir, Actualizar, Confirmar) === */
.btn-primario,
.btn-primary {
  background-color: var(--btn-primario-fondo) !important;
  color: var(--btn-primario-texto) !important;
  border-color: var(--btn-primario-borde) !important;
  transition: all 0.2s ease-in-out;
}

.btn-primario:hover,
.btn-primary:hover {
  background-color: var(--btn-primario-hover-fondo) !important;
  color: var(--btn-primario-hover-texto) !important;
  border-color: var(--btn-primario-hover-borde) !important;
}

/* === BOTÓN SECUNDARIO === */
.btn-secundario,
table,
.tabla-theme {
  color: var(--texto-principal) !important;
  border: 1px solid var(--tabla-borde) !important;
  background-color: transparent !important;
}

.table thead th,
.tabla-theme thead th,
table thead th,
thead th {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  border: 1px solid var(--tabla-borde) !important;
}

.table tbody tr,
.tabla-theme tbody tr,
table tbody tr,
tbody tr {
  background-color: transparent !important;
  color: var(--texto-principal) !important;
  border: 1px solid var(--tabla-borde) !important;
}

.table tbody tr:hover,
.tabla-theme tbody tr:hover,
table tbody tr:hover,
tbody tr:hover {
  background-color: var(--tabla-row-hover) !important;
}

.table tbody tr.selected,
.tabla-theme tbody tr.selected,
table tbody tr.selected,
tbody tr.selected,
tr.selected {
  background-color: var(--tabla-row-selected) !important;
  color: var(--texto-blanco) !important;
}

.table td,
.table th,
.tabla-theme td,
.tabla-theme th,
table td,
table th,
td,
th {
  border: 1px solid var(--tabla-borde) !important;
  color: var(--texto-principal) !important;
  background-color: transparent !important;
}
.btn-icon:hover {
  background-color: var(--btn-icono-hover-fondo) !important;
  color: var(--btn-icono-hover-texto) !important;
  border-color: var(--btn-icono-hover-borde) !important;
}

/* ==========================================
   FORMULARIOS CON VARIABLES DE TEMA
   ========================================== */

/* === INPUTS === */
.form-control,
.input-theme,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border-color: var(--input-borde) !important;
  transition: all 0.2s ease-in-out;
}

.form-control::placeholder,
.input-theme::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder) !important;
}

.form-control:focus,
.input-theme:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-focus-borde) !important;
  box-shadow: var(--input-focus-sombra) !important;
  outline: none !important;
}

/* === DROPDOWNS === */
.dropdown-menu,
.select-dropdown {
  background-color: var(--dropdown-fondo) !important;
  color: var(--dropdown-texto) !important;
  border-color: var(--dropdown-borde) !important;
  box-shadow: var(--dropdown-sombra) !important;
}

.dropdown-item,
.select-option {
  color: var(--dropdown-texto) !important;
  transition: all 0.2s ease-in-out;
}

.dropdown-item:hover,
.select-option:hover {
  background-color: var(--dropdown-hover) !important;
  color: var(--dropdown-texto) !important;
}

.dropdown-item.active,
.dropdown-item:active,
.select-option.selected {
  background-color: var(--dropdown-selected) !important;
  color: var(--texto-blanco) !important;
}

/* ==========================================
   TABLAS CON VARIABLES DE TEMA
   ========================================== */

.table,
.tabla-theme {
  color: var(--texto-principal) !important;
  border-color: var(--tabla-borde) !important;
}

.table thead th,
.tabla-theme thead th,
table thead th,
thead th {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  border-color: var(--tabla-borde) !important;
}

.table tbody tr:hover,
.tabla-theme tbody tr:hover,
table tbody tr:hover,
tbody tr:hover {
  background-color: var(--tabla-row-hover) !important;
}

.table tbody tr.selected,
.tabla-theme tbody tr.selected,
table tbody tr.selected,
tbody tr.selected,
tr.selected {
  background-color: var(--tabla-row-selected) !important;
  color: var(--texto-blanco) !important;
}

.table td,
.table th,
.tabla-theme td,
.tabla-theme th,
table td,
table th,
td,
th {
  border-color: var(--tabla-borde) !important;
  color: var(--texto-principal) !important;
}

/* ==========================================
   MODALES CON VARIABLES DE TEMA
   ========================================== */

.modal-backdrop {
  background-color: var(--modal-overlay) !important;
}

.modal-content {
  background-color: var(--modal-fondo) !important;
  color: var(--texto-principal) !important;
  box-shadow: var(--modal-sombra) !important;
}

.modal-header {
  border-color: var(--borde-divider) !important;
}

.modal-footer {
  border-color: var(--borde-divider) !important;
}

/* ==========================================
   NAVEGACIÓN CON VARIABLES DE TEMA
   ========================================== */

.navbar,
.nav-theme {
  background-color: var(--nav-fondo) !important;
  color: var(--nav-texto) !important;
}

.nav-link,
.nav-item {
  color: var(--nav-texto) !important;
  transition: all 0.2s ease-in-out;
}

.nav-link:hover,
.nav-item:hover {
  background-color: var(--nav-item-hover) !important;
  color: var(--nav-texto) !important;
}

.nav-link.active,
.nav-item.active {
  background-color: var(--nav-item-active) !important;
  color: var(--texto-blanco) !important;
}



/* ==========================================
   ESTADOS DE VALIDACIÓN
   ========================================== */

.alert-success { 
  background-color: var(--color-success-light) !important; 
  color: var(--color-success) !important; 
  border-color: var(--color-success) !important; 
}

.alert-warning { 
  background-color: var(--color-warning-light) !important; 
  color: var(--color-warning) !important; 
  border-color: var(--color-warning) !important; 
}

.alert-danger { 
  background-color: var(--color-error-light) !important; 
  color: var(--color-error) !important; 
  border-color: var(--color-error) !important; 
}

.alert-info { 
  background-color: var(--color-info-light) !important; 
  color: var(--color-info) !important; 
  border-color: var(--color-info) !important; 
}

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }

/* ==========================================
   CLASES ESPECÍFICAS PARA SELECTORES
   ========================================== */

/* === SelectorElemento y SelectorModificarElemento === */
.selector-elemento,
.selector-modificar-elemento {
  background-color: var(--fondo-input) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-input) !important;
}

.selector-elemento:focus,
.selector-modificar-elemento:focus {
  border-color: var(--borde-focus) !important;
  box-shadow: var(--input-focus-sombra) !important;
}

.selector-elemento .dropdown-menu,
.selector-modificar-elemento .dropdown-menu {
  background-color: var(--dropdown-fondo) !important;
  border-color: var(--dropdown-borde) !important;
}

/* ==========================================
   REPRODUCTORES DE VIDEO
   ========================================== */

.video-player {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
}

.video-controls {
  background-color: var(--fondo-panel) !important;
  border-color: var(--borde-principal) !important;
  color: var(--texto-principal) !important;
}

.video-controls button,
.video-controls .video-button,
.video-control-button {
  background-color: var(--btn-icono-fondo) !important;
  color: var(--btn-icono-texto) !important;
  border-color: var(--btn-icono-borde) !important;
  border: none !important;
}

.video-controls button:hover,
.video-controls .video-button:hover,
.video-control-button:hover {
  background-color: var(--btn-icono-hover-fondo) !important;
  color: var(--btn-icono-hover-texto) !important;
}

.video-controls i,
.video-controls .icon,
.video-button i,
.video-control-button i {
  color: var(--btn-icono-texto) !important;
}

.video-controls button:hover i,
.video-controls .video-button:hover i,
.video-control-button:hover i {
  color: var(--btn-icono-hover-texto) !important;
}

/* Controles específicos del reproductor */
.video-progress-bar {
  background-color: var(--borde-principal) !important;
}

.video-progress-fill {
  background-color: var(--color-primario) !important;
}

.video-time-display {
  color: var(--texto-principal) !important;
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================
   OVERRIDES PARA CLASES EXISTENTES
   ========================================== */

/* ==========================================
   COLORES ESPECÍFICOS PARA MODO OSCURO
   ========================================== */

/* Sobrescribir cualquier referencia al color corporativo en modo oscuro */
body.modo-oscuro [style*="#1C2646"],
body.modo-oscuro [style*="#1c2646"] {
  color: #4972db !important;
}

body.modo-oscuro [style*="background-color: #1C2646"],
body.modo-oscuro [style*="background-color: #1c2646"] {
  background-color: #4972db !important;
}

body.modo-oscuro [style*="border-color: #1C2646"],
body.modo-oscuro [style*="border-color: #1c2646"] {
  border-color: #4972db !important;
}

/* Asegurar que los selectores usen los colores correctos */
body.modo-oscuro select,
body.modo-oscuro .selector-elemento,
body.modo-oscuro .selector-modificar-elemento {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border-color: #ffffff !important;
}

body.modo-oscuro select:focus,
body.modo-oscuro .selector-elemento:focus,
body.modo-oscuro .selector-modificar-elemento:focus,
body.modo-oscuro select[class*="selector"]:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
}

/* Filas seleccionadas en tablas */
body.modo-oscuro .selected,
body.modo-oscuro tr.selected,
body.modo-oscuro .table tbody tr.selected {
  background-color: var(--tabla-row-selected) !important;
  color: var(--texto-blanco) !important;
}

/* Botones con el color primario */
body.modo-oscuro button[style*="#1C2646"],
body.modo-oscuro .btn[style*="#1C2646"] {
  background-color: #4972db !important;
  border-color: #4972db !important;
}

/* ==========================================
   SOBRESCRITURAS COMPLETAS DE TAILWIND CSS
   ========================================== */

/* === FONDOS === */
html .bg-white,
html body .bg-white,
html body * .bg-white { 
  background-color: var(--fondo-principal) !important; 
}

html .bg-gray-50,
html body .bg-gray-50,
html body * .bg-gray-50 { 
  background-color: var(--fondo-secundario) !important; 
}

html .bg-gray-100,
html body .bg-gray-100,
html body * .bg-gray-100 { 
  background-color: var(--fondo-hover) !important; 
}

html .bg-gray-200,
html body .bg-gray-200,
html body * .bg-gray-200 { 
  background-color: var(--fondo-secundario) !important; 
}

html .bg-gray-300,
html body .bg-gray-300,
html body * .bg-gray-300 { 
  background-color: var(--fondo-hover) !important; 
}

html .bg-gray-400,
html body .bg-gray-400,
html body * .bg-gray-400 { 
  background-color: var(--fondo-panel) !important; 
}

html .bg-gray-500,
html body .bg-gray-500,
html body * .bg-gray-500 { 
  background-color: var(--fondo-panel) !important; 
}

html .bg-gray-600,
html body .bg-gray-600,
html body * .bg-gray-600 { 
  background-color: var(--fondo-panel) !important; 
}

html .bg-gray-700,
html body .bg-gray-700,
html body * .bg-gray-700 { 
  background-color: var(--fondo-panel) !important; 
}

html .bg-gray-800,
html body .bg-gray-800,
html body * .bg-gray-800 { 
  background-color: var(--fondo-panel) !important; 
}

html .bg-gray-900,
html body .bg-gray-900,
html body * .bg-gray-900 { 
  background-color: var(--fondo-principal) !important; 
}

html .bg-slate-100,
html body .bg-slate-100,
html body * .bg-slate-100 { 
  background-color: var(--fondo-secundario) !important; 
}

/* === TEXTOS === */
html .text-gray-900,
html body .text-gray-900,
html body * .text-gray-900 { 
  color: var(--texto-principal) !important; 
}

html .text-gray-800,
html body .text-gray-800,
html body * .text-gray-800 { 
  color: var(--texto-principal) !important; 
}

html .text-gray-700,
html body .text-gray-700,
html body * .text-gray-700 { 
  color: var(--texto-secundario) !important; 
}

html .text-gray-600,
html body .text-gray-600,
html body * .text-gray-600 { 
  color: var(--texto-secundario) !important; 
}

html .text-gray-500,
html body .text-gray-500,
html body * .text-gray-500 { 
  color: var(--texto-muted) !important; 
}

html .text-gray-400,
html body .text-gray-400,
html body * .text-gray-400 { 
  color: var(--texto-light) !important; 
}

html .text-gray-300,
html body .text-gray-300,
html body * .text-gray-300 { 
  color: var(--texto-light) !important; 
}

html .text-white,
html body .text-white,
html body * .text-white { 
  color: var(--texto-blanco) !important; 
}

html .text-black,
html body .text-black,
html body * .text-black { 
  color: var(--texto-principal) !important; 
}

/* === BORDES === */
html .border-gray-300,
html body .border-gray-300,
html body * .border-gray-300 { 
  border-color: var(--borde-principal) !important; 
}

html .border-gray-200,
html body .border-gray-200,
html body * .border-gray-200 { 
  border-color: var(--borde-secundario) !important; 
}

html .border-gray-400,
html body .border-gray-400,
html body * .border-gray-400 { 
  border-color: var(--borde-hover) !important; 
}

html .border-gray-500,
html body .border-gray-500,
html body * .border-gray-500 { 
  border-color: var(--borde-hover) !important; 
}

html .border-gray-600,
html body .border-gray-600,
html body * .border-gray-600 { 
  border-color: var(--borde-hover) !important; 
}

html .border-white,
html body .border-white,
html body * .border-white { 
  border-color: var(--borde-principal) !important; 
}


/* === HOVERS === */
html .hover\:bg-gray-50:hover,
html body .hover\:bg-gray-50:hover,
html body * .hover\:bg-gray-50:hover { 
  background-color: var(--fondo-hover) !important; 
}

html .hover\:bg-gray-100:hover,
html body .hover\:bg-gray-100:hover,
html body * .hover\:bg-gray-100:hover { 
  background-color: var(--fondo-hover) !important; 
}

html .hover\:text-gray-700:hover,
html body .hover\:text-gray-700:hover,
html body * .hover\:text-gray-700:hover { 
  color: var(--texto-hover) !important; 
}

html .hover\:text-gray-600:hover,
html body .hover\:text-gray-600:hover,
html body * .hover\:text-gray-600:hover { 
  color: var(--texto-hover) !important; 
}

/* === FOCUS === */
html .focus\:ring-2:focus,
html body .focus\:ring-2:focus,
html body * .focus\:ring-2:focus { 
  box-shadow: var(--input-focus-sombra) !important; 
}

html .focus\:outline-none:focus,
html body .focus\:outline-none:focus,
html body * .focus\:outline-none:focus { 
  outline: none !important; 
}

/* ==========================================
   CLASES ADICIONALES PARA COMPONENTES ESPECÍFICOS
   ========================================== */



/* === PANELES === */
.panel {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-principal) !important;
}

.panel-header {
  background-color: var(--fondo-header) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-divider) !important;
}

/* === PESTAÑAS === */
.tabs {
  border-color: var(--borde-divider) !important;
}

.tab-item {
  color: var(--texto-secundario) !important;
  border-color: transparent !important;
  transition: all 0.2s ease-in-out;
}

.tab-item:hover {
  color: var(--texto-principal) !important;
  background-color: var(--fondo-hover) !important;
}

.tab-item.active {
  color: var(--color-primario) !important;
  border-color: var(--color-primario) !important;
  background-color: transparent !important;
}

body.modo-oscuro .tab-item.active {
  color: #4972db !important;
  border-color: #4972db !important;
  background-color: transparent !important;
}

.tab-content {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
}

/* === CARDS === */
.card {
  background-color: var(--fondo-card) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-principal) !important;
  box-shadow: var(--sombra-sm) !important;
}

.card-header {
  background-color: var(--fondo-secundario) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-divider) !important;
}

.card-body {
  background-color: var(--fondo-card) !important;
  color: var(--texto-principal) !important;
}

.card-footer {
  background-color: var(--fondo-secundario) !important;
  color: var(--texto-secundario) !important;
  border-color: var(--borde-divider) !important;
}

/* === PROGRESS BARS === */
.progress {
  background-color: var(--fondo-secundario) !important;
  border-color: var(--borde-principal) !important;
}

.progress-bar {
  background-color: var(--color-primario) !important;
}

/* === BADGES === */
.badge {
  background-color: var(--color-primario) !important;
  color: var(--texto-blanco) !important;
}

.badge-success {
  background-color: var(--color-success) !important;
  color: var(--texto-blanco) !important;
}

.badge-warning {
  background-color: var(--color-warning) !important;
  color: var(--texto-blanco) !important;
}

.badge-danger {
  background-color: var(--color-error) !important;
  color: var(--texto-blanco) !important;
}

.badge-info {
  background-color: var(--color-info) !important;
  color: var(--texto-blanco) !important;
}

/* === TOOLTIPS === */
.tooltip {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
  border-color: var(--borde-principal) !important;
  box-shadow: var(--sombra-lg) !important;
}

/* === SCROLLBARS === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fondo-secundario);
}

::-webkit-scrollbar-thumb {
  background: var(--borde-hover);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--texto-muted);
}

/* Para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-hover) var(--fondo-secundario);
}

/* ==========================================
   SOBRESCRITURAS GLOBALES ESPECÍFICAS
   ========================================== */

/* === SOBRESCRITURAS GLOBALES DE FONDO === */
body, html {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
}

/* === CONTENEDORES BASE (alcance seguro) === */
#idBody,
#panelPrincipal,
.layout,
.main-content {
  color: var(--texto-principal) !important;
}

/* === SOBRESCRITURAS ESPECÍFICAS PARA TAILWIND === */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200 {
  background-color: var(--fondo-principal) !important;
}

.bg-gray-800,
.bg-gray-900,
.bg-slate-800,
.bg-slate-900 {
  background-color: var(--fondo-panel) !important;
}

.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800 {
  color: var(--texto-principal) !important;
}

.text-gray-700,
.text-gray-600,
.text-slate-700,
.text-slate-600 {
  color: var(--texto-secundario) !important;
}

.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400 {
  color: var(--texto-muted) !important;
}

.text-white {
  color: var(--texto-blanco) !important;
}

.border-gray-300,
.border-gray-200,
.border-gray-400,
.border-slate-300,
.border-slate-200,
.border-slate-400 {
  border-color: var(--borde-principal) !important;
}

/* === BOTONES GLOBALES === */
button:not([class*="btn-"]) {
  color: var(--texto-principal) !important;
}

/* === INPUTS Y SELECTS GLOBALES === */
input, textarea, select {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border-color: var(--input-borde) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--input-focus-borde) !important;
  box-shadow: var(--input-focus-sombra) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--input-placeholder) !important;
}

/* === TABLAS GLOBALES === */
table {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
}

table thead {
  background-color: var(--tabla-header-fondo) !important;
}

table thead th {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  border-color: var(--tabla-borde) !important;
}

table tbody tr {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
}

table tbody tr:hover {
  background-color: var(--tabla-row-hover) !important;
}

table tbody tr.selected {
  background-color: var(--tabla-row-selected) !important;
  color: var(--texto-blanco) !important;
}

table td, table th {
  border-color: var(--tabla-borde) !important;
  color: var(--texto-principal) !important;
}

/* ControlLista / ControlListaPaginada: cabecera y filas con contraste temático */
table.ControlLista thead th,
.ControlLista thead th {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  font-weight: 700 !important;
}

table.ControlLista tbody tr,
.ControlLista tbody tr {
  background-color: var(--fondo-panel) !important;
}

table.ControlLista tbody tr:hover,
.ControlLista tbody tr:hover {
  background-color: var(--tabla-row-hover) !important;
}

/* === REPRODUCTORES DE VIDEO === */
.video-controls button,
.video-controls i {
  color: var(--btn-icono-texto) !important;
  background-color: var(--btn-icono-fondo) !important;
}

.video-controls button:hover,
.video-controls i:hover {
  color: var(--btn-icono-hover-texto) !important;
  background-color: var(--btn-icono-hover-fondo) !important;
}

/* === ICONOS GLOBALES === */
i[class*="ri-"] {
  color: inherit !important;
}

/* === SELECTORES ESPECÍFICOS PARA PANELES BASE === */
.panel,
#panelPrincipal {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
}


/* === SOBRESCRITURAS ESPECÍFICAS PARA COLORES PRIMARIOS === */
/* En modo oscuro, cambiar todos los colores #1C2646 por #4972db */
body.modo-oscuro [style*="#1C2646"] {
  color: #4972db !important;
}

body.modo-oscuro [style*="background-color: #1C2646"] {
  background-color: #4972db !important;
}

body.modo-oscuro [style*="border-color: #1C2646"] {
  border-color: #4972db !important;
}

/* ==========================================
   AJUSTES ESPECÍFICOS AMEF (TÍTULOS + TABLA)
   ========================================== */

/* Títulos AMEF en modo oscuro: azul claro y alto contraste */
body.modo-oscuro [id^="tituloAmefCreacion_"],
body.modo-oscuro [id^="subtituloDatosAmef_"],
body.modo-oscuro [id^="tituloVisualAmef_"],
body.modo-oscuro [id^="tituloConfigEscalasAmef_"] {
  color: #93c5fd !important;
}

/* Etiquetas y texto general dentro de AMEF en modo oscuro */
body.modo-oscuro [id^="panelAmefCreacion_"] label,
body.modo-oscuro [id^="panelPrincipalAmef_"] label,
body.modo-oscuro [id^="panelAmefCreacion_"] p,
body.modo-oscuro [id^="panelPrincipalAmef_"] p,
body.modo-oscuro [id^="panelAmefCreacion_"] span,
body.modo-oscuro [id^="panelPrincipalAmef_"] span,
body.modo-oscuro [id^="panelAmefCreacion_"] td,
body.modo-oscuro [id^="panelPrincipalAmef_"] td,
body.modo-oscuro [id^="panelAmefCreacion_"] th,
body.modo-oscuro [id^="panelPrincipalAmef_"] th {
  color: #f8fafc !important;
}

/* Tabla AMEF (claro): evitar fondo transparente y mejorar legibilidad */
[id^="wrapperTablaDetalleAmef_"] table,
[id^="wrapperTablaAmef_"] table {
  background: #ffffff !important;
  color: #1f2937 !important;
}

[id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(1) th,
[id^="wrapperTablaAmef_"] thead tr:nth-child(1) th {
  background: #dce4fa !important;
  color: #1c2646 !important;
  font-weight: 700 !important;
}

[id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th,
[id^="wrapperTablaAmef_"] thead tr:nth-child(2) th {
  background: #e5e7eb !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

[id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(3) th,
[id^="wrapperTablaAmef_"] thead tr:nth-child(3) th {
  background: #f1f5f9 !important;
  color: #1f2937 !important;
  font-weight: 700 !important;
}

[id^="wrapperTablaDetalleAmef_"] tbody tr:nth-child(odd),
[id^="wrapperTablaAmef_"] tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

[id^="wrapperTablaDetalleAmef_"] tbody tr:nth-child(even),
[id^="wrapperTablaAmef_"] tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

[id^="wrapperTablaDetalleAmef_"] tbody tr:hover,
[id^="wrapperTablaAmef_"] tbody tr:hover {
  background: #eef2ff !important;
}

[id^="wrapperTablaDetalleAmef_"] tbody td,
[id^="wrapperTablaDetalleAmef_"] thead th,
[id^="wrapperTablaAmef_"] tbody td,
[id^="wrapperTablaAmef_"] thead th {
  border-color: #cbd5e1 !important;
}

/* Tabla AMEF (oscuro): cabeceras y zebra rows visibles */
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"],
body.modo-oscuro [id^="wrapperTablaAmef_"] {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] table,
body.modo-oscuro [id^="wrapperTablaAmef_"] table {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(1) th,
body.modo-oscuro [id^="wrapperTablaAmef_"] thead tr:nth-child(1) th {
  background: #253868 !important;
  color: #dbeafe !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th,
body.modo-oscuro [id^="wrapperTablaAmef_"] thead tr:nth-child(2) th {
  background: #2f3a4f !important;
  color: #e2e8f0 !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(3) th,
body.modo-oscuro [id^="wrapperTablaAmef_"] thead tr:nth-child(3) th {
  background: #334155 !important;
  color: #f8fafc !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr:nth-child(odd),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr:nth-child(odd) {
  background: #111827 !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr:nth-child(even),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr:nth-child(even) {
  background: #172033 !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr:hover,
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr:hover {
  background: #22314a !important;
}

body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody td,
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] thead th,
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody td,
body.modo-oscuro [id^="wrapperTablaAmef_"] thead th {
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* Paginación AMEF */
[id^="tablaAmefDetalle_"][id$="_paginacion"],
[id^="tablaAmef_"][id$="_paginacion"] {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
}

body.modo-oscuro [id^="tablaAmefDetalle_"][id$="_paginacion"],
body.modo-oscuro [id^="tablaAmef_"][id$="_paginacion"] {
  background: #0f172a !important;
  border-top: 1px solid #334155 !important;
}

[id^="tablaConfigEscalasAmef_"][id$="_paginacion"] {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
}

body.modo-oscuro [id^="tablaConfigEscalasAmef_"][id$="_paginacion"] {
  background: #0f172a !important;
  border-top: 1px solid #334155 !important;
}

body.modo-oscuro [id^="tablaConfigEscalasAmef_"][id$="_texto_info"] {
  color: #e2e8f0 !important;
}

body.modo-oscuro [id^="tablaConfigEscalasAmef_"][id*="_btn_"] {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

body.modo-oscuro [id^="tablaConfigEscalasAmef_"][id*="_btn_"]:hover {
  background: #334155 !important;
  border-color: #64748b !important;
}

/* Botones secundarios AMEF en oscuro: borde blanco + fondo oscuro con contraste */
body.modo-oscuro [id^="botonAnadirOperacionAmef_"],
body.modo-oscuro [id^="botonConfigEscalasAmef_"],
body.modo-oscuro [id^="botonSalirAmef_"],
body.modo-oscuro [id^="botonAtrasConfigEscalasAmef_"] {
  background-color: #1f2937 !important;
  color: #f8fafc !important;
  border: 1px solid #ffffff !important;
}

body.modo-oscuro [id^="botonAnadirOperacionAmef_"]:hover,
body.modo-oscuro [id^="botonConfigEscalasAmef_"]:hover,
body.modo-oscuro [id^="botonSalirAmef_"]:hover,
body.modo-oscuro [id^="botonAtrasConfigEscalasAmef_"]:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.modo-oscuro [id^="botonAnadirOperacionAmef_"] i,
body.modo-oscuro [id^="botonConfigEscalasAmef_"] i,
body.modo-oscuro [id^="botonSalirAmef_"] i,
body.modo-oscuro [id^="botonAtrasConfigEscalasAmef_"] i {
  color: inherit !important;
}

body.modo-oscuro [id^="tablaAmefDetalle_"][id$="_texto_info"],
body.modo-oscuro [id^="tablaAmef_"][id$="_texto_info"] {
  color: #e2e8f0 !important;
}

body.modo-oscuro [id^="tablaAmefDetalle_"][id*="_btn_"],
body.modo-oscuro [id^="tablaAmef_"][id*="_btn_"] {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

body.modo-oscuro [id^="tablaAmefDetalle_"][id*="_btn_"]:hover,
body.modo-oscuro [id^="tablaAmef_"][id*="_btn_"]:hover {
  background: #334155 !important;
  border-color: #64748b !important;
}

/* Inputs y etiquetas de AMEF (creación) con el mismo look de combos en oscuro */
body.modo-oscuro [id^="label_nombreTablaAmef_"],
body.modo-oscuro [id^="label_nombreMaquinaAmef_"],
.modo-oscuro [id^="label_nombreTablaAmef_"],
.modo-oscuro [id^="label_nombreMaquinaAmef_"] {
  color: var(--texto-principal) !important;
}

body.modo-oscuro [id^="input_nombreTablaAmef_"],
body.modo-oscuro [id^="input_nombreMaquinaAmef_"],
.modo-oscuro [id^="input_nombreTablaAmef_"],
.modo-oscuro [id^="input_nombreMaquinaAmef_"] {
  background-color: var(--input-fondo) !important;
  border-color: var(--input-borde) !important;
  color: var(--input-texto) !important;
}

body.modo-oscuro [id^="input_nombreTablaAmef_"]::placeholder,
body.modo-oscuro [id^="input_nombreMaquinaAmef_"]::placeholder,
.modo-oscuro [id^="input_nombreTablaAmef_"]::placeholder,
.modo-oscuro [id^="input_nombreMaquinaAmef_"]::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

body.modo-oscuro [id^="input_nombreTablaAmef_"]:hover,
body.modo-oscuro [id^="input_nombreMaquinaAmef_"]:hover,
body.modo-oscuro [id^="input_nombreTablaAmef_"]:focus,
body.modo-oscuro [id^="input_nombreMaquinaAmef_"]:focus,
.modo-oscuro [id^="input_nombreTablaAmef_"]:hover,
.modo-oscuro [id^="input_nombreMaquinaAmef_"]:hover,
.modo-oscuro [id^="input_nombreTablaAmef_"]:focus,
.modo-oscuro [id^="input_nombreMaquinaAmef_"]:focus {
  background-color: var(--input-fondo) !important;
  border-color: var(--input-focus-borde) !important;
  box-shadow: var(--input-focus-sombra) !important;
}

/* Toast de información: asegurar contraste en modo oscuro */
body.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"],
.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"] {
  background-color: var(--fondo-secundario) !important;
  color: var(--texto-principal) !important;
  border-color: var(--color-info) !important;
}

body.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"] #notificacion-toast-icono,
.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"] #notificacion-toast-icono {
  color: var(--color-info) !important;
}

body.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"] #notificacion-toast-icono-wrapper,
.modo-oscuro #notificacion-toast-tempia[data-toast-type="info"] #notificacion-toast-icono-wrapper {
  border-color: var(--color-info) !important;
}

/* AMEF creación en modo claro: tabla con capas y contraste (como referencia visual) */
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] table {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(1) th {
  background: #dbe4f4 !important;
  color: #1f2a44 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th {
  background: #e5e7eb !important;
  color: #374151 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th:nth-child(6),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th:nth-child(8),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th:nth-child(10),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(2) th:nth-child(11) {
  background: #ffffff !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] thead tr:nth-child(3) th {
  background: #edf2f7 !important;
  color: #1f2937 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr {
  background: #f8fafc !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr:nth-child(even) {
  background: #f1f5f9 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td:nth-child(6),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td:nth-child(8),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td:nth-child(10),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td:nth-child(11) {
  background: #e6ebf5 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-bajo,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-bajo {
  background: #dcfce7 !important;
  color: #166534 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-medio,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-medio {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-alto,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef.rpn-riesgo-alto {
  background: #ef4444 !important;
  color: #ffffff !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef span,
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef p,
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody td.celda-rpn-amef a,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef span,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef p,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody td.celda-rpn-amef a {
  color: inherit !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr:hover {
  background: #eaf1ff !important;
}

/* Fila seleccionada AMEF: legible en celdas no numéricas */
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td {
  color: #f8fafc !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada .txt-causas-operacion-amef,
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada .txt-causas-operacion-amef {
  color: #f8fafc !important;
}

/* Fila seleccionada AMEF: ajustar contraste solo en columnas numéricas */
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(6),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(8),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(10),
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(11),
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(6),
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(8),
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(10),
body:not(.modo-oscuro) [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(11) {
  background: #d7e3f8 !important;
  color: #1f2937 !important;
  font-weight: 700 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] th,
body:not(.modo-oscuro) [id^="wrapperTablaDetalleAmef_"] td {
  border-color: #cbd5e1 !important;
}

/* Panel Configuración Escalas AMEF - estilo de lista paginada */
body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] table {
  background: #ffffff !important;
  color: #1f2937 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] thead th {
  background: #edf2f7 !important;
  color: #1f2937 !important;
  border-color: #cbd5e1 !important;
  font-weight: 700 !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:hover {
  background: #eaf1ff !important;
}

body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] td,
body:not(.modo-oscuro) [id^="wrapperTablaConfigEscalasAmef_"] th {
  border-color: #cbd5e1 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] table {
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] thead th {
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:nth-child(odd) {
  background: #111827 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:nth-child(even) {
  background: #172033 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] tbody tr:hover {
  background: #22314a !important;
}

/* Fila seleccionada AMEF en oscuro: mantener legibilidad fuera de numéricas */
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td,
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td,
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada .txt-causas-operacion-amef,
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada .txt-causas-operacion-amef {
  color: #f8fafc !important;
}

/* En oscuro, mantener énfasis numérico de la fila seleccionada sin afectar otras columnas */
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(6),
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(8),
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(10),
body.modo-oscuro [id^="wrapperTablaDetalleAmef_"] tbody tr.FilaSeleccionada td:nth-child(11),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(6),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(8),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(10),
body.modo-oscuro [id^="wrapperTablaAmef_"] tbody tr.FilaSeleccionada td:nth-child(11) {
  background: #314061 !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
}

body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] td,
body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] th,
body.modo-oscuro [id^="wrapperTablaConfigEscalasAmef_"] i {
  color: #f8fafc !important;
  border-color: #334155 !important;
}


/* === DROPDOWN Y SELECT ESPECÍFICOS === */
.selector-elemento,
.selector-modificar-elemento,
select[class*="selector"] {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border-color: var(--input-borde) !important;
}

/* === MODALES Y OVERLAYS === */
.modal, .overlay, [class*="modal"] {
  background-color: var(--modal-fondo) !important;
  color: var(--texto-principal) !important;
}

/* === SOBRESCRITURAS PARA ELEMENTOS ESPECÍFICOS DE TAILWIND === */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: var(--sombra-md) !important;
}

/* === FORZAR COLORES EN ELEMENTOS DINÁMICOS === */

/* === ASEGURAR QUE LOS CONTENEDORES PRINCIPALES USEN LOS COLORES CORRECTOS === */
#idBody,
#panelPrincipal,
.layout,
.has-sidebar,
.fixed-sidebar,
.fixed-header {
  background-color: var(--fondo-principal) !important;
  color: var(--texto-principal) !important;
}

/* ==========================================
   EXCEPCIONES PARA COMPONENTES ESPECÍFICOS
   ========================================== */

/* === LOADER / SPINNER - MANTENER COLORES ORIGINALES === */
.loader,
.spinner,
[class*="loader"],
[class*="spinner"],
.loading,
[class*="loading"] {
  color: inherit !important;
  background-color: transparent !important;
  border-color: inherit !important;
}

/* Spinner específico - mantener el color azul/cyan original */
.loader::after,
.spinner::after,
.loading::after,
[class*="loader"]::after,
[class*="spinner"]::after,
[class*="loading"]::after {
  border-color: #5ac9dc transparent #5ac9dc transparent !important;
}

/* Texto del loader */
.loader-text,
.loading-text,
[class*="loader"] + *,
[class*="spinner"] + *,
[class*="loading"] + *,
*[class*="Cargando"],
*:contains("Cargando"),
*:contains("Loading") {
  color: #ffffff !important;
}

/* Texto específico para "Cargando Dashboard..." */
body.modo-oscuro *[text*="Cargando"],
body.modo-oscuro *[innerText*="Cargando"],
body.modo-oscuro *[textContent*="Cargando"] {
  color: #ffffff !important;
}

/* Contenedor del loader */
.loader-container,
.loading-container,
[class*="loader-container"],
[class*="loading-container"] {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
}

/* === OTRAS EXCEPCIONES PARA COMPONENTES QUE DEBEN MANTENER SUS COLORES === */

/* Charts y gráficos */
.chart,
[class*="chart"],
canvas {
  background-color: transparent !important;
}

/* Logos */
.logo,
[class*="logo"],
img[src*="logo"] {
  filter: none !important;
}

/* === FORZAR ESTILO DE CAPTION DE TABLAS EN MODO OSCURO === */
body.modo-oscuro table caption,
body.modo-oscuro .table caption,
body.modo-oscuro .tabla-theme caption {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  border: 1px solid var(--tabla-borde) !important;
  border-radius: 4px;
  padding: 2px 8px;
}
/* === FORZAR BOTONES PRIMARIOS EN MODO OSCURO (con mayor especificidad) === */
body.modo-oscuro button.btn-primario,
body.modo-oscuro button.btn-primary,
body.modo-oscuro .btn-primario,
body.modo-oscuro .btn-primary {
  background-color: #4972db !important;
  color: #fff !important;
  border-color: #4972db !important;
}
body.modo-oscuro button.btn-primario:hover,
body.modo-oscuro button.btn-primary:hover,
body.modo-oscuro .btn-primario:hover,
body.modo-oscuro .btn-primary:hover {
  background-color: #6b8dff !important;
  color: #fff !important;
  border-color: #6b8dff !important;
}
body.modo-oscuro button.btn-primario:active,
body.modo-oscuro button.btn-primary:active,
body.modo-oscuro .btn-primario:active,
body.modo-oscuro .btn-primary:active {
  background-color: #4972db !important;
  color: #fff !important;
  border-color: #4972db !important;
}
/* === FORZAR CABECERA DE TABLAS EN MODO OSCURO: CON COLOR DE TEMA === */
body.modo-oscuro table thead th,
body.modo-oscuro .table thead th,
body.modo-oscuro .tabla-theme thead th,
body.modo-oscuro thead th {
  background-color: var(--tabla-header-fondo) !important;
  color: var(--tabla-header-texto) !important;
  border: 1px solid var(--tabla-borde) !important;
}

/* === FORZAR BOTONES CON COLOR DIRECTO EN MODO OSCURO === */
body.modo-oscuro button[style*="#1C2646"],
body.modo-oscuro .btn[style*="#1C2646"],
body.modo-oscuro .btn-primario[style],
body.modo-oscuro .btn-primary[style],
body.modo-oscuro .btn-icono[style],
body.modo-oscuro .btn-icon[style] {
  background-color: #4972db !important;
  color: #fff !important;
  border-color: #4972db !important;
}
body.modo-oscuro .btn-icono,
body.modo-oscuro .btn-icon {
  color: #4972db !important;
}
body.modo-oscuro .btn-icono:hover,
body.modo-oscuro .btn-icon:hover {
  color: #6b8dff !important;
}
/* === FORZAR FILA SELECCIONADA DE TABLA EN MODO OSCURO === */
body.modo-oscuro tr.selected,
body.modo-oscuro .table tr.selected,
body.modo-oscuro .tabla-theme tr.selected,
body.modo-oscuro table tr.selected,
body.modo-oscuro tbody tr.selected {
  background-color: #4972db !important;
  color: #fff !important;
}   

/* === HOVER PARA BOTONES PRIMARIOS EN MODO OSCURO (menos luminoso) === */
body.modo-oscuro button.btn-primario:hover,
body.modo-oscuro button.btn-primary:hover,
body.modo-oscuro .btn-primario:hover,
body.modo-oscuro .btn-primary:hover,
body.modo-oscuro button[style*="#1C2646"]:hover,
body.modo-oscuro .btn[style*="#1C2646"]:hover,
body.modo-oscuro .btn-primario[style]:hover,
body.modo-oscuro .btn-primary[style]:hover,
body.modo-oscuro .bg-\[\#1C2646\]:hover,
body.modo-oscuro .bg-\[\#1c2646\]:hover {
  background-color: #3456a2 !important;
  color: #fff !important;
  border-color: #3456a2 !important;
}
/* === HOVER Y ACTIVA DE PESTAÑAS EN MODO OSCURO: SIN FONDO BLANCO === */
body.modo-oscuro .tab-item.active,
body.modo-oscuro .tab-item.bg-white,
body.modo-oscuro .tab-item.bg-\[\#fff\],
body.modo-oscuro .tab-item.bg-\[\#ffffff\],
body.modo-oscuro .tab-item[style*="background-color: #fff"],
body.modo-oscuro .tab-item[style*="background-color: #ffffff"],
body.modo-oscuro .tab-item:hover,
body.modo-oscuro .tab-item.active:hover {
  background-color: transparent !important;
  color: #4972db !important;
  border-color: #4972db !important;
}
/* === FORZAR BOTONES CON COLOR DIRECTO Y CLASES DE TAILWIND EN MODO OSCURO === */
body.modo-oscuro button[style*="#1C2646"],
body.modo-oscuro .btn[style*="#1C2646"],
body.modo-oscuro .btn-primario[style],
body.modo-oscuro .btn-primary[style],
body.modo-oscuro .btn-icono[style],
body.modo-oscuro .btn-icon[style],
body.modo-oscuro .bg-\[\#1C2646\],
body.modo-oscuro .bg-\[\#1c2646\] {
  background-color: #4972db !important;
  color: #fff !important;
  border-color: #4972db !important;
}
body.modo-oscuro .btn-icono,
body.modo-oscuro .btn-icon {
  color: #4972db !important;
}
body.modo-oscuro .btn-icono:hover,
body.modo-oscuro .btn-icon:hover {
  color: #6b8dff !important;
}

/* === FORZAR PESTAÑA ACTIVA SIN FONDO BLANCO EN MODO OSCURO === */

body.modo-oscuro .boton-pestana.active {
  background-color: rgba(73, 114, 219, 0.18) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #4972db !important;
}

body.modo-oscuro .boton-pestana.active:hover {
    background-color: rgba(13, 69, 209, 0.541) !important;
    color: #ffffff !important;
    border-bottom: 2px solid #4972db !important;
}

/* Quitar borde a tablas de botones solo dentro de diálogos en modo oscuro */
body.modo-oscuro dialog.dialogoFondo .tablaBotonesModificarActividad,
body.modo-oscuro dialog.dialogoFondo .tabla-botones-dialogo,
body.modo-oscuro dialog.dialogoFondo .tabla-botones,
body.modo-oscuro dialog.dialogoFondo .tabla-botones-acciones {
  border: none !important;
  border-color: transparent !important;
}

/* Suprimir bordes blancos en tablas de layout (TablaControles) dentro de diálogos en modo oscuro.
   Las tablas de datos reales dentro de diálogos usan clases .ControlLista/.table/.tabla-theme
   y mantienen sus propios estilos con mayor especificidad. */
body.modo-oscuro dialog.dialogoFondo table,
body.modo-oscuro dialog.dialogoFondo caption,
body.modo-oscuro dialog.dialogoFondo tbody,
body.modo-oscuro dialog.dialogoFondo tr,
body.modo-oscuro dialog.dialogoFondo td,
body.modo-oscuro dialog.dialogoFondo th {
  border: none !important;
  border-color: transparent !important;
}

/* Excepción: tablas de datos reales dentro de diálogos mantienen sus bordes */
body.modo-oscuro dialog.dialogoFondo .ControlLista table,
body.modo-oscuro dialog.dialogoFondo .ControlLista caption,
body.modo-oscuro dialog.dialogoFondo .ControlLista tbody,
body.modo-oscuro dialog.dialogoFondo .ControlLista tr,
body.modo-oscuro dialog.dialogoFondo .ControlLista td,
body.modo-oscuro dialog.dialogoFondo .ControlLista th,
body.modo-oscuro dialog.dialogoFondo .table tr,
body.modo-oscuro dialog.dialogoFondo .table td,
body.modo-oscuro dialog.dialogoFondo .table th,
body.modo-oscuro dialog.dialogoFondo .tabla-theme tr,
body.modo-oscuro dialog.dialogoFondo .tabla-theme td,
body.modo-oscuro dialog.dialogoFondo .tabla-theme th {
  border: 1px solid var(--tabla-borde) !important;
}

/* === FONDO OSCURO PARA DIALOGOS EN MODO OSCURO === */
body.modo-oscuro .dialogoFondo,
body.modo-oscuro .cargaGlobalFondo {
  background: #161618 !important;
  backdrop-filter: blur(3px) !important;
  border: none !important;
  box-shadow: 0 0 0 9999px rgba(10,12,24,0.85) !important;
}

body.modo-oscuro dialog.dialogoFondo .dialogo,
body.modo-oscuro dialog.dialogoFondo .dialogoReal,
body.modo-oscuro dialog.dialogoFondo .bg-white,
body.modo-oscuro dialog.dialogoFondo .bg-gray-50 {
  background: #16161891 !important;
  color: #e6e6f0 !important;
  border: none !important;
  /* No forzar box-shadow aquí, dejar que la clase lo defina */
}

body.modo-oscuro dialog.dialogoFondo .rounded-lg,
body.modo-oscuro dialog.dialogoFondo .rounded-md {
  border-radius: 16px !important;
}

body.modo-oscuro dialog.dialogoFondo .border,
body.modo-oscuro dialog.dialogoFondo .border-white,
body.modo-oscuro dialog.dialogoFondo .border-gray-300,
body.modo-oscuro dialog.dialogoFondo .border-gray-200 {
  border: none !important;
}
body.modo-oscuro dialog.dialogoFondo button,
body.modo-oscuro dialog.dialogoFondo .btn,
body.modo-oscuro dialog.dialogoFondo .btn-primario,
body.modo-oscuro dialog.dialogoFondo .btn-primary {
  border: none !important;
  box-shadow: none !important;
}
/* === FILA SELECCIONADA EN TABLAS (ControlLista, etc) === */
body.modo-oscuro .FilaSeleccionada,
body.modo-oscuro tr.FilaSeleccionada,
body.modo-oscuro .table tr.FilaSeleccionada,
body.modo-oscuro .tabla-theme tr.FilaSeleccionada,
body.modo-oscuro table tr.FilaSeleccionada,
body.modo-oscuro tbody tr.FilaSeleccionada {
  background-color: #4972db !important;
  color: #fff !important;
}
body.modo-oscuro .FilaSeleccionada td,
body.modo-oscuro tr.FilaSeleccionada td {
  background-color: #4972db !important;
  color: #fff !important;
}

body:not(.modo-oscuro) .FilaSeleccionada,
body:not(.modo-oscuro) tr.FilaSeleccionada,
body:not(.modo-oscuro) .table tr.FilaSeleccionada,
body:not(.modo-oscuro) .tabla-theme tr.FilaSeleccionada,
body:not(.modo-oscuro) table tr.FilaSeleccionada,
body:not(.modo-oscuro) tbody tr.FilaSeleccionada {
  background-color: #1C2646 !important;
  color: #fff !important;
}
body:not(.modo-oscuro) .FilaSeleccionada td,
body:not(.modo-oscuro) tr.FilaSeleccionada td {
  background-color: #1C2646 !important;
  color: #fff !important;
}

/* Botones/iconos dentro de filas seleccionadas (AMEF y tablas similares) */
body .FilaSeleccionada button,
body tr.FilaSeleccionada button,
body .filaSeleccionada button,
body tr.filaSeleccionada button,
body .FilaSeleccionada button i,
body tr.FilaSeleccionada button i,
body .filaSeleccionada button i,
body tr.filaSeleccionada button i {
  color: #fff !important;
}
/* Inputs y selects en diálogos en modo oscuro: borde blanco y fondo más claro */
body.modo-oscuro .dialogo input,
body.modo-oscuro .dialogo select,
body.modo-oscuro .dialogo textarea,
body.modo-oscuro .dialogoReal input,
body.modo-oscuro .dialogoReal select,
body.modo-oscuro .dialogoReal textarea {
  background: #23232a !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
  box-shadow: none !important;
}
body.modo-oscuro .dialogo input::placeholder,
body.modo-oscuro .dialogo textarea::placeholder,
body.modo-oscuro .dialogoReal input::placeholder,
body.modo-oscuro .dialogoReal textarea::placeholder {
  color: #bfc4d0 !important;
  opacity: 1 !important;
}

/* ==========================================
   AJUSTES: FORZAR COLORES EN PANELES DE AJUSTES
   ========================================== */

/* Forzar borde blanco en tarjetas de opciones de Ajustes en modo oscuro (especificidad máxima) */
body.modo-oscuro [id^="opcionTarjeta_"] {
  border: 2px solid #fff !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
/* Título principal de Ajustes: borde y texto blanco en modo oscuro */
body.modo-oscuro #tituloAjustes_panelAjustes,
body.modo-oscuro #tituloAjustes_panelAjustes * {
  color: #fff !important;
  border-color: #fff !important;
}

body.modo-oscuro [id^="tituloApariencia_"],
body.modo-oscuro [id^="tituloApariencia_"] *,
.modo-oscuro [id^="tituloApariencia_"],
.modo-oscuro [id^="tituloApariencia_"] * {
  color: var(--texto-principal) !important;
}

body.modo-oscuro [id^="descrApariencia_"],
.modo-oscuro [id^="descrApariencia_"] {
  color: var(--texto-secundario) !important;
}

body.modo-oscuro [id^="lineaApariencia_"],
.modo-oscuro [id^="lineaApariencia_"] {
  border-color: var(--borde-divider) !important;
}
/* Tarjetas de opciones de Ajustes: modo oscuro forzado */
body.modo-oscuro [id^="opcionTarjeta_"] {
  border: 2px solid #fff !important;
}
body.modo-oscuro [id^="opcionTarjeta_"] .ri-building-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-user-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-camera-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-notification-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-archive-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-contrast-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-lock-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-mail-check-line,
body.modo-oscuro [id^="opcionTarjeta_"] .ri-paypal-line {
  color: #fff !important;
}
body.modo-oscuro [id^="opcionTarjeta_"] [class*="label_"],
body.modo-oscuro [id^="opcionTarjeta_"] [class*="icon_"] {
  color: #fff !important;
}
body.modo-oscuro [id^="opcionTarjeta_"] .text-\[\#1C2646\],
body.modo-oscuro [id^="opcionTarjeta_"] .text-\[\#1c2646\],
body.modo-oscuro [id^="opcionTarjeta_"] .text-\[\#172554\] {
  color: #fff !important;
}

body.modo-oscuro dialog.dialogoFondo p {
  color: #fff !important;
}

/* Selectores tipo ComboDropdownAvanzado (div con class border): forzar borde blanco en modo oscuro */
body.modo-oscuro [id^="combo_selector"],
body.modo-oscuro [id^="combo_selector"]:hover,
body.modo-oscuro [id^="combo_selector"]:focus,
body.modo-oscuro [id^="combo_selector"]:focus-within {
  border-color: transparent !important;
  --tw-border-opacity: 1 !important;
  box-shadow: none !important;
}

/* Fallback para otros combos dinámicos del mismo control */
body.modo-oscuro [id^="combo_"][class*="border"],
body.modo-oscuro [id^="combo_"][class*="border"]:hover,
body.modo-oscuro [id^="combo_"][class*="border"]:focus-within {
  border-color: transparent !important;
  --tw-border-opacity: 1 !important;
  box-shadow: none !important;
}

/* ===== Selectores / placeholders más legibles en modo oscuro ===== */
body.modo-oscuro [id^="combo_selector"][id$="_main"],
body.modo-oscuro [id^="combo_selector"] [id$="_main"],
body.modo-oscuro [id^="combo_selector"][id$="_dropdown"],
body.modo-oscuro [id^="combo_selector"] [id$="_dropdown"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_main"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_dropdown"] {
  background-color: #2d3038 !important;
}

body.modo-oscuro [id^="combo_selector"] [id$="_selected"],
body.modo-oscuro [id^="combo_selector"] [id$="_svg"],
body.modo-oscuro [id^="combo_selector"] [id*="_txt_"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_selected"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id$="_svg"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id*="_txt_"] {
  color: #f3f4f6 !important;
}

body.modo-oscuro [id^="combo_selector"] [id*="_row_"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id*="_row_"] {
  background-color: #2d3038 !important;
  border-color: transparent !important;
}

body.modo-oscuro [id^="combo_selector"] [id*="_row_"]:hover,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [id*="_row_"]:hover {
  background-color: #3a3e49 !important;
  border-color: transparent !important;
}

/* Quitar bordes internos visibles en dropdowns de combos/selectores en modo oscuro */
body.modo-oscuro [id^="combo_selector"] input,
body.modo-oscuro [id^="combo_selector"] button,
body.modo-oscuro [id^="combo_selector"] [class*="border"],
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] input,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] button,
body.modo-oscuro [id^="contenedorVisualMultipleCheck_"] [class*="border"] {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Select nativo: texto/placeholder visual más claro */
body.modo-oscuro select,
body.modo-oscuro select option {
  color: #f3f4f6 !important;
}

/* ===== Filtros de fecha y hora (mismo look que combos en oscuro) ===== */
body.modo-oscuro [id^="contenedorVisualFecha_"],
body.modo-oscuro [id^="contenedorVisualFechaInicio_"],
body.modo-oscuro [id^="contenedorVisualFechaFin_"],
body.modo-oscuro [id^="contenedorVisualHora_"],
body.modo-oscuro [id^="contenedorVisualHoraInicio_"],
body.modo-oscuro [id^="contenedorVisualHoraFin_"] {
  background-color: #2d3038 !important;
  border-color: #ffffff !important;
}

body.modo-oscuro [id^="contenedorVisualFecha_"]:hover,
body.modo-oscuro [id^="contenedorVisualFechaInicio_"]:hover,
body.modo-oscuro [id^="contenedorVisualFechaFin_"]:hover,
body.modo-oscuro [id^="contenedorVisualHora_"]:hover,
body.modo-oscuro [id^="contenedorVisualHoraInicio_"]:hover,
body.modo-oscuro [id^="contenedorVisualHoraFin_"]:hover,
body.modo-oscuro [id^="contenedorVisualFecha_"]:focus-within,
body.modo-oscuro [id^="contenedorVisualFechaInicio_"]:focus-within,
body.modo-oscuro [id^="contenedorVisualFechaFin_"]:focus-within,
body.modo-oscuro [id^="contenedorVisualHora_"]:focus-within,
body.modo-oscuro [id^="contenedorVisualHoraInicio_"]:focus-within,
body.modo-oscuro [id^="contenedorVisualHoraFin_"]:focus-within {
  background-color: #3a3e49 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) !important;
}

body.modo-oscuro [id^="labelFecha_"],
body.modo-oscuro [id^="labelFechaInicio_"],
body.modo-oscuro [id^="labelFechaFin_"],
body.modo-oscuro [id^="labelHora_"],
body.modo-oscuro [id^="labelHoraInicio_"],
body.modo-oscuro [id^="labelHoraFin_"] {
  color: #ffffff !important;
  background-color: #12131a !important;
}

body.modo-oscuro [id^="entradaFecha_"],
body.modo-oscuro [id^="entradaFechaInicio_"],
body.modo-oscuro [id^="entradaFechaFin_"],
body.modo-oscuro [id^="entradaHora_"],
body.modo-oscuro [id^="entradaHoraInicio_"],
body.modo-oscuro [id^="entradaHoraFin_"] {
  background-color: transparent !important;
  color: #f3f4f6 !important;
  caret-color: #f3f4f6 !important;
}

body.modo-oscuro [id^="entradaFecha_"]::placeholder,
body.modo-oscuro [id^="entradaFechaInicio_"]::placeholder,
body.modo-oscuro [id^="entradaFechaFin_"]::placeholder,
body.modo-oscuro [id^="entradaHora_"]::placeholder,
body.modo-oscuro [id^="entradaHoraInicio_"]::placeholder,
body.modo-oscuro [id^="entradaHoraFin_"]::placeholder {
  color: #e5e7eb !important;
  opacity: 1 !important;
}

/* ==========================================
   NORMALIZACIÓN BASE DE DIÁLOGOS (TODOS LOS MODOS)
   ========================================== */
dialog.dialogoFondo [id^="dialogoReal_"],
dialog.dialogoFondo .dialogo,
dialog.dialogoFondo .dialogoReal {
  background-color: var(--fondo-panel) !important;
  color: var(--texto-principal) !important;
  border: 1px solid var(--borde-principal) !important;
}

dialog.dialogoFondo input,
dialog.dialogoFondo select,
dialog.dialogoFondo textarea {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border: 1px solid var(--input-borde) !important;
}

dialog.dialogoFondo input:focus,
dialog.dialogoFondo select:focus,
dialog.dialogoFondo textarea:focus {
  border-color: var(--input-focus-borde) !important;
}

dialog.dialogoFondo [id^="combo_selector"] [id$="_main"],
dialog.dialogoFondo [id^="combo_selector"] [id$="_dropdown"],
dialog.dialogoFondo [id^="selector"] [id$="_main"],
dialog.dialogoFondo [id^="selector"] [id$="_dropdown"] {
  border-color: var(--input-borde) !important;
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
}

/* ==========================================
   NORMALIZACIÓN GLOBAL DE DIÁLOGOS (MODO OSCURO)
   ========================================== */
body.modo-oscuro dialog.dialogoFondo {
  background: transparent !important;
  border: none !important;
}

body.modo-oscuro dialog.dialogoFondo::backdrop {
  background: rgba(7,10,20,0.82) !important;
  backdrop-filter: blur(3px) !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="dialogoReal_"],
body.modo-oscuro dialog.dialogoFondo .dialogo {
  background: #12131a !important;
  color: #f3f4f6 !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
}

body.modo-oscuro dialog.dialogoFondo h1,
body.modo-oscuro dialog.dialogoFondo h2,
body.modo-oscuro dialog.dialogoFondo h3,
body.modo-oscuro dialog.dialogoFondo [id*="titulo"],
body.modo-oscuro dialog.dialogoFondo [id*="subtitulo"] {
  color: #93c5fd !important;
}

body.modo-oscuro dialog.dialogoFondo label,
body.modo-oscuro dialog.dialogoFondo p,
body.modo-oscuro dialog.dialogoFondo span,
body.modo-oscuro dialog.dialogoFondo td,
body.modo-oscuro dialog.dialogoFondo th {
  color: #f3f4f6 !important;
}

body.modo-oscuro dialog.dialogoFondo input,
body.modo-oscuro dialog.dialogoFondo select,
body.modo-oscuro dialog.dialogoFondo textarea {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border: 1px solid #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo input::placeholder,
body.modo-oscuro dialog.dialogoFondo textarea::placeholder {
  color: #d1d5db !important;
  opacity: 1 !important;
}

body.modo-oscuro dialog.dialogoFondo input:focus,
body.modo-oscuro dialog.dialogoFondo select:focus,
body.modo-oscuro dialog.dialogoFondo textarea:focus {
  background: #3a3e49 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_"][class*="border"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id$="_main"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id$="_dropdown"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id$="_main"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id$="_dropdown"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id*="_row_"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id*="_row_"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: transparent !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id*="_row_"]:hover,
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id*="_row_"]:hover {
  background: #3a3e49 !important;
}

/* Refuerzo para controles con clases utilitarias (ej. bg-white, border-gray-300) */
body.modo-oscuro dialog.dialogoFondo select.bg-white,
body.modo-oscuro dialog.dialogoFondo input.bg-white,
body.modo-oscuro dialog.dialogoFondo textarea.bg-white,
body.modo-oscuro dialog.dialogoFondo select[class*="border-gray"],
body.modo-oscuro dialog.dialogoFondo input[class*="border-gray"],
body.modo-oscuro dialog.dialogoFondo textarea[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo select.bg-white,
.modo-oscuro dialog.dialogoFondo input.bg-white,
.modo-oscuro dialog.dialogoFondo textarea.bg-white,
.modo-oscuro dialog.dialogoFondo select[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo input[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo textarea[class*="border-gray"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo select.bg-white:focus,
body.modo-oscuro dialog.dialogoFondo input.bg-white:focus,
body.modo-oscuro dialog.dialogoFondo textarea.bg-white:focus,
.modo-oscuro dialog.dialogoFondo select.bg-white:focus,
.modo-oscuro dialog.dialogoFondo input.bg-white:focus,
.modo-oscuro dialog.dialogoFondo textarea.bg-white:focus {
  background: #3a3e49 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) !important;
}

body.modo-oscuro dialog.dialogoFondo select.bg-white option,
body.modo-oscuro dialog.dialogoFondo select[class*="border-gray"] option,
.modo-oscuro dialog.dialogoFondo select.bg-white option,
.modo-oscuro dialog.dialogoFondo select[class*="border-gray"] option {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
}

body.modo-oscuro dialog.dialogoFondo button[class*="bg-gray"],
body.modo-oscuro dialog.dialogoFondo .btn[class*="bg-gray"] {
  background: #1f2937 !important;
  color: #f8fafc !important;
  border: 1px solid #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo canvas,
body.modo-oscuro dialog.dialogoFondo [id^="wrapperCanvas"] {
  background: #2d3038 !important;
  border-color: #475569 !important;
}
/* === ComboMultipleCheck y ComboDialogoModal (SelectorCamara): modo oscuro ===
   Aplica a cualquier combo con borde #181f3a que no sea ya cubierto por combo_selector* */

/* Caja principal (trigger / main): fondo oscuro, borde blanco */
body.modo-oscuro [id$="_main"].border-\[\#181f3a\],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] {
  background-color: #2d3038 !important;
  border-color: #ffffff !important;
  color: #f3f4f6 !important;
}

/* Texto de placeholder y flecha dentro de la caja principal */
body.modo-oscuro [id$="_main"].border-\[\#181f3a\] [id$="_selected"],
body.modo-oscuro [id$="_main"].border-\[\#181f3a\] [id$="_svg"],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] [id$="_resumen"],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] [id$="_icono"] {
  color: #f3f4f6 !important;
}

/* Label flotante: fondo coincide con el panel oscuro, texto claro */
body.modo-oscuro [id$="_label"].bg-white.text-\[\#181f3a\] {
  background-color: var(--fondo-panel, #161618) !important;
  color: #b0b3c6 !important;
}

/* Dropdown abierto */
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] {
  background-color: #2d3038 !important;
  border-color: #ffffff !important;
  color: #f3f4f6 !important;
}

/* Labels e items dentro del dropdown */
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] label,
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] [id*="_item_"],
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] span {
  color: #f3f4f6 !important;
}

body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] [id*="_item_"]:hover {
  background-color: #3a3e49 !important;
}

/* Label del ComboDialogoModal (texto sobre el trigger, sin bg-white) */
body.modo-oscuro [id$="_label"].text-slate-800 {
  color: #b0b3c6 !important;
}

dialog.dialogoFondo input,
dialog.dialogoFondo select,
dialog.dialogoFondo textarea {
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
  border: 1px solid var(--input-borde) !important;
}

dialog.dialogoFondo input:focus,
dialog.dialogoFondo select:focus,
dialog.dialogoFondo textarea:focus {
  border-color: var(--input-focus-borde) !important;
}

dialog.dialogoFondo [id^="combo_selector"] [id$="_main"],
dialog.dialogoFondo [id^="combo_selector"] [id$="_dropdown"],
dialog.dialogoFondo [id^="selector"] [id$="_main"],
dialog.dialogoFondo [id^="selector"] [id$="_dropdown"] {
  border-color: var(--input-borde) !important;
  background-color: var(--input-fondo) !important;
  color: var(--input-texto) !important;
}

/* ==========================================
   NORMALIZACIÓN GLOBAL DE DIÁLOGOS (MODO OSCURO)
   ========================================== */
body.modo-oscuro dialog.dialogoFondo {
  background: transparent !important;
  border: none !important;
}

body.modo-oscuro dialog.dialogoFondo::backdrop {
  background: rgba(7,10,20,0.82) !important;
  backdrop-filter: blur(3px) !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="dialogoReal_"],
body.modo-oscuro dialog.dialogoFondo .dialogo {
  background: #12131a !important;
  color: #f3f4f6 !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
}

body.modo-oscuro dialog.dialogoFondo h1,
body.modo-oscuro dialog.dialogoFondo h2,
body.modo-oscuro dialog.dialogoFondo h3,
body.modo-oscuro dialog.dialogoFondo [id*="titulo"],
body.modo-oscuro dialog.dialogoFondo [id*="subtitulo"] {
  color: #93c5fd !important;
}

body.modo-oscuro dialog.dialogoFondo label,
body.modo-oscuro dialog.dialogoFondo p,
body.modo-oscuro dialog.dialogoFondo span,
body.modo-oscuro dialog.dialogoFondo td,
body.modo-oscuro dialog.dialogoFondo th {
  color: #f3f4f6 !important;
}

body.modo-oscuro dialog.dialogoFondo input,
body.modo-oscuro dialog.dialogoFondo select,
body.modo-oscuro dialog.dialogoFondo textarea {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border: 1px solid #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo input::placeholder,
body.modo-oscuro dialog.dialogoFondo textarea::placeholder {
  color: #d1d5db !important;
  opacity: 1 !important;
}

body.modo-oscuro dialog.dialogoFondo input:focus,
body.modo-oscuro dialog.dialogoFondo select:focus,
body.modo-oscuro dialog.dialogoFondo textarea:focus {
  background: #3a3e49 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_"][class*="border"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id$="_main"],
body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id$="_dropdown"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id$="_main"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id$="_dropdown"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id*="_row_"],
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id*="_row_"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: transparent !important;
}

body.modo-oscuro dialog.dialogoFondo [id^="combo_selector"] [id*="_row_"]:hover,
body.modo-oscuro dialog.dialogoFondo [id^="selector"] [id*="_row_"]:hover {
  background: #3a3e49 !important;
}

/* Refuerzo para controles con clases utilitarias (ej. bg-white, border-gray-300) */
body.modo-oscuro dialog.dialogoFondo select.bg-white,
body.modo-oscuro dialog.dialogoFondo input.bg-white,
body.modo-oscuro dialog.dialogoFondo textarea.bg-white,
body.modo-oscuro dialog.dialogoFondo select[class*="border-gray"],
body.modo-oscuro dialog.dialogoFondo input[class*="border-gray"],
body.modo-oscuro dialog.dialogoFondo textarea[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo select.bg-white,
.modo-oscuro dialog.dialogoFondo input.bg-white,
.modo-oscuro dialog.dialogoFondo textarea.bg-white,
.modo-oscuro dialog.dialogoFondo select[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo input[class*="border-gray"],
.modo-oscuro dialog.dialogoFondo textarea[class*="border-gray"] {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
  border-color: #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo select.bg-white:focus,
body.modo-oscuro dialog.dialogoFondo input.bg-white:focus,
body.modo-oscuro dialog.dialogoFondo textarea.bg-white:focus,
.modo-oscuro dialog.dialogoFondo select.bg-white:focus,
.modo-oscuro dialog.dialogoFondo input.bg-white:focus,
.modo-oscuro dialog.dialogoFondo textarea.bg-white:focus {
  background: #3a3e49 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) !important;
}

body.modo-oscuro dialog.dialogoFondo select.bg-white option,
body.modo-oscuro dialog.dialogoFondo select[class*="border-gray"] option,
.modo-oscuro dialog.dialogoFondo select.bg-white option,
.modo-oscuro dialog.dialogoFondo select[class*="border-gray"] option {
  background: #2d3038 !important;
  color: #f3f4f6 !important;
}

body.modo-oscuro dialog.dialogoFondo button[class*="bg-gray"],
body.modo-oscuro dialog.dialogoFondo .btn[class*="bg-gray"] {
  background: #1f2937 !important;
  color: #f8fafc !important;
  border: 1px solid #ffffff !important;
}

body.modo-oscuro dialog.dialogoFondo canvas,
body.modo-oscuro dialog.dialogoFondo [id^="wrapperCanvas"] {
  background: #2d3038 !important;
  border-color: #475569 !important;
}

/* === ComboMultipleCheck y ComboDialogoModal (SelectorCamara): modo oscuro ===
   Aplica a cualquier combo con borde #181f3a que no sea ya cubierto por combo_selector* */

/* Caja principal (trigger / main): fondo oscuro, borde blanco */
body.modo-oscuro [id$="_main"].border-\[\#181f3a\],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] {
  background-color: #2d3038 !important;
  border-color: #ffffff !important;
  color: #f3f4f6 !important;
}

/* Texto de placeholder y flecha dentro de la caja principal */
body.modo-oscuro [id$="_main"].border-\[\#181f3a\] [id$="_selected"],
body.modo-oscuro [id$="_main"].border-\[\#181f3a\] [id$="_svg"],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] [id$="_resumen"],
body.modo-oscuro [id$="_trigger"].border-\[\#181f3a\] [id$="_icono"] {
  color: #f3f4f6 !important;
}

/* Label flotante: fondo coincide con el panel oscuro, texto claro */
body.modo-oscuro [id$="_label"].bg-white.text-\[\#181f3a\] {
  background-color: var(--fondo-panel, #161618) !important;
  color: #b0b3c6 !important;
}

/* Dropdown abierto */
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] {
  background-color: #2d3038 !important;
  border-color: #ffffff !important;
  color: #f3f4f6 !important;
}

/* Labels e items dentro del dropdown */
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] label,
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] [id*="_item_"],
body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] span {
  color: #f3f4f6 !important;
}

body.modo-oscuro [id$="_dropdown"].border-\[\#181f3a\] [id*="_item_"]:hover {
  background-color: #3a3e49 !important;
}

/* Label del ComboDialogoModal (texto sobre el trigger, sin bg-white) */
body.modo-oscuro [id$="_label"].text-slate-800 {
  color: #b0b3c6 !important;
}

/* ==========================================
   DIALOGO CONDICION INSEGURA (MODO OSCURO)
   ========================================== */
body.modo-oscuro [id^="dialogoCondInsegura_"][class*="bg-white"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="bg-white"] {
  background-color: #1a1f2b !important;
  color: #e5e7eb !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"][class*="bg-gray-50"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="bg-gray-50"] {
  background-color: #141924 !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"][class*="bg-gray-100"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="bg-gray-100"] {
  background-color: #202736 !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"][class*="border-gray-200"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="border-gray-200"],
body.modo-oscuro [id^="dialogoCondInsegura_"][class*="border-gray-300"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="border-gray-300"] {
  border-color: #334155 !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"][class*="text-gray-900"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="text-gray-900"] {
  color: #f8fafc !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"][class*="text-gray-800"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="text-gray-800"],
body.modo-oscuro [id^="dialogoCondInsegura_"][class*="text-gray-700"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="text-gray-700"],
body.modo-oscuro [id^="dialogoCondInsegura_"][class*="text-gray-600"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="text-gray-600"],
body.modo-oscuro [id^="dialogoCondInsegura_"][class*="text-gray-500"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [class*="text-gray-500"] {
  color: #cbd5e1 !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_headerWrapper"] {
  background: #1a1f2b !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_subHeaderRow"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_navegacionWrapper"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_footerWrapper"],
body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_colThumbsDiv"] {
  background-color: #111827 !important;
  border-color: #334155 !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_fechasWrapper"] {
  background-color: #1f2937 !important;
}

/* Ajuste puntual de contraste para contador de resultados */
body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_badgeResultados"] {
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_badgeTexto"] {
  color: #1e3a8a !important;
}

body.modo-oscuro [id^="dialogoCondInsegura_"] [id$="_subtituloResultados"] {
  color: #93c5fd !important;
}

.kanban-todo { border-top: 8px solid #dc2626 !important; }
.kanban-inprocess { border-top: 8px solid #eab308 !important; }
.kanban-done { border-top: 8px solid #16a34a !important; }