/* ========================================================= SMART-MEDIC | Modo Oscuro Activado al agregar la clase `sm-dark` al elemento . La clase se aplica antes del primer paint via script inline en el partial `layouts/_tema_oscuro_head.blade.php`, leyendo la preferencia desde localStorage('sm-theme'). ========================================================= */ /* Variables de paleta */ html.sm-dark { --sm-bg: #1a1d28; --sm-bg-2: #232733; --sm-card: #232733; --sm-card-head: #1f222d; --sm-text: #d6d8df; --sm-text-muted: #9aa0ad; --sm-border: #2e3340; --sm-input-bg: #2a2e3b; --sm-input-text: #e6e8ef; --sm-link: #4eaaff; --sm-link-hover: #79c0ff; --sm-shadow: rgba(0, 0, 0, .45); --sm-hover: #2c3142; } /* ---------- Página / contenedores ---------- */ html.sm-dark body, html.sm-dark .m-grid--root, html.sm-dark .m-page, html.sm-dark .m-body, html.sm-dark .m-content, html.sm-dark .m-content--skin-light2 { background-color: var(--sm-bg) !important; color: var(--sm-text); } html.sm-dark .m-subheader, html.sm-dark .m-subheader__title, html.sm-dark .m-subheader__breadcrumbs-link, html.sm-dark .m-subheader__daterange-label, html.sm-dark .m-subheader__daterange-title { color: var(--sm-text) !important; background-color: transparent !important; } /* ---------- Header ---------- */ html.sm-dark .m-header, html.sm-dark .m-stack__item.m-header-head, html.sm-dark .m-topbar { background-color: var(--sm-card) !important; border-color: var(--sm-border) !important; } html.sm-dark .m-topbar .m-nav__link-icon i, html.sm-dark .m-topbar .text-blue { color: var(--sm-link) !important; } html.sm-dark .m-topbar__name { color: var(--sm-text) !important; } /* ---------- Brand (cabecera del sidebar, donde va el logo) ---------- `.m-brand` esta dentro del
pero visualmente forma la parte superior del menu lateral. Usa skin oscura nativa de Metronic; aqui la reintegramos a la paleta `--sm-*`. */ html.sm-dark .m-brand, html.sm-dark .m-brand.m-brand--skin-dark { background-color: var(--sm-card) !important; border-right: 1px solid var(--sm-border) !important; border-bottom: 1px solid var(--sm-border) !important; } html.sm-dark .m-brand .m-brand__icon, html.sm-dark .m-brand .m-brand__toggler, html.sm-dark .m-brand .m-brand__toggler i, html.sm-dark .m-brand .m-brand__icon i, html.sm-dark .m-brand .m-brand__toggler span { color: var(--sm-text-muted) !important; } html.sm-dark .m-brand .m-brand__icon:hover, html.sm-dark .m-brand .m-brand__toggler:hover, html.sm-dark .m-brand .m-brand__icon:hover i, html.sm-dark .m-brand .m-brand__toggler:hover i, html.sm-dark .m-brand .m-brand__icon:hover span, html.sm-dark .m-brand .m-brand__toggler:hover span { color: var(--sm-text) !important; } /* Linea pintada que dibuja el icono "hamburguesa" en el toggler */ html.sm-dark .m-brand .m-brand__toggler .m-brand__toggler-line, html.sm-dark .m-brand .m-brand__toggler span > span { background-color: var(--sm-text-muted) !important; } html.sm-dark .m-brand .m-brand__toggler:hover .m-brand__toggler-line, html.sm-dark .m-brand .m-brand__toggler:hover span > span { background-color: var(--sm-text) !important; } /* ---------- Footer ---------- */ html.sm-dark .m-footer { background-color: var(--sm-card) !important; border-top: 1px solid var(--sm-border) !important; } html.sm-dark .m-footer__copyright, html.sm-dark .m-footer__copyright a { color: var(--sm-text-muted) !important; } /* ---------- Portlets / cards ---------- */ html.sm-dark .m-portlet, html.sm-dark .card { background-color: var(--sm-card) !important; border-color: var(--sm-border) !important; box-shadow: 0 1px 15px var(--sm-shadow) !important; } html.sm-dark .m-portlet__head, html.sm-dark .m-portlet__foot, html.sm-dark .card-header, html.sm-dark .card-footer { background-color: var(--sm-card-head) !important; border-color: var(--sm-border) !important; } html.sm-dark .m-portlet__head-text, html.sm-dark .m-portlet__head-caption, html.sm-dark .card-title { color: var(--sm-text) !important; } html.sm-dark .m-portlet__head-icon i { color: var(--sm-link) !important; } /* ---------- Tablas ---------- */ html.sm-dark .table, html.sm-dark table.dataTable { color: var(--sm-text) !important; background-color: var(--sm-card) !important; } html.sm-dark .table thead th, html.sm-dark table.dataTable thead th, html.sm-dark table.dataTable thead td { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .table tbody tr, html.sm-dark table.dataTable tbody tr { background-color: var(--sm-card) !important; color: var(--sm-text) !important; } html.sm-dark .table tbody tr:hover, html.sm-dark table.dataTable tbody tr:hover, html.sm-dark table.dataTable.hover tbody tr:hover { background-color: var(--sm-hover) !important; } html.sm-dark .table-striped tbody tr:nth-of-type(odd), html.sm-dark table.dataTable.stripe tbody tr.odd { background-color: #1f222d !important; } html.sm-dark .table td, html.sm-dark .table th, html.sm-dark table.dataTable td, html.sm-dark table.dataTable th { border-color: var(--sm-border) !important; } html.sm-dark .dataTables_wrapper, html.sm-dark .dataTables_info, html.sm-dark .dataTables_length, html.sm-dark .dataTables_filter, html.sm-dark .dataTables_paginate, html.sm-dark .dataTables_processing { color: var(--sm-text) !important; } html.sm-dark .dataTables_paginate .paginate_button { color: var(--sm-text) !important; } html.sm-dark .dataTables_paginate .paginate_button.current, html.sm-dark .dataTables_paginate .paginate_button.current:hover { background: var(--sm-link) !important; color: #fff !important; border-color: var(--sm-link) !important; } html.sm-dark .dataTables_paginate .paginate_button:hover { background: var(--sm-hover) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* DataTables con Bootstrap 4 integration (.pagination > .page-item > .page-link). Las reglas anteriores apuntan al render legacy; estas cubren el render real que usa el bundle del proyecto. */ html.sm-dark .dataTables_paginate .pagination .page-item .page-link { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .dataTables_paginate .pagination .page-item .page-link:hover { background-color: var(--sm-hover) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .dataTables_paginate .pagination .page-item.active .page-link { background-color: var(--sm-link) !important; color: #fff !important; border-color: var(--sm-link) !important; } html.sm-dark .dataTables_paginate .pagination .page-item.disabled .page-link { background-color: var(--sm-bg-2) !important; color: var(--sm-text-muted) !important; border-color: var(--sm-border) !important; } /* Foco accesible (Bootstrap aplica un box-shadow azul claro que se ve raro) */ html.sm-dark .dataTables_paginate .pagination .page-item .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25) !important; } /* Separadores de formulario (Metronic) - .m-form__seperator (solid y dashed). El default usa #ebedf2 pensado para fondo blanco; en dark queda casi brillante. */ html.sm-dark .m-form .m-form__seperator { border-top-color: var(--sm-border) !important; } html.sm-dark .m-form .m-form__seperator.m-form__seperator--dashed { border-top-color: var(--sm-border) !important; } /* Group seperators: cuando el form padre tiene .m-form--group-seperator(-dashed), cada .m-form__group muestra un border-bottom (solid #f4f5f8 o dashed #ebedf2). Mismo problema: pensados para fondo blanco. */ html.sm-dark .m-form.m-form--group-seperator .m-form__group, html.sm-dark .m-form.m-form--group-seperator-dashed .m-form__group { border-bottom-color: var(--sm-border) !important; } /* ---------- Formularios ---------- */ html.sm-dark .form-control, html.sm-dark input.form-control, html.sm-dark select.form-control, html.sm-dark textarea.form-control, html.sm-dark .custom-select { background-color: var(--sm-input-bg) !important; color: var(--sm-input-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .form-control:focus { border-color: var(--sm-link) !important; box-shadow: 0 0 0 .2rem rgba(78, 170, 255, .15) !important; } html.sm-dark .form-control:disabled, html.sm-dark .form-control[readonly] { background-color: #1f222d !important; color: #8a8f9c !important; } html.sm-dark label, html.sm-dark .col-form-label, html.sm-dark .form-text, html.sm-dark legend { color: var(--sm-text) !important; } html.sm-dark ::placeholder { color: #6c7280 !important; opacity: 1; } html.sm-dark .input-group-text, html.sm-dark .input-group-addon { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* ---------- Select2 ---------- */ html.sm-dark .select2-container--default .select2-selection--single, html.sm-dark .select2-container--default .select2-selection--multiple { background-color: var(--sm-input-bg) !important; border-color: var(--sm-border) !important; } html.sm-dark .select2-container--default .select2-selection--single .select2-selection__rendered, html.sm-dark .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--sm-input-text) !important; } html.sm-dark .select2-dropdown { background-color: var(--sm-card) !important; border-color: var(--sm-border) !important; } html.sm-dark .select2-results__option { color: var(--sm-text) !important; background-color: var(--sm-card) !important; } html.sm-dark .select2-results__option--highlighted, html.sm-dark .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--sm-link) !important; color: #fff !important; } html.sm-dark .select2-search--dropdown .select2-search__field { background-color: var(--sm-input-bg) !important; color: var(--sm-input-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .select2-selection__choice { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* Agrupadores visuales de Signos Vitales (Peso, Talla, Z-Score). Las clases se definen en custom.css con sus tonos pastel para light; acá los reemplazamos por tonos oscuros que MANTIENEN el efecto de diferenciar grupos pero no compiten con el fondo del card. Cada uno conserva una "personalidad" cromatica (gris-azulado, azul, amarillo opaco) para que el usuario reconozca el grupo. */ html.sm-dark .sm-signovital-peso { background: #2a3340 !important; } html.sm-dark .sm-signovital-talla { background: #1f2e3a !important; } html.sm-dark .sm-signovital-zscore { background: #2e2b1d !important; } /* Bootstrap Switch — label central + handle "default" (estado off/neutro). El handle default usa #ebedf2 (gris casi blanco) que brilla en dark. Los handles semanticos (success verde, danger rojo, warning amarillo, etc.) se respetan tal cual porque su color es informacion: indican el estado activo del switch. Si en el futuro algun semantic se ve mal, se override individual. */ html.sm-dark .bootstrap-switch .bootstrap-switch-label { background: var(--sm-card) !important; color: var(--sm-text-muted) !important; } html.sm-dark .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, html.sm-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { background-color: var(--sm-input-bg) !important; border-color: var(--sm-border) !important; color: var(--sm-text) !important; } /* Custom file input (Bootstrap): label + boton "Seleccionar" (::after). Default usa #fff / #495057 / #ced4da / #e9ecef pensados para fondo blanco. */ html.sm-dark .custom-file-label { background-color: var(--sm-input-bg) !important; color: var(--sm-input-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .custom-file-label::after { background-color: var(--sm-bg-2) !important; color: var(--sm-text) !important; border-left-color: var(--sm-border) !important; } /* Foco del input file: Bootstrap aplica un border-color azul claro #c2c7f3 */ html.sm-dark .custom-file-input:focus ~ .custom-file-label { border-color: var(--sm-link) !important; box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25) !important; } html.sm-dark .custom-file-input:focus ~ .custom-file-label::after { border-left-color: var(--sm-link) !important; } /* ---------- Modales ---------- */ html.sm-dark .modal-content { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .modal-header, html.sm-dark .modal-footer { border-color: var(--sm-border) !important; } html.sm-dark .modal-title { color: var(--sm-text) !important; } html.sm-dark .modal-header .close, html.sm-dark .close { color: var(--sm-text) !important; text-shadow: none !important; } /* ---------- Dropdowns ---------- */ html.sm-dark .dropdown-menu, html.sm-dark .m-dropdown__inner, html.sm-dark .m-dropdown__wrapper { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .dropdown-item { color: var(--sm-text) !important; } html.sm-dark .dropdown-item:hover, html.sm-dark .dropdown-item:focus { background-color: var(--sm-hover) !important; color: var(--sm-text) !important; } html.sm-dark .m-dropdown__arrow::after { border-bottom-color: var(--sm-card) !important; } /* ---------- Tabs ---------- */ html.sm-dark .nav-tabs { border-color: var(--sm-border) !important; } html.sm-dark .nav-tabs .nav-link, html.sm-dark .m-tabs-line .m-tabs__link { color: var(--sm-text) !important; } html.sm-dark .nav-tabs .nav-link.active, html.sm-dark .m-tabs-line .m-tabs__link.active { background-color: var(--sm-card) !important; border-color: var(--sm-border) var(--sm-border) var(--sm-card) !important; color: var(--sm-link) !important; } /* ---------- Pestañas del turnero (estilo relleno) ---------- El activo lleva fondo de marca con texto blanco (legible en dark); los inactivos usan el texto del tema con hover sutil. */ html.sm-dark .nav-tabs--turnero { border-bottom-color: var(--sm-border) !important; } html.sm-dark .nav-tabs--turnero .m-tabs__link { color: var(--sm-text) !important; border-color: transparent !important; } html.sm-dark .nav-tabs--turnero .m-tabs__link:hover { color: var(--sm-link) !important; background-color: var(--sm-hover) !important; } html.sm-dark .nav-tabs--turnero .m-tabs__link.active, html.sm-dark .nav-tabs--turnero .m-tabs__link.active:hover { color: #ffffff !important; background-color: #5867dd !important; border-color: #5867dd !important; } /* ---------- Alerts outline (callouts informativos) ---------- m-alert--outline + alert-secondary/alert-warning traen fondos claros de Bootstrap que rompen sobre el fondo oscuro. Se reescriben con las variables del tema, conservando el color de acento del estado. */ html.sm-dark .m-alert.m-alert--outline.alert-secondary { background-color: var(--sm-card-head) !important; border-color: var(--sm-border) !important; color: var(--sm-text) !important; } html.sm-dark .m-alert.m-alert--outline.alert-warning { background-color: rgba(255, 184, 34, .08) !important; border-color: #b8860b !important; color: var(--sm-text) !important; } html.sm-dark .m-alert.m-alert--outline .m-alert__text strong { color: var(--sm-text) !important; } /* ---------- Switches Metronic ---------- El track inactivo del m-switch usa grises claros; en dark se oscurece para que no aparezca un bloque blanco. El estado activo (--success) conserva su verde de Metronic. */ html.sm-dark .m-switch.m-switch--outline input:empty ~ span:before { background-color: var(--sm-input-bg) !important; border-color: var(--sm-border) !important; } html.sm-dark .m-switch.m-switch--outline input:empty ~ span:after { background-color: var(--sm-text-muted) !important; } /* ---------- Sección de formulario (m-form__section) ---------- */ html.sm-dark .m-form__section { color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* ---------- Datepicker (Bootstrap Datepicker) ---------- Defaults Metronic: hover/disabled #ebedf2 (gris claro), active #5867dd, today #828ee6, old/new #f4f5f8. En dark hay que oscurecer fondos y mantener el color de active/today para que sigan destacando. IMPORTANTE: hay vistas que pintan .day.disabled con semantica propia (rojo #ff5555 = hora ocupada, verde #a9fb91 = disponible) usando reglas con !important locales — esas tienen mayor relevancia conceptual y ganan por orden si se declaran despues que estas. No las pisamos genericamente con override de color. */ html.sm-dark .datepicker { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .datepicker table { background-color: transparent !important; } html.sm-dark .datepicker td, html.sm-dark .datepicker th { background-color: transparent !important; color: var(--sm-text) !important; } html.sm-dark .datepicker thead th.dow { color: var(--sm-text-muted) !important; } html.sm-dark .datepicker thead th.datepicker-switch:hover, html.sm-dark .datepicker thead th.next:hover, html.sm-dark .datepicker thead th.prev:hover { background: var(--sm-hover) !important; } html.sm-dark .datepicker tbody tr > td.day { color: var(--sm-text) !important; } html.sm-dark .datepicker tbody tr > td.day:hover { background: var(--sm-hover) !important; color: var(--sm-text) !important; } /* Dias fuera del mes actual (old/new): atenuados */ html.sm-dark .datepicker tbody tr > td.day.old, html.sm-dark .datepicker tbody tr > td.day.new { color: var(--sm-text-muted) !important; background: transparent !important; } /* Dia de hoy: mantener tono azul pero adaptado a dark */ html.sm-dark .datepicker tbody tr > td.day.today, html.sm-dark .datepicker tbody tr > td.day.today:hover { background: #2d3a5c !important; color: var(--sm-link) !important; } /* Dia seleccionado / activo: usar var(--sm-link) */ html.sm-dark .datepicker tbody tr > td.day.active, html.sm-dark .datepicker tbody tr > td.day.active:hover, html.sm-dark .datepicker tbody tr > td.day.selected, html.sm-dark .datepicker tbody tr > td.day.selected:hover { background: var(--sm-link) !important; color: #fff !important; } /* Dias en rango (entre fecha inicio y fin) */ html.sm-dark .datepicker tbody tr > td.day.range { background: var(--sm-bg-2) !important; color: var(--sm-text) !important; } /* Dias deshabilitados (cuando NO tienen semantica propia: ej. fuera de horario laboral o fechas pasadas). Si una vista los pinta con color semantico (rojo/verde) y declara la regla DESPUES de este archivo en cascada, ese color gana por orden. */ html.sm-dark .datepicker tbody tr > td.day.disabled, html.sm-dark .datepicker tbody tr > td.day.disabled:hover, html.sm-dark .day.disabled { background: var(--sm-bg-2) !important; color: var(--sm-text-muted) !important; cursor: not-allowed; } /* Footer del datepicker (Hoy / Limpiar) */ html.sm-dark .datepicker tfoot tr > th.today, html.sm-dark .datepicker tfoot tr > th.clear { color: var(--sm-link) !important; } html.sm-dark .datepicker tfoot tr > th.today:hover, html.sm-dark .datepicker tfoot tr > th.clear:hover { background: var(--sm-hover) !important; } /* ---------- Acordeones (m-accordion) ---------- Usados en "Agregar paciente" y otros formularios. Las variantes de color semantico (`--info`, `--info-80`, `--info-70`) que pintan la franja lateral NO se tocan para preservar la jerarquia visual. */ html.sm-dark .m-accordion, html.sm-dark .m-accordion .m-accordion__item { background-color: var(--sm-card) !important; border-color: var(--sm-border) !important; } /* Cabecera del acordeon: NO se toca para preservar el fondo semantico (--info / --info-80 / --info-70) que distingue cada bloque. */ /* Icono y flecha: NO se tocan para preservar el color semantico (--info / --info-80 / --info-70) de Metronic. */ /* Titulo de la seccion: NO se toca para preservar el color semantico (--info / --info-80 / --info-70) que distingue cada bloque del formulario (Datos personales, Datos de nacimiento, etc.). */ /* Cuerpo desplegable (panel) */ html.sm-dark .m-accordion .m-accordion__item-body, html.sm-dark .m-accordion .m-accordion__item-content { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* ---------- FullCalendar (agenda) ---------- FullCalendar trae sus propios colores hardcoded en `vendors/custom/fullcalendar/fullcalendar.bundle.css`. Aqui los reintegramos al tema oscuro. NO tocamos `.fc-event` para preservar los colores semanticos por tipo de cita asignados desde JS. */ /* Contenedor */ html.sm-dark .fc, html.sm-dark .fc-view, html.sm-dark .fc-view-container { color: var(--sm-text) !important; background-color: transparent !important; } /* Toolbar (mes anterior / siguiente / hoy / vista) */ html.sm-dark .fc-toolbar h2 { color: var(--sm-text) !important; } html.sm-dark .fc button, html.sm-dark .fc-state-default { background-color: var(--sm-card-head) !important; background-image: none !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; text-shadow: none !important; box-shadow: none !important; } html.sm-dark .fc-state-hover { background-color: var(--sm-hover) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .fc-state-active, html.sm-dark .fc-state-down { background-color: var(--sm-hover) !important; color: var(--sm-link) !important; border-color: var(--sm-border) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25) !important; } html.sm-dark .fc-state-disabled { background-color: var(--sm-card-head) !important; color: var(--sm-text-muted) !important; border-color: var(--sm-border) !important; } /* Overrides para botones custom del proyecto en FullCalendar. La regla genérica `html.sm-dark .fc button` tiene specificity (0,2,2) porque incluye el elemento `button`. Para superarla, los overrides custom usan `button.fc-XX-button` que iguala specificity (0,2,2) y gana por orden (declarados DESPUÉS). PATRÓN para agregar un nuevo botón custom: copiar el bloque y cambiar el sufijo de la clase + color (#hex). MANTENER el `button.` al inicio del selector. */ html.sm-dark button.fc-agregarHorarioMedico-button { background-color: #954AF9 !important; background-image: none !important; color: #fff !important; border-color: #954AF9 !important; } html.sm-dark button.fc-agregarHorarioMedico-button:hover, html.sm-dark button.fc-agregarHorarioMedico-button.fc-state-hover { background-color: #8129f8 !important; color: #fff !important; border-color: #8129f8 !important; } html.sm-dark button.fc-actualizarPagina-button { background-color: #00BDA4 !important; background-image: none !important; color: #fff !important; border-color: #00BDA4 !important; } html.sm-dark button.fc-actualizarPagina-button:hover, html.sm-dark button.fc-actualizarPagina-button.fc-state-hover { background-color: #039481 !important; color: #fff !important; border-color: #039481 !important; } /* Bordes y fondos de celdas (vista mes / semana / dia) */ html.sm-dark .fc-unthemed .fc-content, html.sm-dark .fc-unthemed .fc-divider, html.sm-dark .fc-unthemed .fc-list-heading td, html.sm-dark .fc-unthemed .fc-list-view, html.sm-dark .fc-unthemed .fc-popover, html.sm-dark .fc-unthemed .fc-row, html.sm-dark .fc-unthemed tbody, html.sm-dark .fc-unthemed td, html.sm-dark .fc-unthemed th, html.sm-dark .fc-unthemed thead { border-color: var(--sm-border) !important; } html.sm-dark .fc-unthemed .fc-divider { background-color: var(--sm-card-head) !important; } /* Cabeceras (lunes/martes/...) */ html.sm-dark .fc-day-header, html.sm-dark .fc th.fc-day-header { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; } /* Numero del dia */ html.sm-dark .fc-day-number, html.sm-dark .fc-basic-view .fc-day-number { color: var(--sm-text-muted) !important; } html.sm-dark .fc-day-top { color: var(--sm-text-muted) !important; } /* Dia actual: tinte sutil sobre el fondo */ html.sm-dark .fc-unthemed td.fc-today, html.sm-dark .fc .fc-today { background-color: rgba(78, 170, 255, .08) !important; } html.sm-dark .fc-today .fc-day-number { color: var(--sm-link) !important; font-weight: 700; } /* Dias deshabilitados / fuera del rango */ html.sm-dark .fc-unthemed .fc-disabled-day { background-color: rgba(255, 255, 255, .04) !important; } html.sm-dark .fc-other-month .fc-day-number { color: var(--sm-text-muted) !important; } /* Numero de semana lateral */ html.sm-dark .fc-basic-view .fc-day-top .fc-week-number, html.sm-dark .fc-basic-view td.fc-week-number { background-color: var(--sm-card-head) !important; color: var(--sm-text-muted) !important; } /* Eje vertical de horas en vista dia / semana */ html.sm-dark .fc .fc-axis { color: var(--sm-text-muted) !important; } html.sm-dark .fc-time-grid .fc-slats td { border-color: var(--sm-border) !important; } /* Popover (al hacer click en "+ N mas" en una celda con muchos eventos) */ html.sm-dark .fc-unthemed .fc-popover, html.sm-dark .fc-popover { background-color: var(--sm-card) !important; border-color: var(--sm-border) !important; color: var(--sm-text) !important; box-shadow: 0 2px 10px var(--sm-shadow) !important; } html.sm-dark .fc-popover .fc-header { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; } html.sm-dark .fc-popover .fc-header .fc-close { color: var(--sm-text-muted) !important; } html.sm-dark .fc-popover .fc-header .fc-close:hover { color: var(--sm-text) !important; } /* Vista de lista (list view) */ html.sm-dark .fc-list-view { border-color: var(--sm-border) !important; } html.sm-dark .fc-list-table td { border-color: var(--sm-border) !important; color: var(--sm-text) !important; } html.sm-dark .fc-list-heading td, html.sm-dark .fc-unthemed .fc-list-heading td { background-color: var(--sm-card-head) !important; color: var(--sm-text) !important; } html.sm-dark .fc-list-item td { background-color: var(--sm-card) !important; } html.sm-dark .fc-unthemed .fc-list-item:hover td, html.sm-dark .fc-list-item:hover td { background-color: var(--sm-hover) !important; } html.sm-dark .fc-unthemed .fc-list-empty, html.sm-dark .fc-list-empty { background-color: var(--sm-card-head) !important; color: var(--sm-text-muted) !important; } /* Eventos / citas: preservar el `background-color` semantico asignado desde JS (verde=disponible, amarillo=programada, purpura=atendida), pero forzar texto oscuro + borde + sombra para que sean legibles sobre el fondo oscuro y se distingan unos de otros. IMPORTANTE: los selectores `.fc-content/.fc-title/.fc-time/span/*` son necesarios para ganar especificidad sobre el override generico de span del bloque "texto forzado a negro" mas arriba. */ html.sm-dark .fc-event, html.sm-dark .fc-event:hover, html.sm-dark .fc-event .fc-content, html.sm-dark .fc-event .fc-title, html.sm-dark .fc-event .fc-time, html.sm-dark .fc-event span, html.sm-dark .fc-event * { color: #1a1d28 !important; text-shadow: none !important; } html.sm-dark .fc-event, html.sm-dark .fc-event:hover { font-weight: 600 !important; border: 1px solid rgba(0, 0, 0, .25) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important; } html.sm-dark .fc-event:hover { opacity: .9; box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important; } /* En list view el evento NO tiene fondo (es solo una fila), restauramos color de texto del tema para que no quede gris oscuro sobre la fila. */ html.sm-dark .fc-list-item .fc-list-item-title a, html.sm-dark .fc-list-item .fc-list-item-title, html.sm-dark .fc-list-item .fc-list-item-time { color: var(--sm-text) !important; font-weight: 500; text-shadow: none; } /* Linea "ahora" (now indicator) — mantener color rojo nativo, no tocar */ /* ---------- Encabezados / textos ---------- */ html.sm-dark h1, html.sm-dark h2, html.sm-dark h3, html.sm-dark h4, html.sm-dark h5, html.sm-dark h6, html.sm-dark .h1, html.sm-dark .h2, html.sm-dark .h3, html.sm-dark .h4, html.sm-dark .h5, html.sm-dark .h6 { color: var(--sm-text) !important; } /* ---------- Texto forzado a negro por custom.css / Metronic / Bootstrap ---------- Estos selectores ya pintan negro globalmente con `!important` en otras hojas (sobre todo `custom.css`). Los pisamos aqui con un selector mas especifico (`html.sm-dark` + clase) para que ganen la cascada. */ html.sm-dark .m-portlet .m-portlet__body, html.sm-dark .m-checkbox, html.sm-dark .m-portlet__head-text, html.sm-dark .m-accordion__item-titl, html.sm-dark .m-accordion__item-title, html.sm-dark .m-subheader__title, html.sm-dark .table td, html.sm-dark .table th, html.sm-dark table.dataTable td, html.sm-dark table.dataTable th, html.sm-dark .text-dark, html.sm-dark .text-body, html.sm-dark .text-black, html.sm-dark .m--font-dark, html.sm-dark .m--font-default, html.sm-dark .card-body, html.sm-dark .modal-body, html.sm-dark p, html.sm-dark span:not([class*="badge"]):not([class*="m-badge"]):not([class*="m-icon"]):not(.m-menu__link-text):not(.m-menu__link-title):not(.m-menu__link-icon):not(.fc-title):not(.fc-time):not(.fc-list-item-title):not(.fc-list-item-time):not(.m-accordion__item-title):not(.m-accordion__item-icon), html.sm-dark small, html.sm-dark strong, html.sm-dark b, html.sm-dark li { color: var(--sm-text) !important; } /* Texto silenciado / secundario */ html.sm-dark .text-muted, html.sm-dark .m--font-grey, html.sm-dark .m--font-secondary { color: var(--sm-text-muted) !important; } html.sm-dark a:not(.btn):not(.m-nav__link):not(.m-nav-grid__item):not(.page-link) { color: var(--sm-link); } html.sm-dark a:not(.btn):not(.m-nav__link):not(.m-nav-grid__item):not(.page-link):hover { color: var(--sm-link-hover); } html.sm-dark hr { border-color: var(--sm-border) !important; } /* ---------- Franjas / fondos blancos forzados por custom.css o utilidades ---------- `.m-form__actions--solid` tiene `background:#FFF` hardcoded en custom.css (linea 700) y aparece como franja blanca al pie de 88+ formularios. `.dropzone` (zona de drag&drop) tambien tiene `background:white` (linea 185). Aqui los reintegramos al tema oscuro. */ html.sm-dark .m-form .m-form__actions, html.sm-dark .m-form .m-form__actions.m-form__actions--solid, html.sm-dark .m-form__actions, html.sm-dark .m-form__actions--solid { background-color: var(--sm-card-head) !important; border-color: var(--sm-border) !important; } html.sm-dark .dropzone { background-color: var(--sm-input-bg) !important; border-color: var(--sm-border) !important; color: var(--sm-text) !important; } html.sm-dark .dropzone .dz-message, html.sm-dark .dropzone .dz-message * { color: var(--sm-text-muted) !important; } /* Utilidades Bootstrap / Metronic con fondo claro */ html.sm-dark .bg-white, html.sm-dark .bg-light, html.sm-dark .m--bg-white, html.sm-dark .m--bg-light { background-color: var(--sm-card) !important; color: var(--sm-text) !important; } /* Variantes "fit" del footer del portlet */ html.sm-dark .m-portlet__foot--fit, html.sm-dark .m-portlet__foot.m-portlet__foot--fit { background-color: var(--sm-card-head) !important; border-color: var(--sm-border) !important; } /* ---------- SweetAlert2 ---------- */ html.sm-dark .swal2-popup { background-color: var(--sm-card) !important; color: var(--sm-text) !important; } html.sm-dark .swal2-title, html.sm-dark .swal2-html-container, html.sm-dark .swal2-content { color: var(--sm-text) !important; } html.sm-dark .swal2-input, html.sm-dark .swal2-textarea { background-color: var(--sm-input-bg) !important; color: var(--sm-input-text) !important; border-color: var(--sm-border) !important; } /* ---------- Bootstrap alerts (mantener color semantico, oscurecer fondo) ---------- Importante: las variantes se declaran DESPUES de .alert para que la cascada de Bootstrap se respete (misma specificity → gana la ultima declaracion). Los colores semanticos (success/danger/warning/info/primary) mantienen su tono para no perder significado visual; secondary y light usan tonos neutros. */ html.sm-dark .alert { background-color: var(--sm-card) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .alert-primary { background-color: #1d2f4a !important; color: #a8c5f0 !important; border-color: #2c4366 !important; } html.sm-dark .alert-secondary { background-color: var(--sm-bg-2) !important; color: var(--sm-text-muted) !important; border-color: var(--sm-border) !important; } html.sm-dark .alert-info { background-color: #1d3a4a !important; color: #b3e0ff !important; border-color: #2c5066 !important; } html.sm-dark .alert-success { background-color: #1d4733 !important; color: #b8e6c8 !important; border-color: #2c6647 !important; } html.sm-dark .alert-warning { background-color: #4a3d1d !important; color: #f0d68a !important; border-color: #66572c !important; } html.sm-dark .alert-danger { background-color: #4a1d1d !important; color: #f0a8a8 !important; border-color: #662c2c !important; } html.sm-dark .alert-light { background-color: var(--sm-bg-2) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } html.sm-dark .alert-dark { background-color: var(--sm-bg) !important; color: var(--sm-text) !important; border-color: var(--sm-border) !important; } /* Headings, separadores y links dentro de cualquier alert mantienen coherencia */ html.sm-dark .alert-heading { color: inherit !important; } html.sm-dark .alert-link { color: inherit !important; font-weight: 700; } /* Boton de cerrar (Bootstrap usa color negro por default) */ html.sm-dark .alert .close { color: inherit !important; text-shadow: none !important; opacity: 0.7; } html.sm-dark .alert .close:hover { opacity: 1; } /* ---------- Badges (texto oscuro sobre fondos claros) ---------- */ html.sm-dark .badge-light { background-color: var(--sm-bg-2) !important; color: var(--sm-text) !important; } /* ---------- Botones secundarios / default ---------- Metronic pinta .btn-secondary con #ebedf2 (gris casi blanco) y comparte regla con .btn-default (gris claro #E1E1E1 + texto #919191). Ambos resaltan como si fueran primary en dark. Los unificamos con un gris intermedio que se diferencia del card pero no compite con acciones. */ html.sm-dark .btn.btn-secondary, html.sm-dark .btn-secondary, html.sm-dark .btn.btn-default, html.sm-dark .btn-default { background-color: #3a3f52 !important; color: var(--sm-text) !important; border-color: #3a3f52 !important; } html.sm-dark .btn.btn-secondary:hover, html.sm-dark .btn-secondary:hover, html.sm-dark .btn.btn-default:hover, html.sm-dark .btn-default:hover { background-color: #474c61 !important; color: var(--sm-text) !important; border-color: #474c61 !important; } html.sm-dark .btn.btn-secondary:focus, html.sm-dark .btn.btn-secondary.focus, html.sm-dark .btn-secondary:focus, html.sm-dark .btn-secondary.focus, html.sm-dark .btn.btn-default:focus, html.sm-dark .btn.btn-default.focus, html.sm-dark .btn-default:focus, html.sm-dark .btn-default.focus { background-color: #474c61 !important; border-color: #474c61 !important; box-shadow: 0 0 0 0.2rem rgba(110, 119, 145, 0.4) !important; } html.sm-dark .btn.btn-secondary:active, html.sm-dark .btn-secondary:active, html.sm-dark .btn-secondary:not(:disabled):not(.disabled):active, html.sm-dark .btn-secondary:not(:disabled):not(.disabled).active, html.sm-dark .btn.btn-default:active, html.sm-dark .btn-default:active, html.sm-dark .btn-default:not(:disabled):not(.disabled):active, html.sm-dark .btn-default:not(:disabled):not(.disabled).active { background-color: #2e3340 !important; border-color: #2e3340 !important; color: var(--sm-text) !important; } html.sm-dark .btn.btn-secondary.disabled, html.sm-dark .btn.btn-secondary:disabled, html.sm-dark .btn-secondary.disabled, html.sm-dark .btn-secondary:disabled, html.sm-dark .btn.btn-default.disabled, html.sm-dark .btn.btn-default:disabled, html.sm-dark .btn-default.disabled, html.sm-dark .btn-default:disabled { background-color: #2a2e3b !important; color: var(--sm-text-muted) !important; border-color: #2a2e3b !important; opacity: 0.65; } /* Botones de exportacion de DataTables (.buttons-excel, .buttons-pdf). En el HTML se renderizan como `