/* ============================================================ HORIZON SKIN sobre el cockpit HRZN. Se carga DESPUES de index.css y de cloudbeach.css: no toca el markup, solo re-mapea tipografia, color, radios y jerarquia a los lineamientos de Horizon. Para volver atras, sacar el . Reglas que aplica: 1. Una sola tipografia: Poppins, con peso Medium para metadatos. 2. Titulos en MAYUSCULA con tracking. 3. Bajadas y copetes en navy, no en gris lavado. 4. Verde = sano · Amarillo = atencion · Rojo = peligro. 5. Gradientes solo azul -> naranja, y solo en trayectoria. 6. Cuatro radios y tres sombras. Nada mas. ============================================================ */ :root, html { /* --- todo el cockpit usa la misma familia --- */ --font-sans: 'Poppins', system-ui, -apple-system, sans-serif; --font-display: 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'Poppins', system-ui, -apple-system, sans-serif; /* --- tinta: navy arriba, y ningun gris lavado abajo --- */ --hz-ink: #0A1E46; /* titulos, numeros, bajadas */ --hz-ink-2: #1B3266; /* texto secundario — navy, no gris */ --hz-ink-3: #27447E; /* aclaraciones al pie — re-saturado a navy */ --hz-ink-4: #3A5A94; /* metadatos — navy claro, nunca gris */ /* --- marca --- */ --hz-blue: #2450E4; --hz-sky: #58A9F4; --hz-orange: #F97435; /* --- estado: verde sano, amarillo atencion, rojo peligro --- Dos juegos. Los vivos son para RELLENO (barras, puntos, pastillas): ahi el color se ve contra el blanco porque es una mancha solida. Como TEXTO no llegan a AA (rojo 3.9 · verde 3.0 · amarillo 2.2 sobre blanco), asi que para tipografia van las variantes -ink. */ --hz-ok: #1FA95C; --hz-warn: #F59E0B; --hz-bad: #E5484D; --hz-ok-ink: #127A45; /* 5.4 sobre blanco */ --hz-warn-ink: #A05F02; /* 5.1 sobre blanco */ --hz-bad-ink: #C4272C; /* 5.7 sobre blanco · 4.7 sobre el hero */ /* --- superficies --- */ --hz-line: #DCE4F5; --hz-line-soft: #E9EEF9; --hz-sunken: #EAF0FB; /* --- radios: cuatro, no dieciseis --- */ --hz-r-card: 16px; --hz-r-input: 10px; --hz-r-tag: 8px; } body, .finops-dashboard, .bridge-page { font-family: var(--font-sans); } /* ============================================================ 1 · TIPOGRAFIA — Poppins en toda la interfaz ============================================================ */ .chartplotter-titlebar h2, .spend-radar-card h2, .systems-load-panel h2, .budgets-panel h2, .space-y-4 > div > h2, .finops-control-title strong { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--hz-ink); } .systems-load-card h3, .space-y-4 h3 { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--hz-ink); } /* volantas y etiquetas: Poppins Medium, mayuscula y trackeadas */ .chartplotter-kicker, .chartplotter-overview span, .chartplotter-latest span, .radar-range-label, .finops-feedback-strip, .finops-filter-field > span, .finops-range-switch button, .budgets-table thead th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; } /* todo lo que es cifra, tabular y en mono */ .font-mono, .chartplotter-overview strong, .finops-kpi .text-3xl, .systems-load-card .text-2xl, .helm-drift-value { font-variant-numeric: tabular-nums; } .finops-kpi .text-3xl, .systems-load-card .text-2xl, .chartplotter-overview strong, .finops-hero .text-4xl, .finops-hero .text-5xl { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.015em; } /* ============================================================ 2 · TINTA — se van los grises lavados ============================================================ */ /* Su CSS scopea las utilidades bajo .finops-dashboard, asi que hay que igualar especificidad o no entra nada. */ .finops-dashboard .text-slate-900, .finops-dashboard .text-slate-800, .finops-dashboard .text-slate-700 { color: var(--hz-ink); } .finops-dashboard .text-slate-600 { color: var(--hz-ink-2); } .finops-dashboard .text-slate-500 { color: var(--hz-ink-2); } .finops-dashboard .text-slate-400 { color: var(--hz-ink-3); } /* BAJADAS Y COPETES -> navy. Son los que estaban lavados. */ .chartplotter-titlebar p, .spend-radar-card > div:first-child > p, .finops-control-title small, .finops-hero p.text-sm, .finops-hero p.text-base, .systems-load-panel p.text-xs, .budgets-panel p.text-xs, .space-y-4 p.text-xs { color: var(--hz-ink) !important; font-weight: 500; font-size: 12.5px !important; } /* ACLARACIONES, ETIQUETAS Y METADATOS -> tinta media, nunca niebla */ .chartplotter-kicker, .chartplotter-overview span, .chartplotter-overview small, .chartplotter-latest, .chartplotter-latest > span, .chartplotter-latest time, .finops-feedback-strip, .finops-feedback-strip small, .finops-feedback-strip button, .finops-filter-field > span, .finops-range-switch button, .radar-range-label, .radar-range-label span + span, .budgets-table thead th, .clock-state small, .finops-hero-signals small, .finops-kpi .text-xs.text-slate-500, .finops-kpi .text-xs.text-slate-600 { color: var(--hz-ink-3) !important; } .finops-feedback-strip b { color: var(--hz-ink) !important; } .finops-range-switch button.is-active { color: #fff !important; } /* la helm bar SI es oscura: ahi la escala se invierte */ .navigation-helm-bar .text-slate-300 { color: #C9D8EE; } .navigation-helm-bar .text-slate-200 { color: #E6EFFA; } /* ============================================================ 3 · COLOR — 9 familias colapsan a marca + 3 estados ============================================================ */ /* --- azul de marca --- */ .text-sky-600, .text-sky-700, .text-sky-800 { color: var(--hz-blue); } .bg-sky-600, .bg-sky-700 { background-color: var(--hz-blue); } .bg-sky-600:hover, .hover\:bg-sky-700:hover { background-color: #1E44C8; } .border-sky-200, .border-sky-200\/80, .border-sky-200\/90 { border-color: #C9D8F6; } .bg-sky-50 { background-color: var(--hz-sunken); } .text-sky-400, .bg-sky-400, .bg-sky-500 { color: var(--hz-sky); } .bg-sky-400, .bg-sky-500 { background-color: var(--hz-sky); } /* --- verde = sano --- */ .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--hz-ok-ink); } .bg-emerald-500, .bg-emerald-600 { background-color: var(--hz-ok); } .bg-emerald-50 { background-color: rgba(31,169,92,.10); } .border-emerald-200, .border-emerald-300 { border-color: rgba(31,169,92,.34); } .text-emerald-400 { color: #3DDC97; } /* --- amarillo = en el medio --- */ .text-amber-600, .text-amber-700, .text-amber-800 { color: var(--hz-warn-ink); } .bg-amber-500, .bg-amber-400 { background-color: var(--hz-warn); } .bg-amber-50 { background-color: rgba(245,158,11,.12); } .border-amber-200, .border-amber-300 { border-color: rgba(245,158,11,.38); } .text-amber-400 { color: var(--hz-warn); } /* --- rojo = peligro --- */ .text-rose-600, .text-rose-700 { color: var(--hz-bad-ink); } .bg-rose-500, .bg-rose-600 { background-color: var(--hz-bad); } .bg-rose-50, .bg-rose-50\/90 { background-color: rgba(229,72,77,.10); } .border-rose-200, .border-rose-200\/90, .border-rose-300 { border-color: rgba(229,72,77,.34); } .text-rose-400 { color: #FF8A8E; } /* --- violeta / purpura / indigo no existen en el sistema: pasan a azul --- */ .text-violet-700, .text-purple-700, .text-indigo-700 { color: var(--hz-blue); } .bg-violet-600, .bg-purple-600, .bg-indigo-600 { background-color: var(--hz-blue); } .bg-violet-50, .bg-purple-50 { background-color: var(--hz-sunken); } .border-violet-200, .border-purple-200 { border-color: #C9D8F6; } /* --- lineas y superficies --- */ .border-slate-200, .border-slate-200\/60, .border-slate-300 { border-color: var(--hz-line); } .border-slate-100 { border-color: var(--hz-line-soft); } .bg-slate-100, .bg-slate-100\/90, .bg-slate-200, .bg-slate-200\/80 { background-color: var(--hz-sunken); } .bg-slate-50, .bg-slate-50\/80 { background-color: #F4F7FD; } .bg-slate-900 { background-color: var(--hz-ink); } .bg-slate-800 { background-color: #16305E; } /* ============================================================ 4 · RADIOS — cuatro valores ============================================================ */ /* con !important porque su CSS los define scopeados y con valores sueltos */ .finops-dashboard .rounded-\[24px\], .finops-dashboard .rounded-3xl, .finops-dashboard .rounded-2xl, .chartplotter-card, .spend-radar-card, .systems-load-panel, .budgets-panel, .finops-control-bar, .finops-kpi, .navigation-helm-bar { border-radius: var(--hz-r-card) !important; } .finops-dashboard .rounded-xl, .helm-primary, .helm-meter, .helm-action, .systems-load-card, .systems-load-footer, .finops-range-switch, .radar-active-signal, .chartplotter-log { border-radius: var(--hz-r-input) !important; } .finops-dashboard .rounded-lg, .finops-dashboard .rounded-md, .finops-dashboard .rounded, .chartplotter-point-tooltip rect, .finops-filter-field select { border-radius: var(--hz-r-tag) !important; } .finops-dashboard .rounded-full { border-radius: 999px !important; } /* los sueltos que su CSS define a mano (19, 15, 14, 13, 12, 11, 9, 7 px) */ .utility-pill { border-radius: var(--hz-r-card) !important; } .chartplotter-overview, .chartplotter-stage, .budgets-table-scroll { border-radius: var(--hz-r-input) !important; } .chartplotter-action, .chartplotter-edit, .radar-blip-tooltip, .finops-feedback-strip button, .budget-row-actions button { border-radius: var(--hz-r-tag) !important; } /* ============================================================ 5 · GRADIENTES — solo azul -> naranja, y solo en trayectoria ============================================================ */ /* linea del chartplotter: azul al inicio, naranja al llegar al cap */ #minimalActualStroke stop:nth-of-type(1) { stop-color: var(--hz-blue); } #minimalActualStroke stop:nth-of-type(2) { stop-color: var(--hz-blue); } #minimalActualStroke stop:nth-of-type(3) { stop-color: var(--hz-orange); } /* barra de capacidad: mismo recorrido */ #budgetCapacityBar stop:nth-of-type(1) { stop-color: var(--hz-blue); } #budgetCapacityBar stop:nth-of-type(2) { stop-color: var(--hz-blue); } #budgetCapacityBar stop:nth-of-type(3) { stop-color: var(--hz-orange); } #budgetCapacityBar stop:nth-of-type(4) { stop-color: var(--hz-bad); } /* barra de drift del helm */ .helm-track > div { background: linear-gradient(90deg, var(--hz-blue) 0%, var(--hz-orange) 100%) !important; box-shadow: 0 0 12px rgba(249,116,53,.34) !important; } /* OJO: las barras de capacidad NO son gradiente, son estado. Gradiente azul->naranja = trayectoria en el tiempo (linea del chartplotter, barra de capacidad, drift del helm). Verde/amarillo/rojo = salud. Mezclar los dos lenguajes es lo que hace ilegible un tablero. */ .systems-load-card .bg-gradient-to-r { background-image: none !important; } .systems-load-card .h-full { background: var(--hz-ok) !important; } .systems-load-card.is-warn .h-full { background: var(--hz-warn) !important; } .systems-load-card.is-bad .h-full { background: var(--hz-bad) !important; } /* filas de budgets: el azul de "On track" pasa a verde */ .budget-row .bg-blue-600 { background-color: var(--hz-ok) !important; } .budget-row .bg-amber-500 { background-color: var(--hz-warn) !important; } .budget-row .bg-rose-600 { background-color: var(--hz-bad) !important; } /* SVG del chartplotter: trazos y textos al sistema */ .chart-course-node { fill: var(--hz-blue); } .chartplotter-svg path[stroke="#1673ff"] { stroke: var(--hz-blue); } .chartplotter-svg path[stroke-dasharray="6 6"] { stroke: var(--hz-orange); } .chartplotter-svg line[stroke="#c4d6e9"] { stroke: var(--hz-line); } .chartplotter-svg line[stroke="#bcd0e6"] { stroke: var(--hz-line); } .chartplotter-point--today circle[fill="#ff7a2c"] { fill: var(--hz-orange); } .chartplotter-point--forecast circle[fill="#ef473a"] { fill: var(--hz-bad); } .chartplotter-svg text[fill="#236dd9"] { fill: var(--hz-blue); } .chartplotter-svg text[fill="#ef473a"] { fill: var(--hz-bad-ink); } .chartplotter-svg text[fill="#6f83a0"] { fill: var(--hz-ink-4); } .chartplotter-svg rect[fill="#e4edf7"] { fill: var(--hz-sunken); } .chartplotter-svg text { font-family: var(--font-mono); } /* ============================================================ 6 · SE VAN LOS ADORNOS — los blobs borrosos no comunican nada ============================================================ */ .finops-kpi--projected .blur-xl, .navigation-helm-bar .blur-3xl { display: none !important; } /* el hero se apoya en el video, no en un degrade inventado */ .finops-hero { background-color: #DCE9FB !important; } /* fondos tintados de las cards: un solo gesto, no tres colores */ .finops-kpi--projected { background: linear-gradient(160deg, rgba(229,72,77,.05) 0%, #fff 62%) !important; } .finops-kpi--watch { background: linear-gradient(160deg, rgba(245,158,11,.05) 0%, #fff 62%) !important; } .systems-load-card { background: #FBFCFE !important; } /* helm bar: navy del sistema, sin el glow naranja difuso */ .navigation-helm-bar { background: linear-gradient(135deg, #0A1E46 0%, #123072 62%, #0A1E46 100%) !important; border: 1px solid rgba(148,184,255,.30) !important; box-shadow: 0 24px 58px -14px rgba(10,30,70,.55) !important; } .helm-action { background: var(--hz-blue) !important; box-shadow: 0 6px 18px rgba(36,80,228,.34) !important; } .helm-status-title { color: var(--hz-orange) !important; letter-spacing: .14em; } /* El pie de systems load parece oscuro por sus clases (text-white, slate-300) pero su CSS las pisa a navy: es un panel CLARO. No tocarle el fondo. */ .systems-load-footer { background: var(--hz-sunken) !important; } /* ============================================================ 7 · JERARQUIA — que se destaque lo que tiene que destacarse ============================================================ */ /* la bajada del hero: navy y con peso, no un gris al costado */ .finops-hero p.text-sm, .finops-hero p.text-base { color: var(--hz-ink); font-weight: 500; font-size: 14.5px; } /* ============================================================ 12 · ESCALA DE TITULOS — dos tamanios, sin excepciones Venia con 4 tamanios para el mismo nivel de panel (20 / 18 / 15 / 15) y 5 para el de tarjeta (14 / 13 / 13 / 12 / 11.5), con pesos mezclados. Queda: panel = 17px/700 · tarjeta = 13px/700 · volanta = 9.5px La linea del hero era 52px + 20px + 20px: ahora los tres iguales. La jerarquia la lleva el PESO, no el tamanio. ============================================================ */ /* --- nivel 1 · titulo de panel o seccion --- */ .finops-dashboard .chartplotter-titlebar h2, .finops-dashboard .spend-radar-card h2, .finops-dashboard .systems-load-panel h2, .finops-dashboard .budgets-panel h2, .finops-dashboard .space-y-4 > div > h2 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* --- nivel 2 · titulo de tarjeta (incluye las etiquetas de los KPI) --- */ .finops-dashboard .systems-load-card h3, .finops-dashboard .space-y-4 h3, .finops-dashboard .finops-control-title strong, .finops-dashboard .finops-kpi span.text-\[13px\], .finops-dashboard .finops-kpi span.text-xs.font-bold { font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* --- escala de dato numerico · tres pasos, no tres casualidades --- Venia en 29 / 27 / 21 px, diferencias sin criterio. Queda 30 / 24 / 20 segun el nivel donde vive el numero. */ .finops-dashboard .finops-kpi .text-3xl { font-size: 30px !important; } .finops-dashboard .systems-load-card .text-2xl { font-size: 24px !important; } .finops-dashboard .chartplotter-overview strong { font-size: 20px !important; } /* --- volantas: un solo cuerpo --- Habia seis (8 / 8.5 / 9 / 9.5 / 10 / 12) para el mismo rol. */ .finops-dashboard .finops-filter-field > span, .finops-dashboard .finops-feedback-strip small, .finops-dashboard .chartplotter-overview span, .finops-dashboard .chartplotter-course span, .finops-dashboard .chartplotter-latest span, .finops-dashboard .radar-blip-tooltip small, .finops-dashboard .systems-load-footer span.text-xs, .finops-dashboard .systems-load-footer span.block, .finops-dashboard span.font-mono.text-\[10px\] { font-size: 11px !important; } /* las dos cifras del radar entran en el paso "en linea" */ .finops-dashboard .spend-radar-card p.text-lg { font-size: 20px !important; } /* --- la linea grande del hero: un solo tamanio --- */ .finops-hero .flex.items-baseline.space-x-1 > span { font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -.01em !important; } /* ============================================================ 13 · JERARQUIA DEL HERO Con los tres pedazos al mismo tamanio, las palabras quedaban con 224x32 de mancha contra 58x32 del importe, y en el mismo navy: se leian ellas primero. Al no poder usar el tamanio, la jerarquia la hacen el PESO y la TINTA. Cuatro capas, cada una mas callada. ============================================================ */ /* capa 2 · el importe pesa y va en navy; las palabras acompanian */ .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(1), .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(2) { font-weight: 800 !important; color: var(--hz-ink) !important; } .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(3) { font-weight: 500 !important; color: var(--hz-ink-2) !important; } /* capa 3 · el veredicto es una anotacion de estado, no un bloque de color. Patron del sistema: punto + palabra + color. */ .finops-hero p span.text-rose-600 { background: transparent !important; border-color: transparent !important; padding: 0 !important; font-weight: 700 !important; } .finops-hero p span.text-rose-600::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; } /* capa 4 · la meta es la mas silenciosa (estaba en navy pleno) */ .finops-hero-signals, .finops-hero-signals span, .finops-hero-signals small { color: var(--hz-ink-3) !important; } /* --- contraste heredado del pie de Systems load --- Su CSS lo fija con !important y quedaba en 3.6 / 4.4 sobre el panel claro. */ .systems-load-footer .text-slate-400 { color: var(--hz-ink-3) !important; } .systems-load-footer .text-emerald-400 { color: var(--hz-ok-ink) !important; } .systems-load-footer .text-sky-300, .systems-load-footer .text-sky-400 { color: var(--hz-blue) !important; } /* los separadores de la tabla estaban a 1.5 de contraste */ .budget-row .text-slate-300 { color: var(--hz-ink-4) !important; } /* el boton ahora usa .hd-action (solido, texto blanco) igual que el resto de las paginas -- la regla "fantasma hasta el hover" que estaba aca lo dejaba invisible sobre el video, pedido de Dario fue justamente que se vea. */ /* estado siempre punto + palabra + color, nunca color solo */ .budget-row td:nth-child(5) span:last-child { font-weight: 700; } /* tabla: cabecera tranquila, cifras firmes */ .budgets-table thead th { color: var(--hz-ink-3); font-size: 9.5px; } .budgets-table tbody td { color: var(--hz-ink); } /* ============================================================ 8 · SHELL (sidebar) — misma tipografia y misma tinta ============================================================ */ .bridge-page .brand span { font-family: var(--font-sans); font-weight: 800; letter-spacing: .08em; } .bridge-page .brand small { font-family: var(--font-mono); letter-spacing: .18em; } .bridge-page .side-link b { font-family: var(--font-sans); font-weight: 600; } /* El activo va en blanco, no en --hz-sky: sobre el azul de marca el cielo da 2.5 (y daba 1.97 contra el gradiente que tenia antes). El blanco sobre --hz-blue llega a 6.3. El cielo queda para el navy del rail. */ .bridge-page .side-link.is-active { color: #fff; } .bridge-page .sidebar a, .bridge-page .sidebar a:hover, .bridge-page .sidebar a:focus, .bridge-page .sidebar a:active, .bridge-page .side-link, .bridge-page .side-link:hover, .bridge-page .side-link:focus, .bridge-page .side-link:active { text-decoration: none !important; } .bridge-page .profile-card b { font-family: var(--font-sans); font-weight: 600; } .bridge-page .profile-card small { font-family: var(--font-sans); } /* --- radios: el shell traia 12px, que no es ninguno de los cuatro --- */ .bridge-page .side-link, .bridge-page .profile-card, .bridge-page .support-link { border-radius: var(--hz-r-input); } /* --- gradientes: los dos del sidebar eran azul sobre azul, decoracion pura. El unico gradiente del sistema es azul -> naranja y solo para trayectoria, asi que estos pasan a color plano. --- */ .bridge-page .side-link.is-active { background: var(--hz-blue); } .bridge-page .profile-avatar { background: var(--hz-blue); } /* --- sombras: el rail llevaba 8px 0 26px, que no es ninguna de las tres. No hace falta inventar una cuarta: el corte entre el navy del sidebar y el fondo claro de la pagina ya separa los dos planos. --- */ .bridge-page .sidebar { box-shadow: none; } /* La escena del faro se queda: es una ilustracion de marca, no un blob decorativo, igual que el video de costa del hero. */ /* ============================================================ 9 · UNA SOLA FAMILIA DE ICONOS Los 12 Material Symbols pasaron a SVG de trazo, igual que los 28 de la app y que las otras pantallas de 2050. El queda con sus clases para no mover el layout; solo se apaga la fuente. ============================================================ */ .material-symbols-rounded { font-size: 0 !important; line-height: 0; font-family: var(--font-sans) !important; /* que no quede ninguna familia suelta */ } .material-symbols-rounded > .hz-ico { display: block; } .hz-ico { width: 21px; height: 21px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bridge-page .company-icon > .hz-ico { width: 17px; height: 17px; } .bridge-page .chevron > .hz-ico { width: 17px; height: 17px; } .period-button .hz-ico { width: 15px; height: 15px; } /* ============================================================ 10 · UNA INSIGNIA POR CARD ============================================================ */ /* radar: tenia tres etiquetas diciendo casi lo mismo. Queda "MTD · 6 SIGNALS"; se van la pastilla decorativa y el duplicado. */ .spend-radar-card .bg-slate-900 { display: none !important; } .radar-range-label { display: none !important; } /* systems load: la barra ya esta en amarillo cuando esta cerca del cap, asi que "Near Cap" repite lo que el color ya dijo. Queda "% OF CAP". */ .systems-load-card span.text-rose-600 { display: none !important; } /* ============================================================ 11 · TRES SOMBRAS Habia 31 valores distintos. Se apagan todas y se reaplican tres: hair (reposo) · soft (hover y flotacion corta) · deep (lo que flota). ============================================================ */ :root, html { --hz-sh-hair: 0 1px 2px rgba(10,30,70,.06); --hz-sh-soft: 0 10px 28px -14px rgba(10,30,70,.20); --hz-sh-deep: 0 26px 64px -22px rgba(10,30,70,.34); } .finops-dashboard [class], .bridge-page .sidebar [class] { box-shadow: none !important; } /* el re-apply tiene que igualar la especificidad del reset (0,2,0) y venir despues, si no gana el reset y queda todo plano */ .finops-dashboard .finops-kpi, .finops-dashboard .chartplotter-card, .finops-dashboard .spend-radar-card, .finops-dashboard .systems-load-panel, .finops-dashboard .budgets-panel, .finops-dashboard .finops-control-bar, .finops-dashboard .systems-load-card, .finops-dashboard .finops-filter-field select, .finops-dashboard .finops-range-switch, .finops-dashboard .systems-load-footer, .finops-dashboard .space-y-4 .rounded-2xl { box-shadow: var(--hz-sh-hair) !important; } .finops-dashboard .finops-kpi:hover, .finops-dashboard .systems-load-card:hover, .finops-dashboard .chartplotter-card:hover, .finops-dashboard .radar-active-signal, .finops-dashboard .helm-action { box-shadow: var(--hz-sh-soft) !important; } .finops-dashboard .navigation-helm-bar { box-shadow: var(--hz-sh-deep) !important; } /* el anillo de seleccion del radar es estado, no elevacion: se conserva */ .finops-dashboard .radar-blip-core.ring-2 { box-shadow: 0 0 0 2px #fff !important; } /* ============================================================ 12 · POPPINS EN TODA LA EXPERIENCIA La antigua utilidad "mono" conserva numeros tabulares, pero deja de cambiar de familia. Las etiquetas tecnicas usan Poppins Medium. ============================================================ */ .finops-dashboard .font-mono, .finops-dashboard code, .finops-dashboard kbd, .finops-dashboard samp, .finops-dashboard pre, .chartplotter-svg text { font-family: var(--font-sans) !important; } .chartplotter-kicker, .chartplotter-overview span, .chartplotter-latest span, .finops-feedback-strip, .finops-filter-field > span, .finops-range-switch button, .budgets-table thead th, .bridge-page .brand small { font-family: var(--font-sans) !important; font-weight: 500; } /* ============================================================ 13 · COST PRESSURE RADAR Radio = utilizacion del cap. Color = severidad. Seleccion = detalle accionable que lleva a la fila correspondiente de Budgets. ============================================================ */ .spend-radar-card .radar-meaning-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; margin-bottom: 18px; } .spend-radar-card .radar-meaning-legend span { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 7px; border: 1px solid var(--hz-line-soft); border-radius: var(--hz-r-tag); color: var(--hz-ink-2); background: #F8FAFE; font-size: 9px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .spend-radar-card .radar-meaning-legend b { margin-left: auto; color: var(--hz-ink-4); font-weight: 500; } .spend-radar-card .radar-meaning-legend i { width: 7px; height: 7px; flex: none; border-radius: 50%; } .radar-meaning-legend i.is-healthy { background: var(--hz-ok); } .radar-meaning-legend i.is-warning { background: var(--hz-warn); } .radar-meaning-legend i.is-critical { background: var(--hz-bad); } .finops-dashboard .radar-risk-map { border-color: rgba(88, 145, 244, .35) !important; background: radial-gradient(circle at 50% 50%, rgba(64, 130, 255, .10) 0 7%, transparent 8%), radial-gradient(circle at 50% 50%, #EAF2FF 0%, #DCE9FC 55%, #CBDDF7 100%) !important; } /* Version oscura, en pausa hasta que se construya esa variante de la pagina: se activa agregando la clase .is-dark a .radar-risk-map. */ .finops-dashboard .radar-risk-map.is-dark { border-color: rgba(88, 169, 244, .55) !important; background: radial-gradient(circle at 50% 50%, rgba(64, 164, 255, .18) 0 7%, transparent 8%), radial-gradient(circle at 50% 50%, #0B3567 0%, #082952 55%, #051D40 100%) !important; } .radar-risk-map::after { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(30, 74, 158, .22); border-radius: 50%; pointer-events: none; } .radar-risk-map.is-dark::after { border-color: rgba(118, 190, 255, .24); } .radar-risk-map:not(.is-dark) .border-sky-500\/20, .radar-risk-map:not(.is-dark) .border-sky-500\/25, .radar-risk-map:not(.is-dark) .border-sky-500\/30, .radar-risk-map:not(.is-dark) .border-sky-500\/40 { border-color: rgba(30, 74, 158, .28); } .radar-risk-map:not(.is-dark) .bg-sky-500\/20 { background-color: rgba(30, 74, 158, .25); } .radar-risk-map:not(.is-dark) .from-sky-500\/10 { --tw-gradient-from: rgba(30, 74, 158, .08); } .radar-scale-key { position: absolute; inset: 0; z-index: 12; pointer-events: none; } .radar-scale-key span { position: absolute; left: calc(50% + var(--offset)); top: 50%; transform: translate(-50%, -135%); padding: 1px 3px; color: rgba(24, 62, 130, .85); background: rgba(255, 255, 255, .82); border-radius: 3px; font-family: var(--font-sans); font-size: 7px; font-weight: 500; line-height: 1; } .radar-risk-map.is-dark .radar-scale-key span { color: rgba(205, 229, 255, .72); background: rgba(5, 29, 64, .78); } .radar-axis-caption { position: absolute; left: 50%; bottom: 11px; z-index: 12; transform: translateX(-50%); /* Era rgba(24,62,130,.62) y daba 3.61:1 sobre la tarjeta blanca -- el peor contraste que quedaba en la app. El alpha era el problema, no el color: el MISMO #183E82 opaco da 10.24:1. Regla que se sigue en toda la app: el alpha vale para rellenos y bordes, no para tinta de texto. Un color con alpha depende de lo que tenga debajo, asi que su contraste deja de ser una propiedad del token y pasa a depender del contexto. Se arregla aca y no en hrzn-unify.css porque el radar vive dentro del iframe de cockpit/app.html, que no carga esa hoja pero si carga esta. */ color: #183E82; font-family: var(--font-sans); font-size: 7px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; pointer-events: none; } .radar-risk-map.is-dark .radar-axis-caption { color: rgba(205, 229, 255, .66); } .radar-blip[data-severity="critical"] .radar-blip-core { outline: 2px solid rgba(229, 72, 77, .2); } .radar-blip[data-severity="warning"] .radar-blip-core { outline: 2px solid rgba(245, 158, 11, .18); } .radar-blip[data-severity="healthy"] .radar-blip-core { outline: 2px solid rgba(31, 169, 92, .18); } /* Los contactos permanecen compactos. El pulso aparece solo cuando el barrido los detecta; ya no hay halos gigantes reproduciendose siempre. */ .radar-blip > .animate-ping { display: none !important; } .radar-blip .radar-blip-core.scale-150 { scale: 112% !important; } .radar-blip:hover .radar-blip-core, .radar-blip:focus-visible .radar-blip-core { transform: scale(1.18) !important; } .radar-blip.is-detected .radar-blip-core { scale: 118% !important; filter: brightness(1.15); } .radar-blip.is-detected::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid rgba(150, 211, 255, .95); border-radius: 50%; animation: radar-contact-detected .72s ease-out both; pointer-events: none; } @keyframes radar-contact-detected { 0% { opacity: 0; transform: scale(.82); } 26% { opacity: 1; } 100% { opacity: 0; transform: scale(1.65); } } .radar-blip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; } .finops-dashboard .radar-active-signal { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; min-height: 68px; margin-top: 24px !important; padding: 11px 12px !important; color: var(--hz-ink) !important; background: #F5F9FF !important; border: 1px solid #C9D9F0 !important; border-left-width: 4px !important; } .finops-dashboard .radar-active-signal[data-severity="critical"] { border-left-color: var(--hz-bad) !important; } .finops-dashboard .radar-active-signal[data-severity="warning"] { border-left-color: var(--hz-warn) !important; } .finops-dashboard .radar-active-signal[data-severity="healthy"] { border-left-color: var(--hz-ok) !important; } .finops-dashboard .radar-active-signal.is-auto-detected { animation: radar-panel-detected .48s ease-out both; } @keyframes radar-panel-detected { 0% { background: #E8F4FF; transform: translateY(2px); } 100% { background: #F5F9FF; transform: translateY(0); } } .radar-signal-copy { display: grid; min-width: 0; gap: 3px; } .radar-signal-copy small { color: var(--hz-ink-4); font-family: var(--font-sans); font-size: 8px; font-weight: 500; letter-spacing: .1em; } .radar-signal-copy strong { overflow: hidden; color: var(--hz-ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .radar-signal-copy span { color: var(--hz-ink-2); font-size: 9.5px; font-weight: 500; } .radar-review-cta { max-width: none; color: var(--hz-blue); font-size: 9px; font-weight: 700; line-height: 1.3; text-align: left; } .radar-review-cta b { display: inline-block; margin-left: 2px; font-size: 13px; transition: transform .18s ease; } .radar-active-signal:hover .radar-review-cta b { transform: translateX(3px); } @media (max-width: 1180px) { .spend-radar-card .radar-meaning-legend { grid-template-columns: 1fr; } .spend-radar-card .radar-meaning-legend span { padding-block: 4px; } } @media (prefers-reduced-motion: reduce) { .radar-blip.is-detected::after, .finops-dashboard .radar-active-signal.is-auto-detected { animation: none !important; } } /* El barrido giraba demasiado rapido para leer el radar; se estira la vuelta completa de 4s a 10s solo en este radar (la clase .radar-sweep es generica y la usa tambien el widget "Live Risk Radar" de otras paginas, que no debe cambiar de velocidad). */ .spend-radar-card .radar-sweep { animation-duration: 10s; } /* El radar queda en modo claro por defecto. La variante oscura (.radar-risk-map.is-dark, definida mas arriba junto al resto de la base) se retoma cuando se construya esa version de la pagina. */ .radar-risk-map:not(.is-dark) .radar-blip.is-detected::after { border-color: rgba(11, 90, 200, .85); } /* ============================================================ 18 · HORIZON COPILOT El estado financiero deja de ocupar una barra fija completa y pasa a vivir en un asistente flotante, disponible sin tapar el dashboard. ============================================================ */ .horizon-bot-shell { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: grid; justify-items: end; font-family: var(--font-sans); pointer-events: none; } .horizon-bot-launcher { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 232px; min-height: 62px; padding: 9px 11px 9px 9px; overflow: hidden; color: #fff; background: radial-gradient(circle at 17% 12%, rgba(65, 155, 255, .34), transparent 34%), linear-gradient(135deg, #031A3B 0%, #07336D 58%, #02142F 100%); border: 1px solid rgba(151, 199, 255, .48); border-radius: 18px; box-shadow: 0 18px 46px rgba(1, 18, 43, .30), 0 5px 14px rgba(1, 18, 43, .20), inset 0 1px 0 rgba(255,255,255,.15) !important; cursor: pointer; pointer-events: auto; isolation: isolate; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .horizon-bot-launcher::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.10) 48%, transparent 70%); transform: translateX(-115%); transition: transform .65s ease; } .horizon-bot-launcher:hover { transform: translateY(-2px); border-color: rgba(176, 214, 255, .76); box-shadow: 0 22px 52px rgba(1, 18, 43, .36), 0 7px 18px rgba(1, 18, 43, .22), inset 0 1px 0 rgba(255,255,255,.18) !important; } .horizon-bot-launcher:hover::before { transform: translateX(115%); } .horizon-bot-launcher-icon, .horizon-bot-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: #EAF5FF; background: linear-gradient(145deg, #1386FF, #0756D7); border: 1px solid rgba(255,255,255,.34); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 18px rgba(0, 91, 224, .32) !important; } .horizon-bot-launcher-icon svg, .horizon-bot-avatar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .horizon-bot-launcher-icon i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; background: var(--hz-orange); border: 2px solid #062456; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 116, 53, .16) !important; } .horizon-bot-launcher-copy { display: grid; min-width: 0; gap: 1px; text-align: left; } .horizon-bot-launcher-copy small { color: #91B8EA; font-size: 8px; font-weight: 700; letter-spacing: .16em; } .horizon-bot-launcher-copy strong { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; } .horizon-bot-launcher-copy em { overflow: hidden; color: #CBDCF1; font-size: 9px; font-style: normal; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .horizon-bot-badge { display: grid; place-items: center; width: 21px; height: 21px; color: #fff; background: var(--hz-orange); border: 2px solid rgba(3, 26, 59, .9); border-radius: 50%; font-size: 9px; font-weight: 700; } .horizon-bot-shell .navigation-helm-bar { position: absolute !important; right: 0 !important; bottom: calc(100% + 12px) !important; left: auto !important; top: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 11px !important; width: min(420px, calc(100vw - 32px)) !important; max-width: none !important; margin: 0 !important; padding: 15px !important; overflow: hidden !important; border-radius: 20px !important; box-shadow: 0 28px 72px rgba(1, 18, 43, .36), 0 8px 20px rgba(1, 18, 43, .18), inset 0 1px 0 rgba(255,255,255,.13) !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.96); transform-origin: 92% 100%; transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.2,.8,.2,1) !important; } .horizon-bot-shell.is-open .navigation-helm-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .horizon-bot-header { position: relative; z-index: 2; display: grid; grid-template-columns: 38px minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(161, 194, 238, .18); } .horizon-bot-avatar { width: 38px; height: 38px; border-radius: 12px; } .horizon-bot-avatar svg { width: 21px; height: 21px; } .horizon-bot-heading { display: grid; gap: 1px; } .horizon-bot-heading small { color: #8DB4E6; font-size: 8px; font-weight: 700; letter-spacing: .15em; } .horizon-bot-heading strong { color: #fff; font-size: 14px; font-weight: 700; } .horizon-bot-close { display: grid; place-items: center; width: 32px; height: 32px; color: #AFC8E8; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; cursor: pointer; transition: color .18s ease, background .18s ease; } .horizon-bot-close:hover { color: #fff; background: rgba(255,255,255,.12); } .horizon-bot-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .horizon-bot-shell .helm-primary { position: relative; z-index: 2; min-width: 0; padding: 11px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); } .horizon-bot-shell .helm-status-copy { overflow: visible !important; white-space: normal !important; } .horizon-bot-shell .helm-meter { position: relative; z-index: 2; display: flex !important; width: 100%; min-height: 34px; padding: 8px 3px !important; } .horizon-bot-shell .helm-drift-label { flex: 0 0 auto; } .horizon-bot-shell .helm-track { min-width: 90px; } .horizon-bot-shell .helm-drift-value { flex: 0 0 auto; } .horizon-bot-shell .helm-action { position: relative; z-index: 2; justify-content: center; width: 100%; min-height: 42px; } .horizon-bot-shell.is-on-course .horizon-bot-launcher-icon i, .horizon-bot-shell.is-on-course .horizon-bot-badge { background: var(--hz-ok); } .horizon-bot-launcher:focus-visible, .horizon-bot-close:focus-visible, .horizon-bot-shell .helm-action:focus-visible { outline: 3px solid rgba(115, 193, 255, .9); outline-offset: 3px; } @media (max-width: 640px) { .horizon-bot-shell { right: 16px; bottom: 16px; } .horizon-bot-launcher { grid-template-columns: 46px; min-width: 0; width: 58px; height: 58px; min-height: 58px; padding: 6px; border-radius: 18px; } .horizon-bot-launcher-icon { width: 46px; height: 46px; } .horizon-bot-launcher-copy, .horizon-bot-badge { display: none; } .horizon-bot-shell .navigation-helm-bar { width: calc(100vw - 32px) !important; } } @media (prefers-reduced-motion: reduce) { .horizon-bot-launcher, .horizon-bot-launcher::before, .horizon-bot-shell .navigation-helm-bar { transition: none !important; } } /* ============================================================ 19 · SYSTEMS LOAD — aire entre las tres tarjetas index.css las arma como un bloque unico con las juntas pegadas (`.systems-load-panel>.grid{gap:0;overflow:hidden}`), asi que las tres se tocaban borde con borde. Se conserva la bandeja que las agrupa —la idea de que las tres se leen juntas es correcta— pero con aire adentro. Efecto lateral que ademas se arregla: cada tarjeta tiene un riel de acento de 2px en su borde izquierdo, y sin separacion los rieles de la 2 y la 3 caian exactamente sobre la junta y parecian marcas sueltas. ============================================================ */ .systems-load-panel > .grid { gap: 16px !important; padding: 16px !important; /* la bandeja se hunde para que las tarjetas blancas se despeguen. Antes era rgba(255,255,255,.78) con tarjetas en #FBFCFE: blanco sobre blanco, no habia tarjeta que leer. Mismo par hundido/elevado que ya usa el resto del sistema (bandeja --hz-sunken, tarjeta #fff). */ background: var(--hz-sunken) !important; } /* aire con la franja del cap global, que venia pegada con margin-top: 1px */ .systems-load-footer { margin-top: 16px !important; } /* index.css desarma las tarjetas para el bloque unico: sin sombra, fondo transparente, sin borde salvo un divisor a la derecha y sin radio. Con la bandeja hundida y las juntas separadas ese divisor ya no divide nada, asi que vuelven a ser tarjetas. `:last-child` va en el selector porque su regla `.systems-load-card:last-child{border-right:0!important}` gana por especificidad sobre `.systems-load-card` sola. */ .systems-load-card, .systems-load-card:last-child { background: #fff !important; border: 1px solid var(--hz-line) !important; box-shadow: var(--hz-sh-hair) !important; } /* ============================================================ ESCALA TIPOGRAFICA v2 — legibilidad El dueno marco que la tipografia era muy chica. La medicion lo confirmo: 47% del texto estaba por debajo de 12px y el piso llegaba a 7px. El contraste de color ya estaba bien (16:1, 8.9:1), asi que el problema era puramente de tamano. Siete pasos, cada uno con un trabajo. Piso duro en 11px: micro 11 · caption 12.5 · CUERPO 13.5 · subtitulo 15-17 seccion 20 · metrica 26-34 · hero 40 Solo tamanos y line-height: no toca markup, color ni layout. ============================================================ */ /* ---- utilidades del cockpit: el cumulo de 9.5-11px sube a 11-12.5 ---- */ .finops-dashboard .text-\[9\.5px\] { font-size: 11.5px !important; } .finops-dashboard .text-\[10px\] { font-size: 12px !important; } .finops-dashboard .text-\[11px\] { font-size: 13px !important; } .finops-dashboard .text-\[13px\] { font-size: 15px !important; } /* text-xs era el caballo de batalla (77 usos) haciendo de cuerpo con 12px. Un cuerpo de verdad arranca en 13.5. */ .finops-dashboard .text-xs { font-size: 14.5px !important; } .finops-dashboard .text-sm { font-size: 16px !important; } .finops-dashboard .text-base { font-size: 18.5px !important; } .finops-dashboard .text-lg { font-size: 22px !important; } /* ---- display: la jerarquia necesitaba techo ---- */ .finops-dashboard .text-2xl { font-size: 28px !important; } .finops-dashboard .text-3xl { font-size: 35px !important; } .finops-dashboard .text-4xl { font-size: 44px !important; } /* ---- reglas de la skin que encogian el texto ---- */ .finops-dashboard .systems-load-footer span.text-xs, .finops-dashboard .systems-load-footer span.block, .finops-dashboard span.font-mono.text-\[10px\] { font-size: 12.5px !important; } .systems-load-panel p.text-xs, .budgets-panel p.text-xs, .space-y-4 p.text-xs { font-size: 14.5px !important; line-height: 1.55; } .finops-hero p.text-sm, .finops-hero p.text-base { font-size: 17px !important; } .finops-dashboard .finops-kpi span.text-\[13px\], .finops-dashboard .finops-kpi span.text-xs.font-bold { font-size: 15px !important; } /* ---- titulos de seccion: contundentes, no timidos ---- */ .finops-dashboard .budgets-panel h2, .finops-dashboard .space-y-4 > div > h2 { font-size: 22px !important; } .finops-dashboard .spend-radar-card p.text-lg { font-size: 23px !important; } .finops-dashboard .chartplotter-overview strong { font-size: 25px !important; } /* ---- cifras protagonistas ---- */ .finops-dashboard .finops-kpi .text-3xl { font-size: 38px !important; } .finops-dashboard .systems-load-card .text-2xl { font-size: 29px !important; } /* --- TITULO DISPLAY: la cifra manda -------------------------------- La seccion 13 habia igualado los tres pedazos a un solo tamanio porque a 30px las palabras ganaban en mancha (224x32 contra 58x32). A escala display eso se invierte: el importe domina por tamanio solo, asi que la jerarquia vuelve a ser de TAMANIO y el peso/tinta de la seccion 13 pasan a reforzarla en vez de sustituirla. */ .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(1) { font-size: clamp(64px, 8vw, 124px) !important; line-height: .90 !important; letter-spacing: -.042em !important; } .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(2) { font-size: clamp(36px, 4.4vw, 68px) !important; line-height: .94 !important; letter-spacing: -.024em !important; } .finops-hero .flex.items-baseline.space-x-1 > span:nth-child(3) { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.14 !important; letter-spacing: -.01em !important; } /* ---- tabla: encabezado legible y filas mas altas ---- */ .budgets-table thead th { font-size: 11.5px !important; letter-spacing: .085em; } .budgets-table tbody td { font-size: 14.5px !important; } /* ---- radar: micro-anotaciones. Las dos de adentro del scope suben a 10px y no a 11 porque el espacio fisico no da mas. ---- */ .radar-scale-key span { font-size: 10.5px !important; } .radar-axis-caption { font-size: 10.5px !important; } .radar-signal-copy small { font-size: 12px !important; } .spend-radar-card .radar-meaning-legend span { font-size: 11.5px !important; } /* ---- shell: el sublabel de marca estaba en 7px ---- */ .brand small { font-size: 10px !important; letter-spacing: .22em; } /* ---- cola de texto chico con clases semanticas (no utilidades), por eso las reglas de arriba no la alcanzaban ---- */ .viewers > span { font-size: 11.5px !important; } /* iniciales */ .finops-hero-signals small, .finops-hero-signals b { font-size: 13px !important; } /* linea de estado del hero */ .finops-feedback-strip, .finops-feedback-strip button, .finops-feedback-strip b { font-size: 12px !important; } /* barra de telemetria */ .finops-range-switch button { font-size: 12px !important; } .finops-filter-reset { font-size: 12px !important; } .chartplotter-kicker { font-size: 11.5px !important; letter-spacing: .1em; } .chartplotter-latest p { font-size: 13px !important; } .radar-blip-tooltip strong, .radar-blip-tooltip span { font-size: 11px !important; } .radar-review-cta { font-size: 11.5px !important; } /* ---- ultimos focos bajo 11px ---- */ .finops-filter-field span { font-size: 11.5px !important; } /* Source / Category / Person */ .chartplotter-overview span, .chartplotter-overview small { font-size: 11.5px !important; } /* SPENT · MTD, remaining */ .chartplotter-course span { font-size: 11px !important; } .chartplotter-course small { font-size: 11.5px !important; } .chartplotter-latest span { font-size: 11px !important; letter-spacing: .09em; } .radar-blip-tooltip small { font-size: 11px !important; } .radar-signal-copy span { font-size: 11.5px !important; } .horizon-bot-heading small { font-size: 10.5px !important; letter-spacing: .16em; } .brand small { font-size: 11px !important; } /* ---- mismo objetivo, con especificidad suficiente para ganarle a las reglas de index.css que tambien usan !important ---- */ .finops-dashboard .finops-filter-field span { font-size: 11.5px !important; } .finops-dashboard .chartplotter-overview span, .finops-dashboard .chartplotter-overview small { font-size: 11.5px !important; } .finops-dashboard .chartplotter-latest span { font-size: 11px !important; } .finops-dashboard .chartplotter-course span { font-size: 11px !important; } .finops-dashboard .chartplotter-course small { font-size: 11.5px !important; } .finops-dashboard .radar-blip-tooltip small, .finops-dashboard .radar-blip-tooltip strong { font-size: 11px !important; } .finops-dashboard .radar-signal-copy span, .finops-dashboard .radar-signal-copy small { font-size: 11.5px !important; } .finops-dashboard .horizon-bot-heading small { font-size: 11px !important; } /* ---- La pastilla es absoluta arriba-derecha (igual que en el shell del Bridge), pero en el cockpit el hero es mas angosto: por debajo de 880px se montaba encima del saludo y del titular. Ahi vuelve al flujo, debajo del copy. ---- */ @media (max-width: 880px) { .finops-hero .utility-pill, .utility-pill { position: static !important; top: auto !important; left: auto !important; right: auto !important; height: auto !important; margin-top: 14px; flex-wrap: wrap; row-gap: 8px; padding: 10px 14px !important; max-width: 100%; } .utility-pill .utility-rule { display: none; } } /* ============================================================ FONDO EN VIVO v4 Historial de los tres intentos fallidos, porque cada uno fallo por un motivo distinto y ninguno era la opacidad: v1/v2 — capas en ::before/::after con z-index:-1, o sea DEBAJO del propio linear-gradient opaco de .finops-dashboard. v3 — anime el background del contenedor con attachment:fixed. Se veia, pero solo al scrollear: Chrome no invalida un fondo fixed animado hasta que otra cosa fuerza repintado. v4 — capa fixed de verdad, animada por TRANSFORM (compositor, se mueve sola sin depender de repintados) y el dashboard transparente para que la capa asome en los huecos. Dato clave: el scroller no es .finops-dashboard (su clientHeight es igual a su scrollHeight), es el documento del iframe. Por eso el fondo del dashboard nunca fue el lugar correcto. ============================================================ */ /* el fondo base se muda al canvas, anclado al viewport */ .finops-dashboard-live-bg, html:has(.finops-dashboard) { background-color: rgb(240,246,252) !important; background-image: radial-gradient(circle at 52% 90px, rgba(135,188,255,.17), rgba(0,0,0,0) 512px), linear-gradient(rgb(237,245,253), rgb(244,248,252) 34%, rgb(238,244,250)) !important; background-attachment: fixed, fixed !important; background-repeat: no-repeat, no-repeat !important; } /* El dashboard deja de tapar (las cards siguen opacas, los huecos no) y se sube a z-index 1. Nada de z-index negativo: con -1 el orden de pintado depende de como caiga respecto al fondo del canvas de html. Capas en 0 + contenido en 1 es explicito y no admite interpretacion. */ .finops-dashboard { position: relative; z-index: 1; background: transparent !important; } /* 1. tres luces a la deriva — siempre presentes, nunca se apagan. inset:0, no -18%: con inset negativo los % del gradiente se miden sobre un box 136% del viewport y los tres centros se iban a los bordes (uno directamente debajo de la pantalla, a 101% de altura). */ body:has(.finops-dashboard)::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 42% at 24% 30%, rgba(84,154,255,.38), rgba(84,154,255,0) 70%), radial-gradient(40% 38% at 78% 42%, rgba(38,132,255,.32), rgba(38,132,255,0) 72%), radial-gradient(50% 44% at 50% 76%, rgba(150,196,255,.34), rgba(150,196,255,0) 74%); animation: hzDrift 18s ease-in-out infinite; will-change: transform, opacity; } /* el scale nunca baja de 1 y siempre supera al translate, asi que al desplazarse no llega a descubrir el borde del box */ @keyframes hzDrift { 0%,100% { transform: translate3d(0,0,0) scale(1.04); opacity: .85; } 22% { transform: translate3d(-5%,3.4%,0) scale(1.20); opacity: 1; } 48% { transform: translate3d(4.2%,-2.6%,0) scale(1.13); opacity: .9; } 74% { transform: translate3d(-2.4%,-3.6%,0) scale(1.18); opacity: 1; } } /* 2. barrido de escaneo — cruza la pantalla cada 17s */ body:has(.finops-dashboard)::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 44vh; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(118,174,255,0) 0%, rgba(124,180,255,.24) 34%, rgba(150,198,255,.40) 50%, rgba(124,180,255,.24) 66%, rgba(118,174,255,0) 100%); animation: hzSweep 11s linear infinite; will-change: transform, opacity; } @keyframes hzSweep { 0% { transform: translate3d(0,-50vh,0); opacity: 0; } 9% { opacity: 1; } 82% { opacity: 1; } 92% { transform: translate3d(0,108vh,0); opacity: 0; } 100% { transform: translate3d(0,108vh,0); opacity: 0; } } /* 3. destello horizontal — cruza en el otro eje, a otro ritmo, para que nunca coincidan los dos barridos y el fondo no tenga pulso regular */ html:has(.finops-dashboard)::before { content: ''; position: fixed; top: 0; bottom: 0; left: 0; width: 40vw; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(120,178,255,0) 0%, rgba(132,186,255,.20) 38%, rgba(152,200,255,.30) 50%, rgba(132,186,255,.20) 62%, rgba(120,178,255,0) 100%); animation: hzShimmer 15s linear infinite; will-change: transform, opacity; } @keyframes hzShimmer { 0% { transform: translate3d(-46vw,0,0); opacity: 0; } 11% { opacity: 1; } 84% { opacity: 1; } 94% { transform: translate3d(102vw,0,0); opacity: 0; } 100% { transform: translate3d(102vw,0,0); opacity: 0; } } /* 4. aurora rotatoria — la unica capa que no entra ni sale nunca. inset:-50% deja el box al doble del viewport, asi que la rotacion no llega a descubrir esquinas. Es la que sostiene la sensacion de "siempre encendido" entre pasada y pasada de los dos barridos. */ html:has(.finops-dashboard)::after { content: ''; position: fixed; inset: -50%; z-index: 0; pointer-events: none; background: conic-gradient(from 0deg at 50% 50%, rgba(84,154,255,0) 0deg, rgba(84,154,255,.22) 52deg, rgba(150,196,255,0) 112deg, rgba(38,132,255,.18) 188deg, rgba(120,180,255,0) 248deg, rgba(96,166,255,.20) 308deg, rgba(84,154,255,0) 360deg); animation: hzAurora 26s linear infinite; will-change: transform; } @keyframes hzAurora { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body:has(.finops-dashboard)::before, html:has(.finops-dashboard)::before { animation: none; opacity: 0; } body:has(.finops-dashboard)::after { animation: none; opacity: .9; } html:has(.finops-dashboard)::after { animation: none; opacity: .6; } } /* ============================================================ ESTRUCTURA CENTRADA — REVERTIDA Se probo centrar todo (columna con max-width, hero apilado al medio, barrita en el flujo, KPI y encabezados centrados) y quedaba raro: el cockpit se lee como instrumental, y un eje unico centrado le saca la lectura de tablero. Se vuelve al layout original — copy a la izquierda, barrita en absolute arriba a la derecha, secciones a sangre. Lo que SI se conserva de esa ronda, porque eran pedidos aparte: la escala tipografica y el arreglo del corte en las KPI. ============================================================ */ /* ============================================================ AJUSTES DE LA SUBIDA DE ESCALA Al subir la escala tipografica, tres KPI cards empezaron a CORTAR texto. No era el texto suelto: era la fila "cifra + glosa", un flex justify-between donde el importe a 38px mas la glosa pedian 269px en una caja interna de 186. En una card centrada la solucion no es encoger la cifra sino apilar — el importe se queda con todo el ancho y la glosa baja. ============================================================ */ /* 1 · la fila cifra+glosa se apila: se va el corte. Alineada a la izquierda, no centrada — el centrado era parte del layout que se revirtio; lo que arregla el corte es apilar, no centrar. */ .finops-kpi .flex.items-baseline.justify-between { flex-direction: column !important; align-items: flex-start !important; gap: 5px; } /* 2 · y las secundarias ganan ancho. Projected pasa de span-2 sobre 5 pistas a una pista de 1.7fr sobre 4: sigue siendo la dominante (~1.7x) pero deja de robarle ancho a las otras tres. */ @media (min-width: 1024px) { .finops-kpi-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr !important; } .finops-kpi-grid > .finops-kpi--projected { grid-column: auto !important; } } /* 3 · piso de 11px en lo que quedaba debajo y no es instrumento denso. Quedan afuera a proposito: los