/* ===================================================================================================== tower.css — Reportería V4 idéntica al tower (Panorama › Cierre Mensual · Control de Forwarders · Gastos Locales) Fuente: /root/tower-parity/identico/spec-diseno.md §1.3–1.6 (16-09-2026), portado tal cual. Reglas: - TODO selector va bajo .tw (la página tower es un solo
dentro del área de contenido de Stint). - Los resets de elemento usan :where(.tw) (especificidad 0,0,1) para que las clases de componente les ganen siempre. - El tower no tiene hover, transiciones ni sombras exteriores: no agregar. - Cada clase equivale a UNA cadena de estilo inline del tower; lo que varía por fila (alturas, anchos, tonos) va inline. - Se carga en App.razor DESPUÉS de app.css y de ContainerTrack.Web.styles.css (gana en empates contra MudBlazor.min.css). ===================================================================================================== */ /* ===================== TOWER (Panorama) — común. Prefijo .tw ===================== */ /* tokens claros (= :root del tower) */ .tw{ --bg:#EEF2F3; --surface:#FFFFFF; --surface2:#F7F9FA; --ink:#0E2A3B; --ink2:#52646E; --ink3:#93A3AC; --line:rgba(14,42,59,0.10); --line2:rgba(14,42,59,0.06); --bar:rgba(14,42,59,0.11); --nav:#0E2A3B; --navInk:#EDF3F5; --navInk2:#8FA6B1; --accent:#15B3C7; --deep:#1C7293; --ok:#157F5F; --warn:#B5651D; --crit:#C0402E; --coral:#FF6B5B; } /* tokens oscuros (= [data-theme="dark"] del tower). html.tw-dark + auto: ver sección 4 (sin destello al cargar) */ .tw[data-theme="dark"], html.tw-dark .tw[data-theme="auto"]{ --bg:#071620; --surface:#0F2C3B; --surface2:#0B2331; --ink:#EDF3F5; --ink2:#A8BCC4; --ink3:#7C8D97; --line:rgba(255,255,255,0.11); --line2:rgba(255,255,255,0.06); --bar:rgba(255,255,255,0.13); --nav:#041016; --navInk:#EDF3F5; --navInk2:#8FA6B1; --accent:#15B3C7; --deep:#3E9BBF; --ok:#3FB78C; --warn:#E0913F; --crit:#F0705A; --coral:#FF6B5B; } /* reset = `*{margin:0;padding:0;box-sizing:border-box}` + `body{…}` del tower, acotados */ /* `border-style:none` repone el valor del UA que el tower conserva (su reset no toca el borde) y que el reset global de MudBlazor (`*{…border-width:0;border-style:solid}`) pisa también dentro de .tw: sin esto TODOS los elementos del árbol calculan `solid` en los cuatro lados (verif-emb-p1-r3 D2). Seguro por especificidad: `.tw *` vale (0,1,0) y va antes que todas las .tw-*, que usan la forma corta `border:1px solid …` y reponen el estilo. Mismo criterio con que ya se repone el UA en `:where(.tw) button{… outline:revert}`. */ .tw, .tw *, .tw *::before, .tw *::after{ margin:0; padding:0; box-sizing:border-box; border-style:none; } /* Barra de desplazamiento (verif-rk-p3-r2 D1). MudBlazor declara para TODA la app `::-webkit-scrollbar{width:8px;height:8px;z-index:1;cursor:crosshair}` + pulgar gris `border-radius:1px` y carril transparente, y eso alcanza también a los elementos con scroll de DENTRO de .tw (.tw-e-main, .tw-e-scroll, la barra lateral, .tw-f-cartera-list): el tower usa la barra NATIVA (15-16 px) y Stint reservaba 8, corriendo 7 px TODO el contenido del módulo (grilla de KPI 1.240 en vez de 1.233 px y tarjeta 302,50 en vez de 300,75). `scrollbar-color:auto` NO servía: `auto` es el valor inicial y no desactiva los pseudoelementos ::-webkit-*. Con un valor NO auto, Chromium ignora los ::-webkit-* y vuelve a dibujar la barra nativa; los dos colores son los medidos a la barra nativa de este Chromium (pulgar #8B8B8B, carril #FCFCFC), con lo que el recorte sale a 0 píxeles de diferencia contra la nativa —flechas y pulgar redondeado incluidos— y la caja reserva sus 17 px. Ojo: medir SIEMPRE headful (headless oculta las barras y da 0 px en los dos lados). */ .tw, .tw *{ scrollbar-width:auto; scrollbar-color:#8B8B8B #FCFCFC; } .tw{ font-family:'Hanken Grotesk',sans-serif; font-size:16px; font-weight:400; line-height:normal; letter-spacing:normal; text-transform:none; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--ink); /* El 1 px que suma el padding-top de .mud-main-content (líneas de :has más abajo) se descuenta acá: sin eso la portada, la única página del tower que cabe en el viewport, dibujaba 1 px de scroll (verif-ia-portada H1). Las páginas más altas que el viewport no cambian. */ display:flex; flex-direction:column; min-height:calc(100vh - var(--mud-appbar-height, 64px) - 1px); } .tw-bleed{ margin:-24px; } @media (max-width:960px){ .tw-bleed{ margin:-12px; } } :where(.tw) a{ color:var(--deep); text-decoration:none; } /* sin a:hover: el tower no lo muestra (hallazgo 3) */ :where(.tw) button, :where(.tw) select{ font:inherit; line-height:normal; letter-spacing:normal; text-transform:none; color:inherit; background:transparent; border:0; border-radius:0; margin:0; padding:0; box-shadow:none; display:inline-block; position:static; /* MudBlazor pone `button{position:relative}`: el tower deja el `static` del UA */ appearance:auto; -webkit-appearance:auto; outline-offset:0; /* Sin `min-width:0` ni `transition:none`: el tower no declara nada y se queda con el UA (min-width:auto — el chip fija su mínimo por contenido— y transition "all 0s"). Verificado contra el tower en verif-gastos-r1 D5. */ min-width:auto; } /* Lo que hay que deshacerle a MudBlazor: su reset global `button{align-items:center;justify-content:center;outline:0;vertical-align:middle;user-select:none}` NO existe en el tower, que se queda con el UA (normal/normal, outline medium+none, baseline y texto seleccionable). Va SOLO en button: el UA sí centra el contenido del : el texto va pegado a la izquierda, como el tower */ /* Sin barrido `:where(.tw) svg{overflow:visible}`: el tower NO lo tiene y deja a los con el `hidden` del navegador (svg:not(:root)). Las dos sparklines que lo necesitan lo declaran en su clase (.tw-mini-svg, .tw-f-vol-svg), igual que el tower, que lo pone inline en esos dos y en ningún otro. Así el del mapa y el logo .tw-e-logo recortan como en el tower (verif-rk-p3-r1 D1). */ /* ---- franja superior (nav) ---- */ .tw-nav{ background:var(--nav); color:var(--navInk); padding:10px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .tw-nav-brand{ display:flex; align-items:center; gap:9px; color:var(--navInk); } .tw-nav-brand-word{ font-family:'Archivo',sans-serif; font-weight:900; font-size:17px; letter-spacing:-0.02em; } .tw-nav-brand-dot{ color:#FF6B5B; } .tw-nav-back{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--navInk2); padding:4px 9px 4px 7px; border-radius:6px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); white-space:nowrap; } .tw-nav-back-arrow{ font-size:13px; line-height:1; } .tw-nav-slash{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--navInk2); } .tw-nav-title{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#FFFFFF; font-weight:600; white-space:nowrap; } .tw-nav-vsep{ width:1px; height:16px; background:rgba(255,255,255,0.18); } .tw-spacer{ flex:1; min-width:8px; } .tw-nav-note{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em; color:var(--navInk2); } .tw-nav-select{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; padding:5px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:var(--navInk2); cursor:pointer; max-width:150px; /* el reset de arriba centra button Y select; el UA solo centra los button, y el select del tower hereda `start` */ text-align:start; } .tw-nav-select option{ color:#0E2A3B; } .tw-nav-theme{ font-family:'JetBrains Mono',monospace; cursor:pointer; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:var(--navInk2); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:5px 9px; border-radius:6px; white-space:nowrap; } /* ---- barra de chips ---- */ .tw-bar{ background:var(--surface); border-bottom:1px solid var(--line); padding:9px 18px; display:flex; flex-direction:column; gap:8px; } .tw-bar-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tw-bar-row--6{ gap:6px; } /* Cierre, segunda fila */ .tw-bar-hr{ height:1px; background:var(--line2); } .tw-bar-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3); } .tw-bar-label--mr{ margin-right:2px; } /* Cierre, segunda fila */ .tw-bar-vsep{ width:1px; height:20px; background:var(--line2); } .tw-bar-vsep--m{ margin:0 4px; } /* Cierre fila 2 y Forwarders; Gastos SIN margen */ .tw-bar-note{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink3); } /* chip A (Cierre y Forwarders) = chip() del JSX */ .tw-chip{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.03em; padding:5px 10px; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--ink2); font-weight:400; } .tw-chip.is-on{ border-color:var(--nav); background:var(--nav); color:#FFFFFF; font-weight:600; } /* chip de mes (Cierre): mismo chip con extra */ .tw-chip--mes{ padding:4px 8px; text-transform:uppercase; font-size:10px; } .tw-chip--mes.is-off{ opacity:0.35; cursor:default; } /* chip B (Gastos) = chip(on) de Gastos: mayúsculas, radio 7, borde transparente cuando está activo, texto navInk */ .tw-chip--g{ font-family:'JetBrains Mono',monospace; cursor:pointer; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; padding:4px 10px; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--ink2); font-weight:400; } .tw-chip--g.is-on{ border-color:transparent; background:var(--nav); color:var(--navInk); font-weight:600; } /* ---- contenedor principal ---- */ .tw-main{ padding:16px 18px 30px; display:flex; flex-direction:column; gap:14px; max-width:1360px; width:100%; margin:0 auto; } .tw-main--1280{ max-width:1280px; } /* Gastos */ /* ---- tipografía reutilizada ---- */ .tw-mono{ font-family:'JetBrains Mono',monospace; } .tw-h14{ font-family:'Archivo',sans-serif; font-weight:800; font-size:14px; } /* títulos de panel */ .tw-eb-9-10{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); } /* cabeceras de tabla */ .tw-eb-9-12{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink3); } /* tiles / celdas Gastos */ .tw-eb-95-12{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink3); } /* minis, matriz Gastos, score label */ .tw-eb-95-13{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } /* rótulo KPI, secciones Fwd/Gastos */ .tw-eb-95-14{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3); } /* = .tw-bar-label */ .tw-eb-10-14{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3); } /* "cierre del área logística" */ .tw-eb-10-08{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink3); } /* scope del forwarder */ .tw-note10{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink3); } .tw-note95{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink3); } .tw-note9{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--ink3); } .tw-note85{ font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--ink3); } .tw-r{ text-align:right; } .tw-pretty{ text-wrap:pretty; } .tw-hr{ height:1px; background:var(--line2); } .tw-titlebox{ display:flex; flex-direction:column; gap:2px; } /* delta = dStyle(v, invert, size): color por estado, tamaño por variante */ .tw-delta{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; white-space:nowrap; text-align:right; color:var(--ink3); } .tw-delta--95{ font-size:9.5px; } .tw-delta--11{ font-size:11px; } .tw-delta.is-up{ color:var(--ok); } .tw-delta.is-down{ color:var(--crit); } .tw-delta.is-flat{ color:var(--ink3); } /* paneles y tarjetas */ .tw-panel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; } .tw-panel--clip{ overflow:hidden; min-width:0; display:flex; flex-direction:column; } .tw-panel--ov{ overflow:hidden; } /* tabla de cierre: solo recorte, sin flex */ .tw-panel-head{ padding:11px 14px; border-bottom:1px solid var(--line2); display:flex; flex-direction:column; gap:2px; } .tw-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 13px; display:flex; flex-direction:column; gap:4px; min-width:0; } .tw-kpi--5{ gap:5px; } /* Forwarders y Gastos */ .tw-kpi-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } .tw-kpi-note-h{ font-size:11.5px; color:var(--ink3); text-wrap:pretty; } /* nota Hanken de KPI Fwd/Gastos */ /* barritas en celda (track + fill). El ancho del fill va inline: style="width:36%" */ .tw-track{ flex:1; height:5px; border-radius:3px; background:var(--bar); overflow:hidden; } .tw-fill{ height:100%; border-radius:3px; background:var(--deep); } .tw-fill--accent{ background:var(--accent); } .tw-fill--ink2{ background:var(--ink2); } .tw-share{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink3); white-space:nowrap; } .tw-barrow{ display:flex; align-items:center; gap:6px; } .tw-num{ font-family:'JetBrains Mono',monospace; font-size:11px; text-align:right; white-space:nowrap; } .tw-num--b{ font-weight:600; } /* tag de modalidad (Cierre › Forwarders del mes) */ .tw-tag{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.08em; text-transform:uppercase; padding:2px 5px; border-radius:4px; } .tw-tag--aereo{ background:rgba(28,114,147,0.12); color:var(--deep); } .tw-tag--mar{ background:rgba(21,179,199,0.14); color:var(--accent); } /* util */ .tw-scroll-x{ overflow-x:auto; } /* ÚNICO selector fuera de .tw (y hace falta): la barra superior de Stint mide 64 px MÁS 1 px de border-bottom rgba(255,255,255,0.08), pero `.mud-main-content` solo reserva padding-top:64px, así que ese borde se pinta sobre la primera fila de .tw-nav y la deja en rgb(32,58,74) donde el tower tiene #0E2A3B desde el primer píxel (verif-forwarders-r2.md D2). Aplica solo cuando la página es un tower. Se copian las TRES declaraciones de padding-top de MudBlazor (base, landscape angosto y ≥600px) sumándoles 1 px, porque la barra se achica a 56/48 px bajo 600 px: un 65px plano dejaría ahí un hueco bajo la barra. */ .mud-main-content:has(> .ct-page-wrapper > .tw[data-theme]){ padding-top:calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px)/8 + 1px); } @media (min-width:0px) and (orientation:landscape){ .mud-main-content:has(> .ct-page-wrapper > .tw[data-theme]){ padding-top:calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px)/4 + 1px); } } @media (min-width:600px){ .mud-main-content:has(> .ct-page-wrapper > .tw[data-theme]){ padding-top:calc(var(--mud-appbar-height, 64px) + 1px); } /* = 65px en el ancho de la verificación */ } /* ===== Cierre Mensual ===== */ .tw-c-title{ display:flex; flex-direction:column; gap:6px; } .tw-c-titulo{ font-family:'Archivo',sans-serif; font-weight:900; font-size:26px; letter-spacing:-0.02em; line-height:1; } .tw-c-resumen{ font-size:12.5px; color:var(--ink2); text-wrap:pretty; max-width:720px; line-height:1.5; } .tw-c-top{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:14px; align-items:stretch; } .tw-c-kpis-wrap{ display:flex; flex-direction:column; min-width:0; } .tw-c-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; flex:1; } .tw-c-kpi-value{ font-family:'Archivo',sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em; line-height:1.05; } .tw-c-kpi-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .tw-c-kpi-hr{ height:1px; background:var(--line2); margin-top:2px; } .tw-c-kpi-acum{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; } .tw-c-kpi-acum-label{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); white-space:nowrap; flex:none; } /* 800 a propósito, NO 700 (verif-cierre-r2 D6): el tower pide font-weight:700 pero su solo carga Archivo 400;600;800;900, así que el emparejamiento CSS sube a la cara 800 y ese es el trazo que se ve. Stint SÍ carga la 700 (la usa su cáscara: H1..H6 de MudBlazor en MainLayout.razor:881-886, .ct-brand-word, .ct-stat-value y .ct-auth-card h1 en app.css), por eso aquí hay que pedir 800 para dibujar lo mismo. No sacar la 700 del de Components/App.razor: engordaría todos esos títulos de la aplicación. */ .tw-c-kpi-acum-value{ font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; letter-spacing:-0.01em; white-space:nowrap; } .tw-lectura{ background:var(--nav); color:var(--navInk); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; overflow-y:auto; } .tw-lectura-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .tw-lectura-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--navInk2); } .tw-lectura-note{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--navInk2); } .tw-lectura-item{ display:flex; gap:9px; align-items:flex-start; } .tw-lectura-dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none; margin-top:6px; } .tw-lectura-text{ font-size:12.5px; line-height:1.5; text-wrap:pretty; } .tw-c-mid{ display:grid; grid-template-columns:minmax(380px,1.6fr) minmax(300px,1fr); gap:14px; align-items:stretch; } .tw-c-chart{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; } .tw-c-chart-head{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; } .tw-legend{ display:flex; align-items:center; gap:10px; } .tw-legend-item{ display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink2); } .tw-legend-sw{ width:9px; height:9px; border-radius:2px; } .tw-legend-sw--deep{ background:var(--deep); } .tw-legend-sw--accent{ background:var(--accent); } .tw-cols{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end; height:190px; padding-top:14px; } .tw-col{ display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; height:100%; cursor:pointer; gap:1px; opacity:0.62; border-radius:4px; } .tw-col.is-solo{ opacity:1; } /* modalidad ≠ Todas: todas las columnas al 100 % */ .tw-col.is-on{ opacity:1; outline:2px solid var(--coral); outline-offset:3px; } .tw-col-top{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--ink3); font-weight:400; text-align:center; margin-bottom:3px; white-space:nowrap; } .tw-col.is-on .tw-col-top{ color:var(--ink); font-weight:600; } .tw-col-mar{ background:var(--accent); border-radius:3px 3px 0 0; } /* height inline */ .tw-col-air{ background:var(--deep); border-radius:0; } /* height inline */ .tw-col-air.is-top{ border-radius:3px 3px 0 0; } /* cuando el mes no tiene marítimo */ .tw-cols-labels{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; } .tw-col-lbl{ font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:uppercase; text-align:center; cursor:pointer; color:var(--ink3); font-weight:400; } .tw-col-lbl.is-on{ color:var(--ink); font-weight:600; } .tw-minis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .tw-mini{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 13px; display:flex; flex-direction:column; gap:6px; min-width:0; } .tw-mini-row{ display:flex; align-items:baseline; gap:6px; } .tw-mini-value{ font-family:'Archivo',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.02em; } .tw-mini-svg{ width:100%; height:44px; display:block; overflow:visible; } .tw-c-tables{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; align-items:stretch; container-type:inline-size; } .tw-grid-fwd{ display:grid; grid-template-columns:1fr 62px 62px 70px; gap:8px; } .tw-grid-dest{ display:grid; grid-template-columns:1fr 62px 58px 58px; gap:8px; } .tw-grid-cia{ display:grid; grid-template-columns:1fr 62px 58px; gap:8px; } .tw-thead{ padding:6px 14px; border-bottom:1px solid var(--line2); } .tw-trow{ padding:8px 14px; border-bottom:1px solid var(--line2); align-items:center; } .tw-trow--9{ padding:9px 14px; } /* filas de Forwarders del mes */ .tw-cell-name{ display:flex; flex-direction:column; gap:4px; min-width:0; } .tw-cell-name-row{ display:flex; align-items:center; gap:6px; } .tw-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-name--700{ font-weight:700; } /* nombre del forwarder */ /* ciaSpan: la tercera tarjeta ocupa toda la fila cuando el ancho interior (iw) está entre 614 y 927 px */ @container (min-width:614px) and (max-width:927.99px){ .tw-c-cia{ grid-column:1 / -1; } } .tw-c-tabla-head{ padding:11px 14px; border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .tw-c-tabla-min{ min-width:760px; } .tw-grid-tabla{ display:grid; grid-template-columns:70px repeat(7,minmax(0,1fr)); gap:8px; } .tw-c-tabla-th{ padding:7px 14px; border-bottom:1px solid var(--line2); background:var(--surface2); } .tw-c-tabla-tr{ padding:8px 14px; border-bottom:1px solid var(--line2); cursor:pointer; align-items:center; } .tw-c-tabla-tr.is-on{ background:rgba(255,107,91,0.08); box-shadow:inset 3px 0 0 var(--coral); } .tw-c-tabla-tot{ padding:9px 14px; background:var(--surface2); border-top:1px solid var(--line); } .tw-c-td{ font-family:'JetBrains Mono',monospace; font-size:11px; } .tw-c-foot{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink3); text-wrap:pretty; line-height:1.5; } /* ===== Control de Forwarders ===== */ /* 600 a propósito, NO 700, en TODO el mono en negrita de este bloque (verif-emb-p1-r1 D2): el tower de Forwarders pide font-weight:700 en sus números —mono(20,700) del KPI, mono(13,700) de la cartera, mono(30,700) del score, mono(17,700) de los tiles, mono(10.5,700) y mono(12,700) de las brechas, y la participación ≥ 50 %— pero su carga JetBrains+Mono:wght@400;500;600 (SIN 700), así que el emparejamiento CSS baja a la cara 600 y ese es el trazo que se ve. Embarques sí usa la 700 de verdad (las .tw-e-*, que quedan en 700) y se trae esa cara él mismo, en el de su página: por eso cada regla pide acá el peso que el tower de SU página termina resolviendo, igual que .tw-c-kpi-acum-value con Archivo 700→800. Escrito así, estas siete reglas dibujan lo mismo con la cara 700 cargada o sin ella (hoy es un no-op; deja de serlo si alguien sube la 700 al global o al volver de Embarques). Cierre y Gastos no tienen mono en 700 (su tampoco carga la cara). */ .tw-f-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; } .tw-f-kpi-val{ font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; white-space:nowrap; letter-spacing:-0.01em; } .tw-f-kpi-val.is-warn{ color:var(--warn); } .tw-f-kpi-val.is-ok{ color:var(--ok); } .tw-f-kpi-val.is-crit{ color:var(--crit); } .tw-f-body{ display:grid; grid-template-columns:minmax(300px,0.9fr) minmax(420px,2fr); gap:12px; align-items:stretch; } .tw-f-cartera{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:0; } .tw-f-cartera-head{ padding:11px 14px; border-bottom:1px solid var(--line2); display:flex; flex-direction:column; gap:2px; flex:none; } .tw-f-cartera-list{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; } .tw-f-row{ display:grid; grid-template-columns:20px minmax(0,1fr) 74px; gap:9px; align-items:center; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--line2); } .tw-f-row.is-on{ background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent); } .tw-f-rank{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; color:var(--ink3); } .tw-f-namebox{ display:flex; flex-direction:column; gap:4px; min-width:0; } .tw-f-namerow{ display:flex; align-items:center; gap:7px; min-width:0; } .tw-f-name{ font-size:13px; font-weight:700; line-height:1.2; text-wrap:pretty; } .tw-f-tag{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; padding:2px 5px; border-radius:4px; background:rgba(14,42,59,0.05); display:inline-block; } .tw-f-tag.is-brecha{ color:var(--crit); } .tw-f-tag.is-sincomp{ color:var(--ink2); } .tw-f-tag.is-incompleto{ color:var(--warn); } .tw-f-tag.is-empty{ display:none; color:var(--warn); } .tw-f-barrow{ display:flex; align-items:center; gap:7px; } .tw-f-track6{ flex:1; height:6px; border-radius:3px; background:var(--bar); overflow:hidden; min-width:36px; } .tw-f-fill6{ height:100%; border-radius:3px; } /* background = band(score) y width inline */ .tw-f-meta{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink3); white-space:nowrap; } .tw-f-valbox{ display:flex; flex-direction:column; gap:1px; align-items:flex-end; } .tw-f-val{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; white-space:nowrap; text-align:right; color:var(--ink); } .tw-f-val.is-crit{ color:var(--crit); } /* orden "brecha" con savPct ≥ 1; orden "índice": color band(score) inline */ .tw-f-valunit{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--ink3); } .tw-f-right{ display:flex; flex-direction:column; gap:12px; min-width:0; } .tw-f-detail{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 16px; display:flex; flex-direction:column; gap:13px; flex:1; } .tw-f-detail-head{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; } .tw-f-detail-id{ display:flex; flex-direction:column; gap:4px; min-width:0; } .tw-f-detail-name{ font-family:'Archivo',sans-serif; font-weight:900; font-size:21px; letter-spacing:-0.02em; } .tw-f-scorebox{ display:flex; flex-direction:column; gap:3px; align-items:flex-end; } .tw-f-score{ font-family:'JetBrains Mono',monospace; font-size:30px; font-weight:600; line-height:1; } /* color = band(score) inline */ .tw-f-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:9px; } .tw-f-tile{ background:var(--surface2); border:1px solid var(--line2); border-radius:9px; padding:10px 11px; display:flex; flex-direction:column; gap:3px; min-width:0; } .tw-f-tile-val{ font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:600; } .tw-f-tile-val.is-crit{ color:var(--crit); } .tw-f-tile-val.is-warn{ color:var(--warn); } .tw-f-tile-val.is-ok{ color:var(--ok); } .tw-f-sec{ display:flex; flex-direction:column; gap:7px; } .tw-f-sec-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .tw-f-months{ display:flex; align-items:flex-end; gap:5px; height:84px; } .tw-f-month{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; } .tw-f-month-bar{ width:100%; border-radius:3px 3px 0 0; } /* height y background inline */ .tw-f-vol{ position:relative; height:96px; } .tw-f-vol-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .tw-f-vol-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); } .tw-f-vol-cell{ display:flex; flex-direction:column; justify-content:space-between; align-items:center; min-width:0; } .tw-f-vol-share{ font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:400; color:var(--ink2); } .tw-f-vol-share.is-big{ font-weight:600; } /* participación ≥ 50 % */ .tw-f-vol-share.is-null{ color:var(--ink3); } .tw-f-legend{ display:flex; gap:14px; flex-wrap:wrap; } .tw-f-legend-line{ width:14px; height:2px; border-radius:2px; background:var(--accent); } .tw-f-legend-dash{ width:14px; height:0; border-top:1px dashed var(--ink3); } .tw-f-cards3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; align-items:stretch; } .tw-f-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:11px; min-width:0; } .tw-f-card--10{ gap:10px; } /* destinos */ .tw-f-grow{ flex:1; } .tw-f-dest-grid{ display:grid; grid-template-columns:40px minmax(0,1fr) 50px 52px; gap:8px; } .tw-f-dest-row{ align-items:center; } .tw-f-dest-name{ font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-f-dest-bar{ display:flex; align-items:center; gap:6px; min-width:0; } .tw-f-track7{ flex:1; height:7px; border-radius:4px; background:var(--bar); overflow:hidden; min-width:24px; } .tw-f-fill7{ height:100%; border-radius:4px; background:var(--deep); } /* width inline; navieras/aerolíneas ≥ 40 % → background:var(--warn) inline */ .tw-f-dest-tar{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; text-align:right; } .tw-f-gap{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; text-align:right; color:var(--ink3); } .tw-f-gap.is-ok{ color:var(--ok); } .tw-f-gap.is-crit{ color:var(--crit); } .tw-f-gap.is-warn{ color:var(--warn); } .tw-f-cia-grid{ display:grid; grid-template-columns:minmax(64px,1fr) 1fr 44px; gap:8px; align-items:center; } .tw-f-cia-track{ height:7px; border-radius:4px; background:var(--bar); overflow:hidden; } .tw-f-cia-share{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink3); text-align:right; } .tw-f-note11{ font-size:11px; color:var(--ink3); text-wrap:pretty; } .tw-f-alert{ border-left:2px solid var(--warn); padding-left:10px; display:flex; flex-direction:column; gap:1px; } /* border-left-color inline: crit | warn | deep */ .tw-f-alert-title{ font-size:12.5px; font-weight:700; } .tw-f-alert-detail{ font-size:11.5px; color:var(--ink2); text-wrap:pretty; } .tw-f-noalert{ font-size:12px; color:var(--ink3); } .tw-f-lanes{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:11px; } .tw-f-lanes-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .tw-f-lane-grid{ display:grid; grid-template-columns:minmax(52px,auto) minmax(0,1.6fr) minmax(0,1.6fr) 56px 72px; gap:10px; } .tw-f-lane{ align-items:center; padding:9px 8px; border-radius:8px; border:1px solid transparent; background:transparent; } .tw-f-lane.is-on{ border-color:var(--line); background:var(--surface2); } .tw-f-lane-col{ display:flex; flex-direction:column; gap:1px; } .tw-f-lane-col--min{ min-width:0; } .tw-f-lane-dest{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; } .tw-f-lane-best{ font-size:12px; font-weight:700; color:var(--ok); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-f-lane-worst{ font-size:12px; font-weight:700; color:var(--crit); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-f-lane-cias{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink3); text-wrap:pretty; } .tw-f-lane-gap{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; text-align:right; color:var(--warn); } .tw-f-lane-gap.is-crit{ color:var(--crit); } /* brecha ≥ 8 % */ .tw-f-lane-sav{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; text-align:right; } .tw-f-foot{ display:flex; flex-direction:column; gap:4px; padding:0 2px; } /* ===== Gastos Locales ===== */ .tw-g-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; } .tw-g-kpi-val{ font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:600; } .tw-g-kpi-val.is-crit{ color:var(--crit); } .tw-g-kpi-val.is-muted{ color:var(--ink3); } .tw-g-rank-title{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px; } .tw-g-h17{ font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.01em; } .tw-g-sub125{ font-size:12.5px; color:var(--ink2); } .tw-g-list{ display:flex; flex-direction:column; gap:9px; } .tw-g-item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .tw-g-row{ display:grid; grid-template-columns:38px minmax(140px,1.1fr) minmax(180px,2fr) repeat(3,minmax(92px,0.8fr)) 78px; gap:12px; align-items:center; padding:13px 15px; cursor:pointer; } .tw-g-rank{ font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:600; color:var(--ink3); } .tw-g-rank.is-ok{ color:var(--ok); } /* el/los mejores (gapPct < 1) */ .tw-g-namebox{ display:flex; flex-direction:column; gap:3px; min-width:0; } .tw-g-name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; } /* el tower pide 700 y resuelve a la 800 (no carga Archivo 700): mismo caso que .tw-c-kpi-acum-value */ .tw-g-barbox{ display:flex; flex-direction:column; gap:5px; min-width:0; } .tw-g-track9{ height:9px; border-radius:5px; background:var(--bar); overflow:hidden; } .tw-g-fill9{ height:100%; border-radius:5px; } /* width y background (tono) inline */ .tw-g-cell{ display:flex; flex-direction:column; gap:2px; } .tw-g-cell-val{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; } /* tarifa y "vs mejor": color tono inline; gasto: sin color */ .tw-g-caret{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink3); text-align:right; } .tw-g-detail{ border-top:1px solid var(--line2); background:var(--surface2); padding:14px 15px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .tw-g-col{ display:flex; flex-direction:column; gap:8px; min-width:0; } .tw-g-col--10{ gap:10px; } .tw-g-group{ display:flex; flex-direction:column; gap:6px; } .tw-g-svc{ display:grid; grid-template-columns:minmax(96px,1.4fr) 1fr 56px 40px; gap:8px; align-items:center; padding-right:22px; } .tw-g-svc-name{ font-size:12px; text-transform:capitalize; font-weight:600; color:var(--ink); } .tw-g-svc-name.is-sel{ font-weight:800; color:var(--deep); } .tw-g-track7{ height:7px; border-radius:4px; background:var(--bar); overflow:hidden; } .tw-g-fill7{ height:100%; border-radius:4px; background:var(--deep); } /* width inline */ .tw-g-fill7.is-sel{ background:var(--accent); } .tw-g-svc-val{ font-family:'JetBrains Mono',monospace; font-size:11px; text-align:right; } .tw-g-svc-share{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink3); text-align:right; } .tw-g-months{ display:flex; align-items:flex-end; gap:4px; height:64px; border-bottom:1px solid var(--line); } .tw-g-month{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; } .tw-g-month-bar{ width:100%; border-radius:3px 3px 0 0; background:var(--deep); } /* height inline; sin dato: background:var(--line2) */ .tw-g-month-bar.is-empty{ background:var(--line2); } .tw-g-month-lbls{ display:flex; gap:4px; } .tw-g-month-lbl{ flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--ink3); } .tw-g-airline{ display:flex; justify-content:space-between; gap:8px; } .tw-g-airline-name{ font-size:12px; color:var(--ink2); text-transform:capitalize; } .tw-g-airline-val{ font-family:'JetBrains Mono',monospace; font-size:11px; } .tw-g-chips{ display:flex; flex-wrap:wrap; gap:5px; } .tw-g-chip{ font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:3px 7px; border-radius:6px; background:var(--surface); border:1px solid var(--line); color:var(--ink2); } .tw-g-matrix{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:11px; } .tw-g-matrix-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .tw-g-h15{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; } .tw-g-legend{ font-size:12px; color:var(--ink2); text-wrap:pretty; } .tw-g-matrix-body{ min-width:520px; display:flex; flex-direction:column; gap:1px; } .tw-g-mrow{ display:grid; gap:10px; align-items:center; padding:8px 10px; } /* grid-template-columns inline: minmax(130px,1.4fr) repeat(N,minmax(80px,1fr)) 84px */ .tw-g-mrow--head{ border-bottom:1px solid var(--line); } .tw-g-mrow--body{ background:transparent; border-radius:8px; } .tw-g-mrow--odd{ background:var(--surface2); } .tw-g-mname{ font-size:12.5px; font-weight:600; text-transform:capitalize; } .tw-g-mcell{ font-family:'JetBrains Mono',monospace; font-size:12.5px; text-align:right; font-weight:400; color:var(--ink); } .tw-g-mcell.is-min{ font-weight:600; color:var(--ok); } .tw-g-mcell.is-max{ color:var(--crit); } .tw-g-mcell.is-muted{ color:var(--ink3); } .tw-g-mspread{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink3); text-align:right; } .tw-g-bottom{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; } .tw-g-ahorro{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:6px; } .tw-g-ahorro-val{ font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:600; color:var(--ok); } .tw-g-nota125{ font-size:12.5px; color:var(--ink2); text-wrap:pretty; } .tw-g-cob{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:7px; } .tw-g-cob-chip{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:4px 9px; border-radius:7px; background:var(--surface2); border:1px dashed var(--line); color:var(--ink3); } .tw-g-cob-text{ font-size:12px; color:var(--ink2); text-wrap:pretty; } .tw-g-foot{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink3); text-wrap:pretty; } /* ---- extras de integración Stint (no existen en el tower, no cambian el render) ---- */ /* Etiqueta del botón de tema: acá NO hay nada que declarar. El tower pone una sola palabra dentro del , uno con display:none), que agregaban un nodo que el tower no tiene y dejaban el textContent en «oscuroclaro». El rótulo lo escribe TwNav con el tema resuelto y, mientras está en "auto" (prerender con html.tw-dark), lo corrige twTheme.rotular() de /js/tower.js antes de la primera pintura. No volver a meter dos . */ /* Ancla de DevTags (#458): si alguna vez se usa DevSectionTag dentro de .tw, que no consuma un hueco de gap en flex/grid. */ .tw .ct-devtag-anchor{ position:absolute; } /* ===================================================================================================== EMBARQUES (Panorama › /panorama/embarques) — bloque ADITIVO (spec-embarques-1 §11, spec-embarques-2, -3). Nada de acá modifica las reglas de arriba: las tres páginas ya verificadas (Cierre, Forwarders, Gastos) siguen igual. Prefijo .tw-e-* (como .tw-c-* Cierre, .tw-f-* Forwarders, .tw-g-* Gastos). Los modificadores que reabren una propiedad de una clase común (.tw-nav--emb, .tw-e-kpi--ops, .tw-e-kpi--fact) van DESPUÉS a propósito: misma especificidad, gana el último. Hover: en Embarques el tower tiene dos hovers VISIBLES —fila de la lista y fila de mercado—, porque su style-hover se compila a `.scpN:hover{background:var(--surface2)}` y en esas filas el `background` NO va inline. Donde el inline sí trae la propiedad (borde de la tarjeta de STATUS) el hover no se ve: no se copia. ===================================================================================================== */ /* ---- raíz: Embarques es la única página del tower con alto fijo y scroll interno ---- El alto disponible es 100vh MENOS el padding-top que la regla de .mud-main-content de más arriba le pone a las páginas tower (la barra de Stint mide appbar + 1px de borde): se copian sus tres tramos para no dejar 1 px de scroll de página bajo el .tw. El margen negativo de .tw-bleed ya compensa los 48 px de padding del wrapper. */ .tw--fijo{ height:calc(100vh - (var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px)/8 + 1px)); min-height:0; overflow:hidden; } @media (min-width:0px) and (orientation:landscape){ .tw--fijo{ height:calc(100vh - (var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px)/4 + 1px)); } } @media (min-width:600px){ .tw--fijo{ height:calc(100vh - (var(--mud-appbar-height, 64px) + 1px)); } } /* .ct-page-wrapper (app.css) impone min-height:calc(100vh - 64px) = 1 px MÁS que el alto disponible (la barra de Stint mide 65 px con su borde). Con .tw--fijo eso deja la página con scroll propio de 1 px que el tower no tiene (verif-emb-p1-r1 D5: documentElement 1066/1065 contra 1000/1000). Aditivo y acotado: no toca app.css ni las otras tres páginas tower, que sí usan el min-height del wrapper. */ .ct-page-wrapper:has(> .tw--fijo){ min-height:0; } /* --coral NO existe en Embarques.dc.html ni en Ranking Proveedores.dc.html (grep -c = 0), y sí en los .dc.html de Cierre, Forwarders y Gastos: la sonda de paridad la ve declarada en los 102 estados del Ranking (verif-rk-p1-r2 D3). Como el token vive en el bloque compartido .tw (línea 18) y en el oscuro (línea 25) —que Cierre necesita—, se apaga SOLO en las dos páginas con alto fijo, que son justo las dos que no la tienen en el tower: `initial` deja la propiedad en el valor "garantizado-inválido" y getComputedStyle devuelve "", igual que el tower. La forma `.tw.tw--fijo[data-theme]` (0,3,0) es a propósito: le gana a .tw (0,1,0), a .tw[data-theme="dark"] (0,2,0) y, por orden, a html.tw-dark .tw[data-theme="auto"] (0,3,0), que está más arriba en la hoja. Hoy es inerte: las tres clases que usan var(--coral) (.tw-lectura-dot, .tw-col.is-on, .tw-c-tabla-tr.is-on) y la línea «tarifa ponderada» de TwMini (EconomiaTower.cs) son de Cierre/Forwarders y no se dibujan acá. OJO: si alguna vez Embarques o el Ranking usan var(--coral), esta regla los dejaría sin color — borrarla. */ .tw.tw--fijo[data-theme]{ --coral:initial; } /* ---- franja superior propia (§2.2): padding/gap/alto distintos, sin vsep, con logo y chip de alertas ---- */ .tw-nav--emb{ padding:0 18px; gap:18px; min-height:54px; flex:none; } /* 800 a propósito, NO 900 (verif-emb-p1-r1 D1): la marca del tower pide font-weight:900, pero el de Embarques.dc.html carga Archivo:wght@600;700;800 (SIN 900), así que el emparejamiento CSS baja a la cara 800 y ese es el trazo que se ve («stint» mide 42,98 px y el punto 5 px; con la 900 real mide 45,98 y corre +3 px las migas). Solo la variante --emb: los towers de Cierre, Forwarders y Gastos sí cargan Archivo 900 y ahí la marca tiene que seguir en 900. */ .tw-nav--emb .tw-nav-brand-word{ font-weight:800; } /* Embarques es el único de los cuatro módulos cuyo botón de tema NO trae `white-space:nowrap` inline (Embarques.dc.html:71); Cierre, Forwarders y Gastos sí, y por eso lo declara .tw-nav-theme. Solo la variante --emb lo devuelve a `normal` (verif-emb-p1-r3 D1): NO tocar .tw-nav-theme, rompería a los otros tres. Sin efecto visible: el rótulo es una sola palabra, y desde verif-rk-p1-r2 D1 va en un único nodo de texto. */ .tw-nav--emb .tw-nav-theme{ white-space:normal; } .tw-e-migas{ display:flex; align-items:center; gap:8px; } .tw-e-logo{ flex:none; color:#FFFFFF; } .tw-e-alert{ display:flex; align-items:center; gap:7px; background:rgba(192,64,46,0.2); border:1px solid rgba(240,112,90,0.42); padding:4px 10px; border-radius:7px; } .tw-e-alert-dot{ width:6px; height:6px; border-radius:50%; background:#F0705A; flex:none; } .tw-e-alert-txt{ font-size:12px; font-weight:700; color:#FFC9C0; } /* ---- barra de filtros (dos filas) ---- */ .tw-bar--emb{ flex:none; } .tw-bar-row--10{ gap:10px; } /* Embarques, segunda fila */ .tw-e-note06{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; color:var(--ink3); } .tw-e-cap95{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink3); } .tw-e-dates{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .tw-e-date{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink); background:var(--surface2); border:1px solid var(--line); border-radius:7px; padding:5px 8px; } .tw-e-clear{ font-family:'JetBrains Mono',monospace; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--ink2); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:5px 9px; border-radius:6px; } /* filtBtn() — ESPECIE, PROCESO, CONTAR POR; con --tab, las pestañas de ESTADO DEL EMBARQUE */ .tw-e-fbtn{ font-family:'Hanken Grotesk',sans-serif; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:4px 11px; border-radius:7px; font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--ink2); } .tw-e-fbtn.is-on{ border-color:var(--ink); background:var(--ink); color:var(--surface); } .tw-e-fbtn--tab{ padding:5px 12px; font-size:12.5px; } .tw-e-fbtn-n{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; opacity:0.6; } .tw-e-fbtn-n--tab{ opacity:0.65; } /* chip() de Embarques (≠ .tw-chip de Cierre/Forwarders): ventana y chips del panel de distribución */ .tw-e-chip{ font-family:'Hanken Grotesk',sans-serif; cursor:pointer; padding:4px 11px; border-radius:99px; font-size:11.5px; font-weight:700; background:var(--surface); color:var(--ink2); border:1px solid var(--line); } .tw-e-chip.is-on{ background:var(--ink); color:var(--surface); border-color:var(--ink); } /* ---- cuerpo: barra lateral + contenido, cada uno con su scroll ---- */ .tw-e-body{ display:flex; flex:1; align-items:stretch; flex-wrap:nowrap; min-height:0; height:100%; overflow:hidden; } .tw-e-side{ flex:0 0 200px; max-width:212px; min-width:164px; background:var(--surface); border-right:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; height:100%; } .tw-e-side-lbl{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink3); padding:4px 10px 8px; } .tw-e-side-hr{ height:1px; background:var(--line2); margin:12px 10px; } .tw-e-side-fill{ flex:1; min-height:14px; } .tw-e-main{ flex:1 1 auto; min-width:0; padding:14px 16px 26px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; height:100%; } /* ítems de la barra lateral (CONSERVACIÓN y MERCADO DE DESTINO) */ .tw-e-item{ display:flex; align-items:center; gap:9px; border-radius:8px; cursor:pointer; } .tw-e-item--cons{ padding:9px 11px; font-size:13.5px; color:var(--ink2); font-weight:600; } .tw-e-item--all{ padding:8px 11px; font-size:13px; color:var(--ink2); font-weight:600; } .tw-e-item--cont{ padding:8px 11px; font-size:13px; color:var(--ink2); font-weight:700; } .tw-e-item--pais{ padding:7px 11px 7px 22px; font-size:12.5px; color:var(--ink2); font-weight:600; } .tw-e-item--dest{ padding:5px 11px 5px 34px; font-size:11.5px; color:var(--ink3); font-weight:500; } .tw-e-item.is-on{ background:var(--ink); color:var(--surface); font-weight:700; } .tw-e-item.is-cero{ opacity:0.45; } /* conteo 0: atenuado pero clickeable */ .tw-e-item-txt{ flex:1; } .tw-e-item-n{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; opacity:0.7; } .tw-e-dot{ width:7px; height:7px; border-radius:2px; flex:none; background:var(--bar); } .tw-e-dot--deep{ background:var(--deep); } .tw-e-dot--accent{ background:var(--accent); } .tw-e-dot--ink3{ background:var(--ink3); } .tw-e-dot--min{ width:5px; height:5px; border-radius:50%; } /* solo los ítems de MERCADO cambian el punto a --accent al activarse; los de CONSERVACIÓN conservan su color */ .tw-e-item--all.is-on .tw-e-dot, .tw-e-item--cont.is-on .tw-e-dot, .tw-e-item--pais.is-on .tw-e-dot, .tw-e-item--dest.is-on .tw-e-dot{ background:var(--accent); } /* tarjeta SESIÓN */ .tw-e-ses{ margin:0 10px 4px; padding:10px 12px; border-radius:9px; background:var(--surface2); border:1px solid var(--line2); display:flex; flex-direction:column; gap:4px; } .tw-e-ses-lbl{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } .tw-e-ses-rol{ font-size:12.5px; font-weight:700; } .tw-e-ses-note{ font-size:11.5px; color:var(--ink3); } /* ---- fila INDICADORES ---- */ .tw-e-ind{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .tw-e-ind-lbl{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } .tw-e-spacer4{ flex:1; min-width:4px; } .tw-e-tog{ border:1px solid var(--line); cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; padding:4px 9px; border-radius:5px; background:transparent; color:var(--ink3); } .tw-e-tog.is-on{ background:var(--surface); color:var(--ink); } /* ---- grillas y tarjetas de KPI (la tarjeta base es .tw-kpi.tw-kpi--5 del bloque común) ---- */ .tw-e-kpis4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .tw-e-kpis-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:10px; } .tw-e-kpi-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .tw-e-kpi-val{ font-family:'Archivo',sans-serif; font-size:25px; font-weight:700; letter-spacing:-0.02em; line-height:1; white-space:nowrap; } .tw-e-kpi-val.is-crit{ color:var(--crit); } .tw-e-kpi-val.is-ok{ color:var(--ok); } .tw-e-kpi-val.is-warn{ color:var(--warn); } .tw-e-pill{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; padding:1px 6px; border-radius:5px; white-space:nowrap; color:var(--ok); background:rgba(21,127,95,0.13); } .tw-e-pill.is-bad{ color:var(--crit); background:rgba(192,64,46,0.12); } .tw-e-kpi-note{ font-size:11.5px; color:var(--ink3); } /* STATUS: igual que .tw-kpi-note-h pero SIN text-wrap:pretty */ .tw-e-kpi--fact{ background:rgba(14,138,122,0.07); border-color:rgba(14,138,122,0.45); } .tw-e-kpi--ops{ padding:12px 14px; } .tw-e-kpi--ops .tw-kpi-label{ letter-spacing:0.14em; } .tw-e-kpi--ops.is-click{ cursor:pointer; } .tw-e-kpi--ops.is-on{ border-color:var(--deep); } /* ---- tarjetas de panel (mapa y distribución) y envoltorios del bloque de embarques ---- */ .tw-e-stack{ display:flex; flex-direction:column; gap:12px; } .tw-e-listwrap{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; } .tw-e-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .tw-e-card--list{ flex:1 1 520px; min-width:0; } /* ---- panel del MAPA ---- */ .tw-e-map-head{ display:flex; align-items:baseline; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--line2); } .tw-e-map-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; } .tw-e-map-tools{ display:flex; align-items:center; gap:10px; } .tw-e-seg{ display:flex; gap:3px; background:var(--line2); padding:2px; border-radius:6px; } .tw-e-seg-btn{ border:none; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 8px; border-radius:4px; background:transparent; color:var(--ink3); } .tw-e-seg-btn.is-on{ background:var(--surface); color:var(--ink); } .tw-e-map-count{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink3); } .tw-e-map-canvas{ display:block; width:100%; height:420px; } /* el custom element se estira al 100 % de esta caja */ .tw-e-map-foot{ display:flex; gap:14px; padding:9px 13px; border-top:1px solid var(--line2); flex-wrap:wrap; } .tw-e-map-help{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.08em; color:var(--ink3); } /* leyendas: la del pie del mapa es una línea 14×3; la del pie de la distribución, una pastilla 12×7 */ .tw-e-leg{ display:flex; align-items:center; gap:6px; } .tw-e-leg-txt{ font-size:11.5px; color:var(--ink2); } .tw-e-leg-line{ width:14px; height:3px; border-radius:2px; background:var(--deep); } .tw-e-leg-line--accent{ background:var(--accent); } .tw-e-leg-pill{ width:12px; height:7px; border-radius:3px; background:var(--deep); } .tw-e-leg-pill--accent{ background:var(--accent); } /* =========================== lista de embarques (spec-embarques-2) =========================== */ .tw-e-list-head{ display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--line2); flex-wrap:wrap; } .tw-e-list-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; margin-right:4px; } .tw-e-linetag{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; padding:3px 9px; border-radius:99px; font-weight:700; color:var(--accent); background:rgba(21,179,199,0.14); } .tw-e-linetag--f{ color:var(--deep); background:rgba(28,114,147,0.13); } /* solo la línea fresca; "ambas" usa el accent */ /* barra de filtros de la lista */ .tw-e-tbar{ display:flex; gap:6px; align-items:center; padding:8px 13px; border-bottom:1px solid var(--line2); flex-wrap:wrap; } .tw-e-search{ flex:1 1 190px; min-width:0; border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--surface); color:var(--ink); } .tw-e-sel{ flex:0 1 auto; max-width:170px; border:1px solid var(--line); border-radius:6px; padding:5px 7px; font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--surface); color:var(--ink3); } .tw-e-sel.is-on{ color:var(--ink); } /* único indicador de filtro activo */ .tw-e-tclear{ border:1px solid var(--line); background:transparent; cursor:pointer; border-radius:6px; padding:5px 9px; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink3); } .tw-e-rmark{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:4px; background:var(--crit); color:#FFFFFF; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; } .tw-e-rmark--fila{ flex:none; } .tw-e-leg-rec{ display:flex; align-items:center; gap:5px; } /* leyenda «con reclamo»: NO es un filtro, no tiene clic */ /* cabecera pegajosa, grilla de 7 columnas y filas */ .tw-e-scroll{ max-height:620px; overflow-y:auto; } .tw-e-grid{ display:grid; gap:9px; align-items:center; grid-template-columns:minmax(0,1.05fr) minmax(0,0.72fr) minmax(0,1.05fr) minmax(0,0.8fr) minmax(0,0.9fr) minmax(0,0.44fr) 78px; } .tw-e-thead{ padding:7px 13px; border-bottom:1px solid var(--line2); background:var(--surface2); position:sticky; top:0; z-index:1; } .tw-e-th{ border:none; background:transparent; cursor:pointer; text-align:left; padding:0; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.11em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:var(--ink3); } .tw-e-th--r{ text-align:right; } .tw-e-th.is-on{ color:var(--ink); } .tw-e-tr{ border-bottom:1px solid var(--line2); } .tw-e-row{ padding:10px 13px; cursor:pointer; } .tw-e-row:hover{ background:var(--surface2); } /* style-hover del tower: acá SÍ se ve */ .tw-e-cell{ display:flex; flex-direction:column; gap:2px; min-width:0; } .tw-e-cell--4{ gap:4px; } /* columna AVANCE y columna VOLUMEN de la distribución */ .tw-e-idrow{ display:flex; align-items:center; gap:7px; } .tw-e-linedot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent); } .tw-e-linedot--f{ background:var(--deep); } .tw-e-id{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; letter-spacing:0.02em; } .tw-e-grp{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--bar); color:var(--ink2); white-space:nowrap; } .tw-e-prod{ font-size:12px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-dest{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-name{ font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-sub{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-sub--11{ letter-spacing:0.11em; } /* código de vuelo / nave */ /* columna AVANCE: un cuadrito por hito (la celda es la misma .tw-e-cell con gap 4) */ .tw-e-dots{ display:flex; gap:2px; } .tw-e-step{ flex:1; min-width:0; height:8px; border-radius:2px; background:var(--bar); } .tw-e-step.is-done{ background:var(--accent); } .tw-e-step.is-done.is-f{ background:var(--deep); } .tw-e-step.is-done.is-late{ background:var(--crit); } /* último cumplido de una fila atrasada (gana a is-f) */ .tw-e-steplbl{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* columna ETA */ .tw-e-eta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .tw-e-etaval{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; } .tw-e-etanote{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.04em; color:var(--ok); } .tw-e-etanote.is-crit{ color:var(--crit); } .tw-e-etanote.is-warn{ color:var(--warn); } .tw-e-etanote.is-deep{ color:var(--deep); } /* detalle expandido */ .tw-e-detalle{ background:var(--surface2); border-top:1px solid var(--line2); padding:13px; display:flex; flex-direction:column; gap:13px; } .tw-e-alerta{ display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:8px; background:rgba(199,62,48,0.08); border:1px solid rgba(199,62,48,0.25); } .tw-e-alerta-bar{ width:3px; align-self:stretch; border-radius:2px; background:var(--crit); flex:none; } .tw-e-alerta-body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .tw-e-alerta-head{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; } .tw-e-alerta-lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--crit); font-weight:700; } .tw-e-alerta-delay{ font-size:12.5px; font-weight:700; color:var(--crit); } .tw-e-alerta-txt{ font-size:12.5px; color:var(--ink2); line-height:1.4; text-wrap:pretty; } .tw-e-alerta-foot{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px; } .tw-e-alerta-actor{ display:inline-flex; padding:2px 7px; border-radius:5px; background:rgba(28,114,147,0.14); color:var(--deep); font-size:11.5px; font-weight:700; } .tw-e-alerta-canal{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--ink3); text-transform:uppercase; } .tw-e-hechos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; } .tw-e-hecho{ display:flex; flex-direction:column; gap:2px; min-width:0; } .tw-e-hecho-k{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } .tw-e-hecho-v{ font-size:13px; font-weight:600; } .tw-e-hitos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:2px 18px; margin-top:8px; } .tw-e-hito{ display:flex; align-items:center; gap:8px; padding:4px 0; min-width:0; } .tw-e-hito-n{ width:17px; height:17px; border-radius:5px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; background:var(--bar); color:var(--ink3); } .tw-e-hito-n.is-done{ background:var(--accent); color:#FFFFFF; } .tw-e-hito-n.is-done.is-f{ background:var(--deep); } .tw-e-hito-n.is-now{ background:var(--warn); color:#FFFFFF; } .tw-e-hito-n.is-now.is-late{ background:var(--crit); } .tw-e-hito-txt{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-weight:500; color:var(--ink3); } .tw-e-hito-txt.is-done{ color:var(--ink); } .tw-e-hito-txt.is-now{ color:var(--ink); font-weight:700; } .tw-e-hito-fill{ flex:1; min-width:6px; } .tw-e-hito-own{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.06em; white-space:nowrap; color:var(--ink3); } .tw-e-hito-own.is-stint{ color:var(--accent); } /* #534 — los 13 hitos estándar: cada hito lleva debajo su hora real o prevista y de dónde vino el dato. «Sin registro» (pasó sin marca) va aclarado, «directo» (transbordo de un viaje directo) con borde de trazos y «no disponible» punteado: ninguno se lee como un cumplido. */ .tw-e-hito{ align-items:flex-start; } .tw-e-hito-cuerpo{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; } .tw-e-hito-linea{ display:flex; align-items:center; gap:8px; min-width:0; min-height:17px; } /* los responsables largos («Logística o Empresa de transporte») ceden antes que el nombre del hito, que solo se corta si pasa de tres cuartos de la línea */ .tw-e-hito-linea .tw-e-hito-txt{ flex:0 0 auto; max-width:75%; } .tw-e-hito-linea .tw-e-hito-own{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .tw-e-hito-dato{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.02em; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-hito-dato.is-estado{ font-style:italic; } .tw-e-hito-n.is-sr{ opacity:0.5; } .tw-e-hito-n.is-directo{ background:transparent; color:var(--ink3); outline:1.5px dashed var(--ink3); outline-offset:-1.5px; } .tw-e-hito-n.is-nd{ background:transparent; color:var(--ink3); outline:1.5px dotted var(--ink3); outline-offset:-1.5px; } .tw-e-hito-falta{ color:var(--warn); } /* paginación (fuera del scroll) */ .tw-e-pag{ display:flex; align-items:center; gap:8px; padding:8px 13px; border-top:1px solid var(--line2); flex-wrap:wrap; } .tw-e-pag-info{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink2); } .tw-e-pag-btn{ border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:4px 10px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; cursor:default; color:var(--ink3); } .tw-e-pag-btn.is-on{ cursor:pointer; color:var(--ink); } /* nunca se deshabilitan: solo cambian cursor y color */ /* ===================== Distribución por mercado y conservación (spec-embarques-3 §8) ===================== */ .tw-e-dist-head{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line2); flex-wrap:wrap; } .tw-e-dist-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; flex:1; min-width:180px; } .tw-e-dist-chips{ display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; } .tw-e-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:1px; background:var(--line2); border-bottom:1px solid var(--line2); } .tw-e-stat{ background:var(--surface); padding:10px 13px; display:flex; flex-direction:column; gap:3px; } .tw-e-stat-k{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink3); } .tw-e-stat-v{ font-family:'Archivo',sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.02em; line-height:1; } .tw-e-stat-n{ font-size:11px; color:var(--ink3); } .tw-e-mkt{ display:grid; gap:10px; grid-template-columns:minmax(88px,1fr) minmax(120px,1.4fr) 86px 76px 70px minmax(96px,0.9fr); } .tw-e-mkt-head{ padding:8px 13px; border-bottom:1px solid var(--line2); background:var(--surface2); } .tw-e-mkt-row{ padding:10px 13px; border-bottom:1px solid var(--line2); align-items:center; } .tw-e-mkt-row:hover{ background:var(--surface2); } /* style-hover del tower: acá SÍ se ve */ .tw-e-mkt-name{ font-size:13px; font-weight:700; } .tw-e-mkt-bar{ display:flex; height:7px; border-radius:4px; overflow:hidden; background:var(--bar); } .tw-e-mkt-bar-f{ height:100%; flex:none; background:var(--deep); } /* width inline */ .tw-e-mkt-bar-c{ height:100%; flex:none; background:var(--accent); } /* width inline */ .tw-e-mkt-volrow{ display:flex; align-items:baseline; gap:7px; } .tw-e-mkt-vol{ font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; } .tw-e-mkt-share{ font-size:11px; color:var(--ink3); } .tw-e-val13{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; } .tw-e-val13.is-ok{ color:var(--ok); } .tw-e-val13.is-warn{ color:var(--warn); } .tw-e-val13.is-crit{ color:var(--crit); } .tw-e-sub105{ font-size:10.5px; color:var(--ink3); } .tw-e-sub105--el{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-e-dist-foot{ display:flex; gap:16px; padding:9px 13px; flex-wrap:wrap; align-items:center; } /* ===================================================================================================== RANKING PROVEEDORES (Panorama › /panorama/ranking-proveedores) — bloque ADITIVO (spec-ranking-1 §14.2 · spec-ranking-2 §3-§8 y §11.6 · spec-ranking-3 §10.3). Nada de acá modifica las reglas de arriba: las cuatro páginas ya verificadas (Cierre, Forwarders, Gastos y Embarques) siguen idénticas. Prefijo .tw-r-*. La CÁSCARA del Ranking es LA MISMA de Embarques —`Ranking Proveedores.dc.html` y `Embarques.dc.html` son el mismo archivo con cinco diferencias—, así que se reutilizan tal cual .tw--fijo, .tw-nav--emb, .tw-bar--emb, .tw-e-migas, .tw-e-alert*, .tw-e-fbtn*, .tw-e-chip, .tw-e-dates, .tw-e-body, .tw-e-side*, .tw-e-item*, .tw-e-dot*, .tw-e-ses*, .tw-e-ind*, .tw-e-tog, las grillas de KPI y .tw-e-stack. Acá solo va lo que el Ranking AGREGA: las pestañas de línea de la franja, el ítem de FOCOS DE CONTROL y el scorecard de proveedores. El color del tipo de proveedor (TYPE_COLOR del tower: Forwarder #C0402E · Aerolínea #1C7293 · Naviera #6A4FB0 · Transporte terrestre #B5651D) es DATO, no tema: viaja por la variable --tw-r-tipo, declarada una sola vez en la tarjeta de la tabla y heredada por el punto, el badge del #1 y el caret abierto (en el tower va inline en cada uno de esos tres elementos; el render es el mismo). ===================================================================================================== */ /* ---- franja: pestañas de línea (tab() del tower) y lineDesc ---- OJO: no son .tw-e-seg* (el selector de proyección del mapa, mono 9,5 px sobre var(--line2)); éstas son Hanken 12,5/700 sobre la franja oscura. */ .tw-r-seg{ display:flex; gap:3px; background:rgba(255,255,255,0.07); border-radius:8px; padding:3px; } .tw-r-seg-btn{ font-family:'Hanken Grotesk',sans-serif; border:none; cursor:pointer; padding:5px 13px; border-radius:6px; font-size:12.5px; font-weight:700; background:transparent; color:var(--navInk2); } .tw-r-seg-btn.is-on{ background:var(--accent); color:#04222C; } .tw-r-linedesc{ font-size:12.5px; color:var(--navInk2); } /* ---- barra lateral: ítem de FOCOS DE CONTROL ---- Mismas medidas que .tw-e-item--cons (va JUNTO a .tw-e-item), pero acá el punto SÍ cambia de color al activarse y el ítem NUNCA se atenúa por conteo 0 (el tower no aplica opacity a los focos). */ .tw-r-item--foco{ padding:9px 11px; font-size:13.5px; color:var(--ink2); font-weight:600; } .tw-r-item--foco.is-on .tw-e-dot{ background:var(--accent); } /* ---- scorecard · tarjeta de encabezado del foco (spec-ranking-2 §4) ---- */ .tw-r-head{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .tw-r-head-col{ display:flex; flex-direction:column; gap:3px; flex:1 1 240px; min-width:190px; } .tw-r-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; letter-spacing:-0.01em; } .tw-r-scope{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); } /* la nota NO lleva text-transform: sale tal cual se arma, en minúsculas */ .tw-r-note{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--ink3); flex:1 1 220px; min-width:180px; text-wrap:pretty; } /* ---- scorecard · tarjeta vacía (§4.3), entre el encabezado y la tabla ---- */ .tw-r-vacio{ background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:22px; text-align:center; } .tw-r-vacio-txt{ font-size:12.5px; color:var(--ink3); } /* ---- scorecard · tarjeta de la tabla (§5.1) ---- Es .tw-e-card con `overflow-x:auto` en vez de `overflow:hidden`: la grilla tiene min-width 740 px y scrollea horizontal dentro de la tarjeta cuando no cabe. */ .tw-r-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow-x:auto; } .tw-r-note-bar{ display:flex; align-items:center; gap:8px; padding:8px 13px; border-bottom:1px solid var(--line); } .tw-r-ranknote{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); } /* ---- scorecard · la grilla de 10 columnas (GRID del tower), común a cabecera, filas y sub-filas ---- */ .tw-r-grid{ display:grid; gap:6px; align-items:center; min-width:740px; grid-template-columns:28px minmax(124px,1.35fr) minmax(52px,0.7fr) minmax(58px,0.75fr) minmax(52px,0.6fr) minmax(74px,0.9fr) minmax(58px,0.7fr) minmax(52px,0.65fr) minmax(50px,0.6fr) minmax(52px,0.62fr); } .tw-r-head-row{ padding:9px 13px; background:var(--bar); border-bottom:1px solid var(--line); } /* cabecera: sin flecha ↑/↓ (a diferencia de la lista de Embarques); la dirección la dice la nota. Son (como el hcell del tower), no