:root { --ris-bg-color: #ffffff; --ris-text-color: #111111; --ris-toggle-bg: #00576d; --ris-toggle-text: #ffffff; --ris-surface-base: #ffffff; --ris-surface-level-1: #f5f6f8; --ris-surface-level-2: #ededf0; --ris-surface-level-3: #e2e4e8; } html.theme-dark { --ris-bg-color: #121212; --ris-text-color: #f0f0f0; --ris-toggle-bg: #e0e0e0; --ris-toggle-text: #1a1a1a; --ris-surface-base: #121212; --ris-surface-level-1: #1E1E1E; --ris-surface-level-2: #2C2C2C; --ris-surface-level-3: #383838; } body { background-color: var(--ris-bg-color); color: var(--ris-text-color); } /* * Algunas pantallas renderizan de forma fija. * En dark mode esta clase debe ceder para que aplique el tema. */ html.theme-dark body, html.theme-dark body.bg-white { background-color: var(--ris-bg-color) !important; color: var(--ris-text-color); } .ris-theme-toggle-container { display: flex; align-items: center; } .ris-theme-toggle-btn { border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600; line-height: 1.2; background: var(--ris-toggle-bg); color: var(--ris-toggle-text); } #menu-usuario .ris-theme-toggle-container { padding: 8px 8px 8px 0; } .ris-theme-toggle-fallback { padding: 10px; } .ris-theme-toggle-in-navbar-header { float: left; padding: 8px 10px 8px 0; margin: 0; } .navbar-header .ris-theme-toggle-in-navbar-header .ris-theme-toggle-btn { margin: 8px 6px 8px 0; } @media (max-width: 767px) { .navbar-header .ris-theme-toggle-in-navbar-header { width: 100%; float: none; display: flex; justify-content: flex-start; padding: 8px 10px; } .navbar-header .ris-theme-toggle-in-navbar-header .ris-theme-toggle-btn { width: auto; max-width: 100%; white-space: nowrap; } } @media print { .ris-theme-toggle-container, .ris-theme-toggle-btn, #ris-theme-toggle-global { display: none !important; } } /* Bootstrap 3.3.7 + estilos propios (panel/neomorfismo) */ html.theme-dark .navbar, html.theme-dark .navbar-itsos, html.theme-dark .dropdown-menu, html.theme-dark .panel, html.theme-dark .panel-default, html.theme-dark .panel-heading, html.theme-dark .panel-footer, html.theme-dark .modal-content, html.theme-dark .card, html.theme-dark .table, html.theme-dark .table > thead > tr > th, html.theme-dark .table > tbody > tr > th, html.theme-dark .table > tfoot > tr > th, html.theme-dark .table > thead > tr > td, html.theme-dark .table > tbody > tr > td, html.theme-dark .table > tfoot > tr > td, html.theme-dark .form-control, html.theme-dark .input-group-addon, html.theme-dark .btn-default, html.theme-dark .bg-light, html.theme-dark .bg-gray, html.theme-dark .bg-white, html.theme-dark .well, html.theme-dark .breadcrumb { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color); border-color: #4a4a4a !important; } html.theme-dark .navbar-nav > li > a, html.theme-dark .dropdown-menu > li > a, html.theme-dark .panel-title, html.theme-dark .text-muted, html.theme-dark .breadcrumb > .active, html.theme-dark .table, html.theme-dark .table th, html.theme-dark .table td, html.theme-dark label, html.theme-dark .control-label { color: var(--ris-text-color) !important; } html.theme-dark .form-control::placeholder { color: #b9c0c8; } html.theme-dark .form-control, html.theme-dark .input-group-addon, html.theme-dark .btn-default { box-shadow: none; } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--ris-surface-level-2) !important; } html.theme-dark .table-hover > tbody > tr:hover { background-color: var(--ris-surface-level-3) !important; } /* Clases neomorfismo existentes en el proyecto (con typo histórico: neomofismo) */ html.theme-dark .neomofismo-profundo, html.theme-dark .neomofismo-superpuesto, html.theme-dark .neomofismo-superpuesto-round, html.theme-dark .neomofismo-profundo-round { background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .neomofismo-profundo, html.theme-dark .neomofismo-profundo-round { box-shadow: inset 2px 2px 5px #141414, inset -3px -3px 7px #303030 !important; } html.theme-dark .neomofismo-superpuesto, html.theme-dark .neomofismo-superpuesto-round, html.theme-dark .card, html.theme-dark .panel { box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .heading-sticky, html.theme-dark .heading-sticky-stepper { background: var(--ris-surface-level-1) !important; border-bottom: 1px solid #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .nav > li > a:hover, html.theme-dark .nav > li > a:focus, html.theme-dark .nav .open > a, html.theme-dark .nav .open > a:hover, html.theme-dark .nav .open > a:focus, html.theme-dark .navbar-nav > li > a:hover, html.theme-dark .navbar-nav > li > a:focus, html.theme-dark .navbar-nav > .active > a, html.theme-dark .navbar-nav > .active > a:hover, html.theme-dark .navbar-nav > .active > a:focus, html.theme-dark .nav-tabs > li.active > a, html.theme-dark .nav-tabs > li.active > a:hover, html.theme-dark .nav-tabs > li.active > a:focus, html.theme-dark .nav-pills > li.active > a, html.theme-dark .nav-pills > li.active > a:hover, html.theme-dark .nav-pills > li.active > a:focus, html.theme-dark .dropdown-menu > li > a:hover, html.theme-dark .dropdown-menu > li > a:focus, html.theme-dark .dropdown-menu > .active > a, html.theme-dark .dropdown-menu > .active > a:hover, html.theme-dark .dropdown-menu > .active > a:focus { background-color: var(--ris-surface-level-3) !important; color: var(--ris-text-color) !important; } /* Fallback para estilos inline heredados con fondos claros */ html.theme-dark [style*="background-color: white"], html.theme-dark [style*="background-color:white"], html.theme-dark [style*="background: white"], html.theme-dark [style*="background:white"], html.theme-dark [style*="background-color: #fff"], html.theme-dark [style*="background-color:#fff"], html.theme-dark [style*="background: #fff"], html.theme-dark [style*="background:#fff"], html.theme-dark [style*="background-color: #ffffff"], html.theme-dark [style*="background-color:#ffffff"], html.theme-dark [style*="background: #ffffff"], html.theme-dark [style*="background:#ffffff"] { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; } /* Correcciones adicionales de fondos que interferían con modo dark */ html.theme-dark .institucion-item, html.theme-dark .institucion-item.save-error, html.theme-dark .institucion-detalle-collapse, html.theme-dark .principal-container .btn-principal-label, html.theme-dark .badge-activo, html.theme-dark .badge-inactivo-institucion, html.theme-dark .seccion-bloqueada::before, html.theme-dark .seccion-conciliacion-bloqueada::before, html.theme-dark .footer-acciones-fichas, html.theme-dark .prestacion-item, html.theme-dark .prestacion-header { color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .institucion-item, html.theme-dark .institucion-detalle-collapse, html.theme-dark .principal-container .btn-principal-label, html.theme-dark .footer-acciones-fichas, html.theme-dark .prestacion-item, html.theme-dark .seccion-bloqueada::before, html.theme-dark .seccion-conciliacion-bloqueada::before { background-color: var(--ris-surface-level-1) !important; } html.theme-dark .institucion-item.save-error { background-color: #3a1f1f !important; border-color: #a94442 !important; } html.theme-dark .badge-activo { background-color: #1f3a2c !important; color: #7bd88f !important; } html.theme-dark .badge-inactivo-institucion { background-color: #3a1f1f !important; color: #f2b3b3 !important; } html.theme-dark .prestacion-header { background-color: #1b2b3f !important; } /* Botones Bootstrap 3.3.7 + sombras adaptadas a dark mode */ html.theme-dark .btn, html.theme-dark .btn-default, html.theme-dark .btn-primary, html.theme-dark .btn-success, html.theme-dark .btn-info, html.theme-dark .btn-warning, html.theme-dark .btn-danger, html.theme-dark .btn-link, html.theme-dark .btn-outline-primary, html.theme-dark .btn-outline-warning, html.theme-dark .btn-bg-primary, html.theme-dark .btn-link-danger { box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .btn-default { background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .btn-primary { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } html.theme-dark .btn-success { background-color: #2e7d32 !important; border-color: #2e7d32 !important; color: #ffffff !important; } html.theme-dark .btn-info { background-color: #1565c0 !important; border-color: #1565c0 !important; color: #ffffff !important; } html.theme-dark .btn-warning { background-color: #b7791f !important; border-color: #b7791f !important; color: #ffffff !important; } html.theme-dark .btn-danger, html.theme-dark .eliminar-institucion { background-color: #c62828 !important; border-color: #c62828 !important; color: #ffffff !important; } html.theme-dark .btn:hover, html.theme-dark .btn:focus, html.theme-dark .btn:active, html.theme-dark .btn.active, html.theme-dark .open > .btn.dropdown-toggle, html.theme-dark .btn-default:hover, html.theme-dark .btn-default:focus, html.theme-dark .btn-default:active, html.theme-dark .btn-primary:hover, html.theme-dark .btn-primary:focus, html.theme-dark .btn-primary:active, html.theme-dark .btn-success:hover, html.theme-dark .btn-success:focus, html.theme-dark .btn-success:active, html.theme-dark .btn-info:hover, html.theme-dark .btn-info:focus, html.theme-dark .btn-info:active, html.theme-dark .btn-warning:hover, html.theme-dark .btn-warning:focus, html.theme-dark .btn-warning:active, html.theme-dark .btn-danger:hover, html.theme-dark .btn-danger:focus, html.theme-dark .btn-danger:active { background-color: var(--ris-surface-level-3) !important; border-color: #5a5a5a !important; color: #ffffff !important; box-shadow: inset 2px 2px 5px #141414, inset -3px -3px 7px #303030 !important; } html.theme-dark .btn.disabled, html.theme-dark .btn[disabled], html.theme-dark fieldset[disabled] .btn { opacity: 0.6; box-shadow: none !important; } /* Fallback adicional para inline con base neomorfismo clara */ html.theme-dark [style*="background-color: #eff0f3"], html.theme-dark [style*="background-color:#eff0f3"], html.theme-dark [style*="background: #eff0f3"], html.theme-dark [style*="background:#eff0f3"], html.theme-dark [style*="background-color: rgb(239, 240, 243)"] { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; } /* Hover/focus específicos por variante para no perder identidad del botón */ html.theme-dark .btn-primary:hover, html.theme-dark .btn-primary:focus, html.theme-dark .btn-primary:active, html.theme-dark .btn-primary.active, html.theme-dark .open > .btn-primary.dropdown-toggle { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; } html.theme-dark .btn-danger:hover, html.theme-dark .btn-danger:focus, html.theme-dark .btn-danger:active, html.theme-dark .btn-danger.active, html.theme-dark .open > .btn-danger.dropdown-toggle, html.theme-dark .eliminar-institucion:hover, html.theme-dark .eliminar-institucion:focus { background-color: #b91c1c !important; border-color: #b91c1c !important; } html.theme-dark .btn-success:hover, html.theme-dark .btn-success:focus, html.theme-dark .btn-success:active, html.theme-dark .btn-success.active, html.theme-dark .open > .btn-success.dropdown-toggle { background-color: #27632a !important; border-color: #27632a !important; } html.theme-dark .btn-info:hover, html.theme-dark .btn-info:focus, html.theme-dark .btn-info:active, html.theme-dark .btn-info.active, html.theme-dark .open > .btn-info.dropdown-toggle { background-color: #0f4fa0 !important; border-color: #0f4fa0 !important; } html.theme-dark .btn-warning:hover, html.theme-dark .btn-warning:focus, html.theme-dark .btn-warning:active, html.theme-dark .btn-warning.active, html.theme-dark .open > .btn-warning.dropdown-toggle { background-color: #9a651a !important; border-color: #9a651a !important; } /* Group radio: corregir fondo y hover en modo dark */ html.theme-dark .group-radio label, html.theme-dark .group-radio-button label, html.theme-dark label.radio-inline { background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .group-radio label:hover, html.theme-dark .group-radio-button label:hover, html.theme-dark label.radio-inline:hover { background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: var(--ris-text-color) !important; } html.theme-dark .group-radio input[type=radio]:checked + label, html.theme-dark .group-radio-button input[type=radio]:checked + label, html.theme-dark input[type=radio]:checked + label.radio-inline { background-color: #0b5a70 !important; border-color: #0b5a70 !important; color: #ffffff !important; } html.theme-dark .group-radio label.radio-disabled, html.theme-dark .group-radio-button label.radio-disabled { background-color: var(--ris-surface-level-2) !important; color: #9fa6ad !important; border-color: #4a4a4a !important; } html.theme-dark .group-radio label.radio-disabled:hover, html.theme-dark .group-radio-button label.radio-disabled:hover { background-color: var(--ris-surface-level-2) !important; color: #9fa6ad !important; cursor: not-allowed; } /* jQuery UI modales en dark mode */ html.theme-dark .ui-widget-overlay { background: #000000 !important; opacity: 0.75 !important; } html.theme-dark .ui-dialog, html.theme-dark .ui-widget-content, html.theme-dark .ui-dialog .ui-dialog-content, html.theme-dark .ui-dialog .ui-dialog-buttonpane, html.theme-dark .ui-dialog .ui-widget-header, html.theme-dark .ui-dialog .ui-dialog-titlebar { background: var(--ris-surface-level-2) !important; background-color: var(--ris-surface-level-2) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .ui-dialog { box-shadow: 0 0 0 1px #4a4a4a, 0 16px 34px rgba(0, 0, 0, 0.65) !important; } html.theme-dark .ui-dialog .ui-dialog-titlebar { border-bottom: 1px solid #4a4a4a !important; } html.theme-dark .ui-dialog .ui-dialog-title, html.theme-dark .ui-dialog .ui-dialog-content, html.theme-dark .ui-dialog .ui-dialog-content label, html.theme-dark .ui-dialog .ui-dialog-content p, html.theme-dark .ui-dialog .ui-dialog-content span, html.theme-dark .ui-dialog .ui-dialog-content small { color: var(--ris-text-color) !important; } html.theme-dark .ui-dialog .ui-dialog-titlebar button, html.theme-dark .ui-dialog .ui-button, html.theme-dark .ui-dialog .ui-state-default, html.theme-dark .ui-dialog .ui-button.ui-state-default { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border: 1px solid #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .ui-dialog .ui-dialog-titlebar button:hover, html.theme-dark .ui-dialog .ui-dialog-titlebar button:focus, html.theme-dark .ui-dialog .ui-button:hover, html.theme-dark .ui-dialog .ui-button:focus, html.theme-dark .ui-dialog .ui-state-hover, html.theme-dark .ui-dialog .ui-state-focus, html.theme-dark .ui-dialog .ui-button.ui-state-hover, html.theme-dark .ui-dialog .ui-button.ui-state-focus { background: var(--ris-surface-level-3) !important; background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: #ffffff !important; } html.theme-dark .ui-dialog .ui-state-active, html.theme-dark .ui-dialog .ui-button.ui-state-active, html.theme-dark .ui-dialog .ui-priority-primary, html.theme-dark .ui-dialog .btn-primary { background: #1d4ed8 !important; background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; } html.theme-dark .ui-dialog .btn-danger, html.theme-dark .ui-dialog .ui-priority-secondary { background: #b91c1c !important; background-color: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } html.theme-dark .ui-dialog input, html.theme-dark .ui-dialog select, html.theme-dark .ui-dialog textarea, html.theme-dark .ui-dialog .form-control { background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .ui-dialog input:focus, html.theme-dark .ui-dialog select:focus, html.theme-dark .ui-dialog textarea:focus, html.theme-dark .ui-dialog .form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important; } /* Cobertura adicional de clases con background claro detectadas en el proyecto */ html.theme-dark .bg-itsos, html.theme-dark .main-llamador-pacientes, html.theme-dark .list-group-item, html.theme-dark .thumbnail, html.theme-dark .img-thumbnail, html.theme-dark .popover, html.theme-dark .popover-title, html.theme-dark .tooltip-inner, html.theme-dark .alert, html.theme-dark .alert-success, html.theme-dark .alert-info, html.theme-dark .alert-warning, html.theme-dark .alert-danger, html.theme-dark .client-shadow, html.theme-dark .brand-shadow, html.theme-dark .cuenta-paciente, html.theme-dark .contacto-item, html.theme-dark .rec_chat, html.theme-dark .ui-menu, html.theme-dark .ui-menu li.ui-menu-item a, html.theme-dark .badge, html.theme-dark .label, html.theme-dark .label-default, html.theme-dark .label-primary, html.theme-dark .label-success, html.theme-dark .label-info, html.theme-dark .label-warning, html.theme-dark .label-danger, html.theme-dark .bg-success, html.theme-dark .bg-info, html.theme-dark .bg-warning, html.theme-dark .bg-danger, html.theme-dark mark { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .list-group-item:hover, html.theme-dark .thumbnail:hover, html.theme-dark .contacto-item:hover, html.theme-dark .ui-menu li.ui-menu-item a:hover, html.theme-dark .ui-menu li.ui-menu-item a:focus, html.theme-dark .alert:hover { background-color: var(--ris-surface-level-3) !important; } html.theme-dark .navbar-toggle .icon-bar { background-color: var(--ris-text-color) !important; } html.theme-dark .btn-outline-primary, html.theme-dark .btn-outline-warning { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } /* Cobertura ampliada jQuery UI (ui-dialog y clases relacionadas) */ html.theme-dark .ui-dialog, html.theme-dark .ui-dialog .ui-dialog-titlebar, html.theme-dark .ui-dialog .ui-dialog-content, html.theme-dark .ui-dialog .ui-dialog-buttonpane, html.theme-dark .ui-dialog .ui-widget-header, html.theme-dark .ui-dialog .ui-widget-content, html.theme-dark .ui-dialog .ui-corner-all, html.theme-dark .ui-dialog .ui-corner-top, html.theme-dark .ui-dialog .ui-corner-bottom, html.theme-dark .ui-dialog .ui-corner-left, html.theme-dark .ui-dialog .ui-corner-right, html.theme-dark .ui-dialog .ui-helper-clearfix, html.theme-dark .ui-widget.ui-dialog, html.theme-dark .ui-widget-content.ui-dialog-content, html.theme-dark .ui-widget-header.ui-dialog-titlebar { background: var(--ris-surface-level-2) !important; background-color: var(--ris-surface-level-2) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .ui-dialog .ui-state-default, html.theme-dark .ui-dialog .ui-state-hover, html.theme-dark .ui-dialog .ui-state-focus, html.theme-dark .ui-dialog .ui-state-active, html.theme-dark .ui-dialog .ui-button, html.theme-dark .ui-dialog .ui-button-text, html.theme-dark .ui-dialog .ui-button-icon-only, html.theme-dark .ui-dialog .ui-dialog-titlebar-close, html.theme-dark .ui-dialog .ui-dialog-titlebar-close .ui-icon, html.theme-dark .ui-dialog .ui-button.ui-dialog-titlebar-close { color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .ui-dialog .ui-state-default, html.theme-dark .ui-dialog .ui-button, html.theme-dark .ui-dialog .ui-dialog-titlebar-close { background-color: var(--ris-surface-level-1) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .ui-dialog .ui-state-hover, html.theme-dark .ui-dialog .ui-state-focus, html.theme-dark .ui-dialog .ui-button:hover, html.theme-dark .ui-dialog .ui-button:focus, html.theme-dark .ui-dialog .ui-dialog-titlebar-close:hover, html.theme-dark .ui-dialog .ui-dialog-titlebar-close:focus { background-color: var(--ris-surface-level-3) !important; color: #ffffff !important; border-color: #5f5f5f !important; } html.theme-dark .ui-dialog .ui-state-active, html.theme-dark .ui-dialog .ui-priority-primary, html.theme-dark .ui-dialog .ui-button.ui-priority-primary { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; } /* Extras jQuery UI que suelen usarse junto a modales */ html.theme-dark .ui-datepicker, html.theme-dark .ui-datepicker .ui-datepicker-header, html.theme-dark .ui-datepicker .ui-state-default, html.theme-dark .ui-datepicker .ui-state-hover, html.theme-dark .ui-datepicker .ui-state-active, html.theme-dark .ui-autocomplete, html.theme-dark .ui-menu, html.theme-dark .ui-menu .ui-menu-item-wrapper, html.theme-dark .ui-tooltip, html.theme-dark .ui-widget-shadow { background-color: var(--ris-surface-level-2) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .ui-autocomplete .ui-state-focus, html.theme-dark .ui-menu .ui-state-focus, html.theme-dark .ui-menu .ui-state-active, html.theme-dark .ui-datepicker .ui-state-hover, html.theme-dark .ui-datepicker .ui-state-highlight { background-color: var(--ris-surface-level-3) !important; color: #ffffff !important; } /* DataTables: paginación, filtros y contenedores en modo dark */ html.theme-dark div.dataTables_wrapper, html.theme-dark div.dataTables_filter, html.theme-dark div.dataTables_info, html.theme-dark div.dataTables_length, html.theme-dark div.dataTables_paginate, html.theme-dark .dataTables_wrapper .dataTables_processing, html.theme-dark .dataTables_wrapper .dataTables_scroll, html.theme-dark .dataTables_wrapper .dataTables_scrollHead, html.theme-dark .dataTables_wrapper .dataTables_scrollBody, html.theme-dark .dataTables_wrapper .dataTables_scrollFoot, html.theme-dark .dataTables_wrapper .dataTables_empty, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:focus, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ris-surface-level-3) !important; background-color: var(--ris-surface-level-3) !important; color: #ffffff !important; } html.theme-dark .dataTables_wrapper .dataTables_filter input, html.theme-dark .dataTables_wrapper .dataTables_length select, html.theme-dark table.dataTable, html.theme-dark table.dataTable thead th, html.theme-dark table.dataTable tbody td, html.theme-dark table.dataTable.no-footer { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark table.dataTable.stripe tbody tr.odd, html.theme-dark table.dataTable.display tbody tr.odd, html.theme-dark table.dataTable tbody tr.odd, html.theme-dark table.dataTable tbody tr.even { background-color: var(--ris-surface-level-1) !important; } html.theme-dark table.dataTable tbody tr:hover, html.theme-dark table.dataTable.display tbody tr:hover, html.theme-dark table.dataTable.hover tbody tr:hover { background-color: var(--ris-surface-level-3) !important; } /* Dropdowns del sistema */ html.theme-dark .dropdown-list, html.theme-dark .dropdown-list li, html.theme-dark .dropdown-list li a, html.theme-dark .dropdown-menu, html.theme-dark .dropdown-submenu > .dropdown-menu, html.theme-dark .navbar-nav .dropdown-menu, html.theme-dark .dropdown-menu > li > a, html.theme-dark .dropdown-menu > li > a:focus, html.theme-dark .dropdown-menu > li > a:hover, html.theme-dark .dropdown-menu > .active > a, html.theme-dark .dropdown-menu > .active > a:hover, html.theme-dark .dropdown-menu > .active > a:focus { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; border-color: #4a4a4a !important; } html.theme-dark .dropdown-list li a:hover, html.theme-dark .dropdown-list li a:focus, html.theme-dark .dropdown-menu > li > a:hover, html.theme-dark .dropdown-menu > li > a:focus, html.theme-dark .dropdown-menu > .active > a, html.theme-dark .dropdown-menu > .active > a:hover, html.theme-dark .dropdown-menu > .active > a:focus { background: var(--ris-surface-level-3) !important; background-color: var(--ris-surface-level-3) !important; color: #ffffff !important; } /* Fallback extra para estilos inline de contenedores con background-color */ html.theme-dark div[style*="background-color"], html.theme-dark p[style*="background-color"], html.theme-dark ul[style*="background-color"], html.theme-dark li[style*="background-color"], html.theme-dark span[style*="background-color"], html.theme-dark td[style*="background-color"], html.theme-dark th[style*="background-color"], html.theme-dark tr[style*="background-color"] { background-color: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; } html.theme-dark div[style*="background-color"][style*="#00576d"], html.theme-dark p[style*="background-color"][style*="#00576d"], html.theme-dark span[style*="background-color"][style*="#00576d"] { background-color: #0b5a70 !important; color: #ffffff !important; } /* Mejorar visibilidad de imágenes SVG en modo dark */ html.theme-dark img[src$=".svg"], html.theme-dark img[src*=".svg?"], html.theme-dark .dropdown-menu img[src$=".svg"], html.theme-dark .btn img[src$=".svg"], html.theme-dark a img[src$=".svg"] { filter: brightness(0) invert(0.92); } /* Excepciones: logos/branding que deben conservar sus colores originales */ html.theme-dark .navbar-brand img[src$=".svg"], html.theme-dark img[src*="ITSOSris.svg"], html.theme-dark img[src*="icono-itsos.svg"], html.theme-dark img[src*="logos-global"], html.theme-dark img.logo-no-filter { filter: none !important; } /* Inline SVG en componentes de navegación/acciones */ html.theme-dark svg { color: var(--ris-text-color); } /* btn-sm / btn-xs (incluye casos donde se usa la clase sin .btn) */ html.theme-dark .btn-sm, html.theme-dark .btn-xs, html.theme-dark label.btn-sm, html.theme-dark label.btn-xs, html.theme-dark a.btn-sm, html.theme-dark a.btn-xs, html.theme-dark .group-radio label.btn-sm, html.theme-dark .group-radio-button label.btn-sm { background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .btn-sm:hover, html.theme-dark .btn-sm:focus, html.theme-dark .btn-sm:active, html.theme-dark .btn-sm.active, html.theme-dark .btn-xs:hover, html.theme-dark .btn-xs:focus, html.theme-dark .btn-xs:active, html.theme-dark .btn-xs.active, html.theme-dark label.btn-sm:hover, html.theme-dark label.btn-sm:focus, html.theme-dark label.btn-xs:hover, html.theme-dark label.btn-xs:focus, html.theme-dark a.btn-sm:hover, html.theme-dark a.btn-sm:focus, html.theme-dark a.btn-xs:hover, html.theme-dark a.btn-xs:focus, html.theme-dark .group-radio label.btn-sm:hover, html.theme-dark .group-radio-button label.btn-sm:hover { background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: #ffffff !important; } html.theme-dark .btn-sm.btn-primary, html.theme-dark .btn-xs.btn-primary, html.theme-dark label.btn-sm.btn-primary, html.theme-dark a.btn-sm.btn-primary { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } html.theme-dark .btn-sm.btn-danger, html.theme-dark .btn-xs.btn-danger, html.theme-dark label.btn-sm.btn-danger, html.theme-dark a.btn-sm.btn-danger { background-color: #c62828 !important; border-color: #c62828 !important; color: #ffffff !important; } html.theme-dark .btn-sm.btn-success, html.theme-dark .btn-xs.btn-success, html.theme-dark label.btn-sm.btn-success, html.theme-dark a.btn-sm.btn-success { background-color: #2e7d32 !important; border-color: #2e7d32 !important; color: #ffffff !important; } html.theme-dark .btn-sm.btn-info, html.theme-dark .btn-xs.btn-info, html.theme-dark label.btn-sm.btn-info, html.theme-dark a.btn-sm.btn-info { background-color: #1565c0 !important; border-color: #1565c0 !important; color: #ffffff !important; } html.theme-dark .btn-sm.btn-warning, html.theme-dark .btn-xs.btn-warning, html.theme-dark label.btn-sm.btn-warning, html.theme-dark a.btn-sm.btn-warning { background-color: #b7791f !important; border-color: #b7791f !important; color: #ffffff !important; } html.theme-dark .btn-sm[disabled], html.theme-dark .btn-xs[disabled], html.theme-dark label.btn-sm.radio-disabled, html.theme-dark label.btn-xs.radio-disabled { opacity: 0.6; box-shadow: none !important; } /* Ordenes conciliación (my-1 listado-orden) en modo dark */ html.theme-dark .listado-orden, html.theme-dark .my-1.listado-orden { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .listado-orden:hover, html.theme-dark .my-1.listado-orden:hover { background: var(--ris-surface-level-3) !important; background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; } html.theme-dark .listado-orden [style*="color: #616161"], html.theme-dark .listado-orden [style*="color:#616161"], html.theme-dark .my-1.listado-orden [style*="color: #616161"], html.theme-dark .my-1.listado-orden [style*="color:#616161"] { color: #c9d0d8 !important; } /* Fallback específico para bloques inline tipo barra/alerta con style="...background:#f8f9fa;border..." */ html.theme-dark [style*="background: #f8f9fa"], html.theme-dark [style*="background:#f8f9fa"], html.theme-dark [style*="background-color: #f8f9fa"], html.theme-dark [style*="background-color:#f8f9fa"], html.theme-dark [style*="border: 1px solid #dee2e6"], html.theme-dark [style*="border:1px solid #dee2e6"], html.theme-dark [style*="border-left: 5px solid #17a2b8"], html.theme-dark [style*="border-left:5px solid #17a2b8"] { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark [style*="border-left: 5px solid #17a2b8"], html.theme-dark [style*="border-left:5px solid #17a2b8"] { border-left-color: #2bb9d1 !important; } html.theme-dark [style*="background: #f8f9fa"] strong, html.theme-dark [style*="background:#f8f9fa"] strong, html.theme-dark [style*="background-color: #f8f9fa"] strong, html.theme-dark [style*="background-color:#f8f9fa"] strong, html.theme-dark [style*="border: 1px solid #dee2e6"] strong, html.theme-dark [style*="border:1px solid #dee2e6"] strong { color: #ffffff !important; } /* Ajustes específicos con_auditoria.php */ html.theme-dark .historial-container, html.theme-dark .historial-card, html.theme-dark .pres-item, html.theme-dark .log-container { background: var(--ris-surface-level-1) !important; background-color: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .historial-linea, html.theme-dark .historial-punto { background-color: #2bb9d1 !important; } html.theme-dark .pres-item:hover { background-color: var(--ris-surface-level-3) !important; } html.theme-dark .pres-name, html.theme-dark .pres-meta, html.theme-dark .pres-meta b, html.theme-dark .log-item, html.theme-dark .historial-card, html.theme-dark .historial-container { color: var(--ris-text-color) !important; } html.theme-dark .pres-inst { background: var(--ris-surface-level-2) !important; color: #c9d0d8 !important; } html.theme-dark .btn-history { background: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark .btn-history:hover, html.theme-dark .btn-history:focus { background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: #ffffff !important; } html.theme-dark .log-item { border-bottom-color: #3f454d !important; } /* Ajustes específicos rearancela.php */ html.theme-dark #div_titulo_conciliacion_de_ordenes h1, html.theme-dark #div_titulo_conciliacion_de_ordenes .btn, html.theme-dark #plan_exe_gra .btn-sm, html.theme-dark #plan_exe_gra .label, html.theme-dark #plan_exe_gra .label-danger, html.theme-dark #div_mofificar_cuenta_corriente, html.theme-dark #div_mofificar_cuenta_corriente label, html.theme-dark .group-checkbox, html.theme-dark .group-checkbox label { color: var(--ris-text-color) !important; } html.theme-dark #plan_exe_gra button:not(.btn) { background-color: var(--ris-surface-level-2) !important; border: 1px solid #4a4a4a !important; color: var(--ris-text-color) !important; border-radius: 4px; } html.theme-dark #plan_exe_gra button:not(.btn):hover, html.theme-dark #plan_exe_gra button:not(.btn):focus { background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: #ffffff !important; } html.theme-dark #plan_exe_gra .label-danger { background-color: #8f2d2d !important; border: 1px solid #b64a4a !important; color: #ffe5e5 !important; } /* Ajustes específicos inf_tip.php (tabs de informe) */ html.theme-dark #tabs-infome.ui-tabs, html.theme-dark #tabs-informe.ui-tabs { background: var(--ris-surface-level-1) !important; border: 1px solid #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark #tabs-infome .ui-tabs-nav, html.theme-dark #tabs-informe .ui-tabs-nav { background: var(--ris-surface-level-2) !important; border: 1px solid #4a4a4a !important; } html.theme-dark #tabs-infome .ui-tabs-nav li, html.theme-dark #tabs-informe .ui-tabs-nav li { background: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; } html.theme-dark #tabs-infome .ui-tabs-nav li a, html.theme-dark #tabs-informe .ui-tabs-nav li a { color: #cfd8e3 !important; } html.theme-dark #tabs-infome .ui-tabs-nav li.ui-tabs-active, html.theme-dark #tabs-infome .ui-tabs-nav li.ui-state-active, html.theme-dark #tabs-informe .ui-tabs-nav li.ui-tabs-active, html.theme-dark #tabs-informe .ui-tabs-nav li.ui-state-active { background: #2563eb !important; border-color: #2563eb !important; } html.theme-dark #tabs-infome .ui-tabs-nav li.ui-tabs-active a, html.theme-dark #tabs-infome .ui-tabs-nav li.ui-state-active a, html.theme-dark #tabs-informe .ui-tabs-nav li.ui-tabs-active a, html.theme-dark #tabs-informe .ui-tabs-nav li.ui-state-active a { color: #ffffff !important; } html.theme-dark #tabs-infome .ui-tabs-panel, html.theme-dark #tabs-informe .ui-tabs-panel { background: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; border-top: 1px solid #4a4a4a !important; } /* Botones nativos input[type="button"] en dark mode */ html.theme-dark input[type="button"] { background-color: var(--ris-surface-level-1) !important; border: 1px solid #4a4a4a !important; color: var(--ris-text-color) !important; box-shadow: 3px 3px 8px #101010, -3px -3px 8px #303030 !important; } html.theme-dark input[type="button"]:hover, html.theme-dark input[type="button"]:focus, html.theme-dark input[type="button"]:active { background-color: var(--ris-surface-level-3) !important; border-color: #5f5f5f !important; color: #ffffff !important; } html.theme-dark input[type="button"][disabled], html.theme-dark input[type="button"].disabled { opacity: .6; box-shadow: none !important; } /* jQuery UI tabs genérico: ui-tabs-nav / ui-widget-header en dark mode */ html.theme-dark .ui-tabs, html.theme-dark .ui-tabs.ui-widget, html.theme-dark .ui-tabs.ui-widget-content { background: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; color: var(--ris-text-color) !important; } html.theme-dark .ui-tabs .ui-tabs-nav, html.theme-dark .ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all { background: var(--ris-surface-level-2) !important; border: 1px solid #4a4a4a !important; } html.theme-dark .ui-tabs .ui-tabs-nav li, html.theme-dark .ui-tabs .ui-tabs-nav .ui-state-default { background: var(--ris-surface-level-1) !important; border-color: #4a4a4a !important; } html.theme-dark .ui-tabs .ui-tabs-nav li a, html.theme-dark .ui-tabs .ui-tabs-nav .ui-state-default a { color: #cfd8e3 !important; } html.theme-dark .ui-tabs .ui-tabs-nav li.ui-tabs-active, html.theme-dark .ui-tabs .ui-tabs-nav li.ui-state-active, html.theme-dark .ui-tabs .ui-tabs-nav .ui-state-active { background: #2563eb !important; border-color: #2563eb !important; } html.theme-dark .ui-tabs .ui-tabs-nav li.ui-tabs-active a, html.theme-dark .ui-tabs .ui-tabs-nav li.ui-state-active a, html.theme-dark .ui-tabs .ui-tabs-nav .ui-state-active a { color: #ffffff !important; } html.theme-dark .ui-tabs .ui-tabs-panel { background: var(--ris-surface-level-1) !important; color: var(--ris-text-color) !important; border-top-color: #4a4a4a !important; } /* DataTables paginator: mejorar legibilidad y contraste en dark mode */ html.theme-dark .dataTables_wrapper .dataTables_paginate { color: #cfd8e3 !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 2px !important; padding: 4px 10px !important; border: 1px solid #4a4a4a !important; border-radius: 4px !important; background: var(--ris-surface-level-1) !important; color: #d7dee8 !important; box-shadow: 2px 2px 6px #101010, -2px -2px 6px #303030 !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:focus { background: var(--ris-surface-level-3) !important; border-color: #66707a !important; color: #ffffff !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: none !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus { background: var(--ris-surface-level-1) !important; border-color: #3c3c3c !important; color: #77808a !important; opacity: .7; box-shadow: none !important; cursor: not-allowed !important; } /* DataTables + Bootstrap renderer: evitar doble caja (li.paginate_button + .page-link) */ html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button:focus, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.current, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.active, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button .page-link { margin: 0 2px !important; padding: 4px 10px !important; border: 1px solid #4a4a4a !important; border-radius: 4px !important; background: var(--ris-surface-level-1) !important; color: #d7dee8 !important; box-shadow: 2px 2px 6px #101010, -2px -2px 6px #303030 !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button .page-link:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button .page-link:focus { background: var(--ris-surface-level-3) !important; border-color: #66707a !important; color: #ffffff !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.active .page-link, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.current .page-link, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.active .page-link:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.current .page-link:hover { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: none !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled .page-link, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled .page-link:hover, html.theme-dark .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled .page-link:focus { background: var(--ris-surface-level-1) !important; border-color: #3c3c3c !important; color: #77808a !important; opacity: .7; box-shadow: none !important; cursor: not-allowed !important; } /* Ocultar botones vacíos generados por algunos renderers/extensiones */ html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:empty { display: none !important; }