/* ============================================================================ SETIECA AURORA — Capa de tema premium (dual: claro + oscuro) ---------------------------------------------------------------------------- - Se carga DESPUÉS de style.css → estos tokens ganan en el cascade. - Paleta corporativa: Vino/Borgoña (acción) + Oro (destaque premium) sobre base de grises/negros refinados, estética ejecutiva tipo Apple. - Modo por defecto: OSCURO (lo aplica el snippet inline del ). - El grueso del modo oscuro lo resuelve `data-bs-theme="dark"` (Bootstrap 5.3 nativo); aquí va el shim fino para utilitarios no-theme-aware + el refresco de marca de los componentes propios del sistema. ============================================================================ */ /* ───────────────────────────────────────────────────────────────────────── 1. TOKENS — MODO CLARO (refinado) ───────────────────────────────────────────────────────────────────────── */ :root, html[data-theme="light"] { /* Marca */ --accent: #7A1B33; /* vino profundo (legible sobre blanco) */ --accent-hover: #93203F; --accent-press: #65162A; --accent-soft: rgba(122, 27, 51, .10); --accent-contrast: #ffffff; --gold: #A67C00; /* oro oscurecido (legible sobre claro) */ --gold-bright: #C9971A; --gold-soft: rgba(166, 124, 0, .12); /* Superficies */ --bg-main: #F5F5F7; /* gris Apple */ --bg-card: #FFFFFF; --bg-white: #FFFFFF; --bg-elevated: #FFFFFF; --surface-2: #FAFAFC; --surface-hover: #F0F0F3; /* Texto (se conservan los nombres existentes de style.css) */ --text-dark: #1D1D1F; /* texto primario */ --text-muted: #6E6E73; /* texto secundario */ --text-light: #ffffff; /* Bordes */ --border-hair: #E8E8EC; --border-soft: #EFEFF2; /* Sombras / efectos */ --shadow-float: 0 12px 32px rgba(20, 20, 30, .10); --shadow-sm: 0 2px 10px rgba(20, 20, 30, .06); --ring-focus: 0 0 0 3px var(--accent-soft); --navbar-blur: saturate(180%) blur(20px); --navbar-bg: rgba(255, 255, 255, .72); --scrim: rgba(20, 20, 25, .45); --rate-hero: #0a192f; /* cifra de tasa: navy "tinta" en claro */ } /* ───────────────────────────────────────────────────────────────────────── 2. TOKENS — MODO OSCURO (la estrella) `html[data-theme="dark"]` (0,1,1) gana a `:root` (0,1,0) sin importar orden. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { --accent: #A52847; /* vino vibrante sobre carbón */ --accent-hover: #C0315A; --accent-press: #8E2340; --accent-soft: rgba(192, 49, 90, .16); --accent-contrast: #ffffff; --gold: #D4AF37; /* oro luminoso */ --gold-bright: #E8C45A; --gold-soft: rgba(212, 175, 55, .14); --bg-main: #0E0E10; /* negro carbón */ --bg-card: #161618; --bg-white: #161618; --bg-elevated: #1F1F23; --surface-2: #1A1A1E; --surface-hover: #232329; --text-dark: #F5F5F7; /* off-white Apple */ --text-muted: #9A9AA2; --text-light: #ffffff; --border-hair: rgba(255, 255, 255, .10); --border-soft: rgba(255, 255, 255, .07); --shadow-float: 0 18px 44px rgba(0, 0, 0, .58); --shadow-sm: 0 2px 14px rgba(0, 0, 0, .42); --ring-focus: 0 0 0 3px var(--accent-soft); --navbar-blur: saturate(160%) blur(22px); --navbar-bg: rgba(18, 18, 22, .68); --scrim: rgba(0, 0, 0, .60); --rate-hero: var(--gold); /* cifra de tasa en oro sobre fondo oscuro */ color-scheme: dark; } /* Red de seguridad: texto inline navy "tinta" (#0a192f) hardcodeado en varias vistas → invisible sobre fondo oscuro. Se reescribe al texto primario. (No toca fondos/bordes con ese color, ni la cifra de tasa que usa --rate-hero.) */ html[data-theme="dark"] [style*="color:#0a192f"], html[data-theme="dark"] [style*="color: #0a192f"] { color: var(--text-dark) !important; } /* Suaviza el cambio de tema (no anima en la primera carga gracias al snippet) */ html.theme-ready, html.theme-ready body, html.theme-ready .sidebar-inner, html.theme-ready .top-navbar, html.theme-ready .floating-card, html.theme-ready .login-card { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* ───────────────────────────────────────────────────────────────────────── 3. REFRESCO DE MARCA — componentes propios (ambos modos) Cambia las superficies de acción de carbón → VINO, destaques → ORO. ───────────────────────────────────────────────────────────────────────── */ /* Botón primario (login + genérico) */ .btn-modern { background-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 22px var(--accent-soft); } .btn-modern:hover { background-color: var(--accent-hover); color: #fff; box-shadow: 0 12px 26px var(--accent-soft); } .btn-modern:active { background-color: var(--accent-press); } .btn-modern:disabled { background-color: var(--text-muted); opacity: .55; } /* Item de navegación activo → pastilla vino con glow + barra oro */ .nav-link-custom.active { background-color: var(--accent); color: #fff; box-shadow: 0 8px 22px var(--accent-soft); position: relative; } .nav-link-custom.active::before { content: ''; position: absolute; left: 6px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--gold); } .nav-link-custom:hover { background-color: var(--surface-hover); color: var(--text-dark); } /* Logo / avatares / caja de marca / paso activo del wizard → acento vino (todos usaban var(--text-dark) como fondo → se volvían blancos en oscuro) */ .login-logo, .user-avatar, .user-mini-avatar, .brand-logo, .wizard-step.active .wizard-step-num { background: var(--accent); } /* Flyout de la banda en rail (tooltip): pastilla neutra elevada en oscuro. En claro queda charcoal (su valor base). Antes: var(--text-dark) → blanco sobre blanco en modo oscuro. */ html[data-theme="dark"] .sidebar-rail-flyout { background: var(--bg-elevated); color: var(--text-dark); border: 1px solid var(--border-hair); } /* Controles del chrome (sidebar/navbar) con fondos claros hardcodeados */ html[data-theme="dark"] .sidebar-rail-toggle, html[data-theme="dark"] .sidebar-toggle { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-muted); } html[data-theme="dark"] .sidebar-rail-toggle:hover, html[data-theme="dark"] .sidebar-toggle:hover { background: var(--surface-hover); color: var(--text-dark); } html[data-theme="dark"] .sidebar-search-input { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .sidebar-search-input:focus { background: var(--surface-2); border-color: var(--accent); box-shadow: var(--ring-focus); } html[data-theme="dark"] .sidebar-search-clear:hover { background: var(--surface-hover); color: var(--text-dark); } html[data-theme="dark"] .draggable-mod { background: var(--surface-2); } html[data-theme="dark"] .wz-results-dropdown { background: var(--bg-elevated); border: 1px solid var(--border-hair); } /* Foco de inputs → anillo vino */ .form-control-custom:focus { background: var(--bg-card); border-color: var(--accent); box-shadow: var(--ring-focus); } .btn-link-text:hover { color: var(--accent); } /* Utilidades de marca reutilizables */ .text-gold { color: var(--gold) !important; } .text-accent { color: var(--accent) !important; } .bg-accent { background: var(--accent) !important; color: #fff !important; } .kpi-star { color: var(--gold); } /* ───────────────────────────────────────────────────────────────────────── 4. POLISH DEL SHELL (ambos modos) ───────────────────────────────────────────────────────────────────────── */ /* Navbar translúcido con blur (sticky, estética Apple) */ .top-navbar { background: var(--navbar-bg); -webkit-backdrop-filter: var(--navbar-blur); backdrop-filter: var(--navbar-blur); border-bottom: 1px solid var(--border-hair); } /* Sidebar / cards sobre token de superficie */ .sidebar-inner { background: var(--bg-card); border: 1px solid var(--border-soft); } .floating-card { background: var(--bg-card); border: 1px solid var(--border-hair); } /* Badge BCV + user-pill refinados */ .tasa-badge, .user-pill { background: var(--surface-2); border: 1px solid var(--border-hair); } .tasa-badge:hover, .user-pill:hover, .user-pill.show { background: var(--surface-hover); } .tasa-valor { color: var(--gold); } /* la tasa = dato financiero estrella */ .tasa-badge i { color: var(--accent); } /* Toggle de tema (sol/luna) en el navbar */ .theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-hair); background: var(--surface-2); color: var(--text-muted); border-radius: 50%; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .theme-toggle:hover { background: var(--surface-hover); color: var(--accent); transform: translateY(-1px); } .theme-toggle i { font-size: 1.05rem; line-height: 1; } /* Muestra el icono correcto según el tema */ .theme-toggle .ico-dark { display: none; } html[data-theme="dark"] .theme-toggle .ico-dark { display: inline-block; } html[data-theme="dark"] .theme-toggle .ico-light { display: none; } /* ───────────────────────────────────────────────────────────────────────── 5. SHIM MODO OSCURO — neutraliza utilitarios Bootstrap NO theme-aware (bg-white / bg-light / text-dark hardcodeados en 30+ vistas). Bootstrap 5.3 `data-bs-theme` ya resuelve tablas, dropdowns, forms, borders, etc.; esto cubre lo que él no toca, para que el modo oscuro por defecto deje TODAS las vistas legibles aunque aún no estén pulidas. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--bg-card) !important; } html[data-theme="dark"] .bg-body, html[data-theme="dark"] .bg-body-tertiary { background-color: var(--bg-main) !important; } html[data-theme="dark"] .text-dark { color: var(--text-dark) !important; } html[data-theme="dark"] .text-black { color: var(--text-dark) !important; } html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-theme="dark"] .border { border-color: var(--border-hair) !important; } html[data-theme="dark"] .table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text-dark); } /* Componentes Bootstrap que respetan data-bs-theme, reforzados con la paleta */ html[data-theme="dark"] .card { background-color: var(--bg-card); border-color: var(--border-hair); } html[data-theme="dark"] .dropdown-menu { background-color: var(--bg-elevated); border-color: var(--border-hair); } html[data-theme="dark"] .modal-content { background-color: var(--bg-elevated); border-color: var(--border-hair); } html[data-theme="dark"] .modal-backdrop.show { opacity: 1; background: var(--scrim); } html[data-theme="dark"] .list-group-item { background-color: var(--bg-card); color: var(--text-dark); border-color: var(--border-hair); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } html[data-theme="dark"] hr { border-color: var(--border-hair); } /* Acento de marca sobre los primarios de Bootstrap (ambos modos) */ .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-press); --bs-btn-active-border-color: var(--accent-press); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-press); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Links/acentos utilitarios → vino de marca (ambos modos) */ .text-primary { color: var(--accent) !important; } .link-primary { color: var(--accent) !important; } /* Botones neutros "dark" legibles en modo oscuro (no se vuelven invisibles). Reservamos el vino para .btn-primary/.btn-modern; estos quedan neutros. */ html[data-theme="dark"] .btn-dark { --bs-btn-bg: var(--bg-elevated); --bs-btn-border-color: var(--border-hair); --bs-btn-color: var(--text-dark); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--border-hair); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--surface-hover); } html[data-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--text-dark); --bs-btn-border-color: var(--border-hair); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--border-hair); } /* Texto sobre la pastilla activa del sidebar nunca hereda el shim text-dark */ .nav-link-custom.active, .nav-link-custom.active .nav-link-label, .btn-modern, .btn-primary { color: #fff !important; } /* ───────────────────────────────────────────────────────────────────────── 6. LOGIN — fondo oscuro con gradiente vino sutil (override del decor claro) ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body.login-bg { background: radial-gradient(900px 500px at 85% -10%, rgba(165, 40, 71, .22), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(212, 175, 55, .10), transparent 55%), var(--bg-main); } html[data-theme="dark"] body.login-bg::before, html[data-theme="dark"] body.login-bg::after { display: none; } html[data-theme="dark"] .login-card { background: rgba(28, 28, 33, .72); -webkit-backdrop-filter: saturate(160%) blur(24px); backdrop-filter: saturate(160%) blur(24px); border: 1px solid rgba(255, 255, 255, .08); } html[data-theme="dark"] .form-control-custom { background: rgba(255, 255, 255, .05); color: var(--text-dark); } html[data-theme="dark"] .form-control-custom::placeholder { color: #6E6E73; } html[data-theme="dark"] .loading-overlay { background: rgba(14, 14, 16, .85); } /* Logo en tinta blanca para modo oscuro (versión clara intacta). `brightness(0) invert(1)` → blanco puro preservando la transparencia. Si más adelante se sube un logo oscuro dedicado, se usa la clase `.brand-logo--has-dark` para desactivar el filtro (ver nota abajo). */ html[data-theme="dark"] .login-logo-img, html[data-theme="dark"] .brand-logo-img { filter: brightness(0) invert(1); } /* Escape: si el trae su propia versión blanca, no aplicar filtro */ html[data-theme="dark"] .login-logo-img.is-prerendered-white, html[data-theme="dark"] .brand-logo-img.is-prerendered-white { filter: none; } /* Swap de logo dedicado por tema (cuando hay logo_dark_path subido). Las versiones dedicadas NUNCA reciben el filtro de tinta blanca. */ .logo-when-dark { display: none; } .logo-when-light, .logo-when-dark { filter: none !important; } html[data-theme="dark"] .logo-when-light { display: none; } html[data-theme="dark"] .logo-when-dark { display: inline-block; } /* Toggle de tema flotante del login */ .login-theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10; width: 42px; height: 42px; } /* Login en claro: gradiente vino apenas insinuado */ :root body.login-bg { background: radial-gradient(900px 500px at 85% -10%, rgba(122, 27, 51, .06), transparent 60%), var(--bg-main); } /* ───────────────────────────────────────────────────────────────────────── 8. ROLLOUT — cobertura global del modo oscuro (sin editar vistas) Overrides de los tokens "soft" + componentes que aparecen en muchas vistas: badges/botones soft, tabs, alertas, KPI, Select2, SweetAlert2, DataTables. Este bloque es el que "propaga" el oscuro a las 66 vistas. ───────────────────────────────────────────────────────────────────────── */ /* Tokens tintados (badge-soft-* / btn-soft-* / timeline) recalibrados a oscuro. En esta app "warning"/"secondary" se usan como NEUTRO gris → se mapean a gris. */ html[data-theme="dark"] { --color-success-soft: rgba(40, 167, 69, .18); --color-success-text: #5dd58c; --color-warning-soft: rgba(255, 255, 255, .08); --color-warning-text: #c7c7cf; --color-danger-soft: rgba(220, 53, 69, .20); --color-danger-text: #ff7a86; --color-info-soft: rgba(13, 202, 240, .16); --color-info-text: #5cc8ea; --color-primary-soft: var(--accent-soft); --color-primary-text: #ef96ad; --color-secondary-soft: rgba(255, 255, 255, .07); --color-secondary-text: #b4b4bd; --color-dark-soft: rgba(255, 255, 255, .12); --color-dark-text: #F5F5F7; } /* Tab activo del sistema → vino (coherente con el nav), ambos modos */ .sistema-tabs .nav-link.active { background: var(--accent) !important; color: #fff !important; box-shadow: 0 8px 22px var(--accent-soft); } .sistema-tabs .nav-link:hover:not(.active) { background: var(--surface-hover) !important; color: var(--text-dark) !important; } /* alert-warning (forzado a claro en style.css) + KPI border en oscuro */ html[data-theme="dark"] .alert-warning { background-color: rgba(255, 255, 255, .06) !important; border-color: var(--border-hair) !important; color: var(--text-dark) !important; } html[data-theme="dark"] .kpi-tile { border-color: var(--border-hair); } html[data-theme="dark"] .floating-card { border-color: var(--border-hair); } /* Pastillas de estatus bg-opacity-10 neutras (warning/secondary/dark) legibles */ html[data-theme="dark"] .bg-secondary.bg-opacity-10, html[data-theme="dark"] .bg-dark.bg-opacity-10, html[data-theme="dark"] .bg-light.bg-opacity-10 { background-color: rgba(255,255,255,.07) !important; } /* Select2 (todos los modales lo usan) */ html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--text-dark) !important; } html[data-theme="dark"] .select2-dropdown { background: var(--bg-elevated); border-color: var(--border-hair); } html[data-theme="dark"] .select2-results__option { color: var(--text-dark); } html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--accent); color: #fff; } html[data-theme="dark"] .select2-search__field { background: var(--surface-2) !important; color: var(--text-dark); border-color: var(--border-hair); } /* SweetAlert2 (confirmaciones/avisos de todo el sistema) */ html[data-theme="dark"] .swal2-popup { background: var(--bg-elevated); color: var(--text-dark); } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--text-dark); } html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-textarea, html[data-theme="dark"] .swal2-select { background: var(--surface-2); color: var(--text-dark); border-color: var(--border-hair); } /* DataTables (controles: longitud, info, paginación, filtro) */ html[data-theme="dark"] .dataTables_wrapper { color: var(--text-muted); } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--surface-2); color: var(--text-dark); border-color: var(--border-hair); } html[data-theme="dark"] .page-link { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .page-item.active .page-link { background: var(--accent); border-color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── 9. VISTAS CUSTOM — Cloud SPA + widget de documentos + timeline de calendario cloud.css vive aislado en #cloud-app con sus propias variables (--cl-*) y varios colores claros hardcodeados → se rebindean a la paleta oscura. (Los reportes *.php quedan en claro a propósito: son para imprimir.) ───────────────────────────────────────────────────────────────────────── */ /* Rebinde de variables de la SPA Cloud (cubre todo lo que usa var(--cl-*)) */ html[data-theme="dark"] #cloud-app { --cl-border: rgba(255, 255, 255, .10); --cl-muted: #9A9AA2; --cl-bg: var(--bg-card); --cl-bg-alt: #1f1f23; --cl-accent: var(--accent); --cl-accent-soft: var(--accent-soft); --cl-shadow: 0 8px 30px -10px rgba(0, 0, 0, .6); color: var(--text-dark); } /* Colores claros hardcodeados que NO pasan por variable */ html[data-theme="dark"] #cloud-app .cloud-units-search input { background: var(--surface-2); color: var(--text-dark); } html[data-theme="dark"] #cloud-app .cloud-units-search i { color: var(--text-muted); } html[data-theme="dark"] #cloud-app .cloud-units-list li { color: var(--text-dark); } html[data-theme="dark"] #cloud-app .cloud-units-list li.active { color: #ef96ad; } html[data-theme="dark"] #cloud-app .cloud-units-list .badge { background: rgba(255,255,255,.08); color: var(--text-muted); } html[data-theme="dark"] #cloud-app .cloud-breadcrumb { color: var(--text-muted); } html[data-theme="dark"] #cloud-app .cloud-breadcrumb a, html[data-theme="dark"] #cloud-app .cloud-breadcrumb .cur { color: var(--text-dark); } html[data-theme="dark"] #cloud-app .cloud-breadcrumb a:hover { color: #ef96ad; } html[data-theme="dark"] #cloud-app .cloud-breadcrumb .sep { color: var(--text-muted); } html[data-theme="dark"] #cloud-app .cloud-btn { color: var(--text-dark); } html[data-theme="dark"] #cloud-app .cloud-quota .bar { background: rgba(255,255,255,.08); } html[data-theme="dark"] #cloud-app .cloud-item:hover { background: var(--surface-hover); } html[data-theme="dark"] #cloud-app .cloud-item .ico { background: var(--bg-elevated); } html[data-theme="dark"] #cloud-app .cloud-item.kind-file .ico { color: #aab2bd; } html[data-theme="dark"] #cloud-app .cloud-item.is-selected { background: var(--surface-hover); } html[data-theme="dark"] #cloud-app .cloud-item .menu-btn { background: var(--bg-elevated); color: var(--text-dark); } html[data-theme="dark"] #cloud-app .cloud-badge { background: var(--bg-elevated); } /* Menú contextual (fixed, fuera de #cloud-app) */ html[data-theme="dark"] .cloud-ctxmenu { background: var(--bg-elevated); border-color: var(--border-hair); } html[data-theme="dark"] .cloud-ctxmenu button:not(.danger) { color: var(--text-dark); } html[data-theme="dark"] .cloud-ctxmenu button.danger { color: #ff7a86; } html[data-theme="dark"] .cloud-ctxmenu button:hover { background: var(--surface-hover); } /* Modal de compartir / enlace (fixed) */ html[data-theme="dark"] .cloud-modal { background: var(--bg-elevated); color: var(--text-dark); } html[data-theme="dark"] .cloud-modal header { border-color: var(--border-hair); } html[data-theme="dark"] .cloud-modal header i { color: var(--accent); } html[data-theme="dark"] .cloud-modal header h3, html[data-theme="dark"] .cloud-modal .share-current .who strong { color: var(--text-dark); } html[data-theme="dark"] .cloud-modal header .x:hover { background: var(--surface-hover); color: var(--text-dark); } html[data-theme="dark"] .cloud-modal label, html[data-theme="dark"] .cloud-modal .share-current .who small, html[data-theme="dark"] .cloud-modal .share-suggest small { color: var(--text-muted); } html[data-theme="dark"] .cloud-modal .share-search input, html[data-theme="dark"] .cloud-modal .share-perm, html[data-theme="dark"] .cloud-modal .share-suggest, html[data-theme="dark"] .cloud-modal .share-current .role { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .cloud-modal .share-current { background: var(--surface-2); border-color: var(--border-hair); } html[data-theme="dark"] .cloud-modal .share-current li { border-color: var(--border-hair); } html[data-theme="dark"] .cloud-modal .share-suggest li:hover { background: var(--surface-hover); } html[data-theme="dark"] .cloud-modal footer { background: var(--surface-2); border-color: var(--border-hair); } /* Widget "Documentos por entidad" (.cloud-docs — pestaña del expediente, sin variables) */ html[data-theme="dark"] .cloud-docs { color: var(--text-dark); } html[data-theme="dark"] .cloud-docs .cloud-item { background: var(--surface-2); border-color: var(--border-hair); } html[data-theme="dark"] .cloud-docs .cloud-item:hover { border-color: var(--border-hair); box-shadow: 0 6px 16px rgba(0,0,0,.4); } html[data-theme="dark"] .cloud-docs .cloud-item .ico { background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-hair); color: #aab2bd; } html[data-theme="dark"] .cloud-docs .cloud-item .menu-btn { background: var(--bg-elevated); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .cloud-docs .cloud-empty, html[data-theme="dark"] .cloud-docs .cloud-item .meta { color: var(--text-muted); } html[data-theme="dark"] .cloud-docs .cloud-btn { background: var(--surface-2); border-color: var(--border-hair); color: var(--text-dark); } html[data-theme="dark"] .cloud-docs .cloud-btn:hover { background: var(--surface-hover); } html[data-theme="dark"] .cloud-docs .cloud-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-theme="dark"] .cloud-docs .cloud-upload-bar { background: rgba(255,255,255,.08); } html[data-theme="dark"] .cloud-docs .cloud-upload-bar-fill { background: var(--accent); } /* Timeline embebido en calendarios (#tlContenidoCal) */ html[data-theme="dark"] #tlContenidoCal .tl-item { background: var(--bg-card); border-color: var(--border-hair); } html[data-theme="dark"] #tlContenidoCal .tl-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.35); } /* ───────────────────────────────────────────────────────────────────────── 10. SIDEBAR AURORA — grupos siempre visibles + buscador pastilla + footer ───────────────────────────────────────────────────────────────────────── */ /* Etiqueta de sección estática (sin acordeón): micro-label tenue, no clickeable */ .nav-section-static { cursor: default; pointer-events: none; min-height: auto; padding: 13px 14px 4px; margin-bottom: 0; background: transparent !important; } .nav-section-label { font-size: .64rem; letter-spacing: .1em; opacity: .9; } .nav-section:first-child .nav-section-static { padding-top: 6px; } /* Grupos siempre visibles: el body de sección NUNCA colapsa (anula el mecanismo de acordeón por max-height, robusto ante el toggle de rail). */ .nav-section-body { max-height: none !important; overflow: visible; } /* Buscador tipo pastilla */ .sidebar-search-input { border-radius: 50px; } /* Footer: acciones agrupadas a la derecha + toggle de tema compacto */ .sidebar-bottom .user-mini { flex: 1; min-width: 0; } .sidebar-foot-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .sidebar-theme-toggle { width: 32px; height: 32px; border: none !important; background: transparent !important; border-radius: var(--radius-sm); color: var(--text-muted); } .sidebar-theme-toggle:hover { background: var(--surface-hover) !important; color: var(--accent); } /* En rail (solo iconos) el toggle del footer se oculta: ya está en el navbar */ body.sidebar-rail .sidebar-theme-toggle { display: none; } body.sidebar-rail .sidebar-bottom { flex-direction: column; gap: 8px; } /* Aleta de colapso — pestaña en el borde derecho del card del sidebar. Reemplaza el chevron huérfano del header; anclada al .sidebar-inner. */ .sidebar-inner { position: relative; } .sidebar-rail-toggle { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 22px; height: 56px; padding: 0; border-radius: 9px; border: 1px solid var(--border-hair); background: var(--bg-elevated); color: var(--text-muted); box-shadow: var(--shadow-sm); z-index: 1060; display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; transition: background-color .18s ease, color .18s ease, right .18s ease, width .18s ease; } .sidebar-rail-toggle:hover { background: var(--accent); color: #fff; width: 24px; right: -13px; } .sidebar-rail-toggle i { transition: transform .25s ease; } body.sidebar-rail .sidebar-rail-toggle i { transform: rotate(180deg); } /* En rail el header de marca queda vacío (logo oculto) → se oculta */ body.sidebar-rail .sidebar-brand-container { display: none; } /* En móvil el sidebar es drawer: la aleta de rail no aplica */ @media (max-width: 991.98px) { .sidebar-rail-toggle { display: none; } } /* ───────────────────────────────────────────────────────────────────────── 11. ACCESIBILIDAD — respeta reduced-motion ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.theme-ready, html.theme-ready * { transition: none !important; } .login-card { animation: none !important; } }