/* ============================================================ BPA · Theme unificado Aplica lenguaje visual cool/corporativo en toda la plataforma. Optimizado para GPU integrada Intel (sin backdrop-filter masivo). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ============================================================ DARK MODE — paleta warm (sin azules fríos), pensada para uso nocturno largo sin fatiga ocular. Toggle vía data-theme="dark" en . ============================================================ */ :root { --bpa-page-bg: #FBF8F1; --bpa-surface: rgba(255,255,255,0.94); --bpa-surface-strong: #ffffff; --bpa-surface-soft: rgba(255,255,255,0.78); --bpa-text: #21140F; --bpa-text-soft: #6b5755; --bpa-text-muted: #8a7672; --bpa-border: rgba(118,36,68,0.08); --bpa-border-strong: rgba(118,36,68,0.18); --bpa-burgundy-on-bg: var(--bpa-burgundy); --bpa-mint-on-bg: var(--bpa-mint-dark); --bpa-success: #4A6233; --bpa-danger: #A8322D; --bpa-warning: #C9A03A; --bpa-orb-1-alpha: 0.18; --bpa-orb-2-alpha: 0.30; --bpa-orb-3-alpha: 0.40; --bpa-grid-alpha: 0.03; --bpa-shadow-card: 0 4px 16px rgba(33, 20, 15, 0.04); --bpa-shadow-hover: 0 14px 36px rgba(118, 36, 68, 0.15); --bpa-input-bg: #ffffff; } /* Dark mode — paleta validada con WCAG AAA por agente de teoría del color (2026-05-28). Fondo carbón FRÍO (H 220°) para evitar vibración rojo-rojo con el burgundy adaptado. Burgundy rosé-cobre + mint como acento activo. */ html[data-theme="dark"] { --bpa-page-bg: #0E1217; --bpa-surface: #171C23; --bpa-surface-strong: #1F2630; --bpa-surface-soft: #222A35; --bpa-text: #E8EAED; --bpa-text-soft: #B4B8BF; --bpa-text-muted: #7E848D; --bpa-border: #2A323D; --bpa-border-strong: #3D4654; --bpa-burgundy-on-bg: #E0859E; /* rosé-cobre, 7.1:1 sobre surface */ --bpa-mint-on-bg: #A8D4B5; /* mint activo, 9.4:1 sobre surface */ --bpa-success: #94BEA4; --bpa-danger: #F08A8A; --bpa-warning: #E8C572; --bpa-accent-cream: #F4E2C0; /* solo titulares Cinzel, NUNCA fondo */ --bpa-orb-1-alpha: 0.16; --bpa-orb-2-alpha: 0.14; --bpa-orb-3-alpha: 0.10; --bpa-grid-alpha: 0.05; --bpa-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.40); --bpa-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.55); --bpa-input-bg: #13181F; } /* ---------- Fondo global unificado ---------- */ html, body { background: var(--bpa-page-bg) !important; min-height: 100vh; color: var(--bpa-text); } /* Texto general usa la variable */ html[data-theme="dark"] body, html[data-theme="dark"] { color: var(--bpa-text); } /* ---------- Tipografía base (sin !important, respeta módulos con font propio) ---------- */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Títulos display con Cinzel — h1 de páginas internas. IMPORTANTE: NO usar !important; los módulos con identidad propia (Bolograma=Caveat, Clientes=Caveat) tienen su font-family en .bolo-title/.cli-title con mayor especificidad. */ .bpa-display, .page-header h1, main.shell h1, section.page-header h1 { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.03em; color: var(--bpa-burgundy); } /* Tagline después del h1 (page-header / common pattern) */ .page-header > p, section.page-header > p { color: var(--bpa-text-soft); font-size: 14px; line-height: 1.5; margin-top: 6px; } /* En dark mode los h1 con burgundy se ven mejor en un tono rosé más claro */ html[data-theme="dark"] .bpa-display, html[data-theme="dark"] .page-header h1, html[data-theme="dark"] main.shell h1, html[data-theme="dark"] section.page-header h1 { color: var(--bpa-burgundy-on-bg); } /* Monospace para badges, status, version */ .appbar__version, .bpa-mono { font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: 0.08em; } /* ---------- Fondo unificado (sin spotlight cursor, sin animaciones perpetuas) ---------- */ .bpa-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bpa-bg__orb { position: absolute; border-radius: 50%; opacity: 0.28; } .bpa-bg__orb--1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(118,36,68,var(--bpa-orb-1-alpha)) 0%, transparent 60%); top: -200px; left: -200px; } .bpa-bg__orb--2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(148,190,164,var(--bpa-orb-2-alpha)) 0%, transparent 60%); top: 30%; right: -220px; } .bpa-bg__orb--3 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(244,226,192,var(--bpa-orb-3-alpha)) 0%, transparent 60%); bottom: -180px; left: 25%; } .bpa-bg__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(118, 36, 68, var(--bpa-grid-alpha)) 1px, transparent 1px), linear-gradient(to bottom, rgba(118, 36, 68, var(--bpa-grid-alpha)) 1px, transparent 1px); background-size: 56px 56px; } html[data-theme="dark"] .bpa-bg__grid { background-image: linear-gradient(to right, rgba(244, 226, 192, var(--bpa-grid-alpha)) 1px, transparent 1px), linear-gradient(to bottom, rgba(244, 226, 192, var(--bpa-grid-alpha)) 1px, transparent 1px); } /* Eleva el contenido por encima del fondo. OJO: NO incluir .appbar aquí — position:relative le mataba el sticky (quedaba flotando el filterbar a mitad de página). El appbar ya trae su propio position:sticky + z-index:50. */ .shell, main, .launcher-shell, .group-shell { position: relative; z-index: 10; } /* ---------- App bar refinado ---------- */ .appbar { background: rgba(251, 248, 241, 0.92) !important; border-bottom: 1px solid rgba(118, 36, 68, 0.08) !important; } html[data-theme="dark"] .appbar { background: rgba(28, 22, 21, 0.92) !important; border-bottom: 1px solid rgba(244, 226, 192, 0.10) !important; } .appbar__brand strong { font-family: 'Cinzel', serif; letter-spacing: 0.08em; color: var(--bpa-burgundy); font-weight: 600; } html[data-theme="dark"] .appbar__brand strong { color: var(--bpa-burgundy-on-bg); } .appbar__brand-text span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bpa-charcoal-soft); } html[data-theme="dark"] .appbar__brand-text span { color: var(--bpa-text-muted); } html[data-theme="dark"] .appbar__nav a, html[data-theme="dark"] .appbar__home { color: var(--bpa-text-soft); } html[data-theme="dark"] .appbar__nav a:hover, html[data-theme="dark"] .appbar__nav a.is-active { color: var(--bpa-burgundy-on-bg); } html[data-theme="dark"] .appbar__date, html[data-theme="dark"] .appbar__version { color: var(--bpa-text-muted); } /* ---------- Status pill conexión (componente reutilizable) ---------- */ .bpa-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(96, 128, 111, 0.10); border: 1px solid rgba(96, 128, 111, 0.25); border-radius: 100px; color: var(--bpa-mint-dark); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .bpa-status-pill__dot { width: 6px; height: 6px; background: var(--bpa-mint-dark); border-radius: 50%; animation: bpa-pulse 2.5s ease-in-out infinite; } @keyframes bpa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---------- Cards uniformes (sólo cuando se opt-in con .bpa-card) ---------- */ @property --bpa-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes bpa-angle-spin { to { --bpa-angle: 360deg; } } .bpa-card { position: relative; background: linear-gradient(145deg, rgba(255,255,255,0.97) 0%, rgba(251,248,241,0.93) 100%); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; box-shadow: var(--bpa-shadow-card); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; text-decoration: none; color: inherit; } html[data-theme="dark"] .bpa-card { background: linear-gradient(145deg, #1F2630 0%, #171C23 100%); color: var(--bpa-text); border: 1px solid #2A323D; } /* Cards "blancas hardcoded" en componentes legacy (.app-tile en group.html) — override en cascada con !important para ganar al style inline. */ html[data-theme="dark"] .app-tile { background: linear-gradient(145deg, #1F2630 0%, #171C23 100%) !important; border: 1px solid #2A323D !important; color: var(--bpa-text) !important; } html[data-theme="dark"] .app-tile__title { color: var(--bpa-accent-cream) !important; } html[data-theme="dark"] .app-tile__desc { color: var(--bpa-text-soft) !important; } html[data-theme="dark"] .app-tile__icon { background: linear-gradient(135deg, rgba(168, 212, 181, 0.18) 0%, rgba(168, 212, 181, 0.08) 100%) !important; border-color: rgba(168, 212, 181, 0.30) !important; color: var(--bpa-mint-on-bg) !important; } html[data-theme="dark"] .app-tile__badge { background: rgba(168, 212, 181, 0.14) !important; color: var(--bpa-mint-on-bg) !important; border-color: rgba(168, 212, 181, 0.30) !important; } html[data-theme="dark"] .app-tile--soon .app-tile__badge { background: rgba(224, 133, 158, 0.14) !important; color: var(--bpa-burgundy-on-bg) !important; border-color: rgba(224, 133, 158, 0.28) !important; } html[data-theme="dark"] .group-header__icon { background: linear-gradient(135deg, rgba(168, 212, 181, 0.18) 0%, rgba(168, 212, 181, 0.08) 100%) !important; border-color: rgba(168, 212, 181, 0.30) !important; color: var(--bpa-accent-cream) !important; } html[data-theme="dark"] .group-header__text h1 { color: var(--bpa-accent-cream) !important; } html[data-theme="dark"] .group-header__text p { color: var(--bpa-text-soft) !important; } html[data-theme="dark"] .back-link { color: var(--bpa-burgundy-on-bg) !important; } /* ============================================================ LAUNCHER (launcher.html) — overrides específicos para dark El launcher tiene paleta hardcoded en su