, others are kept in detached refs */ body.uses-tab-shell .content { padding-top: 0; } .tab-pane { animation: tab-pane-fade 0.12s ease-out; } @keyframes tab-pane-fade { from { opacity: 0; } to { opacity: 1; } } /* Mobile: hide the desktop chrome entirely. The mobile home in home.html serves as the primary nav; the only top-bar elements kept are a tiny user-menu bubble for logout/change-password (top-right corner). */ @media (max-width: 768px) { .brand-bar .section-pills, .brand-bar .brand-name, .brand-bar .brand-search, .tab-strip { display: none !important; } .brand-bar { padding: 6px 14px; min-height: 44px; justify-content: space-between; } .brand-mark { flex: 0 0 auto; } .brand-bar-actions { margin-left: auto; } .brand-bar-actions .topbar-cmd-btn { display: none; } /* Avatar / user menu stays visible for logout access. */ .user-menu-summary .user-avatar { width: 32px; height: 32px; } /* Pad content the same way the desktop did before .brand-bar hid stuff. */ body.uses-tab-shell .content { padding-top: 12px; } } /* Tab-shell layout: cap content max-width at 1680px and center it. Ultrawide monitors get a comfortable column instead of edge-to-edge sprawl that's hard to scan. */ body.uses-tab-shell .content { max-width: 1680px; margin-inline: auto; } body.uses-tab-shell .content-area { width: 100%; } /* ── TOOLS dropdown pill ──────────────────────────────────────── */ .section-pill-dropdown { position: relative; display: inline-block; } .section-pill-dropdown summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; } .section-pill-dropdown summary::-webkit-details-marker { display: none; } .section-pill-dropdown[open] summary { color: var(--green-dark); background: var(--lime); } .section-pill-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 240; } .section-pill-menu-link { display: block; padding: 7px 12px; color: var(--gray-800); text-decoration: none; font-size: 13px; border-radius: 4px; font-weight: 500; } .section-pill-menu-link:hover { background: var(--gray-100); color: var(--gray-900); } /* ── Brand-bar FX ticker ──────────────────────────────────────── */ .brand-fx { display: inline-flex; align-items: center; gap: 14px; padding: 0 10px; margin-right: 4px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.65); border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .brand-fx-pair { display: inline-flex; align-items: baseline; gap: 4px; } .brand-fx-cur { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.6px; } .brand-fx-rate { color: var(--lime); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 1024px) { .brand-fx { display: none; } } /* User menu panel — make sure it lifts above any sticky FX/quote-bar neighbours and home-page content. */ .user-menu-panel { z-index: 260; } /* Form-heavy single-column pages need a max-width so they don't sprawl on wide monitors. Apply a class .narrow-content on the page-header wrapper or section. */ body.uses-tab-shell .narrow-content, body.uses-tab-shell .upload-wrapper, body.uses-tab-shell .review-layout { max-width: 980px; margin-left: auto; margin-right: auto; } /* Version-update banner — center the text inside, ensure clear visual centering */ .bops-version-banner { text-align: center; justify-content: center; } .bops-version-text { text-align: center; flex: 1 1 auto; } /* Better breathing room between tabs and brand-bar items — was cramped/touching. */ .tab-strip { gap: 4px !important; padding: 0 16px !important; } .tab-strip-item { border-right: none !important; margin-right: 2px; } .tab-strip-item + .tab-strip-item { margin-left: 2px; } .brand-bar { gap: 18px !important; } .section-pills { gap: 4px !important; } .brand-bar-actions { gap: 12px !important; } /* Section-pill dropdown menu — divider + "soon" tag */ .section-pill-menu-divider { height: 1px; background: var(--gray-200); margin: 4px 0; } .section-pill-menu-link--soon { color: var(--gray-500); display: flex; align-items: center; justify-content: space-between; } .menu-soon-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; background: var(--gray-100); color: var(--gray-600); padding: 2px 6px; border-radius: 8px; font-weight: 600; } /* Language toggle removed entirely 2026-05-07 (second rollback). Any leftover .lang-switcher in unauth templates stays hidden. */ .lang-switcher, .lang-switcher--login, .user-menu .lang-switcher, .topbar .lang-switcher { display: none !important; } /* Brand-bar buffer zones — prevent dropdowns / FX widget / tabs from butting up against the page content. */ .brand-bar { padding: 8px 18px !important; gap: 12px !important; /* tightened so the full pill row (incl. Tesorería) + search fit */ } .section-pills { gap: 6px !important; /* No right border/padding here: .section-pills is flex:1 and grows to fill the bar, so a right border floats far from the last pill (Herramientas), creating an empty gap + a stray vertical line. The single divider before the search box (.brand-bar-actions border-left) is the only one we keep. */ } .brand-fx { padding: 0 16px !important; /* more whitespace around the rates */ margin: 0 6px !important; } .brand-bar-actions { gap: 14px !important; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.08); } /* Buffer between brand bar and tab strip so dropdowns can land without visually colliding with the active tab. */ .tab-strip { margin-top: 0; padding: 0 24px !important; border-top: 1px solid rgba(0, 0, 0, 0.04); } /* Make sure dropdowns and the user menu always sit ABOVE tabs and content. */ .section-pill-menu { z-index: 250 !important; } .user-menu-panel { z-index: 260 !important; } /* Small breathing room between content area and the sticky tab strip */ body.uses-tab-shell .content { padding-top: 16px !important; } /* Z-INDEX HIERARCHY — when dropdowns open they MUST sit above everything. Pages with position:relative / sticky tables can create stacking contexts that fight low z-index values; raise these so it's never ambiguous. */ .brand-bar { z-index: 9000 !important; } .tab-strip { z-index: 8000 !important; } .section-pill-menu { z-index: 9500 !important; } .user-menu-panel { z-index: 9500 !important; } .bops-version-banner { z-index: 9800 !important; } .bops-loading-overlay { z-index: 9700 !important; } .bops-page-loader { z-index: 9900 !important; } /* Home page — demoted ADS section as a collapsible details block */ .home-secondary-section { margin-top: 28px; border-top: 1px solid var(--gray-200); padding-top: 16px; } .home-secondary-summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 6px 0; font-size: 13px; color: var(--gray-700); } .home-secondary-summary::-webkit-details-marker { display: none; } .home-secondary-summary::before { content: '▸'; font-size: 11px; color: var(--gray-500); transition: transform 0.15s; margin-right: 4px; } .home-secondary-section[open] .home-secondary-summary::before { transform: rotate(90deg); display: inline-block; } .home-secondary-title { font-weight: 600; color: var(--gray-900); font-size: 14px; } .home-secondary-stats { flex: 1; color: var(--gray-600); } .home-secondary-stats strong { color: var(--gray-900); } .home-secondary-warn { color: var(--coral); font-weight: 600; } /* DROPDOWN OVERFLOW FIX — `.section-pills` had `overflow-x: auto` which the spec promotes the y-axis to `auto` too, clipping the dropdown menus and producing a tiny scroll/expand instead of a clean overlay. Remove the horizontal scroll on desktop; on mobile we use a different layout. */ .section-pills { overflow-x: visible !important; overflow-y: visible !important; flex-wrap: wrap; } .brand-bar { overflow: visible !important; } .section-pill-dropdown { position: relative; z-index: 1; } .section-pill-dropdown[open] { z-index: 9500; } /* Ensure menus float above sticky tab strip and any siblings */ .section-pill-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 9500 !important; } /* ── BIGGER BRAND BAR LETTERING ────────────────────────────────── Yahoo-developer-inspired: chunkier, more readable. Pills go from 12px/uppercase-tight to 15px with comfortable padding. */ .brand-bar { height: 56px !important; padding: 10px 24px !important; } .brand-name { font-size: 18px !important; letter-spacing: 0.3px; } .brand-logo { height: 32px !important; } .section-pill { padding: 8px 16px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.4px !important; } .brand-fx { font-size: 12px !important; } .brand-fx-cur { font-size: 11px !important; } .brand-fx-rate { font-size: 13px !important; } .tab-strip { top: 56px !important; min-height: 38px; } .tab-strip-item { font-size: 13px !important; padding: 8px 14px 7px !important; } /* ── CONFIDENTIALITY FOOTER ────────────────────────────────────── Persistent disclaimer + helpdesk contact at bottom of every page. */ .bops-confidentiality { margin-top: 48px; padding: 18px 24px 22px; background: var(--gray-50); border-top: 2px solid var(--green-dark); font-size: 12px; line-height: 1.55; color: var(--gray-700); text-align: center; } .bops-confidentiality strong { color: var(--green-dark); font-weight: 700; letter-spacing: 0.3px; } .bops-confidentiality .bops-conf-line { display: block; margin-bottom: 6px; } .bops-confidentiality a { color: var(--green-primary); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--green-primary); } .bops-confidentiality a:hover { color: var(--lime); border-bottom-color: var(--lime); } .bops-confidentiality .bops-conf-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); margin-right: 6px; vertical-align: middle; } /* Section pill icons */ .section-pill-icon { width: 16px; height: 16px; margin-right: 7px; opacity: 0.85; flex-shrink: 0; } .section-pill { text-transform: none !important; letter-spacing: 0.2px !important; } .section-pill.is-active .section-pill-icon, .section-pill[open] .section-pill-icon { opacity: 1; } .section-pill-dropdown[open] summary .section-pill-icon { opacity: 1; } /* Brand search bar — replaces the small icon button. Pill-style input that opens the command palette on click and shows the / shortcut hint. */ .brand-search { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 6px 10px; color: rgba(255, 255, 255, 0.6); cursor: pointer; min-width: 170px; transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: inherit; } .brand-search:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.9); } .brand-search-icon { width: 14px; height: 14px; flex-shrink: 0; } .brand-search-label { flex: 1; text-align: left; font-size: 13px; } .brand-search-kbd { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 3px; padding: 1px 7px; font-size: 11px; font-family: var(--font-mono); color: rgba(255, 255, 255, 0.85); } @media (max-width: 1024px) { .brand-search { min-width: 0; padding: 6px; } .brand-search-label, .brand-search-kbd { display: none; } } /* Section-pill focus styling — when a dropdown summary is clicked it gets the default browser focus outline ON TOP of the active lime background, which reads as a double border. Drop the outline on mouse-click only; keep it for :focus-visible so keyboard navigation still works. */ .section-pill:focus, .section-pill:focus-within, summary.section-pill:focus, .section-pill-dropdown summary:focus { outline: none !important; box-shadow: none !important; } .section-pill:focus-visible, summary.section-pill:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 2px; } /* ── 13-inch laptop fit (≤1366px viewport) ───────────────────────── Compress pills + hide FX so the brand bar always fits on ONE row. Below this threshold flex-wrap was producing a 2-row header that broke the dropdown's anchored position. */ .section-pills { flex-wrap: nowrap !important; } /* 11–13" laptops (≤1366px, e.g. 1366×768 / 1280-wide windows). Re-tuned for the Poppins era: the old 13.5px pills read heavy/cramped now that the UI font is wider, so pills drop to 12px with tighter padding and the search is compacted — the nav gets noticeably more breathing room while still fitting on one row. */ @media (max-width: 1366px) { .brand-bar { padding: 9px 18px !important; gap: 18px !important; } .brand-name { font-size: 16px !important; } .brand-logo { height: 28px !important; } .section-pill { padding: 6px 10px !important; font-size: 12px !important; letter-spacing: 0.1px !important; } .section-pill-icon { width: 14px !important; height: 14px !important; margin-right: 5px !important; } .brand-fx { padding: 0 10px !important; gap: 10px !important; } .brand-fx-cur { font-size: 9px !important; } .brand-fx-rate { font-size: 12px !important; } .brand-search { min-width: 150px !important; padding: 5px 9px !important; } .brand-search-label { font-size: 12px !important; } } @media (max-width: 1180px) { .brand-name { display: none; } .section-pill { padding: 6px 9px !important; font-size: 12.5px !important; } .section-pill-icon { display: none !important; } .brand-fx { display: none !important; } .brand-search { min-width: 130px !important; } .brand-search-kbd { display: none; } } /* ── Responsive tiers for the brand bar ────────────────────────── Goal: brand bar always fits on ONE row across realistic viewports without dropdowns getting clipped or stat-strip wrapping awkwardly. The tab strip already scrolls horizontally on small screens. */ /* Tier 1 — Ultrawide / large desktop ≥1600px: a touch more breathing room. Re-tuned 2026-06-24: 6 section pills (incl. Tesorería) + the search box overflowed ~1600px screens and the search collided with "Herramientas". The bar can't clip (dropdowns need overflow:visible), so the pills must stay compact even here. */ @media (min-width: 1600px) { .brand-bar { padding: 11px 26px !important; gap: 18px !important; } .brand-name { font-size: 18px !important; } .section-pill { padding: 7px 12px !important; font-size: 13.5px !important; } .brand-search { min-width: 210px !important; } } /* Ultrawide ≥1800px: the full row fits with room to spare — restore comfort. */ @media (min-width: 1800px) { .section-pill { padding: 8px 15px !important; font-size: 14.5px !important; } .brand-search { min-width: 260px !important; } } /* This used to collapse the search below 1500px, because the section pills needed the room the "Buscar acciones…" label took and the bar can't clip (dropdowns force overflow:visible). The pills are icon-first now and expand only on hover, so that room exists again and the search keeps its label far further down. Below 900px it still collapses to an icon — the "/" shortcut opens the palette either way. */ @media (max-width: 899px) { .brand-search { min-width: 0 !important; padding: 6px 8px !important; } .brand-search-label, .brand-search-kbd { display: none !important; } } /* Tier 2 — Standard desktop 1367–1599px: default sizes (already in :root) */ /* Tier 3 — 13-inch laptop 1180–1366px (defined above; keep) */ /* Tier 4 — Small laptop / large tablet 1025–1179px */ @media (max-width: 1179px) and (min-width: 1025px) { .brand-bar { padding: 8px 12px !important; gap: 10px !important; } .section-pill { padding: 5px 9px !important; font-size: 12.5px !important; } .section-pill-icon { display: none !important; } .brand-name { display: none; } .brand-fx { display: none !important; } .brand-search { min-width: 140px !important; } .brand-search-label { font-size: 11px !important; } .brand-search-kbd { display: none; } } /* Tier 5 — Tablet ≤1024px: hide brand bar nav, the existing burger from the old sidebar pattern reappears as the entry point. The tab strip stays at the top. Mobile drawer rules already exist below 1024px. */ @media (max-width: 1024px) { .brand-bar { padding: 8px 10px !important; gap: 8px !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .brand-bar::-webkit-scrollbar { display: none; } .section-pills { gap: 2px !important; flex-shrink: 0; } .section-pill { padding: 5px 8px !important; font-size: 12px !important; } .section-pill-icon { display: none !important; } .brand-name, .brand-fx { display: none !important; } .brand-search { min-width: 0 !important; padding: 5px 7px !important; } .brand-search-label, .brand-search-kbd { display: none; } .user-avatar { width: 28px; height: 28px; font-size: 12px; } } /* Tier 6 — Phone ≤640px: only show brand mark + avatar, the section pills horizontally scroll under finger, search collapses to icon-only. */ @media (max-width: 640px) { .brand-bar { padding: 6px 8px !important; height: 48px !important; } .tab-strip { top: 48px !important; padding: 0 8px !important; } .section-pill { padding: 4px 7px !important; font-size: 11.5px !important; } .brand-search { padding: 4px 6px !important; } .brand-search-icon { width: 13px !important; height: 13px !important; } /* Footer reads tighter on phones */ .bops-confidentiality { font-size: 11px; padding: 14px 16px 18px; } } /* Make sure the dropdown menus reposition responsibly on narrow viewports — if a menu would overflow off-screen to the right, anchor it to the right edge instead. */ @media (max-width: 1024px) { .section-pill-menu { left: auto; right: 0; min-width: 200px; } } /* Stat strip wraps cleanly on intermediate sizes (was forcing all on one line then collapsing too late). */ @media (max-width: 1366px) { .stat-strip { flex-wrap: wrap; } .stat-cell { flex: 1 1 calc(33% - 4px); min-width: 200px; } } @media (max-width: 768px) { .stat-cell { flex: 1 1 100%; } } /* Invoice detail page — give the PDF preview more room and make it taller. Was 1fr/1fr columns + 500px iframe → felt cramped. Now 1.4/1 and tall. */ .review-layout { grid-template-columns: 1.4fr 1fr !important; gap: 24px !important; } .preview-pdf { height: 75vh !important; min-height: 620px !important; } @media (max-width: 1024px) { .review-layout { grid-template-columns: 1fr !important; } .preview-pdf { height: 60vh !important; min-height: 420px !important; } } /* Tighten dt/dd spacing in the details column so more fits without scrolling */ .review-layout dl dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); margin-top: 12px; } .review-layout dl dd { font-size: 14px; color: var(--gray-900); margin: 2px 0 0; font-variant-numeric: tabular-nums; } /* ══ Bauhaus accent layer — DIALED UP (Option B) ════════════════════ Full geometric language layered over the green/Bloomberg base. Reversible: delete this block to revert. Changes are radius / border / color / motif only — box dimensions are unchanged, EXCEPT the panel-head rule which adds a deliberate ~8px of header height. */ /* 1 — Squared geometry everywhere. Re-declaring the radius tokens overrides the rounded defaults globally (cards, panels, inputs, buttons, modals, command palette). Circular avatars + status dots use explicit 50% and stay round on purpose — the circle is a primary Bauhaus form. */ :root { --radius-sm: 0px; --radius: 0px; --radius-md: 0px; --radius-lg: 2px; } .tag, .badge, .kpi-delta, .home-chip { border-radius: 0; } .btn { border-radius: 0; } /* 2 — Constructivist weight: heavy dark rules under headers. */ .data-table th { border-bottom-color: var(--gray-900); } .home-panel-head, section.section > h2:first-child { border-bottom: 2px solid var(--gray-900); padding-bottom: 6px; } /* 3 — Geometric uppercase headings (subtitles stay sentence-case). */ .home-panel-head h2, .home-panel-head h3, section.section > h2:first-child, .page-header h1, .m-upload-title, .m-home-title { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .home-subtle, .home-panel-head small { text-transform: none; letter-spacing: 0; } /* 4 — Kandinsky trio motif (red square · blue circle · yellow triangle) on panel/section/mobile-page headers — the Bauhaus signature. Inline SVG data-URI background (allowed by CSP img-src 'data:'). */ .home-panel-head h2::before, .home-panel-head h3::before, section.section > h2:first-child::before, .m-upload-title::before, .m-home-title::before { content: ""; display: inline-block; width: 46px; height: 14px; margin-right: 9px; vertical-align: -2px; background: url("data:image/svg+xml,") no-repeat center / contain; } /* 5 — Bauhaus primary stripe across the top of the brand bar (Kandinsky red/yellow/blue + black). Pseudo-element overlays the top 3px — adds no height, so the sticky bar and everything below stay put. */ .brand-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--bh-red) 0 25%, var(--bh-yellow) 25% 50%, var(--bh-blue) 50% 75%, var(--gray-900) 75% 100%); z-index: 1; } /* ── Fluid brand-bar typography (kills the full-screen vs floating-window jump) ── The per-tier font sizes stepped from 12px (≤1366) up to 15.5px (≥1600), so the nav read noticeably bigger full-screen than in a smaller/floating window. Replace those steps with smooth clamp() scaling — the bar grows/shrinks continuously with the viewport instead of snapping at the 1366/1600px breaks. Appended last so it overrides every earlier per-tier font-size; the padding tiers (which help the row fit) are left intact. */ .section-pill { font-size: clamp(12px, 0.45vw + 6.6px, 14px) !important; } .brand-name { font-size: clamp(16px, 0.35vw + 11px, 18px) !important; } /* ── Bauhaus section titles on secondary screens ────────────────────── Card/section headings (admin, exports, invoice detail/edit) get the same uppercase geometric treatment as the dashboard panel heads, for a consistent look. No trio/heavy-rule here (kept as a top-level accent), and the coming-soon card's sentence-style h3 is explicitly excluded. */ .card > h3, .section > h3, .card > h4 { text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } .coming-soon-card h3 { text-transform: none; letter-spacing: normal; } /* ============================================================ TREASURY — blended Economist / OWID chart cards + projection ============================================================ */ /* Editorial card: title / subtitle stack, accent rule, chart, source. */ :root { --chart-olive: #7A8F0C; } /* series slot 1 — mirror of chart_theme.py */ .section-pill-menu-note { max-width: 240px; padding: 10px 14px; font-size: 11.5px; line-height: 1.6; color: var(--gray-600); } .section-pill-menu-note a { color: var(--green-primary); font-weight: 600; } .tchart-card { background: var(--white); border: 1px solid var(--gray-100); /* OWID: airy, no top accent */ padding: 18px 22px 16px; margin-bottom: 16px; display: flex; flex-direction: column; min-width: 0; } .tchart-card__head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); /* OWID header rule */ } .tchart-card__title { font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 17px; font-weight: 600; color: var(--gray-900); letter-spacing: -0.01em; margin: 0; line-height: 1.25; } .tchart-card__sub { font-size: 12.5px; color: var(--gray-500); margin: 4px 0 0; line-height: 1.4; } .tchart-card__source { font-size: 10.5px; color: var(--gray-400); margin-top: 8px; border-top: 1px solid var(--gray-50); padding-top: 7px; letter-spacing: 0.01em; } .tchart-card__source strong { color: var(--gray-600); font-weight: 600; } /* Dashboard charts row — responsive 2-up that collapses to 1 on narrow screens. */ .home-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; align-items: start; /* each card snug to its own content — no stretch gap */ } .home-charts .tchart-card { margin-bottom: 16px; } @media (max-width: 760px) { .home-charts { grid-template-columns: 1fr; } } /* The chart canvas wrapper (holds the SVG + floating tooltip). */ .tchart { position: relative; width: 100%; } .tchart-svg { width: 100%; height: auto; display: block; overflow: visible; } .tchart-empty { text-align: center; color: var(--gray-400); font-size: 13px; padding: 40px 0; } /* Fluid draw-in: line strokes sweep in, area fades up. */ @keyframes tchart-draw { to { stroke-dashoffset: 0; } } @keyframes tchart-fade { from { opacity: 0; } to { opacity: 1; } } .tchart-line { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: tchart-draw 1.1s cubic-bezier(.22,.61,.36,1) forwards; } .tchart-bar { transform-box: fill-box; transform-origin: bottom; animation: tchart-fade .6s ease forwards; } .tchart-svg path[fill^="url"] { animation: tchart-fade 1.2s ease forwards; } @media (prefers-reduced-motion: reduce) { .tchart-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .tchart-bar, .tchart-svg path[fill^="url"] { animation: none; } } /* Hover affordances — smooth, OWID-like. */ .tchart-focus-line { transition: opacity .12s ease; pointer-events: none; } .tchart-focus-dot { transition: opacity .12s ease; pointer-events: none; } .tchart-capture { cursor: crosshair; } /* Floating tooltip. */ .tchart-tip { position: absolute; top: 0; left: 0; min-width: 150px; max-width: 220px; background: var(--gray-900); color: #fff; padding: 9px 11px; font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 20; box-shadow: 0 6px 22px rgba(0,0,0,.22); } .tchart-tip-hd { font-weight: 700; font-size: 11px; letter-spacing: 0.02em; color: var(--lime-light); margin-bottom: 5px; } .tchart-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 1px 0; } .tchart-tip-key { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); } .tchart-tip-key i { width: 9px; height: 9px; flex: 0 0 auto; display: inline-block; } .tchart-tip-val { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 600; } .tchart-tip-sub { font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 2px; } .tchart-tip-total { margin-top: 4px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.18); font-weight: 700; } .tchart-tip-total .tchart-tip-key { color: var(--lime-light); } .tchart-tip-total .tchart-tip-val { color: var(--lime-light); } /* On-card KPI strip — dense numerical header above a chart. Bloomberg-flat, no tinted backgrounds; numbers live in the typography. */ .tchart-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 18px; margin: 4px 0 12px; padding: 8px 0 10px; border-top: 1px solid var(--gray-50); border-bottom: 1px solid var(--gray-50); } .tchart-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tchart-kpi__label { font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tchart-kpi__value { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 17px; font-weight: 600; color: var(--gray-900); line-height: 1.15; letter-spacing: -0.01em; } .tchart-kpi__delta { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; line-height: 1.2; margin-top: 1px; } .tchart-kpi__delta--up { color: #2C7A4B; } .tchart-kpi__delta--down { color: #B23A48; } .tchart-kpi__delta--flat { color: var(--gray-500); } .tchart-kpi__sub { font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 10.5px; color: var(--gray-400); line-height: 1.2; } /* ---- Treasury page layout ---- */ .tre-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } /* ── Treasury matrix (full-2026 cash-flow ledger) ─────────────────────────── */ .tre-gran-toggle { display: inline-flex; border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; } .tre-gran-toggle a { padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--gray-600); text-decoration: none; background: var(--white); } .tre-gran-toggle a.is-active { background: var(--green-dark); color: var(--white); } /* Dashboard row: charts (capped) on the left, an indicator rail filling the space that the width-cap frees up on wide monitors. */ .tre-dash { display: grid; grid-template-columns: minmax(0, 1080px) 1fr; gap: 16px; margin: 16px 0; align-items: start; } .tre-charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; align-items: start; } .tchart-card--wide { grid-column: 1 / -1; } /* the dash column caps the width */ .tre-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; } .tre-rail-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; padding: 13px 16px; } .tre-rail-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); font-weight: 600; } .tre-rail-card__value { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 21px; font-weight: 700; margin-top: 4px; color: var(--gray-800); line-height: 1.1; } .tre-rail-card__value--pos { color: var(--green-primary); } .tre-rail-card__value--neg { color: var(--red); } .tre-rail-card__sub { font-size: 11px; color: var(--gray-500); margin-top: 3px; } /* Below the two-column threshold the rail drops under the charts and flows as a wrapping row of cards instead of a tall sidebar. */ @media (max-width: 1400px) { .tre-dash { grid-template-columns: 1fr; } .tre-rail { position: static; flex-direction: row; flex-wrap: wrap; } .tre-rail-card { flex: 1 1 200px; } } @media (max-width: 1024px) { .tre-charts { grid-template-columns: 1fr; } } .tre-matrix-wrap { margin: 8px 0 20px; max-height: 70vh; overflow: auto; border: 1px solid var(--gray-200); } .tre-matrix { margin: 0; border-collapse: separate; border-spacing: 0; white-space: nowrap; } .tre-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--green-dark); color: var(--white); font-size: 11px; } .tre-matrix__rowlabel { position: sticky; left: 0; z-index: 2; background: var(--white); text-align: left; min-width: 190px; box-shadow: 1px 0 0 var(--gray-200); } .tre-matrix thead .tre-matrix__rowlabel { z-index: 4; background: var(--green-dark); } .tre-matrix td, .tre-matrix th { padding: 5px 10px; } .tre-col--hoy { background: var(--lime-muted) !important; box-shadow: inset 1px 0 0 var(--lime), inset -1px 0 0 var(--lime); } .tre-matrix thead th.tre-col--hoy { background: var(--lime) !important; color: var(--green-dark); } .tre-matrix thead th.tre-col--hoy .tre-hoy-tag { background: var(--green-dark); color: var(--lime); } /* Matriz de caja: columnas de semana angostas → el badge HOY inline se recortaba. Apílalo en su propia línea, centrado y legible (en Recurrentes las columnas son anchas y el badge inline se ve bien, así que ese caso se deja igual). */ .tre-grid-root:not(.tre-exp-root) .tre-matrix thead th.tre-col--hoy { text-align: center; } .tre-grid-root:not(.tre-exp-root) .tre-matrix thead th.tre-col--hoy .tre-hoy-tag { display: block; width: fit-content; margin: 2px auto 0; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; } .tre-hoy-tag { font-size: 8px; background: var(--lime); color: var(--green-dark); padding: 0 3px; border-radius: 2px; vertical-align: middle; } .tre-section-row td { background: var(--green-light); color: var(--green-dark); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; cursor: pointer; position: sticky; left: 0; } .tre-section-row.is-collapsed td::first-letter { color: var(--gray-500); } .tre-section--collapsed { display: none; } .tre-subtotal td { font-weight: 700; border-top: 1px solid var(--gray-300); background: var(--gray-50); } .tre-subtotal .tre-matrix__rowlabel { background: var(--gray-50); } .tre-saldo-row td { font-weight: 800; background: var(--green-dark); color: var(--white); border-top: 2px solid var(--lime); } .tre-saldo-row .tre-matrix__rowlabel { background: var(--green-dark); color: var(--white); } .tre-saldo-row td.tre-neg { color: #FFB3B3; } .tre-saldo-row td.tre-col--hoy { background: #3a4a1f !important; } /* Projected (future) saldo cells read lighter than the real (past) ones, so the real-vs-projection split is visible in the row itself. */ .tre-saldo-row td.tre-saldo--proj { color: rgba(255,255,255,.72); font-weight: 600; } /* Bank-balance row: the real anchor line, styled quieter than the bold SALDO row but clearly a summary row. Blank cells after HOY show the past ends here. */ /* Δ row: change in the projected balance per period. A quiet flow-summary row (lighter than the bold SALDO line) sitting just under Total Egresos. */ .tre-delta-row td { background: var(--gray-50); font-weight: 700; border-top: 1px solid var(--gray-300); } .tre-delta-row .tre-matrix__rowlabel { background: var(--gray-50); } .tre-delta-row td.tre-delta--pos { color: var(--green-primary); } .tre-delta-row td.tre-delta--neg { color: var(--red); } .tre-delta-row td.tre-col--hoy { background: var(--lime-muted) !important; } .tre-bank-row td { background: var(--gray-100); font-weight: 600; border-top: 2px solid var(--gray-300); } .tre-bank-row .tre-matrix__rowlabel { background: var(--gray-100); } .tre-bank-row td.tre-col--hoy { background: #eef0e6 !important; } .tre-bank-edit { font-size: 10px; font-weight: 600; color: var(--green-primary); text-decoration: none; margin-left: 6px; } .tre-bank-edit:hover { text-decoration: underline; } .tre-past-note { max-width: 1080px; margin: 10px 0 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--gray-700); background: var(--gray-50, #f7f8f4); border: 1px solid var(--gray-200); border-left: 3px solid var(--lime); border-radius: 4px; } .tre-past-note a { color: var(--green-primary); } /* Data-trust layer: bank-balance freshness banner, stale dates, conciliation dots */ .tre-bankwarn { display: flex; align-items: flex-start; gap: 10px; background: #FFF8E1; border: 1px solid #F0D274; border-left: 3px solid #E0A800; color: #6b5200; padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; line-height: 1.45; } .tre-bankwarn__icon { font-size: 15px; line-height: 1.2; } .tre-bankwarn a { color: var(--green-dark); font-weight: 600; white-space: nowrap; margin-left: 6px; } .tre-stale { color: #C0392B; font-weight: 600; } .tre-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; } .tre-dot--ok { background: var(--lime); } .tre-dot--drift { background: #E0A800; } .tre-dot--na { background: var(--gray-300); } .tre-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--gray-100); background: var(--white); margin-bottom: 16px; } .tre-kpi { padding: 14px 16px; border-left: 1px solid var(--gray-100); } .tre-kpi:first-child { border-left: none; } .tre-kpi__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); font-weight: 600; } .tre-kpi__value { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 22px; font-weight: 600; color: var(--gray-900); margin-top: 3px; line-height: 1.1; } .tre-kpi__value--pos { color: var(--green-primary); } .tre-kpi__value--neg { color: var(--red); } .tre-kpi__sub { font-size: 11px; color: var(--gray-400); margin-top: 3px; } /* (Legacy v2 `.tre-grid` two-column page layout removed 2026-07-17: no template uses it anymore and `display: grid` collided with the v3 matriz TABLE, which also carries the class — it split thead/tbody into side-by-side grid items.) */ .tre-panel { background: var(--white); border: 1px solid var(--gray-100); padding: 16px 18px; min-width: 0; } .tre-panel__title { font-size: 13px; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; } .tre-panel__title small { font-weight: 400; color: var(--gray-400); font-size: 11px; } .tre-bar-row { margin-bottom: 10px; } .tre-bar-row__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 3px; } .tre-bar-row__name { color: var(--gray-700); } .tre-bar-row__val { font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--gray-900); font-weight: 600; } .tre-bar-track { height: 7px; background: var(--gray-50); overflow: hidden; } .tre-bar-fill { height: 100%; background: var(--lime); } .tre-bar-fill--out { background: var(--coral); } @media (max-width: 1024px) { .tre-kpis { grid-template-columns: repeat(2, 1fr); } .tre-kpi:nth-child(odd) { border-left: none; } .tre-kpi:nth-child(3), .tre-kpi:nth-child(4) { border-top: 1px solid var(--gray-100); } .tre-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .tre-kpi__value { font-size: 18px; } .tchart-card { padding: 14px 14px 12px; } } /* ---- Home: liquidity rail (under the projection hero) ---- */ .home-liq-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); margin: 4px 0 12px; } .home-liq { padding: 9px 14px; border-left: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 1px; } .home-liq:first-child { border-left: none; padding-left: 2px; } .home-liq__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); font-weight: 600; } .home-liq__value { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 20px; font-weight: 600; color: var(--gray-900); line-height: 1.1; } .home-liq__value.is-pos { color: var(--green-primary); } .home-liq__value.is-neg { color: var(--red); } .home-liq__value.is-warn { color: #C2410C; } .home-liq__sub { font-size: 10.5px; color: var(--gray-400); } /* ---- Home: próximos movimientos (cobros / pagos) ---- */ .home-flows { display: flex; flex-direction: column; height: 100%; } .home-flows__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .home-flows__col { min-width: 0; } .home-flows__col + .home-flows__col { border-left: 1px solid var(--gray-100); padding-left: 18px; } .home-flows__hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid var(--gray-900); } .home-flows__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .home-flows__title--in { color: var(--green-primary); } .home-flows__title--out { color: var(--red); } .home-flows__sum { font-size: 12px; font-weight: 600; color: var(--gray-700); } .home-flow { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--gray-50); font-size: 12px; } .home-flow__wk { color: var(--gray-400); font-size: 11px; } .home-flow__name { color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-flow__amt { color: var(--gray-900); font-weight: 600; } @media (max-width: 1024px) { .home-liq-rail { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .home-liq-rail { grid-template-columns: 1fr; } .home-liq { border-left: none; border-top: 1px solid var(--gray-100); padding-left: 2px; } .home-liq:first-child { border-top: none; } .home-liq__value { font-size: 17px; } .home-flows__split { grid-template-columns: 1fr; gap: 16px; } .home-flows__col + .home-flows__col { border-left: none; padding-left: 0; border-top: 1px solid var(--gray-100); padding-top: 12px; } } /* ---- FV ⇄ Excel reconciliation strip ---- */ .fv-recon { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--gray-100); border-left: 3px solid var(--lime); padding: 12px 16px; margin-bottom: 16px; } .fv-recon__main { min-width: 0; flex: 1 1 320px; } .fv-recon__title { font-size: 13px; font-weight: 700; color: var(--gray-900); margin: 0 0 3px; } .fv-recon__hint { font-size: 12px; color: var(--gray-500); margin: 0; line-height: 1.45; max-width: 64ch; } .fv-recon__side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .fv-recon__flag { display: flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; padding: 4px 12px; border: 1px solid var(--gray-200); background: var(--gray-25); } .fv-recon__flag:hover { border-color: var(--coral); } .fv-recon__flag-num { font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 700; color: var(--coral); line-height: 1.1; } .fv-recon__flag-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); } .fv-recon__btn { white-space: nowrap; } @media (max-width: 640px) { .fv-recon { align-items: stretch; } .fv-recon__side { justify-content: space-between; width: 100%; } .fv-recon__btn { flex: 1 1 auto; } } /* Multi-series legend for charts.js */ .tchart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding-left: 2px; } .tchart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 12px; color: var(--gray-600); } .tchart-legend-item i { width: 11px; height: 11px; flex: 0 0 auto; display: inline-block; } .tchart-legend-val { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 600; color: var(--gray-800); } /* Donut: fixed-size ring + a column legend beside it */ .tchart-donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .tchart-donut-svg { width: 172px; height: 172px; flex: 0 0 auto; } .tchart-legend--col { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; } /* Pair: two aligned panels, one timeline */ .tchart-pair__panel + .tchart-pair__panel { margin-top: 2px; } /* ============================================================ Light design-language polish (v1.4.07) — flat/Bloomberg kept; elevated via hierarchy, breathing room, crisper pills & cleaner tables. One reversible block. No shadows, no rounding. ============================================================ */ /* Section hierarchy + breathing room */ .section { margin-bottom: 22px; } .section h2 { letter-spacing: -0.01em; } /* Tables: drop zebra for a cleaner read; stronger header label; no trailing border. Keeps the heavy header rule + row hover. */ .data-table tbody tr:nth-child(even) { background: transparent; } .data-table tbody tr:hover, .data-table tbody tr:nth-child(even):hover { background: var(--green-light); } .data-table th { color: var(--gray-600); letter-spacing: 0.05em; } .data-table tbody tr:last-child td { border-bottom: none; } /* Status pills: crisper and consistent (still tinted, still square). */ .tag { padding: 2px 9px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; } /* KPI strip: subtle hover affordance on the linked cells. */ a.stat-cell { transition: background 0.12s ease; } a.stat-cell:hover { background: var(--gray-25); } /* ── Treasury · Detalle por concepto (itemized view) ────────────────────────── */ .tre-det-group { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--gray-600); margin: 14px 0 6px; } .tre-det-concept { border: 1px solid var(--gray-100); border-radius: 8px; margin-bottom: 8px; background: var(--white); overflow: hidden; } .tre-det-head { padding: 9px 14px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; } .tre-det-head:hover { background: var(--gray-25); } .tre-det-body { border-top: 1px solid var(--gray-100); } .tre-det-period td { background: var(--gray-50); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 12px; } .tre-det-item { cursor: pointer; } .tre-det-item:hover td { background: var(--lime-muted); } .tre-det-item td { font-size: 12.5px; padding: 5px 12px; } .tre-det-overdue { color: var(--coral); font-weight: 600; } .tre-det-ok { background: var(--green-light); border: 1px solid var(--lime); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 10px; } .tre-alert-item { padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed var(--gray-100); } #tre-alerts details { margin-top: 6px; } #tre-alerts summary { cursor: pointer; font-weight: 600; font-size: 12px; } .tre-reload-hint { margin-left: 10px; } /* ── Treasury · Escenarios ──────────────────────────────────────────────────── */ .tre-scenario-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; } .tre-scenario-bar__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); } .tre-scenario-bar select { padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--white); } .tre-scenario-banner { background: #f4f0fb; border: 1px solid var(--violet, #7B61C9); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; margin-bottom: 12px; } .tre-delta td { font-size: 11.5px; color: var(--gray-500); border-top: 1px dashed var(--gray-200); } .tre-delta--pos { color: #2f7d32 !important; } .tre-delta--neg { color: var(--coral) !important; } .tre-det-addform { background: #f4f0fb; border: 1px dashed var(--violet, #7B61C9); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tre-det-addform input, .tre-det-addform select { padding: 5px 8px; border: 1px solid var(--gray-200); border-radius: 6px; font: inherit; font-size: 12.5px; } /* ── Tesorería v3 · la matriz gigante editable ──────────────────────────────── */ .tre-grid-wrap { max-height: 75vh; } /* Fixed layout: uniform aligned columns (empty cells no longer collapse), and a much faster browser layout pass on ~15k cells. */ .tre-grid { table-layout: fixed; width: max-content; } /* Perf: skip layout/paint for off-screen data rows on the ~7,700-cell weekly grid — big scroll/interaction win, no visual change. Safe under table-layout: fixed (column widths are fixed, so hidden rows can't shift them). */ .tre-grid tbody tr.tre-row { content-visibility: auto; contain-intrinsic-size: auto 22px; } .tre-grid th, .tre-grid td { font-size: 11.5px; padding: 3px 8px; width: 96px; overflow: hidden; text-overflow: ellipsis; } /* Pin the week columns' min AND max width (not just `width`, which fixed-layout treats as a hint). Without this, the egreso row-group — whose numbers are wider by the leading "−" — overran to 99px while the header/ingreso stayed 96px, shifting the HOY column right. Mirrors how the rowlabel col is pinned. Targets .col-numeric only, so section/month colspan cells are left to span. */ .tre-grid .col-numeric { min-width: 96px; max-width: 96px; } .tre-grid .tre-matrix__rowlabel { width: 280px; min-width: 280px; max-width: 280px; } /* Subtle vertical gridlines so the eye can track a column across 275 rows. */ .tre-grid td { border-right: 1px solid var(--gray-50); } /* Zebra stripe — but never on the summary rows (saldo / bank / subtotal / section), whose backgrounds are deliberate. Without :not(), an even-indexed saldo row got repainted gray-25 here (later + equal specificity wins), leaving its white text on gray = invisible. */ .tre-grid tbody tr:nth-child(even):not(.tre-saldo-row):not(.tre-bank-row):not(.tre-delta-row):not(.tre-subtotal):not(.tre-section-row) td { background: var(--gray-25); } .tre-grid tbody tr:nth-child(even):not(.tre-saldo-row):not(.tre-bank-row):not(.tre-delta-row):not(.tre-subtotal):not(.tre-section-row) td.tre-col--hoy { background: var(--lime-muted) !important; } /* Section headers: the label lives in a normal sticky-left cell (the v2 colspan+sticky trick floats mid-grid on a 6000px-wide table). */ .tre-grid .tre-section-row td { position: static; } .tre-grid .tre-section-row .tre-matrix__rowlabel { position: sticky; left: 0; z-index: 2; background: var(--green-light); } .tre-grid .tre-section-row td:not(.tre-matrix__rowlabel) { background: var(--green-light); border-right: none; } .tre-grid .tre-subtotal td, .tre-grid .tre-saldo-row td { border-right: none; } .tre-grid tbody tr:nth-child(even) td.tre-detail__cell, .tre-grid .tre-detail td { background: var(--gray-25); } .tre-grid__months th { position: sticky; top: 0; z-index: 3; background: var(--gray-50); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); border-left: 2px solid var(--gray-200); text-align: left; padding: 2px 8px; height: 20px; } .tre-grid__months th.tre-matrix__rowlabel { z-index: 4; border-left: none; } /* second header row offsets below the month-group row ONLY when it exists (weekly view) */ .tre-grid .tre-grid__months + tr th { top: 24px; } .tre-grid--editable .tre-cell { cursor: pointer; } .tre-grid--editable .tre-cell:hover { background: var(--lime-muted); } .tre-grid-root:not(.tre-grid--editable) .tre-cell { cursor: zoom-in; } .tre-cell { position: relative; } .tre-cell--flag { box-shadow: inset 2px 0 0 #E0A800; background: #FFFDF3; } .tre-cell--flag .tre-warn { color: #B8860B; vertical-align: -1px; margin-left: 3px; cursor: pointer; } /* Un mes cerrado de una deuda donde la factura registrada reemplazó a la cuota tecleada. Discreto a propósito: no es un error, es la cifra real ganándole a una proyección — pero tiene que verse que ahí había un número escrito. */ .tre-superseded { color: var(--gray-400, #9aa0a6); margin-left: 3px; cursor: help; } .tre-cell--edited::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-accent); } .tre-rowlabel { display: flex; align-items: center; gap: 6px; } .tre-caret { border: none; background: none; cursor: pointer; color: var(--gray-400); font-size: 10px; padding: 0 2px; flex: 0 0 auto; } .tre-caret:hover { color: var(--gray-700); } .tre-rowname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .tre-rowtag { flex: 0 0 auto; font-size: 9px; font-weight: 700; background: #e9eafc; color: #5C45A1; border-radius: 3px; padding: 0 4px; } /* Gasto proyectado sin ninguna factura FG que lo respalde (n_fact == 0). */ .tre-noflag { flex: 0 0 auto; font-size: 9px; font-weight: 700; background: #fdecc8; color: #8a5200; border-radius: 3px; padding: 0 4px; white-space: nowrap; } /* Eliminar deuda (columna × en la pestaña Deudas). */ .tre-del-btn { border: none; background: none; color: var(--gray-400); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; } .tre-del-btn:hover { color: #c0392b; } .tre-rowtotal { flex: 0 0 auto; font-size: 10px; color: var(--gray-500); } /* Year-total column: the subtotal/saldo rows reuse the .tre-rowlabel flex so their total lands in the SAME x as the data rows' (hidden caret + arch spacers reserve identical edge space). Emphasize the subtotal grand totals; mute the saldo placeholder on the dark row. */ .tre-subtotal .tre-rowtotal { color: var(--gray-700); font-weight: 700; } .tre-saldo-row .tre-rowtotal { color: rgba(255,255,255,.45); } .tre-arch { border: none; background: none; color: var(--gray-300); cursor: pointer; font-size: 12px; padding: 0 2px; flex: 0 0 auto; visibility: hidden; } .tre-row:hover .tre-arch { visibility: visible; } .tre-arch:hover { color: var(--coral); } /* Trash for hand-added rows — hidden until row hover, same as the move control. */ .tre-del { border: none; background: none; color: var(--gray-300); cursor: pointer; font-size: 12px; padding: 0 2px; flex: 0 0 auto; visibility: hidden; } .tre-row:hover .tre-del { visibility: visible; } .tre-del:hover { color: var(--coral); } /* Two-step delete confirmation — fixed top-center so the second, deliberate action is visually separated from the row where the first click happened. */ .tre-del-banner { /* z-index matches .flash-messages--overlay so it clears the fixed top nav (the sticky topbar and tab strip sit far below this). */ position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9850; max-width: min(560px, 92vw); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border: 1px solid var(--coral, #e06955); border-left: 4px solid var(--coral, #e06955); border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); animation: treDelIn .12s ease-out; } @keyframes treDelIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } .tre-del-banner__msg { font-size: 13px; line-height: 1.4; flex: 1 1 260px; } .tre-del-banner__warn { color: var(--coral, #c0392b); font-weight: 600; } .tre-del-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; } .tre-row--archived .tre-rowname { text-decoration: line-through; color: var(--gray-400); } .tre-addbtn { font-size: 11px; margin-left: 8px; text-transform: none; letter-spacing: 0; } .tre-detail td { background: var(--gray-25); font-size: 10.5px; color: var(--gray-600); border-bottom: 1px dotted var(--gray-100); padding: 2px 8px; } .tre-detail__label { padding-left: 26px !important; font-family: var(--font-mono, monospace); } .tre-detail__cell { color: var(--gray-500); } .tre-grid-foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; } .tre-grid-toolbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; } .tre-grid-toolbar input { padding: 6px 12px; border: 1px solid var(--gray-200); border-radius: 8px; font: inherit; font-size: 12.5px; width: 320px; background: var(--white); } #tre-filter-count { font-size: 12px; } /* Tesorería · pestañas Recurrentes / No recurrentes — matriz mensual editable. Meses pasados y el actual son reales (solo lectura); los futuros se editan. */ .tre-exp-root .tre-grid .tre-matrix__rowlabel { width: 300px; min-width: 300px; max-width: 300px; } .tre-exp-root .tre-cell--past { cursor: default; color: var(--gray-600); } .tre-exp-root.tre-grid--editable .tre-cell--past:hover { background: inherit; } .tre-exp-root.tre-grid--editable .tre-cell--past.tre-col--hoy { cursor: zoom-in; } .tre-exp-root.tre-grid--editable .tre-cell--past.tre-col--hoy:hover { background: var(--lime-muted); } .tre-exp-total { margin-left: auto; font-size: 12px; color: var(--gray-700); } /* ── Inicio for scope-locked (Reporte de Ventas) users ─────────────────────── Bar row is plain CSS rather than a chart config so this page ships no JS of its own. Flat, no tinted panels — accents carry the colour. */ .rvh-bars { display: flex; align-items: flex-end; gap: 6px; height: 168px; padding: 8px 2px 0; } .rvh-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .rvh-bar-val { font-size: 10.5px; color: var(--gray-500); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; } .rvh-bar-fill { width: 100%; max-width: 46px; background: var(--lime); min-height: 2px; transition: height .2s ease; } .rvh-bar.is-current .rvh-bar-fill { background: var(--green-dark); } .rvh-bar.is-current .rvh-bar-val { color: var(--green-dark); font-weight: 700; } .rvh-bar-lbl { font-size: 10.5px; color: var(--gray-500); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; } .rvh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rvh-card { display: block; padding: 18px 20px; background: var(--white); border: 1px solid var(--gray-100); border-left: 3px solid var(--lime); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .rvh-card:hover { border-left-color: var(--green-dark); transform: translateY(-1px); } .rvh-card svg { width: 20px; height: 20px; color: var(--green-primary); display: block; margin-bottom: 10px; } .rvh-card-title { display: block; font-size: 15px; font-weight: 700; color: var(--gray-900); } .rvh-card-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gray-600); line-height: 1.5; } @media (max-width: 768px) { .rvh-cards { grid-template-columns: 1fr; } .rvh-bars { height: 132px; } .rvh-bar-val { display: none; } } /* ── Section pills: icon-first, name on demand ─────────────────────────────── The row had grown past the width available and was clipping under the search button. Labels now collapse to their icon and expand only for the pill you're pointing at (plus the section you're actually in, so you never lose your place). Width is animated rather than toggling display, so the row doesn't jump — and it degrades to "always shown" if a browser ignores the transition. */ .section-pill .pill-label { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; vertical-align: middle; transition: max-width .22s ease, opacity .16s ease, margin-left .22s ease; } .section-pill:hover .pill-label, .section-pill:focus-visible .pill-label, .section-pill.is-active .pill-label, .section-pill[aria-current="page"] .pill-label, .section-pill-dropdown[open] > .section-pill .pill-label { max-width: 220px; opacity: 1; margin-left: 7px; } /* Keyboard users get the same reveal when tabbing through. */ .section-pill:focus-within .pill-label { max-width: 220px; opacity: 1; margin-left: 7px; } /* The icon carries the meaning while collapsed, so it must not shrink away. */ .section-pill .section-pill-icon { margin-right: 0; flex: 0 0 auto; } /* Native tooltip as the accessible fallback — set from the label in app.js. */ .section-pill { position: relative; } @media (max-width: 640px) { /* Too narrow for hover to be a real interaction; keep the icons only. */ .section-pill:hover .pill-label { max-width: 0; opacity: 0; margin-left: 0; } .section-pill.is-active .pill-label { max-width: 160px; opacity: 1; margin-left: 6px; } } /* Toast for actions that don't navigate (the Nexus ficha editor). Top-center, like the other BOps advisories. Lives outside .nexus-root because it is appended to , so it must not depend on the panel's scoped tokens. */ .nx-toast { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -14px); /* Above the Nexus modals (9997–9999). At 9800 it painted UNDER an open modal's backdrop, so every message raised from inside a modal — including "completa nombre, documento y email" — was invisible, and the button looked dead. */ z-index: 10050; max-width: min(560px, 92vw); padding: 11px 20px; /* White, not the brand dark-green it used to be: the toast lands at the top of the window, which is exactly where the dark brand bar is, so a dark card on a dark bar read as part of the chrome instead of as a message. A white card with a coloured edge separates from both the bar and the page below it. */ background: #fff; color: #1A1C17; font-family: var(--font-ui); font-size: 13px; font-weight: 600; border: 1px solid #D1D3CE; border-left: 4px solid var(--lime); box-shadow: 0 10px 30px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .nx-toast.is-on { opacity: 1; transform: translate(-50%, 0); } .nx-toast.is-bad { border-left-color: #d32f2f; color: #8a1c13; } .nx-toast.is-ok { border-left-color: var(--lime); } /* Nexus · Solicitudes queue action cluster */ .nxq-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .nxq-note { width: 120px; font-size: 11px; padding: 4px 7px; border: 1px solid var(--gray-200); } .nxq-actions button[disabled] { opacity: .55; cursor: progress; } /* ── Error pages (templates/error.html) ───────────────────────────────────── Left-anchored white type straight on the brand field — no card. An error is something to READ, and the white panel that used to sit in the middle boxed three sentences into a column narrower than the sentences. Anchoring left also keeps the reading column clear of the lime chevrons, which live on the right of the same background. */ .err-body { margin: 0; } .err-field { place-items: center start; /* the field itself is shared with login */ padding: 40px clamp(24px, 9vw, 140px); } .err-panel { position: relative; z-index: 2; max-width: 560px; width: 100%; background: transparent; /* deliberately: the field shows through */ color: var(--white); animation: cardSlideUp .5s ease-out; } .err-logo { height: 30px; width: auto; display: block; margin-bottom: 34px; opacity: .95; } .err-code { font-family: var(--font-mono); font-size: 62px; font-weight: 700; line-height: 1; color: var(--lime); letter-spacing: -.03em; } .err-title { font-size: 27px; font-weight: 800; color: var(--white); margin: 12px 0 10px; letter-spacing: -.015em; line-height: 1.2; } .err-text { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; } .err-hint, .err-back { border-left: 2px solid rgba(174,201,17,.55); padding: 2px 0 2px 16px; margin: 26px 0 0; max-width: 52ch; } .err-hint-t, .err-back-t { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--lime); margin-bottom: 6px; } .err-hint-d, .err-back-d { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.66); } .err-hint-d b, .err-back-d b { color: rgba(255,255,255,.92); font-weight: 700; } .err-hint kbd { display: inline-block; padding: 1px 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-bottom-width: 2px; border-radius: 3px; font: 600 11.5px/1.6 var(--font-mono); color: var(--white); white-space: nowrap; } .err-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .err-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: var(--lime); color: var(--green-dark); font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-decoration: none; border-radius: 2px; transition: transform .12s ease, box-shadow .12s ease; } .err-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.35); } .err-link { font-size: 12.5px; color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 3px; } .err-link:hover { color: var(--white); } .err-ref { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.42); } .err-ref code { font-family: var(--font-mono); color: rgba(255,255,255,.62); } @media (max-width: 640px) { .err-code { font-size: 48px; } .err-title { font-size: 22px; } .err-logo { margin-bottom: 26px; } } /* Tesorería · Deudas — gastos bancarios en tres capas (banco › sub-cuenta › factura). El

por banco mantiene la pantalla legible cuando hay decenas de facturas, sin esconder que la decisión es una por una. */ .tre-banco { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 6px; margin-bottom: 10px; } .tre-banco > summary { padding: 8px 12px; cursor: pointer; background: var(--gray-50, #f9fafb); border-radius: 6px; } .tre-banco[open] > summary { border-bottom: 1px solid var(--gray-200, #e5e7eb); border-radius: 6px 6px 0 0; } .tre-subcuenta { padding: 8px 12px 12px; } .tre-subcuenta__head { font-weight: 600; font-size: 13px; margin: 6px 0 4px; }