/** * Temas / skins de la plataforma staff (dashboard, managers). * Independiente del portal paciente v3 (--pp-*). * * Uso: * Clave config: ui_staff_theme * Preferencia local: localStorage.ui_staff_theme */ :root, html[data-ui-theme="tjs-classic"] { --ui-brand: #8B0D32; --ui-brand-dark: #6d0a27; --ui-brand-accent: #A91B47; --ui-brand-rgb: 139, 13, 50; --ui-surface: #f8f9fa; --ui-surface-card: #ffffff; --ui-text: #212529; --ui-text-muted: #6c757d; --ui-border: #dee2e6; --ui-sidebar-bg: linear-gradient(160deg, #8B0D32 0%, #6d0a27 100%); --ui-sidebar-text: #ffffff; --ui-sidebar-muted: rgba(255, 255, 255, 0.78); --ui-welcome-bg: linear-gradient(135deg, #8B0D32 0%, #A91B47 100%); --ui-welcome-text: #ffffff; --ui-search-btn: #8B0D32; --ui-search-btn-hover: #6d0a27; --ui-focus-ring: rgba(139, 13, 50, 0.25); --ui-shadow: 0 2px 8px rgba(139, 13, 50, 0.12); } html[data-ui-theme="clinical-slate"] { --ui-brand: #0f766e; --ui-brand-dark: #0d5f59; --ui-brand-accent: #14b8a6; --ui-brand-rgb: 15, 118, 110; --ui-surface: #f1f5f9; --ui-surface-card: #ffffff; --ui-text: #0f172a; --ui-text-muted: #64748b; --ui-border: #e2e8f0; --ui-sidebar-bg: linear-gradient(165deg, #0f172a 0%, #134e4a 55%, #0f766e 100%); --ui-sidebar-text: #f8fafc; --ui-sidebar-muted: rgba(248, 250, 252, 0.72); --ui-welcome-bg: linear-gradient(120deg, #0f766e 0%, #155e75 55%, #1e293b 100%); --ui-welcome-text: #f8fafc; --ui-search-btn: #0f766e; --ui-search-btn-hover: #0d5f59; --ui-focus-ring: rgba(15, 118, 110, 0.28); --ui-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); } html[data-ui-theme="ocean"] { --ui-brand: #0369a1; --ui-brand-dark: #075985; --ui-brand-accent: #38bdf8; --ui-brand-rgb: 3, 105, 161; --ui-surface: #f0f9ff; --ui-surface-card: #ffffff; --ui-text: #0c4a6e; --ui-text-muted: #64748b; --ui-border: #bae6fd; --ui-sidebar-bg: linear-gradient(165deg, #0c4a6e 0%, #0369a1 60%, #0284c7 100%); --ui-sidebar-text: #f0f9ff; --ui-sidebar-muted: rgba(240, 249, 255, 0.75); --ui-welcome-bg: linear-gradient(125deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%); --ui-welcome-text: #f0f9ff; --ui-search-btn: #0369a1; --ui-search-btn-hover: #075985; --ui-focus-ring: rgba(3, 105, 161, 0.28); --ui-shadow: 0 2px 10px rgba(3, 105, 161, 0.12); } html[data-ui-theme="dark-slate"] { color-scheme: dark; --ui-brand: #2dd4bf; --ui-brand-dark: #14b8a6; --ui-brand-accent: #5eead4; --ui-brand-rgb: 45, 212, 191; --ui-surface: #0b1220; --ui-surface-card: #111827; --ui-surface-elevated: #1f2937; --ui-text: #e5e7eb; --ui-text-muted: #9ca3af; --ui-border: #374151; --ui-sidebar-bg: linear-gradient(165deg, #020617 0%, #0f172a 50%, #134e4a 100%); --ui-sidebar-text: #f8fafc; --ui-sidebar-muted: rgba(248, 250, 252, 0.65); --ui-welcome-bg: linear-gradient(120deg, #0f766e 0%, #115e59 45%, #111827 100%); --ui-welcome-text: #f0fdfa; --ui-search-btn: #0d9488; --ui-search-btn-hover: #0f766e; --ui-focus-ring: rgba(45, 212, 191, 0.35); --ui-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } html[data-ui-theme="dark-midnight"] { color-scheme: dark; --ui-brand: #60a5fa; --ui-brand-dark: #3b82f6; --ui-brand-accent: #93c5fd; --ui-brand-rgb: 96, 165, 250; --ui-surface: #070b14; --ui-surface-card: #0d1526; --ui-surface-elevated: #152238; --ui-text: #e2e8f0; --ui-text-muted: #94a3b8; --ui-border: #1e293b; --ui-sidebar-bg: linear-gradient(165deg, #020617 0%, #0c1a33 55%, #1e3a5f 100%); --ui-sidebar-text: #f1f5f9; --ui-sidebar-muted: rgba(241, 245, 249, 0.65); --ui-welcome-bg: linear-gradient(125deg, #1e3a8a 0%, #1d4ed8 45%, #0f172a 100%); --ui-welcome-text: #eff6ff; --ui-search-btn: #2563eb; --ui-search-btn-hover: #1d4ed8; --ui-focus-ring: rgba(96, 165, 250, 0.35); --ui-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } html[data-ui-theme="dark-ember"] { color-scheme: dark; --ui-brand: #f87171; --ui-brand-dark: #ef4444; --ui-brand-accent: #fca5a5; --ui-brand-rgb: 248, 113, 113; --ui-surface: #140a0c; --ui-surface-card: #1c1014; --ui-surface-elevated: #2a151c; --ui-text: #f5e9eb; --ui-text-muted: #c4a4ab; --ui-border: #3f1d28; --ui-sidebar-bg: linear-gradient(165deg, #1a050a 0%, #4c0519 50%, #7f1d1d 100%); --ui-sidebar-text: #fff1f2; --ui-sidebar-muted: rgba(255, 241, 242, 0.68); --ui-welcome-bg: linear-gradient(125deg, #9f1239 0%, #be123c 40%, #1c1014 100%); --ui-welcome-text: #fff1f2; --ui-search-btn: #e11d48; --ui-search-btn-hover: #be123c; --ui-focus-ring: rgba(248, 113, 113, 0.35); --ui-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } /* Horizon: pensados para skin topnav (barra superior clara) */ html[data-ui-theme="horizon"] { --ui-brand: #0d9488; --ui-brand-dark: #0f766e; --ui-brand-accent: #2dd4bf; --ui-brand-rgb: 13, 148, 136; --ui-surface: #f8fafc; --ui-surface-card: #ffffff; --ui-text: #0f172a; --ui-text-muted: #64748b; --ui-border: #e2e8f0; --ui-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); --ui-sidebar-text: #0f172a; --ui-sidebar-muted: #64748b; --ui-welcome-bg: linear-gradient(120deg, #0d9488 0%, #155e75 100%); --ui-welcome-text: #f8fafc; --ui-search-btn: #0d9488; --ui-search-btn-hover: #0f766e; --ui-focus-ring: rgba(13, 148, 136, 0.28); --ui-shadow: 0 1px 8px rgba(15, 23, 42, 0.08); --ui-topnav-bg: #ffffff; --ui-topnav-border: #e2e8f0; --ui-topnav-text: #0f172a; --ui-topnav-muted: #64748b; --ui-topnav-active: rgba(13, 148, 136, 0.12); --ui-topnav-active-text: #0f766e; } /* Horizon ink: topnav oscura */ html[data-ui-theme="horizon-ink"] { color-scheme: dark; --ui-brand: #5eead4; --ui-brand-dark: #2dd4bf; --ui-brand-accent: #99f6e4; --ui-brand-rgb: 94, 234, 212; --ui-surface: #0b1220; --ui-surface-card: #111827; --ui-surface-elevated: #1f2937; --ui-text: #e5e7eb; --ui-text-muted: #9ca3af; --ui-border: #1f2937; --ui-sidebar-bg: linear-gradient(165deg, #020617 0%, #0f172a 100%); --ui-sidebar-text: #f8fafc; --ui-sidebar-muted: rgba(248, 250, 252, 0.65); --ui-welcome-bg: linear-gradient(120deg, #134e4a 0%, #0f172a 100%); --ui-welcome-text: #f0fdfa; --ui-search-btn: #0d9488; --ui-search-btn-hover: #0f766e; --ui-focus-ring: rgba(94, 234, 212, 0.3); --ui-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --ui-topnav-bg: #0f172a; --ui-topnav-border: #1e293b; --ui-topnav-text: #f1f5f9; --ui-topnav-muted: #94a3b8; --ui-topnav-active: rgba(45, 212, 191, 0.16); --ui-topnav-active-text: #5eead4; } /* Defaults topnav (temas sin vars propias): mapear desde superficies */ :root { --ui-topnav-bg: var(--ui-surface-card, #fff); --ui-topnav-border: var(--ui-border, #dee2e6); --ui-topnav-text: var(--ui-text, #212529); --ui-topnav-muted: var(--ui-text-muted, #6c757d); --ui-topnav-active: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.12); --ui-topnav-active-text: var(--ui-brand, #0f766e); } html[data-ui-scheme="dark"]:not([data-ui-theme="horizon"]):not([data-ui-theme="horizon-ink"]) { --ui-topnav-bg: var(--ui-surface-elevated, #1f2937); --ui-topnav-border: var(--ui-border, #374151); --ui-topnav-text: var(--ui-text, #e5e7eb); --ui-topnav-muted: var(--ui-text-muted, #9ca3af); } /* Botones acción estudio (info / ver / descargar): color según tema activo */ .studies-table .btn-action.btn-info { background: rgba(var(--ui-brand-rgb), 0.10) !important; border: 1px solid rgba(var(--ui-brand-rgb), 0.32) !important; color: var(--ui-brand-dark) !important; box-shadow: none !important; } .studies-table .btn-action.btn-info:hover, .studies-table .btn-action.btn-info:focus { background: rgba(var(--ui-brand-rgb), 0.18) !important; border-color: var(--ui-brand) !important; color: var(--ui-brand-dark) !important; } .studies-table .btn-action.btn-view { background: rgba(var(--ui-brand-rgb), 0.16) !important; border: 1px solid rgba(var(--ui-brand-rgb), 0.45) !important; color: var(--ui-brand) !important; box-shadow: none !important; } .studies-table .btn-action.btn-view:hover, .studies-table .btn-action.btn-view:focus { background: var(--ui-brand) !important; border-color: var(--ui-brand-dark) !important; color: #fff !important; } .studies-table .btn-action.btn-download { background: color-mix(in srgb, var(--ui-brand-accent) 14%, var(--ui-surface-card, #fff)) !important; border: 1px solid color-mix(in srgb, var(--ui-brand-accent) 40%, var(--ui-border)) !important; color: var(--ui-brand-dark) !important; box-shadow: none !important; } .studies-table .btn-action.btn-download:hover, .studies-table .btn-action.btn-download:focus { background: rgba(var(--ui-brand-rgb), 0.22) !important; border-color: var(--ui-brand) !important; color: var(--ui-brand-dark) !important; } html[data-ui-scheme="dark"] .studies-table .btn-action.btn-info, html[data-ui-scheme="dark"] .studies-table .btn-action.btn-view, html[data-ui-scheme="dark"] .studies-table .btn-action.btn-download { color: var(--ui-brand-accent) !important; } html[data-ui-scheme="dark"] .studies-table .btn-action.btn-view:hover, html[data-ui-scheme="dark"] .studies-table .btn-action.btn-view:focus { color: #0b1220 !important; background: var(--ui-brand) !important; } /* Superficies / formularios según esquema */ html[data-ui-scheme="dark"] .card, html[data-ui-scheme="dark"] .search-filters, html[data-ui-scheme="dark"] .modality-filters { background: var(--ui-surface-card) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-ui-scheme="dark"] .card-header, html[data-ui-scheme="dark"] .card-footer { background: var(--ui-surface-elevated, var(--ui-surface-card)) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .table, html[data-ui-scheme="dark"] .studies-table { --bs-table-bg: var(--ui-surface-card); --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); --bs-table-hover-bg: var(--ui-surface-elevated, #1f2937); color: var(--ui-text); } html[data-ui-scheme="dark"] .form-control, html[data-ui-scheme="dark"] .form-select { background-color: var(--ui-surface-elevated, #1f2937) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .form-control::placeholder { color: var(--ui-text-muted) !important; } html[data-ui-scheme="dark"] .btn-outline-secondary { color: var(--ui-text-muted) !important; border-color: var(--ui-border) !important; } html[data-ui-scheme="dark"] .btn-outline-secondary:hover { background: var(--ui-surface-elevated, #1f2937) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .text-muted, html[data-ui-scheme="dark"] .filter-title, html[data-ui-scheme="dark"] .filter-label { color: var(--ui-text-muted) !important; } html[data-ui-scheme="dark"] .mobile-header { background: var(--ui-surface-card) !important; border-bottom: 1px solid var(--ui-border) !important; } html[data-ui-scheme="dark"] .dropdown-menu { background: var(--ui-surface-card) !important; border-color: var(--ui-border) !important; } html[data-ui-scheme="dark"] .dropdown-item { color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .dropdown-item:hover { background: var(--ui-surface-elevated, #1f2937) !important; } html[data-ui-scheme="dark"] .modality-btn:not(.active) { background: var(--ui-surface-elevated, #1f2937) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .studies-table tbody tr { background: var(--ui-surface-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } /* Selección de filas — todos los temas/skins (técnica Bootstrap table-hover) */ .studies-table tbody tr.study-row-selected, html[data-ui-scheme="light"] .studies-table tbody tr.study-row-selected, html[data-ui-scheme="dark"] .studies-table tbody tr.study-row-selected { --udv-row-selected-fill: color-mix(in srgb, var(--ui-brand, #0d6efd) 16%, transparent); box-shadow: inset 0 0 0 9999px var(--udv-row-selected-fill), 0 1px 3px rgba(0, 0, 0, 0.08) !important; outline: 2px solid color-mix(in srgb, var(--ui-brand, #0d6efd) 45%, transparent) !important; outline-offset: -2px; position: relative; z-index: 1; } .studies-table tbody tr.study-row-selected > td, html[data-ui-scheme="dark"] .studies-table tbody tr.study-row-selected > td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--ui-brand, #0d6efd) 16%, transparent) !important; background-color: transparent !important; } html[data-ui-scheme="dark"] .studies-table tbody tr.study-row-selected.study-open-in-workspace { --udv-row-selected-fill: color-mix(in srgb, var(--ui-brand, #0d6efd) 22%, transparent); } html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Paciente"] { border-bottom-color: var(--ui-border) !important; } html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Paciente"] .fw-semibold { color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Paciente"] small, html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Fecha"], html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Estudio"] { color: var(--ui-text-muted) !important; } html[data-ui-scheme="dark"] .studies-table tbody tr > td[data-label="Antecedentes"] { border-top-color: var(--ui-border) !important; } html[data-ui-scheme="dark"] .study-open-in-workspace { background-color: rgba(var(--ui-brand-rgb), 0.15) !important; border-left-color: var(--ui-brand) !important; } html { --brand: var(--ui-brand); --brand-dark: var(--ui-brand-dark); --brand-accent: var(--ui-brand-accent); } body { background: var(--ui-surface); color: var(--ui-text); } .main-content { background: var(--ui-surface) !important; } .btn-primary { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--ui-brand-dark) !important; border-color: var(--ui-brand-dark) !important; } .btn-outline-primary { color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; } .btn-outline-primary:hover { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: #fff !important; } .sidebar { background: var(--ui-sidebar-bg) !important; color: var(--ui-sidebar-text) !important; } .sidebar-title, .sidebar-nav .nav-link, .sidebar-nav .nav-link i { color: var(--ui-sidebar-text) !important; } .sidebar-subtitle, .sidebar-user .user-role, .sidebar-version .sidebar-version-label { color: var(--ui-sidebar-muted) !important; } .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background: rgba(255, 255, 255, 0.12) !important; } .mobile-header .btn-link, .mobile-header .fw-bold, .mobile-header .btn-link i { color: var(--ui-brand) !important; } .welcome-card { background: var(--ui-welcome-bg) !important; color: var(--ui-welcome-text) !important; box-shadow: var(--ui-shadow) !important; } .btn-search { background-color: var(--ui-search-btn) !important; border-color: var(--ui-search-btn) !important; color: #fff !important; } .btn-search:hover { background-color: var(--ui-search-btn-hover) !important; border-color: var(--ui-search-btn-hover) !important; } .modality-btn.active, .btn-modality.active { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: #fff !important; } .search-filters, .modality-filters { border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow); } .dropdown-header { color: var(--ui-brand) !important; } .dropdown-item:hover { color: var(--ui-brand) !important; } /* Modal confirmar logout (desktop + móvil) — respeta tema + skin */ #logoutConfirmModal { z-index: 1085; } #logoutConfirmModal .modal-content { background: var(--ui-surface-card, #fff) !important; color: var(--ui-text, #212529) !important; border: 1px solid var(--ui-border, #dee2e6) !important; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.28); } #logoutConfirmModal .modal-header, #logoutConfirmModal .modal-footer { border-color: var(--ui-border, #dee2e6) !important; } #logoutConfirmModal .modal-title { color: var(--ui-text, #212529) !important; font-weight: 600; } #logoutConfirmModal .modal-body { color: var(--ui-text, #212529) !important; } #logoutConfirmModal .modal-body .text-muted, #logoutConfirmModal .text-muted { color: var(--ui-text-muted, #64748b) !important; } #logoutConfirmModal .modal-title .bi, #logoutConfirmModal .modal-title .text-warning { color: var(--ui-brand, #0f766e) !important; } #logoutConfirmModal .btn-primary { background-color: var(--ui-brand, #0f766e) !important; border-color: var(--ui-brand, #0f766e) !important; color: #fff !important; } #logoutConfirmModal .btn-danger { background-color: var(--ui-brand, #0f766e) !important; border-color: var(--ui-brand, #0f766e) !important; color: #fff !important; } #logoutConfirmModal .btn-danger:hover, #logoutConfirmModal .btn-danger:focus { background-color: var(--ui-brand-dark, #0d5f59) !important; border-color: var(--ui-brand-dark, #0d5f59) !important; color: #fff !important; } #logoutConfirmModal .btn-secondary, #logoutConfirmModal .btn-outline-secondary { border-color: var(--ui-border, #dee2e6) !important; color: var(--ui-text, #212529) !important; background: var(--ui-surface, #f8f9fa) !important; } #logoutConfirmModal .btn-secondary:hover, #logoutConfirmModal .btn-outline-secondary:hover { background: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.1) !important; border-color: var(--ui-brand, #0f766e) !important; color: var(--ui-brand-dark, #0d5f59) !important; } html[data-ui-scheme="dark"] #logoutConfirmModal .modal-content { background: var(--ui-surface-card) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] #logoutConfirmModal .btn-close { filter: invert(1) grayscale(100%); } html[data-ui-scheme="dark"] #logoutConfirmModal .btn-secondary, html[data-ui-scheme="dark"] #logoutConfirmModal .btn-outline-secondary { background: rgba(255, 255, 255, 0.06) !important; color: var(--ui-text) !important; } /* Skins del modal logout */ html[data-ui-skin="compact"] #logoutConfirmModal .modal-content { border-radius: 0.55rem; } html[data-ui-skin="compact"] #logoutConfirmModal .modal-header { padding: 0.85rem 1rem 0.25rem; } html[data-ui-skin="compact"] #logoutConfirmModal .modal-body { padding: 0.5rem 1rem 0.65rem; font-size: 0.92rem; } html[data-ui-skin="compact"] #logoutConfirmModal .modal-footer { padding: 0.35rem 1rem 0.85rem; gap: 0.4rem; } html[data-ui-skin="compact"] #logoutConfirmModal .btn { border-radius: 0.4rem; font-size: 0.875rem; padding: 0.4rem 0.85rem; } html[data-ui-skin="rail"] #logoutConfirmModal .modal-content { border-radius: 0.35rem 1.05rem 1.05rem 0.35rem; border-left: 4px solid var(--ui-brand, #0f766e) !important; } html[data-ui-skin="rail"] #logoutConfirmModal .modal-header { padding: 1rem 1.15rem 0.35rem; } html[data-ui-skin="rail"] #logoutConfirmModal .modal-body { padding: 0.55rem 1.15rem 0.75rem; } html[data-ui-skin="rail"] #logoutConfirmModal .modal-footer { padding: 0.4rem 1.15rem 1rem; gap: 0.5rem; } html[data-ui-skin="rail"] #logoutConfirmModal .btn { border-radius: 999px; padding: 0.45rem 1rem; } html[data-ui-skin="classic"] #logoutConfirmModal .modal-content { border-radius: 1.15rem; } html[data-ui-skin="classic"] #logoutConfirmModal .modal-header { padding: 1.15rem 1.35rem 0.4rem; } html[data-ui-skin="classic"] #logoutConfirmModal .modal-body { padding: 0.65rem 1.35rem 0.9rem; font-size: 1rem; } html[data-ui-skin="classic"] #logoutConfirmModal .modal-footer { padding: 0.5rem 1.35rem 1.15rem; gap: 0.55rem; } html[data-ui-skin="classic"] #logoutConfirmModal .btn { border-radius: 0.65rem; padding: 0.55rem 1.1rem; } /* Backdrop difuminado detrás del modal de logout (contraste + blur) */ body.logout-modal-open .modal-backdrop.logout-backdrop, .modal-backdrop.logout-backdrop { z-index: 1075; background-color: rgba(15, 23, 42, 0.48) !important; -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); opacity: 1 !important; } html[data-ui-scheme="dark"] body.logout-modal-open .modal-backdrop.logout-backdrop, html[data-ui-scheme="dark"] .modal-backdrop.logout-backdrop { background-color: rgba(2, 6, 23, 0.62) !important; } body.logout-modal-open .modal-backdrop.logout-backdrop { background-color: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.28) !important; background-image: linear-gradient( 160deg, rgba(15, 23, 42, 0.55), rgba(var(--ui-brand-rgb, 15, 118, 110), 0.35) ) !important; } html[data-ui-scheme="dark"] body.logout-modal-open .modal-backdrop.logout-backdrop { background-color: rgba(2, 6, 23, 0.55) !important; background-image: linear-gradient( 160deg, rgba(2, 6, 23, 0.72), rgba(var(--ui-brand-rgb, 45, 212, 191), 0.22) ) !important; } @media (max-width: 576px) { #logoutConfirmModal .modal-dialog { margin: 0.75rem; max-width: calc(100% - 1.5rem); } body.logout-modal-open .modal-backdrop.logout-backdrop, .modal-backdrop.logout-backdrop { -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); } } .scroll-to-top-btn { background: var(--ui-welcome-bg) !important; box-shadow: 0 4px 12px rgba(var(--ui-brand-rgb), 0.35) !important; } .ui-theme-picker label { font-size: 0.7rem; opacity: 0.85; margin-bottom: 0.25rem; display: block; } .ui-theme-picker select { width: 100%; font-size: 0.8rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.2); color: #fff; padding: 0.35rem 0.5rem; } .ui-fullscreen-btn { padding: 0.25rem 0.4rem !important; line-height: 1; } .ui-fullscreen-btn.is-fullscreen { opacity: 0.95; } .ui-fullscreen-btn.is-fullscreen i { color: var(--ui-brand) !important; } /* Cluster Instalar + pantalla completa: - skins con sidebar: en el banner .welcome-stats (derecha; contadores a la izquierda) - topnav: oculto (van en .ui-topnav__actions, izq. de cuenta) */ .ui-chrome-actions { display: none; align-items: center; justify-content: center; gap: 0.35rem; flex: 0 0 auto; position: relative; z-index: 2; margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid var(--ui-border, rgba(15, 23, 42, 0.12)); pointer-events: none; } .ui-chrome-actions > * { pointer-events: auto; } @media (min-width: 992px) { html:not([data-ui-skin="topnav"]) .ui-chrome-actions { display: inline-flex; } } html[data-ui-skin="topnav"] .ui-chrome-actions { display: none !important; } /* Banner: dejar aire a los contadores y anclar acciones a la derecha */ .welcome-stats:has(.ui-chrome-actions), .ui-page-chrome:has(.ui-chrome-actions) { gap: 0.65rem !important; padding-right: 0.15rem; } .welcome-stats .ui-chrome-actions, .ui-page-chrome .ui-chrome-actions { margin-left: 0.75rem; align-self: center; } .welcome-stats .stat-item { flex: 0 1 auto; } /* Host vacío en páginas sin contadores (Instalar + fullscreen a la derecha) */ .ui-page-chrome { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex: 0 0 auto; margin-left: auto; min-height: 2.35rem; } .ui-chrome-actions--fallback { position: absolute; top: 0.55rem; right: 0.75rem; margin-left: 0; padding-left: 0; border-left: none; z-index: 20; } .main-content { position: relative; } .ui-fullscreen-btn--desktop { position: static; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 0.4rem !important; background: var(--ui-surface-card, #fff) !important; border: 1px solid var(--ui-border, #dee2e6) !important; box-shadow: var(--ui-shadow, 0 2px 8px rgba(0,0,0,.08)); color: var(--ui-brand) !important; } .ui-chrome-actions .ui-fullscreen-btn--desktop { position: static !important; top: auto !important; right: auto !important; left: auto !important; } .ui-fullscreen-btn--desktop:hover { background: var(--ui-surface, #f8f9fa) !important; } html[data-ui-scheme="dark"] .ui-fullscreen-btn--desktop { background: var(--ui-surface-card) !important; border-color: var(--ui-border) !important; color: var(--ui-brand) !important; } .ui-fullscreen-btn.ui-fs-needs-restore { animation: ui-fs-pulse 1.2s ease-in-out infinite; } @keyframes ui-fs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ui-brand-rgb, 15, 118, 110), 0.35); } 50% { box-shadow: 0 0 0 6px rgba(var(--ui-brand-rgb, 15, 118, 110), 0); } } .ui-fs-restore-hint { display: none !important; } /* PWA: botón instalar (barra superior / fijo desktop) */ .ui-pwa-install-btn { padding: 0.25rem 0.4rem !important; line-height: 1; color: var(--ui-brand, #0f766e) !important; } .ui-pwa-install-btn__icon { display: block; width: 1.35rem; height: 1.35rem; flex-shrink: 0; } .ui-pwa-install-btn--desktop, .ui-pwa-install-btn--floating, .ui-pwa-install-btn--inline { width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.55rem !important; background: rgba(15, 118, 110, 0.12) !important; border: 1.5px solid rgba(15, 118, 110, 0.45) !important; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28); color: var(--ui-brand, #0f766e) !important; animation: ui-pwa-install-pulse 2.4s ease-in-out infinite; } .ui-pwa-install-btn--desktop, .ui-pwa-install-btn--floating { position: fixed; top: 0.65rem; right: 0.85rem; z-index: 1040; } .ui-chrome-actions .ui-pwa-install-btn--desktop { position: static !important; top: auto !important; right: auto !important; left: auto !important; } .ui-pwa-install-btn--inline { position: static !important; top: auto !important; right: auto !important; flex-shrink: 0; } @keyframes ui-pwa-install-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28); } 50% { box-shadow: 0 6px 20px rgba(15, 118, 110, 0.45); } } @media (prefers-reduced-motion: reduce) { .ui-pwa-install-btn--desktop, .ui-pwa-install-btn--floating, .ui-pwa-install-btn--inline { animation: none; } } .ui-pwa-install-btn--desktop:hover, .ui-pwa-install-btn--floating:hover, .ui-pwa-install-btn--inline:hover { background: rgba(15, 118, 110, 0.2) !important; animation: none; } html[data-ui-scheme="dark"] .ui-pwa-install-btn--desktop, html[data-ui-scheme="dark"] .ui-pwa-install-btn--floating, html[data-ui-scheme="dark"] .ui-pwa-install-btn--inline { background: rgba(45, 212, 191, 0.16) !important; border-color: rgba(45, 212, 191, 0.45) !important; color: #5eead4 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .ui-pwa-install-hint { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 4.5rem 1rem 1rem; background: rgba(0, 0, 0, 0.35); } .ui-pwa-install-hint[hidden] { display: none !important; } .ui-pwa-install-hint__card { position: relative; max-width: 22rem; width: 100%; padding: 1rem 1.15rem 1.1rem; border-radius: 0.65rem; background: var(--ui-surface-card, #fff); color: var(--ui-text, #212529); border: 1px solid var(--ui-border, #dee2e6); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); } .ui-pwa-install-hint__card strong { display: block; color: var(--ui-brand, #0f766e); margin-bottom: 0.35rem; } .ui-pwa-install-hint__card p { margin: 0; font-size: 0.92rem; line-height: 1.45; } .ui-pwa-install-hint__share { display: inline-block; padding: 0.05rem 0.35rem; border-radius: 0.25rem; background: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.12); font-weight: 600; } .ui-pwa-install-hint__close { position: absolute; top: 0.35rem; right: 0.5rem; border: 0; background: transparent; font-size: 1.35rem; line-height: 1; color: #888; cursor: pointer; } .ui-pwa-install-hint__steps { margin: 0.5rem 0 0.35rem; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.45; } .ui-pwa-install-hint__steps li { margin-bottom: 0.35rem; } .ui-pwa-install-hint__note { margin-top: 0.55rem !important; font-size: 0.82rem !important; opacity: 0.85; } .ui-pwa-install-hint__reload { margin-top: 0.35rem; } .ui-pwa-install-hint__badge { display: inline-block; margin: 0.35rem 0 0.15rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--ui-brand, #0f766e); background: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.12); } /* PWA standalone: sin chrome del navegador → ocultar fullscreen e instalar */ html.ui-pwa-standalone .ui-fullscreen-btn, html.ui-pwa-standalone .ui-fs-restore-hint, html.ui-pwa-standalone .ui-pwa-install-btn, html.ui-pwa-standalone .ui-pwa-install-hint, html[data-ui-pwa="1"] .ui-fullscreen-btn, html[data-ui-pwa="1"] .ui-fs-restore-hint, html[data-ui-pwa="1"] .ui-pwa-install-btn, html[data-ui-pwa="1"] .ui-pwa-install-hint { display: none !important; } @media (display-mode: standalone), (display-mode: fullscreen) { .ui-fullscreen-btn, .ui-fs-restore-hint, .ui-pwa-install-btn, .ui-pwa-install-hint { display: none !important; } } /* Desplegables de barra superior: no salirse del viewport */ .mobile-header .dropdown-menu { right: 0.35rem !important; left: auto !important; max-width: min(18rem, calc(100vw - 0.7rem)) !important; position: absolute !important; transform: none !important; inset: auto 0.35rem auto auto !important; margin-top: 0.25rem !important; } .ui-theme-picker select { max-width: 100%; } html[data-ui-scheme="dark"] .table-light, html[data-ui-scheme="dark"] thead.table-light { --bs-table-bg: var(--ui-surface-elevated, #1f2937); --bs-table-color: var(--ui-text); background-color: var(--ui-surface-elevated, #1f2937) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .card.bg-light, html[data-ui-scheme="dark"] .bg-light { background-color: var(--ui-surface-elevated, #1f2937) !important; color: var(--ui-text) !important; } html[data-ui-scheme="dark"] .top-bar { background: var(--ui-sidebar-bg, #0f172a) !important; } /* Selectores tema/skin: solo desktop amplio (no móvil/tablet) */ .ui-theme-picker, html[data-ui-customize="1"] .ui-theme-picker { display: none !important; } @media (min-width: 1200px) and (min-height: 720px) { html[data-ui-customize="1"] .ui-theme-picker { display: block !important; } } /* Tablet landscape / viewport bajo: sidebar compacto para maximizar scroll de nav */ @media (orientation: landscape) and (max-height: 900px), (max-width: 1366px) and (max-height: 850px) { .sidebar-header { padding: 0.35rem 0.6rem !important; } .sidebar-logo { height: 22px !important; max-height: 22px !important; margin-bottom: 0 !important; } .sidebar-title { font-size: 0.82rem !important; line-height: 1.15 !important; } .sidebar-subtitle, .sidebar-version { display: none !important; } /* Liberar altura: ocultar bloque de usuario en landscape bajo */ .sidebar-user { display: none !important; } .sidebar-nav { padding-top: 0.25rem !important; padding-bottom: 0.35rem !important; } .sidebar-nav .nav-item { margin-bottom: 0.1rem !important; } .sidebar-nav .nav-link { padding: 0.4rem 0.75rem !important; font-size: 0.85rem !important; } .sidebar-nav .nav-link i { font-size: 0.95rem !important; margin-right: 0.5rem !important; } .sidebar-footer { padding: 0.35rem 0.6rem !important; } .sidebar-footer .btn { padding: 0.3rem 0.5rem !important; font-size: 0.8rem !important; } .ui-theme-picker, html[data-ui-customize="1"] .ui-theme-picker { display: none !important; } }