/*
 * Tema oscuro de SuitOcandaTIC.
 * Esta hoja se carga al final y solo actúa con data-theme="dark".
 * Los estilos del tema claro permanecen sin cambios.
 */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--ui-background);
  color: var(--ui-text);
}

html[data-theme="dark"] :is(.card, .modal-content, .offcanvas, .dropdown-menu,
  .list-group-item, .accordion-item, .table-container, .summary-card,
  .filter-card, .content-card, .panel, .widget, .bg-white) {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text);
}

html[data-theme="dark"] :is(.card-header, .accordion-button, .accordion-body,
  .modal-header, .modal-footer, .list-group-item-action:hover) {
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--ui-soft);
  color: var(--ui-text);
  box-shadow: none;
}

html[data-theme="dark"] .table {
  --bs-table-bg: var(--ui-surface);
  --bs-table-color: var(--ui-text);
  --bs-table-border-color: var(--ui-border);
  --bs-table-striped-bg: var(--ui-primary);
  --bs-table-striped-color: var(--ui-text);
  --bs-table-hover-bg: var(--ui-primary);
  --bs-table-hover-color: var(--ui-text);
}

html[data-theme="dark"] .table :is(th, td) {
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .table thead :is(th, td) {
  background-color: var(--ui-soft) !important;
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] :is(.text-muted, .form-text, .muted-text) {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] .dropdown-item {
  color: var(--ui-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--ui-soft);
  color: var(--ui-text);
}

html[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--ui-muted);
  --bs-btn-border-color: var(--ui-muted);
  --bs-btn-hover-bg: var(--ui-primary);
  --bs-btn-hover-border-color: var(--ui-muted);
  --bs-btn-hover-color: var(--ui-surface);
}

/* Inventario, usuarios, soporte e informes: paneles y tablas propias. */
html[data-theme="dark"] :is(.inventario-panel, .inventario-card, .inventario-section,
  .inventario-filter-card, .filter-box, .filter-panel, .results-card,
  .usuarios-card, .usuario-card, .helpdesk-card, .ticket-card, .ticket-panel,
  .informes-card, .informe-card, .monitor-card, .monitor-panel) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] :is(.column-options-menu, .inventario-flag-menu,
  .autocomplete-menu, .suggestions-menu) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* Dashboard. */
html[data-theme="dark"] :is(.dashboard-widget, .dashboard-empty-state,
  .dashboard-modal, .dashboard-catalogo-item, .dashboard-grid-cell,
  .dash-satisfaction-item, .dash-pie-center) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .dash-bar-track {
  background: var(--ui-primary);
}

html[data-theme="dark"] .dash-bar-fill {
  background: var(--ui-primary);
}

/* Perfil. */
html[data-theme="dark"] :is(.perfil-card, .perfil-section, .perfil-actions,
  .perfil-theme-card) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text);
}

html[data-theme="dark"] :is(.perfil-section-header, .perfil-theme-card i) {
  background: var(--ui-soft) !important;
  color: var(--ui-primary) !important;
  border-color: var(--ui-border);
}

html[data-theme="dark"] .perfil-current {
  background: var(--ui-soft) !important;
  border-color: var(--ui-border) !important;
}

/* Conserva contraste de los badges y señales de estado. */
html[data-theme="dark"] :is(.badge, .badge-estado, .badge-bitlocker,
  .badge-tipo, .ticket-status, .ticket-priority, .status-badge) {
  filter: saturate(.9) brightness(1.08);
}

