/* ============================================================================ RIS / Oil — theme.css Capa de tema para Bootstrap 5.3 (archivos compilados, sin recompilar Sass). Funciona sobreescribiendo las CSS variables nativas de Bootstrap (--bs-*) a nivel global y a nivel de componente, porque al usar bootstrap.min.css compilado, recolorear .btn-primary requiere tocar sus variables de componente (--bs-btn-bg, etc.), no solo --bs-primary. Cargar SIEMPRE DESPUÉS de bootstrap.min.css. Modo oscuro: nativo de BS 5.3 → . ========================================================================== */ /* ---- 1. Fuentes -------------------------------------------------------- */ /* Fuentes servidas desde google-fonts.css (archivos locales en css/fonts/google/). Sin dependencia externa de Google Fonts. */ /* ============================================================================ 2. TOKENS DE MARCA (light) ========================================================================== */ :root { /* — Marca (teal del producto actual) — */ --app-primary: #0e7c7b; --app-primary-600: #0a5e5e; --app-primary-700: #084848; --app-primary-100: #d6ecec; --app-primary-50: #ecf6f6; --app-primary-rgb: 14, 124, 123; /* — Tipografía — */ --app-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* — Radios / sombras (consumidos por los overrides de abajo) — */ --app-radius-sm: 6px; --app-radius: 8px; --app-radius-lg: 14px; --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --app-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); --app-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06); /* ---- Override de variables NATIVAS de Bootstrap (global) ---- */ --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-600); --bs-body-font-family: var(--app-font); --bs-body-color: #0f172a; --bs-body-color-rgb: 15, 23, 42; --bs-secondary-color: #475569; --bs-tertiary-color: #94a3b8; --bs-body-bg: #f7f8fa; --bs-border-color: #e5e7eb; --bs-border-color-translucent: rgba(15, 23, 42, .1); --bs-border-radius: var(--app-radius); --bs-border-radius-sm: var(--app-radius-sm); --bs-border-radius-lg: var(--app-radius-lg); --bs-emphasis-color: #0f172a; --bs-secondary-bg: #f1f3f6; --bs-tertiary-bg: #f7f8fa; /* Foco con el color de marca */ --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25); } /* ============================================================================ 3. MODO OSCURO (nativo BS 5.3 → data-bs-theme="dark") ========================================================================== */ [data-bs-theme="dark"] { --app-primary: #2dd4bf; --app-primary-600: #5eead4; --app-primary-700: #99f6e4; --app-primary-100: #134e4a; --app-primary-50: #0d3937; --app-primary-rgb: 45, 212, 191; --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-hover-color: var(--app-primary-600); --bs-body-color: #f1f5f9; --bs-body-color-rgb: 241, 245, 249; --bs-secondary-color: #cbd5e1; --bs-tertiary-color: #64748b; --bs-body-bg: #0b1118; --bs-border-color: #232b36; --bs-emphasis-color: #f1f5f9; --bs-secondary-bg: #141a23; --bs-tertiary-bg: #1c232d; --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --app-shadow-md: 0 4px 12px rgba(0, 0, 0, .5); --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); } /* Superficie de "tarjeta/panel" en dark */ [data-bs-theme="dark"] { --bs-card-bg: #141a23; --bs-card-border-color: #232b36; } /* ============================================================================ 4. BASE ========================================================================== */ body { font-family: var(--app-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } .text-mono, .font-mono { font-family: var(--app-mono); } h1, .h1, h2, .h2, h3, .h3 { letter-spacing: -0.02em; font-weight: 700; } /* ============================================================================ 5. BOTONES ========================================================================== */ .btn { --bs-btn-border-radius: var(--app-radius); --bs-btn-font-weight: 600; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; } .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-600); --bs-btn-hover-border-color: var(--app-primary-600); --bs-btn-active-bg: var(--app-primary-700); --bs-btn-active-border-color: var(--app-primary-700); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1118; --bs-btn-hover-color: #0b1118; --bs-btn-active-color: #0b1118; } .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-bg: var(--app-primary-600); --bs-btn-active-border-color: var(--app-primary-600); } /* btn-secondary en BS5 es gris oscuro (#6c757d) — lo reemplazamos por el equivalente al btn-default de BS3: superficie clara con borde sutil */ .btn-secondary { --bs-btn-bg: var(--bs-secondary-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: #e2e6ea; --bs-btn-hover-border-color: #ced4da; --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-active-bg: #d3d9e0; --bs-btn-active-border-color: #c4ccd4; --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-disabled-bg: var(--bs-secondary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); --bs-btn-disabled-color: var(--bs-tertiary-color); --bs-btn-focus-shadow-rgb: var(--bs-secondary-color-rgb, 100, 116, 139); } [data-bs-theme="dark"] .btn-secondary { --bs-btn-bg: #1e2738; --bs-btn-border-color: #2d3748; --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-bg: #253047; --bs-btn-hover-border-color: #374151; --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-bg: #2d3a55; --bs-btn-active-border-color: #3d4f6b; --bs-btn-active-color: var(--bs-body-color); --bs-btn-disabled-bg: #1e2738; --bs-btn-disabled-color: var(--bs-tertiary-color); } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-bg: #e2e6ea; } .btn-light { --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); } /* ============================================================================ 6. CARDS (reemplazan a los .panel de BS3) ========================================================================== */ .card { --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: var(--app-radius-lg); --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px); --bs-card-cap-bg: transparent; box-shadow: var(--app-shadow-sm); } .card-header { font-weight: 700; border-bottom-color: var(--bs-border-color); } /* ============================================================================ 7. FORMULARIOS ========================================================================== */ .form-control, .form-select { --bs-border-radius: var(--app-radius); border-color: #cbd5e1; padding: .5rem .75rem; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: #334155; } .form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18); } .form-label { font-weight: 600; font-size: .8125rem; color: var(--bs-secondary-color); margin-bottom: .375rem; } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .input-group-text { background: var(--bs-secondary-bg); border-color: #cbd5e1; } /* ============================================================================ 8. NAVBAR / NAV ========================================================================== */ .navbar { --bs-navbar-padding-y: .5rem; background: var(--bs-tertiary-bg, #fff); border-bottom: 1px solid var(--bs-border-color); box-shadow: var(--app-shadow-sm); } [data-bs-theme="light"] .navbar, :root .navbar { background: #fff; } .nav-link { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--app-primary); border-radius: var(--app-radius); font-weight: 500; } .nav-link.active, .nav-pills .nav-link.active { color: var(--app-primary) !important; background: var(--app-primary-50); font-weight: 700; } /* ============================================================================ 9. BADGES / PILLS de estado Cubrimos tanto .text-bg-* (BS5 nativo) como .bg-* (migración desde BS3). El fondo es pastel con texto legible para evitar bloques de color sólido que saturan visualmente las tablas. ========================================================================== */ .badge { font-weight: 600; border-radius: 999px; padding: .28em .65em; font-size: .75em; letter-spacing: .03em; } /* — Light mode — */ .badge.text-bg-success, .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; border: 1px solid rgba(22, 163, 74, .2); } .badge.text-bg-warning, .badge.bg-warning { background: #fef3c7 !important; color: #a16207 !important; border: 1px solid rgba(202, 138, 4, .2); } .badge.text-bg-danger, .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid rgba(220, 38, 38, .2); } .badge.text-bg-info, .badge.bg-info { background: #e0f2fe !important; color: #0369a1 !important; border: 1px solid rgba(14, 165, 233, .2); } .badge.text-bg-primary, .badge.bg-primary { background: rgba(var(--app-primary-rgb), .12) !important; color: var(--app-primary) !important; border: 1px solid rgba(var(--app-primary-rgb), .25); } .badge.text-bg-secondary, .badge.bg-secondary { background: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color) !important; border: 1px solid var(--bs-border-color); } .badge.text-bg-dark, .badge.bg-dark { background: #1e293b !important; color: #f1f5f9 !important; border: 1px solid #334155; } .badge.text-bg-light, .badge.bg-light { background: #f8fafc !important; color: #475569 !important; border: 1px solid #e2e8f0; } /* — Dark mode — */ [data-bs-theme="dark"] .badge.text-bg-success, [data-bs-theme="dark"] .badge.bg-success { background: rgba(74, 222, 128, .15) !important; color: #4ade80 !important; border-color: rgba(74, 222, 128, .25); } [data-bs-theme="dark"] .badge.text-bg-warning, [data-bs-theme="dark"] .badge.bg-warning { background: rgba(250, 204, 21, .15) !important; color: #facc15 !important; border-color: rgba(250, 204, 21, .25); } [data-bs-theme="dark"] .badge.text-bg-danger, [data-bs-theme="dark"] .badge.bg-danger { background: rgba(248, 113, 113, .15) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, .25); } [data-bs-theme="dark"] .badge.text-bg-info, [data-bs-theme="dark"] .badge.bg-info { background: rgba(56, 189, 248, .15) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, .25); } [data-bs-theme="dark"] .badge.text-bg-primary, [data-bs-theme="dark"] .badge.bg-primary { background: rgba(var(--app-primary-rgb), .18) !important; color: var(--app-primary) !important; border-color: rgba(var(--app-primary-rgb), .3); } [data-bs-theme="dark"] .badge.text-bg-secondary, [data-bs-theme="dark"] .badge.bg-secondary { background: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color) !important; border-color: var(--bs-border-color); } [data-bs-theme="dark"] .badge.text-bg-dark, [data-bs-theme="dark"] .badge.bg-dark { background: #0b1118 !important; color: #cbd5e1 !important; border-color: #232b36; } /* ============================================================================ 10. TABLAS + DataTables 2.x ========================================================================== */ .table { --bs-table-border-color: var(--bs-border-color); vertical-align: middle; } .table > thead { --bs-table-bg: var(--bs-secondary-bg); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--bs-secondary-color); } .table > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-tertiary-bg); } /* El CSS legacy compilado (css-compiled/itsos.css, resabio de Bootstrap 3) fija fondos duros sin variables de tema: .neomofismo-superpuesto en blanco, .table-striped en #f9f9f9 y .table-hover en #f5f5f5. En modo oscuro el texto sigue --bs-body-color (claro) pero el fondo se queda claro por ese CSS viejo → contenido casi invisible. Se corrige acá, con prioridad de carga sobre el legacy, para todas las tablas/paneles. */ [data-bs-theme="dark"] .neomofismo-superpuesto, [data-bs-theme="dark"] .neomofismo-superpuesto-round, [data-bs-theme="dark"] .panel .panel-default .neomofismo-superpuesto { background-color: var(--bs-body-bg) !important; box-shadow: 3px 3px 6px rgba(0, 0, 0, .55), -3px -3px 6px rgba(255, 255, 255, .03) !important; } [data-bs-theme="dark"] .neomofismo-profundo, [data-bs-theme="dark"] .panel .panel-default .neomofismo-superpuesto img.client-shadow { background-color: var(--bs-tertiary-bg) !important; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .5), inset -3px -3px 7px rgba(255, 255, 255, .03) !important; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--bs-secondary-bg) !important; } [data-bs-theme="dark"] .table > tbody > tr > td, [data-bs-theme="dark"] .table > tbody > tr > th { color: var(--bs-body-color) !important; } /* DataTables 2.x — usar SIEMPRE la integración dataTables.bootstrap5. Estos ajustes solo afinan lo visual para que matchee el tema. */ .dt-container .dt-search input, .dt-container .dt-length select { border-radius: var(--app-radius); border-color: #cbd5e1; } .dt-container .dt-paging .page-link { border-radius: var(--app-radius) !important; } .dt-container .dt-paging .active > .page-link { background: var(--app-primary); border-color: var(--app-primary); } table.dataTable > thead .dt-orderable-asc span.dt-column-order::before, table.dataTable > thead .dt-orderable-desc span.dt-column-order::after { opacity: .4; } /* ============================================================================ 11. MODALES / OFFCANVAS / DROPDOWN / TOOLTIP ========================================================================== */ .modal-content { border: none; border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); } .modal-header, .modal-footer { border-color: var(--bs-border-color); } .offcanvas { border-color: var(--bs-border-color); } .dropdown-menu { --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-border-radius: var(--app-radius); --bs-dropdown-link-active-bg: var(--app-primary-50); --bs-dropdown-link-active-color: var(--app-primary); box-shadow: var(--app-shadow-md); } .tooltip { --bs-tooltip-bg: #0f172a; --bs-tooltip-border-radius: var(--app-radius-sm); font-weight: 500; } /* ============================================================================ 12. ICONOS (Material Symbols ya presente en el proyecto) ========================================================================== */ .material-symbols-outlined, .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; font-size: 1.25rem; } .icon-sm { font-size: 1rem !important; } .icon-lg { font-size: 1.5rem !important; } /* ============================================================================ 13. TOGGLE DÍA / NOCHE ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; width: 52px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #fde68a); position: relative; cursor: pointer; padding: 3px; border: 1px solid rgba(0, 0, 0, .05); transition: background .25s; flex: 0 0 auto; } .theme-toggle__knob { width: 22px; height: 22px; background: #fff; border-radius: 999px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .25s; display: flex; align-items: center; justify-content: center; font-size: 13px; } [data-bs-theme="dark"] .theme-toggle { background: linear-gradient(90deg, #1e293b, #475569); } [data-bs-theme="dark"] .theme-toggle__knob { transform: translateX(24px); background: #1f2937; } /* ============================================================================ 14. UTILIDADES de apoyo ========================================================================== */ .shadow-app-sm { box-shadow: var(--app-shadow-sm) !important; } .shadow-app-md { box-shadow: var(--app-shadow-md) !important; } .rounded-app { border-radius: var(--app-radius) !important; } .rounded-app-lg{ border-radius: var(--app-radius-lg) !important; } .text-app-primary { color: var(--app-primary) !important; } .bg-app-primary-50 { background: var(--app-primary-50) !important; } .eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-tertiary-color); } /* ── Highcharts dark mode ────────────────────────────────────────────── */ [data-bs-theme="dark"] .highcharts-background { fill: var(--bs-body-bg); } [data-bs-theme="dark"] .highcharts-plot-background { fill: var(--bs-body-bg); } [data-bs-theme="dark"] .highcharts-title text, [data-bs-theme="dark"] .highcharts-subtitle text, [data-bs-theme="dark"] .highcharts-axis-labels text, [data-bs-theme="dark"] .highcharts-axis-title text, [data-bs-theme="dark"] .highcharts-legend-item text { fill: var(--bs-body-color); } [data-bs-theme="dark"] .highcharts-grid-line { stroke: var(--bs-border-color); } [data-bs-theme="dark"] .highcharts-tooltip .highcharts-label-box { fill: var(--bs-body-bg); stroke: var(--bs-border-color); } /* ============================================================================ 15. TOAST ALERTAS (showAlert) ========================================================================== */ .toast-alerta { border-radius: var(--app-radius-lg, 0.75rem) !important; box-shadow: var(--app-shadow-md, 0 .5rem 1.5rem rgba(0,0,0,.15)) !important; width: 380px; max-width: calc(100vw - 30px); padding: 0.9rem 1rem; display: flex; align-items: flex-start; gap: 0.6rem; transform: translateX(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; } .toast-alerta.toast-alerta-show { transform: translateX(0); opacity: 1; } .toast-alerta .toast-alerta-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .toast-alerta .toast-alerta-msg { flex: 1 1 auto; word-break: break-word; } /* ============================================================================ 16. NF-MODAL — sistema estándar de modales de acción (notas, comentarios) Usado por: turnos/agenda.php (notas del paciente), valorizaciones/operaciones/ conciliar_orden.php (Comentar_Est, Comentar_Conciliacion), informes/com_est.php, valorizaciones/operaciones/comentarios_conciliacion.php. ========================================================================== */ .nf-modal .nf-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08); } .nf-modal .nf-header { background: linear-gradient(135deg, var(--app-primary-700) 0%, var(--app-primary) 60%, var(--app-primary-600) 100%); border-bottom: none; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .nf-modal .nf-header-inner { display: flex; align-items: center; gap: .6rem; } .nf-modal .nf-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,.18); border-radius: 8px; color: #fff; flex-shrink: 0; } .nf-modal .nf-title { color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; margin: 0; } .nf-modal .nf-close { filter: invert(1) brightness(2); opacity: .85; } .nf-modal .nf-close:hover { opacity: 1; } .nf-modal .nf-body { background: #f8fafa; } .nf-modal .nf-footer { background: #f8fafa; border-top: 1px solid #e2eded; padding: .75rem 1.25rem; } .nf-modal .nf-btn-cerrar { background: #fff; border: 1.5px solid #cbd5d5; color: #374151; font-size: .875rem; font-weight: 500; padding: .4rem .9rem; border-radius: 7px; transition: all .15s; } .nf-modal .nf-btn-cerrar:hover { background: #f1f5f5; border-color: #9ca3af; } /* ── Contenido nf: formulario + historial (dentro de un nf-modal) ── */ .nf-form-section { background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 1.25rem 1.25rem 1rem; } .nf-form-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--app-primary-700); margin-bottom: .4rem; display: block; } .nf-textarea-wrap { position: relative; } .nf-textarea { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: .65rem .85rem; font-size: .9rem; color: #334155; resize: none; transition: border-color .2s, box-shadow .2s; background: #fff; line-height: 1.5; min-height: 80px; } .nf-textarea:focus { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .12); } .nf-textarea::placeholder { color: #b0bec5; } .nf-char-counter { position: absolute; bottom: 6px; right: 10px; font-size: .7rem; color: #64748b; pointer-events: none; } .nf-char-counter.nf-warn { color: #e53e3e; } .nf-form-actions { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; } .nf-error-msg { font-size: .78rem; color: #e53e3e; flex: 1; min-height: 1.1em; } .nf-btn-add { background: var(--app-primary); color: #fff; border: none; border-radius: 7px; padding: .42rem 1rem; font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: .35rem; cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap; } .nf-btn-add:hover:not(:disabled) { background: var(--app-primary-600); } .nf-btn-add:active:not(:disabled) { transform: scale(.97); } .nf-btn-add:disabled { opacity: .5; cursor: not-allowed; } .nf-btn-add .nf-spin { animation: nf-rotate .8s linear infinite; } @keyframes nf-rotate { to { transform: rotate(360deg); } } .nf-list-section { padding: 1rem 1.25rem; } .nf-list-heading { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: .85rem; display: flex; align-items: center; gap: .4rem; } .nf-list-heading::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } .nf-note-card { background: #ffffff; border: 1px solid #e2e8f0; border-left: 3px solid var(--app-primary); border-radius: 0 10px 10px 0; padding: .75rem .95rem; margin-bottom: .6rem; transition: box-shadow .15s; } .nf-note-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); } .nf-note-text { font-size: .9rem; color: #334155; font-weight: 500; margin-bottom: .35rem; line-height: 1.5; } .nf-note-meta { font-size: .75rem; color: #64748b; display: flex; align-items: center; gap: .35rem; } .nf-note-meta svg { opacity: .6; flex-shrink: 0; } .nf-empty-state { text-align: center; padding: 2rem 1rem; color: #64748b; } .nf-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--app-primary-100); border-radius: 50%; color: var(--app-primary-700); margin-bottom: .75rem; } .nf-empty-state p { font-size: .88rem; margin: 0; } /* ── Tabla de log dentro de nf-modal (log_pre_fac.php) ── */ .nf-log-table { border-collapse: separate; border-spacing: 0; } .nf-log-table thead th { background: var(--app-primary-100); color: var(--app-primary-700); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--app-primary); border-top: none; padding: .65rem .85rem; position: sticky; top: 0; z-index: 1; white-space: nowrap; } .nf-log-table tbody td, .nf-log-table tbody th { padding: .55rem .85rem; font-size: .85rem; color: #334155; vertical-align: middle; } .nf-log-table tbody tr:hover { background: var(--app-primary-100); } /* ── Loader nf: mientras carga contenido via .load() (ej. log_pre_fac.php) ── */ .nf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 3rem 1rem; color: #64748b; } .nf-loading-ring { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--app-primary-100); border-top-color: var(--app-primary); animation: nf-spin .7s linear infinite; } .nf-loading p { margin: 0; font-size: .85rem; font-weight: 500; letter-spacing: .01em; animation: nf-pulse 1.4s ease-in-out infinite; } @keyframes nf-spin { to { transform: rotate(360deg); } } @keyframes nf-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }