/* ============================================================ HRZN · LA ESCALA EN LAS PAGINAS hz-* ------------------------------------------------------------ Mismo sistema que hrzn-type.css, otra notacion. Esa hoja mapea utilidades de Tailwind (.text-xs, .text-[10px]...) porque el cockpit de FinOps las trae horneadas en el markup. Automations y Settings no usan ni una: tienen un sistema semantico propio (.hz-eyebrow, .hz-num, .hz-panel-title...) definido en horizon-pages.css. Aplicar aqui hrzn-type.css no habria hecho nada, por eso esto es una hoja aparte y no un scope extra. El diagnostico es el mismo que tenia FinOps: de 37 componentes medidos en pantalla, 17 estaban por debajo del piso de 14px. .hz-eyebrow 9.5px .hz-badge 9.5px .hz-strip 9.5px .hz-meta 11px .hz-kpi-foot 11px .hz-live 11px .hz-period 11px .hz-clock 11px .hz-viewers 11px .hz-reset 11px .hz-hero-signals 11px .hz-kpi-delta 12px .hz-state 12px .hz-btn 12px .hz-lede 12.5px .hz-card-title 13px cuerpo de pagina 13px La escala de destino es la del manual, la misma que aplicamos en FinOps: Section 22 · Card 18 · Body 16 · Dense 14 · Label 14 trackeado · Data 40 con tabular-nums. Va con la raiz repetida para ganarle a horizon-pages.css sin depender del orden de carga. ============================================================ */ .hz-page { --t-section: 22px; --t-card: 18px; --t-body: 16px; --t-dense: 14px; --t-label: 14px; --t-data: 40px; --tr-label: .14em; --tr-section: .06em; } /* ── 1 · CUERPO DE PAGINA ───────────────────────────────────── 13px era el tamanio base del que heredaba todo lo que no tenia regla propia. Sube a Body 16. */ .hz-page.hz-page { font-size: var(--t-body) !important; line-height: 1.55 !important; } /* ── 2 · TITULOS ────────────────────────────────────────────── .hz-panel-title encabeza un panel entero -> Section 22. .hz-card-title titula una tarjeta de KPI y va en versalitas: es una etiqueta, no una frase, asi que toma Label 14 trackeado, que es exactamente lo que miden las cabeceras de KPI en FinOps. */ .hz-page.hz-page .hz-panel-title { font-size: var(--t-section) !important; font-weight: 700 !important; letter-spacing: var(--tr-section) !important; line-height: 1.25 !important; } .hz-page.hz-page .hz-card-title { font-size: var(--t-label) !important; font-weight: 700 !important; letter-spacing: var(--tr-label) !important; } .hz-page.hz-page .hz-verdict { font-size: var(--t-card) !important; font-weight: 700 !important; line-height: 1.4 !important; } /* ── 3 · ETIQUETAS ──────────────────────────────────────────── Las tres iban a 9.5px. En versalitas trackeadas 14 se lee sin competir con nada; el tracking se conserva porque es la condicion que hace legible una mayuscula, no un adorno. */ .hz-page.hz-page .hz-eyebrow, .hz-page.hz-page .hz-badge, .hz-page.hz-page .hz-strip, .hz-page.hz-page .hz-strip * { font-size: var(--t-label) !important; font-weight: 700 !important; letter-spacing: var(--tr-label) !important; } /* ── 4 · PISO DE 14px ───────────────────────────────────────── Todo lo que se lee para decidir o para actuar. Ocho componentes venian a 11 y cuatro a 12. */ .hz-page.hz-page .hz-meta, .hz-page.hz-page .hz-kpi-foot, .hz-page.hz-page .hz-kpi-delta, .hz-page.hz-page .hz-state, .hz-page.hz-page .hz-btn, .hz-page.hz-page .hz-live, .hz-page.hz-page .hz-period, .hz-page.hz-page .hz-clock, .hz-page.hz-page .hz-viewers, .hz-page.hz-page .hz-reset, .hz-page.hz-page .hz-hero-signals, .hz-page.hz-page .hz-pill, .hz-page.hz-page .hz-iconbtn, .hz-page.hz-page .hz-formfield, .hz-page.hz-page .hz-field, .hz-page.hz-page .hz-field select, .hz-page.hz-page .hz-field input, .hz-page.hz-page .hz-switch { font-size: var(--t-dense) !important; } /* ── 5 · CUERPO ─────────────────────────────────────────────── El lede es la frase que explica el panel: es cuerpo, no nota al pie. Y el saludo del hero acompania. */ .hz-page.hz-page .hz-lede, .hz-page.hz-page .hz-hero-greeting, .hz-page.hz-page .hz-hero-headline, .hz-page.hz-page .hz-policy, .hz-page.hz-page .hz-row { font-size: var(--t-body) !important; line-height: 1.55 !important; } /* ── 6 · LA CIFRA ───────────────────────────────────────────── Data 40 con tabular-nums. El manual lo pide en TODO numero: sin ancho fijo de digito, una cifra que se actualiza baila. */ .hz-page.hz-page .hz-num { font-size: var(--t-data) !important; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.05 !important; } .hz-page.hz-page .hz-num, .hz-page.hz-page .hz-kpi-delta, .hz-page.hz-page .hz-meta, .hz-page.hz-page .hz-clock, .hz-page.hz-page table { font-variant-numeric: tabular-nums !important; } /* La pildora del KPI comparte fila flex con el titulo, y a 14px se salia 5px: titulo 97 + gap 10 + pildora 97 = 204 en 199. Baja el tracking a .08em, que es el mismo criterio que aplicamos a las cabeceras de la tabla en FinOps -- a 9.5px ese aire hacia falta para que la mayuscula se leyera, a 14 sobra y solo ensancha. El eyebrow y el strip conservan .14em: van solos en su linea y no compiten con nada. */ .hz-page.hz-page .hz-badge { letter-spacing: .08em !important; } /* ============================================================ LO QUE FALTABA PARA QUE SEA LA MISMA PAGINA ------------------------------------------------------------ Medido contra FinOps: superficies, bordes, radios, sombras y lienzo ya coincidian -- el re-anclaje de tokens los alineo solo. Lo que faltaba eran tres cosas concretas. ============================================================ */ /* ── A · EL ESTADO NECESITA SU PUNTO ────────────────────────── Los seis .hz-state iban en color y etiqueta, sin punto. El manual es explicito: "estado = punto + etiqueta + color, NUNCA color solo", y en FinOps todos lo llevan. Ademas del ADN es accesibilidad: quien no distingue el rojo del verde se queda solo con la palabra, y la palabra ya estaba -- lo que faltaba era que el color no fuera el unico portador para el resto. El punto toma currentColor, asi que sigue al estado sin tener que declarar un color por cada caso. */ .hz-page.hz-page .hz-state::before { content: ''; flex: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; } /* ── B · EL SISTEMA DE AYUDA ────────────────────────────────── FinOps tiene seis marcadores "?" con su burbuja; aqui habia cero. La estructura es la misma -- un div con el titulo y su lede al lado -- asi que el mecanismo porta tal cual: el "?" cuelga del titulo y la burbuja ES el propio parrafo, reposicionado. Solo se convierten los ledes que cuelgan de un .hz-panel-title. Hay otro lede bajo un .hz-eyebrow: ese se queda como prosa visible, porque no tendria ningun "?" que lo abriera. Tamanios y colores calcados de FinOps: 24x24 con glifo de 14 -- que es ademas objetivo de toque comodo -- y burbuja blanca con texto ink, no oscura. */ .hz-page.hz-page .hz-panel-head > div:has(> .hz-panel-title) { position: relative; } .hz-page.hz-page .hz-panel-title:has(+ .hz-lede)::after, .hz-page.hz-page .hz-eyebrow:has(+ .hz-lede)::after { content: "?"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 9px; vertical-align: 0; border-radius: 50%; background: rgba(10, 30, 70, .09); color: var(--h-ink-3, #27447E); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: help; transition: background .15s ease, color .15s ease; } .hz-page.hz-page .hz-panel-title:has(+ .hz-lede):hover::after, .hz-page.hz-page .hz-eyebrow:has(+ .hz-lede):hover::after { background: var(--h-action, #2450E4); color: #fff; } .hz-page.hz-page .hz-panel-head > div:has(> .hz-panel-title) > .hz-lede { position: absolute; z-index: 60; left: 0; top: calc(100% + 9px); width: max-content; max-width: 300px; margin: 0 !important; padding: 10px 13px; border-radius: 12px; background: #FFFFFF; color: var(--h-ink, #0A1E46); border: 1px solid var(--h-border, #DCE4F5); font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: left; box-shadow: 0 12px 30px -8px rgba(10, 30, 70, .34); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .hz-page.hz-page .hz-panel-head > div:has(.hz-panel-title:hover) > .hz-lede { opacity: 1; visibility: visible; transform: translateY(0); } /* ── C · EL RITMO ───────────────────────────────────────────── Deltas medidos contra FinOps. Son pocos pixeles cada uno, pero el espaciado es la mitad de lo que hace que dos pantallas se sientan de la misma familia. tarjeta KPI 18 -> 20 panel 22 -> 24 hero 22/18/26 -> 26/32/28 boton 36 -> 38 de alto El hero es el que mas se notaba: 18px de sangrado izquierdo contra los 32 de FinOps dejaban el titular pegado al canto. */ .hz-page.hz-page .hz-kpi { padding: 20px !important; } .hz-page.hz-page .hz-panel { padding: 24px !important; } .hz-page.hz-page .hz-hero { padding: 26px 32px 28px !important; } .hz-page.hz-page .hz-btn { min-height: 38px !important; padding: 8px 16px !important; } /* Y dos consecuencias del cambio de ritmo, encontradas al medir: 1) La burbuja se quedaba en 16px porque la regla de cuerpo del lede lleva !important y le ganaba. Ahora el tamanio de burbuja tambien lo lleva -- son dos estados del mismo elemento y el de tooltip manda cuando esta abierto. 2) "Live" se salia 21px. Su caja media 8px con la palabra dentro: es un item flex que se colapso cuando el sangrado del hero paso de 18 a 32 y estrecho la fila de utilidades. No era culpa del cuerpo de 14 -- a 11px habria pasado igual, solo que mas tarde. Los items de esa fila dejan de encogerse y la fila se permite envolver, que es lo que evita que vuelva a pasar en otro ancho. */ .hz-page.hz-page .hz-utility { flex-wrap: wrap !important; } .hz-page.hz-page .hz-viewers, .hz-page.hz-page .hz-live, .hz-page.hz-page .hz-period, .hz-page.hz-page .hz-clock { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; } /* Y el fallo que destapo el arreglo anterior. .hz-live es una pildora con relleno verde --h-ok y su texto iba en #24365C: 3.92:1, por debajo del 4.5. No era nuevo -- estaba mal desde antes --, pero con la caja colapsada a 8px la palabra caia FUERA del verde y la medicion no lo veia. Al hacer que la caja envuelva su texto, el fallo salio a la luz. El texto pasa a --h-ink: 4.74:1 sobre ese verde. Blanco no sirve, da 3.09:1 -- un verde de ese valor pide texto oscuro, igual que nos paso con Sky en el rail. */ .hz-page.hz-page .hz-live { color: var(--h-ink, #0A1E46) !important; } /* ============================================================ FINOPS COMO PLANTILLA · alineacion exacta ------------------------------------------------------------ Hasta aqui habia alineado contra la escala teorica del manual. Esto alinea contra los valores MEDIDOS en FinOps rol por rol, que es lo que se pidio: la plantilla es la pagina, no el papel. rol FinOps aqui estaba hero saludo 18 / 500 16 / 500 KPI etiqueta 14 / 700 / .14em igual KPI cifra 40 / 800 / -1px 40 / 800 / -0.8px KPI pie 14 / 600 14 / 700 titulo seccion 22 / 700 / 1.21 22 / 700 / 1.32 tira superior 14 / 500 / .14em 14 / 700 cabecera tabla 16 / 700 / .08em -- celda tabla 16 / 800 -- estado 14 / 700 + punto igual boton 14 / 700 igual */ .hz-page.hz-page .hz-hero-greeting { font-size: 18px !important; font-weight: 500 !important; } .hz-page.hz-page .hz-kpi-foot { font-weight: 600 !important; } .hz-page.hz-page .hz-panel-title { letter-spacing: .055em !important; } .hz-page.hz-page .hz-strip, .hz-page.hz-page .hz-strip * { font-weight: 500 !important; } .hz-page.hz-page .hz-num { letter-spacing: -.025em !important; } /* La tabla de Settings, con las medidas de la de FinOps: cabecera en versalitas de 16 trackeadas .08em y celda de 16. En FinOps la cabecera es MAS grande que la celda en peso y tracking, no en cuerpo -- las dos miden 16. */ .hz-page.hz-page table thead th { font-size: 16px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .hz-page.hz-page table tbody td { font-size: 16px !important; } /* Y el "?" pasa a colgar tambien del eyebrow, no solo del titulo de panel. Antes deje fuera los ledes que cuelgan de un eyebrow argumentando que no tendrian marcador que los abriera; la respuesta correcta era darles el suyo. Con :has(+ .hz-lede) el marcador aparece SOLO donde hay algo que abrir: los eyebrow que titulan una lista, como "Recent runs", se quedan limpios. */ .hz-page.hz-page div:has(> .hz-eyebrow + .hz-lede) { position: relative; } .hz-page.hz-page div:has(> .hz-eyebrow + .hz-lede) > .hz-lede { position: absolute; z-index: 60; left: 0; top: calc(100% + 9px); width: max-content; max-width: 300px; margin: 0 !important; padding: 10px 13px; border-radius: 12px; background: #FFFFFF; color: var(--h-ink, #0A1E46); border: 1px solid var(--h-border, #DCE4F5); font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: 0 12px 30px -8px rgba(10, 30, 70, .34); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .hz-page.hz-page div:has(> .hz-eyebrow:hover + .hz-lede) > .hz-lede { opacity: 1; visibility: visible; transform: translateY(0); } /* La primera columna es la identidad de la fila -- el nombre de la persona -- igual que la columna de fuente en la tabla de FinOps, que va en 800. Las demas celdas se quedan en 400: en FinOps la primera columna es lo mas pesado de la fila y el resto es dato. */ .hz-page.hz-page table tbody td:first-child { font-weight: 800 !important; } /* ============================================================ EL HERO Y LA TIRA, CALCADOS DE FINOPS ------------------------------------------------------------ Aqui estaba el grueso de "tenemos diferentes tamanios", y la causa es estructural: los elementos de dentro del hero NO tienen clase semantica -- son , y pelados dentro de .hz-utility, .hz-viewers y .hz-hero-signals. Mi hoja va por clase, asi que no los alcanzo y se quedaron en los tamanios originales: 9px, 9.5px y 11.67px. Medido FinOps contra Automations, doce deltas: rol FinOps estaba iniciales del avatar 11px 9px "N viewing now" 14 / 400 11.67 / 400 "Live" 14 / 700 14 / 900 periodo 16 / 700 14 / 900 fecha del reloj 14 / 700 / .13 9 / 700 / .09 "Last run 2h ago" 14 9.5 titular, 1er nivel 66.56 / 800 40 / 800 titular, 2do nivel 40.96 / 800 30 / 500 tira: ink ink-2 tira: 700 / .04em 500 / .14em tira: boton ink-3 ink-2 El titular es lo que mas cambia la cara: en FinOps son DOS niveles -- la cifra a 66.56 y el resto de la frase a 40.96, las dos en 800 -- y aqui era una cifra de 40 con la frase en 30/500. Esa jerarquia de dos tiempos es la firma del hero. */ /* ── la tira ────────────────────────────────────────────────── */ .hz-page.hz-page .hz-strip b { color: var(--h-ink, #0A1E46) !important; } .hz-page.hz-page .hz-strip small { font-weight: 700 !important; letter-spacing: .04em !important; color: var(--h-ink-3, #27447E) !important; } .hz-page.hz-page .hz-strip button { color: var(--h-ink-3, #27447E) !important; } /* ── el titular, en dos niveles ─────────────────────────────── */ .hz-page.hz-page .hz-hero .hz-num { font-size: 66.56px !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.02 !important; } .hz-page.hz-page .hz-hero-headline em, .hz-page.hz-page .hz-hero-headline > span:not(.hz-num) { font-size: 40.96px !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: -.025em !important; color: #1B3266 !important; line-height: 1.1 !important; } /* ── el resto del hero: piso de 14 en lo que no tiene clase ─── */ .hz-page.hz-page .hz-hero small { font-size: 14px !important; } .hz-page.hz-page .hz-viewers span { font-size: 11px !important; } .hz-page.hz-page .hz-live { font-weight: 700 !important; } .hz-page.hz-page .hz-period { font-size: 16px !important; font-weight: 700 !important; } .hz-page.hz-page .hz-clock small { letter-spacing: .13em !important; } /* Dos correcciones sobre lo anterior, las dos por medir: 1) "Live" y el periodo seguian en peso 900. Mis reglas apuntaban a .hz-live y .hz-period, pero el texto no esta ahi: vive en un sin clase dentro de cada uno, y el peso propio del hijo no lo cambia una regla sobre el padre. 2) El hero crecio a 283px contra los 232 de FinOps. La causa: los dos niveles del titular se APILABAN -- la cifra en una linea y la frase en la siguiente -- cuando en FinOps van en linea, uno detras del otro, como una sola frase con dos tamanios. Eso es lo que hace que el bloque respire igual. */ .hz-page.hz-page .hz-utility b, .hz-page.hz-page .hz-live b, .hz-page.hz-page .hz-period b { font-weight: 700 !important; } .hz-page.hz-page .hz-hero-headline { display: block !important; } .hz-page.hz-page .hz-hero-headline .hz-num, .hz-page.hz-page .hz-hero-headline em, .hz-page.hz-page .hz-hero-headline > span:not(.hz-num) { display: inline !important; } /* La pastilla del reloj vivia aqui. Se movio a hrzn-bar.css para que la barra sea un componente en un solo archivo: se enlaza en cada pagina que la quiera y no se enlaza en FinOps, que ya la tiene resuelta. Tenerla en dos hojas era pedir un conflicto. */ /* El titular pasa a dos lineas explicitas: el salto va despues de la primera palabra, de modo que la cifra y su verbo quedan juntos en la primera y el complemento cae entero en la segunda. $1,240 saved / this month by your rules. 13 sources / feeding this workspace. Es un
en el markup y no un ancho maximo a proposito: con un max-width el punto de corte cambia con el viewport y la frase se parte por donde toque. Asi el corte es el que se decidio. El interlineado del segundo nivel baja a 1.05 para que las dos lineas no se separen: a 40.96px un 1.1 dejaba un hueco que rompia la unidad de la frase. */ .hz-page.hz-page .hz-hero-headline { line-height: 1.05 !important; } .hz-page.hz-page .hz-hero-headline em, .hz-page.hz-page .hz-hero-headline > span:not(.hz-num) { line-height: 1.05 !important; } /* ============================================================ LA BARRA DE CONTROL, IGUALADA A FINOPS ------------------------------------------------------------ Medido pieza por pieza. La caja ya coincidia -- radio 16, borde #DCE4F5, padding 11/12, gap 10, grid -- pero dentro casi nada: pieza FinOps estaba titulo 14 / 700 / .14em 11.5 / 700 / .06em descripcion NO EXISTE 11 / 500 chip del icono #E5F0FF radio 11 #EAF0FB radio 10 botones 7D/30D/MTD 14 / 500 / .14em 9.5 / 700 / .10em etiqueta de campo 14 / 700 / .14em 9.5 / 700 / .10em select peso 750 #173B61 600 #0A1E46 reset peso 800 #3C5E82 700 #24365C La descripcion se elimina, no se convierte en "?": la barra de FinOps no tiene ninguna -- solo el titulo -- y aqui el texto ("Every rule below follows these filters") solo repetia lo que la propia barra ya demuestra. */ .hz-page.hz-page .hz-control-title small { display: none !important; } .hz-page.hz-page .hz-control-title strong { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--h-ink, #0A1E46) !important; } .hz-page.hz-page .hz-control-title > span { background: none !important; border-radius: 0 !important; } .hz-page.hz-page .hz-switchbar button { font-size: 14px !important; font-weight: 500 !important; letter-spacing: .14em !important; } .hz-page.hz-page .hz-field > span, .hz-page.hz-page .hz-formfield > span { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .14em !important; color: var(--h-ink-3, #27447E) !important; } .hz-page.hz-page .hz-field select, .hz-page.hz-page .hz-field input { font-weight: 750 !important; color: #173B61 !important; padding-right: 28px !important; } .hz-page.hz-page .hz-reset { font-weight: 800 !important; color: #3C5E82 !important; } /* El switch 7D/30D/MTD: los anchos ya coincidian (38/49/52) pero el alto no. Los botones median 36px contra los 28 de FinOps, y eso infla el track a 43 contra 36. La causa es el padding vertical: 7px arriba y abajo mas un cuerpo de 14 con su interlineado dan 36. FinOps llega a 28 porque el boton tiene alto fijo y el texto no arrastra interlineado. Se replica asi -- alto 28, line-height 1 y el padding solo en horizontal para no tocar los anchos, que ya estaban bien. Con eso el track cae en 28 + 3+3 de padding + 1+1 de borde = 36, exactamente el de FinOps. */ .hz-page.hz-page .hz-switchbar button { height: 28px !important; min-height: 28px !important; padding: 0 8px !important; line-height: 1 !important; } /* ============================================================ LA FILA DE REGLAS · tipografia contra la de FinOps ------------------------------------------------------------ Comparada con su equivalente en FinOps -- la fila de la tabla de budgets, que es el mismo componente: identidad, meta, estado y acciones -- SEIS piezas estaban bajo el piso de 14px. Mi hoja no las alcanzaba porque son clases propias de esta pagina (.rule-name, .k, .rule-runs, .rt) que no estaban en la lista. pieza FinOps estaba nombre de la fila 16 / 800 13 / 700 CAPS etiquetas When/Then 14 / 700 9.5 / 700 texto de la condicion 14 12.5 / 500 "2 runs - last 2h" 14 11 / 700 lineas del historial 14 12 / 400 hora del historial 14 11 / 700 Y el NOMBRE cambia de versalitas a caja normal, por el mismo argumento que aplicamos a los titulos de tarjeta en FinOps: son frases, no etiquetas. "Flag personal keys automatically" son 31 caracteres; en mayusculas se lee peor y no gana jerarquia -- la jerarquia se la da el cuerpo de 16 y el peso 800, como en la columna de identidad de la tabla de budgets. */ .hz-page.hz-page .rule-name { font-size: 16px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em !important; } .hz-page.hz-page .rule-logic .k { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .14em !important; } .hz-page.hz-page .rule-logic span:not(.k), .hz-page.hz-page .rule-runs, .hz-page.hz-page .rt, /* las lineas del historial: el contenedor es .run dentro de .rule-history-in, no los que supuse. Se comprueba mirando el DOM, no adivinando el nombre. */ .hz-page.hz-page .rule-history .run, .hz-page.hz-page .rule-history .run span { font-size: 14px !important; } /* CORRECCION. Al subir las etiquetas When/Then de 9.5 a 14px se quedaron pegadas al texto: su caja tiene ancho FIJO de 34px -- dimensionado para el cuerpo viejo -- y "WHEN" a 14px con .14em de tracking necesita 50. El texto se desbordaba de su columna y pisaba al siguiente span. La columna pasa a 54px, que es lo que piden las dos palabras a este cuerpo con su tracking, mas el aire de la ultima letra. Se mantiene fija y no automatica a proposito: es lo que alinea "When" y "Then" en una columna, y es la razon por la que el ancho estaba fijado. */ .hz-page.hz-page .rule-logic .k { width: 54px !important; flex: 0 0 54px !important; } /* Y la etiqueta no se apoyaba en la misma linea base que su texto: llevaba padding-top: 2px, un empujon calibrado para cuando media 9.5px y el texto 12.5 -- con cuerpos distintos hacia falta bajarla para que coincidieran. Ahora los dos miden 14 con el mismo interlineado (20.3px), asi que ese empujon la deja 2px por debajo. Se quita, y se pide alineacion por linea base en el contenedor: asi aguanta aunque manana cambie uno de los dos cuerpos. */ .hz-page.hz-page .rule-logic { align-items: baseline !important; } .hz-page.hz-page .rule-logic .k { padding-top: 0 !important; } /* El titulo del bloque de politica -- "What an automation can and cannot do" en Automations y "What this workspace can reach" en Settings -- igualado al de FinOps, "WHAT HAPPENS WHEN A BUDGET BREAKS". Medido alli: 16px / 800 / .10em de tracking / versalitas / #1B3266, con su "?" de 24px. Estaba como .hz-eyebrow a 14 / 700 / .14em en #3A4A66, o sea con el tratamiento de una etiqueta cualquiera. Se apunta con :has(+ .hz-lede) y no a .hz-eyebrow en general: hay siete eyebrow en Automations y los otros seis -- "Recent runs" y compania -- SI son etiquetas y se quedan como estan. El que titula un bloque con descripcion es el unico que hace de encabezado. El tracking baja de .14 a .10em por la misma razon que en FinOps: son 35 caracteres en mayusculas y a 16px con .14em se desparraman. */ .hz-page.hz-page .hz-eyebrow:has(+ .hz-lede) { font-size: 16px !important; font-weight: 800 !important; letter-spacing: .10em !important; color: #1B3266 !important; line-height: 1.35 !important; } /* ============================================================ EL AMBAR DE SETTINGS, SOLO AQUI ------------------------------------------------------------ El ambar de texto de la guia (--hz-warn-ink #A05F02) no pasa contraste sobre el lavado del hero: 4.14 contra un minimo de 4.5. El que pasa en las tres superficies donde esta pagina lo usa es #8A5202 -- mismo matiz 35.3, un escalon mas oscuro: blanco lavado del hero su tinte al 12% #A05F02 5.08 4.14 X 4.63 #8A5202 6.39 5.20 5.82 Se redefine la VARIABLE y no cada selector: horizon-pages.css pinta sus cinco estados warn con var(--hz-warn-ink) -- veredicto, delta de KPI, badge y estado de fila --, asi que con una linea siguen todos y no hay que perseguirlos uno a uno. Va bajo #settingsMain, el gancho propio de esta pagina. Automations carga esta misma hoja y NO lo recibe; FinOps conserva su #A05F02 en la tabla de budgets, el radar y Systems Load. Era el pedido: aplicarlo donde estamos trabajando, no en el sistema. */ #settingsMain { --hz-warn-ink: #8A5202; --h-warn-ink: #8A5202; } /* El veredicto del hero deja de depender del video. ------------------------------------------------------------ Mi medicion anterior era enganosa: dio 5.20:1 porque medi contra el color CSS del hero (#DCE9FB), pero detras hay un VIDEO. Los pixeles reales cambian con cada fotograma, asi que sobre ese fondo ningun color de texto es fiable -- y el ambar, siendo de tono medio, es el primero en caerse. Por eso no se leia. Se resuelve dandole su propio chip, que es lo que el markup de FinOps ya pretendia para el suyo: alli el span trae las clases bg-rose-50/90 y border-rose-200/90, aunque algo las neutralizo y el fondo computado quedo transparente. Aqui se hace de verdad. Medido sobre el chip, no sobre el cielo: texto #8A5202 sobre el chip #FEF3E2 ..... 5.82:1 el chip contra el cielo del hero ........ 1.12:1 El chip es casi invisible contra el cielo, y de ahi el borde: es quien lo delimita. Pero lo que importa es que el texto ya no negocia con el video -- su contraste es fijo pase lo que pase detras. El punto de estado se conserva: sigue siendo el ::before de 8px en --hz-warn el relleno, el chip no lo toca. Y display pasa a inline-flex porque en flex el span ocupaba todo el ancho del hero y el chip habria cruzado la pantalla. */ #settingsMain .hz-verdict.is-warn { /* inline-flex NO basta y no es un problema de especificidad: el padre .hz-hero-body es un contenedor flex, y por especificacion un hijo flex BLOCKIFICA su display -- inline-flex se convierte en flex y el chip se estiraba a los 720px de la columna. Lo que encoge un item flex a su contenido es align-self, no display. */ display: inline-flex !important; align-self: flex-start !important; width: fit-content !important; align-items: center !important; padding: 5px 13px !important; border-radius: 10px !important; background: #FEF3E2 !important; border: 1px solid #FCDDAA !important; } /* El nombre de la tabla de operadores. ------------------------------------------------------------ Mi regla anterior puso la CELDA en 16/800, pero el nombre no vive en la celda: vive en .op-name, que trae su propio tamanio y le gana. Medido, la fila estaba al reves -- .op-avatar "AG" 11px / 700 .op-name "Alan Gucovschi" 12.5px / 600 <- la identidad .hz-badge "ADMIN" 14px / 700 .hz-tabular "2h ago" 16px / 400 <- el dato .hz-btn "Manage" 14px / 700 -- el nombre, que es lo que identifica la fila, era la pieza mas chica de todas y quedaba 3.5px por debajo del "2h ago" de al lado. Es el mismo defecto que ya corregimos en la columna SOURCE de FinOps y en el nombre de regla de Automations. Pasa a 16/800, que es exactamente lo que mide la identidad de fila en la tabla de budgets de FinOps. Las iniciales del avatar se quedan en 11px a proposito: son insignia grafica, no texto, igual que en la pastilla del reloj. */ #settingsMain .op-name { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.01em !important; } /* Integraciones: tres tarjetas por fila y seis en total. ------------------------------------------------------------ La parrilla usaba repeat(auto-fit, minmax(280px, 1fr)), asi que el numero de columnas dependia del ancho: tres en pantallas medias y cuatro en anchas. Se fija en tres para que la muestra sea siempre la misma y las tarjetas tengan sitio. Con ese sitio se corrigen dos piezas que estaban por debajo del piso, medidas antes de tocar: .intg-name "ANTHROPIC" 13px / 700 / .06em / VERSALITAS .intg-meta "AI - $500/mo" 11px / 700 El nombre pasa a 16/800 en caja normal, que es lo que mide la identidad de fila en la tabla de budgets de FinOps -- y sale de versalitas por el mismo argumento de siempre: "Microsoft 365" es un nombre propio, no una etiqueta. La meta a 14/500, que es dato secundario. Y la insignia de iniciales crece a 38px para acompaniar al nombre, con las iniciales en 11px: son grafico, no texto. */ #settingsMain .intg-list { /* Antes: repeat(3, minmax(0, 1fr)) -- tres columnas clavadas a cualquier ancho. Como este mismo bloque agranda el nombre a 16/800, la meta a 14/500 y la ficha a 38px, abajo de cierto ancho la tarjeta caia por debajo de lo que su contenido necesita y el nombre se montaba encima de la pastilla de estado. El ancho natural de la tarjeta mas ancha es 323px, medido con los estilos de este mismo bloque ya aplicados: ficha 38 + nombre/meta + la pastilla "Disconnected", que no encoge (flex 0 0 auto, ver hrzn-type-system.css). El caso peor es Slack -- nombre corto, pero la pastilla mas larga de las tres. Ahora el piso de cada columna es el MAYOR entre 330px (los 323 mas aire) y un tercio del contenedor: mientras un tercio alcance entran exactamente 3 -- la intencion original -- y cuando no alcanza baja a 2 y despues a 1, en vez de comprimir. auto-fill y no auto-fit para que las pistas vacias se conserven: una fila incompleta no estira sus tarjetas, todas miden igual siempre. Medido: 3 columnas desde 1010px de contenedor, 2 desde 670, 1 abajo. */ grid-template-columns: repeat(auto-fill, minmax(max(330px, calc((100% - 20px) / 3)), 1fr)) !important; } #settingsMain .intg-name { font-size: 16px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em !important; } #settingsMain .intg-meta { font-size: 14px !important; font-weight: 500 !important; } #settingsMain .intg-mark { width: 38px !important; height: 38px !important; }