/* Inventario: códigos y bloques de filtros que originalmente usan blanco. */
html[data-theme="dark"] :is(.id-code, .serial-code, .user-code,
  .email-code, .inventario-equipo-text .name-text) {
  background-color: var(--ui-soft) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :is(.filter-section, .filter-advanced-section,
  .filter-characteristics, .resumen-card, .resumen-header, .bulk-toolbar,
  .table-toolbar, .pagination-bar) {
  background-color: var(--ui-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* Monitoreo: estilos inline de ticket-container. */
html[data-theme="dark"] .ticket-container :is(.stat, .tabbtn, .panel,
  .modalbox, .icon-btn) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .ticket-container .panel > h2,
html[data-theme="dark"] .ticket-container :is(th, .tabbtn:hover) {
  background: var(--ui-soft) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .ticket-container :is(th, td) {
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .ticket-container .muted,
html[data-theme="dark"] .ticket-container .form-help,
html[data-theme="dark"] .ticket-container .stat small {
  color: var(--ui-muted) !important;
}

/* Informes y mesa de ayuda comparten ticket-table. */
html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .ticket-container .ticket-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .ticket-table :is(td, .ticket-subject, .ticket-meta,
  .informes-destinatarios) {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .ticket-table .ticket-meta {
  color: var(--ui-muted) !important;
}

/* Controles nativos: Chrome muestra sus listas emergentes con esta paleta. */
html[data-theme="dark"] select,
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  color-scheme: dark;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover {
  background: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

/* Panel de Administración. */
html[data-theme="dark"] .module-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .module-card:hover {
  background: var(--ui-soft) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .module-title {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .module-text {
  color: var(--ui-muted) !important;
}

/* Inventario: paneles, zona inferior de filtros y resumen. */
html[data-theme="dark"] :is(.panel-card, .panel-card-body, .filter-panel-compact,
  .filter-form-compact, .filter-tools-box, .filter-characteristics-box,
  .filter-attributes-grid,
  .resumen-inner-accordion, .resumen-inner-body, .resumen-table-wrap,
  .bulk-selection-toolbar, .bulk-summary-box) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] :is(.filter-row-help, .filter-help-example,
  .resumen-help, .resumen-inner-meta, .bulk-field-help) {
  color: var(--ui-muted) !important;
}

/* Formularios de tickets e informes: cuerpo y secciones completamente oscuros. */
html[data-theme="dark"] :is(.ticket-form-card, .ticket-form-card-body,
  .ticket-section, .ticket-section-body, .ticket-form-actions,
  .ticket-responsable-compacto, .trazabilidad-card) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] :is(.ticket-section-header, .ticket-card-header) {
  background: var(--ui-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-primary) !important;
}

/* Modales, incluido el catálogo lateral del Dashboard. */
html[data-theme="dark"] :is(.modalbox, .modalbody, .dashboard-modal-panel,
  .dashboard-modal-header, .dashboard-catalogo-item) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] :is(.dashboard-modal-panel h2,
  .dashboard-modal-panel p, .dashboard-catalogo-description,
  .dashboard-catalogo-module) {
  color: var(--ui-text) !important;
}

/* Filtros: el contenedor y todos sus rótulos permanecen oscuros y legibles. */
html[data-theme="dark"] :is(.filter-field, .filter-stack-item,
  .filter-tools-box, .filter-sort-line, .filter-attributes-grid,
  .filter-section-title) {
  background-color: transparent !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] #bloqueFiltros :is(.filter-row-help, .filter-help-example,
  .filter-section-title small) {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] #bloqueFiltros .filter-attributes-grid {
  background: var(--ui-soft) !important;
  border: 1px solid var(--ui-border) !important;
}

/* Inventario: datos simples de tabla sin cápsulas ni tarjetas. */
html[data-theme="dark"] #tablaInventarioPrincipal :is(.id-code, .serial-code,
  .user-code, .email-code, .name-text, .muted-text) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] #tablaInventarioPrincipal :is(.id-code, .serial-code,
  .user-code, .email-code) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Formularios y modales: ninguna superficie clara en el tema oscuro. */
html[data-theme="dark"] :is(.modalbox, .modalbody, .modal-content,
  .ticket-form-container, .ticket-form-card, .ticket-form-card-body,
  .ticket-section, .ticket-section-body, .ticket-form-actions,
  .ticket-responsable-compacto, .trazabilidad-card, .form-card,
  .form-section, .auth-card, .auth-head, .auth-body) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :is(.modalbox, .ticket-form-container, .form-card,
  .form-section, .auth-card) :is(.form-help, .form-text, .ticket-help,
  .auth-help, .ticket-agent-auth-subtitle) {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] .resumen-table :is(th, td, tfoot, a, span, small),
html[data-theme="dark"] :is(.resumen-active-line, .resumen-help,
  .resumen-inner-title, .resumen-count-link) {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

/* Configuraciones y formularios de Personas/login. */
html[data-theme="dark"] :is(.config-compact-item, .correo-config-item,
  .helpdesk-config-card, .helpdesk-config-card-body,
  .config-pin-modal, .login-card, .login-card-header, .login-card-body,
  .login-page, .usuarios-container .panel-card-body) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

/* Los valores simples de todas las tablas permanecen texto, no cápsulas. */
html[data-theme="dark"] .table :is(.id-code, .serial-code, .user-code,
  .email-code, .name-text, .muted-text) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

/* Monitoreo: gráficos sin paneles claros y con contraste completo. */
html[data-theme="dark"] :is(.uptime-summary-card, .uptime-month-card,
  .uptime-panel-compact, .uptime-rank-card) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] :is(.uptime-summary-card, .uptime-month-card,
  .uptime-panel-compact, .uptime-rank-card, .uptime-month-chart,
  .uptime-kpi) :is(h3, strong, span, div, .muted, .uptime-value,
  .uptime-label, .uptime-rank-meta) {
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :is(.uptime-donut::after, .uptime-mini-donut::after,
  .uptime-bar-track) {
  background: var(--ui-soft) !important;
  border-color: var(--ui-border) !important;
}

/* Modal Editar recurso: jerarquía clara entre título de campo y valor. */
html[data-theme="dark"] .monitor-modal .form-field > label,
html[data-theme="dark"] .monitor-modal .options-title {
  background: transparent !important;
  letter-spacing: .01em;
}

/* Los anillos conservan centro claro: su texto debe ser oscuro. */
html[data-theme="dark"] :is(.uptime-donut::after, .uptime-mini-donut::after) {
  background: var(--ui-surface) !important;
}

html[data-theme="dark"] :is(.uptime-donut-center strong,
  .uptime-donut-center span, .uptime-mini-donut span) {
  color: var(--ui-text) !important;
}

/* Específico para vencer las reglas generales de texto de los gráficos. */
html[data-theme="dark"] .uptime-donut .uptime-donut-center > strong,
html[data-theme="dark"] .uptime-donut .uptime-donut-center > span,
html[data-theme="dark"] .uptime-rank-card .uptime-mini-donut > span {
  color: var(--ui-text) !important;
}

/* Separadores y opciones de las reglas de monitoreo. */
html[data-theme="dark"] .monitor-modal :is(.form-section, .form-actions,
  .options-box) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .monitor-modal :is(.form-section-title,
  .options-box .check, .form-actions) {
  color: var(--ui-text) !important;
}

/* Formulario de soporte: superficies oscuras y jerarquía de texto legible.
   Se limita a este formulario; la paleta clara permanece intacta. */
html:root[data-theme="dark"] body .ticket-form-container :is(
  .ticket-form-card-header, .ticket-agent-header, .ticket-guest-toggle,
  .agent-upload-compact, .agent-attachments-title, .ticket-asset-summary,
  .ticket-time-form-box, .ticket-sla-summary, .ticket-alarm-status) {
  background: var(--ui-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}
html:root[data-theme="dark"] body .ticket-form-container :is(
  .agent-attachments, .agent-pending-file, .ticket-user-search-results) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}
html:root[data-theme="dark"] body .ticket-form-container :is(
  .ticket-section-header, .ticket-agent-label, .ticket-agent-name,
  .ticket-label, .ticket-text-tools-label, .ticket-guest-toggle strong, .ticket-alarm-title,
  .ticket-alarm-status strong, .agent-attachment-name,
  .agent-attachments-title, .ticket-asset-summary strong,
  .ticket-user-search-result, .ticket-user-search-input,
  .ticket-form-card-header > div, .ticket-form-card-header i) {
  color: var(--ui-text) !important;
}
html:root[data-theme="dark"] body .ticket-form-container :is(
  .ticket-form-header p, .ticket-agent-role, .ticket-guest-toggle small,
  .ticket-help, .text-muted, .ticket-time-form-status,
  .ticket-asset-summary, .ticket-user-search-empty,
  .ticket-text-counter) {
  color: var(--ui-muted) !important;
}
html:root[data-theme="dark"] body .ticket-form-container .ticket-user-search-result:is(:hover, :focus, .is-active) {
  background: var(--ui-soft) !important;
  color: var(--ui-text) !important;
}

/* El contenedor exterior continúa el fondo de la página. */
html:root[data-theme="dark"] body .ticket-form-container {
  background: var(--ui-background) !important;
}

/* Solicitante: mismo fondo que el resumen de alarma en ambos temas. */
html:root body .ticket-form-container #ticket_usuario_busqueda {
  background: var(--ui-soft) !important;
}

/* Identidad del agente: contraste estable en ambos temas. */
html:root body .ticket-form-container .ticket-agent-header .ticket-agent-name {
  color: var(--ui-on-brand) !important;
}
html:root body .ticket-form-container .ticket-agent-header .ticket-agent-role {
  color: var(--ui-agent-muted) !important;
}

/* Menú hamburguesa: fondo de página oscuro, con texto legible. */
html:root[data-theme="dark"] body .navbar.navbar-expand-lg #navbarOcanda.show {
  background: var(--ui-background) !important;
  border-color: var(--ui-border) !important;
}