/* ========================================================================== What-If — Simulador Salarial · "Ledger" -------------------------------------------------------------------------- Chrome gets out of the way so the figures carry the page: white ground, hairline rules instead of boxes and shadows, one accent colour used only where it means something, and every number set in a monospaced face on tabular figures so columns align on the decimal point. Every rule is scoped under `.wf-root`, the class on the /whatif shell. Dash serves this file on every page of the toolkit, so an unscoped rule here would restyle the Dashboard, CBot and the LFT simulator too. ========================================================================== */ /* Tokens live on both selectors because dash-bootstrap-components portals its modals to , outside `.wf-root`. `.wf-modal` is the opt-in class those modals carry; nothing else on the toolkit picks it up. */ .wf-root, .wf-modal { /* brand — unchanged */ --wf-navy: #002a5c; --wf-navy-soft: #1b2559; --wf-cyan: #00adef; --wf-teal: #70cbd7; --wf-teal-pale: #b4e2ee; /* ledger neutrals — grey biased toward the brand navy, never pure grey */ --wf-ink: #0d1530; --wf-ink-2: #5b678a; --wf-ink-3: #939db8; --wf-rule: #dfe7f5; --wf-rule-soft: #eef2fa; --wf-surface: #ffffff; --wf-canvas: #f5f8fd; /* subtle fills: input rests, row hover */ --wf-page: #e8f0fa; /* the page itself, so white cards lift off it */ /* semantic — an increase in cost is blue, a reduction green. Kept clear of --wf-cyan, which means "focused", so the two never read as the same thing. */ --wf-up: #0f6fc4; --wf-up-soft: #4a9ddd; --wf-down: #0d8f63; --wf-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace; --wf-ease: cubic-bezier(.4, 0, .2, 1); } .wf-root { background: var(--wf-page) !important; color: var(--wf-ink); font-feature-settings: "cv05", "ss01"; } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .wf-root h1, .wf-root h2, .wf-root h3, .wf-root h4, .wf-root h5 { color: var(--wf-navy-soft); letter-spacing: -.022em; text-wrap: balance; } .wf-root .wf-pagetitle { font-size: clamp(24px, 3.4vw, 32px); font-weight: 780; letter-spacing: -.032em; margin: 0; } .wf-root .text-secondary-modern { color: var(--wf-ink-2) !important; font-weight: 500; } .wf-root .wf-num, .wf-root [id^="sum-"], .wf-root [id^="resumen-"], .wf-root [id^="inicial-"], .wf-root [id^="final-"], .wf-root [id^="dif-"], .wf-root [id^="cambio-"] { font-family: var(--wf-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* the per-module heading — was a full-width black H1 repeating the page title */ .wf-root .wf-module-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--wf-rule); } .wf-root .wf-module-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-ink-3); } .wf-root .wf-module-name { font-size: clamp(17px, 2.6vw, 22px); font-weight: 720; letter-spacing: -.024em; color: var(--wf-navy); margin: 0; } /* -------------------------------------------------------------------------- Surfaces — hairline, not shadow -------------------------------------------------------------------------- */ .wf-root .catch-card { background: var(--wf-surface); border: 1px solid var(--wf-rule); border-radius: 14px; box-shadow: none; padding: clamp(18px, 3vw, 32px); margin-bottom: 22px; } /* -------------------------------------------------------------------------- Buttons — pill, one hairline, navy on hover. Replaces square 1px borders with no hover and no pressed state. -------------------------------------------------------------------------- */ .wf-root .btn-catch-secondary, .wf-root .btn-catch-primary, .wf-root .wf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 999px; border: 1px solid #d7deec; background: var(--wf-surface); color: var(--wf-ink); font: inherit; font-size: 13px; font-weight: 620; line-height: 1.4; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .16s var(--wf-ease), color .16s var(--wf-ease), border-color .16s var(--wf-ease), transform .1s var(--wf-ease); } .wf-root .btn-catch-secondary:hover, .wf-root .wf-btn:hover { background: var(--wf-navy); border-color: var(--wf-navy); color: #fff; } .wf-root .btn-catch-primary, .wf-root .wf-btn-primary { background: var(--wf-navy); border-color: var(--wf-navy); color: #fff !important; } .wf-root .btn-catch-primary:hover, .wf-root .wf-btn-primary:hover { background: var(--wf-cyan); border-color: var(--wf-cyan); color: #fff !important; } .wf-root .wf-btn:active, .wf-root .btn-catch-secondary:active, .wf-root .btn-catch-primary:active { transform: translateY(1px); } .wf-root .wf-btn:focus-visible, .wf-root .btn-catch-secondary:focus-visible, .wf-root .btn-catch-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 173, 239, .3); } .wf-root .wf-btn i { font-size: 14px; line-height: 1; opacity: .85; } /* -------------------------------------------------------------------------- Page head — title left, actions right, both allowed to wrap -------------------------------------------------------------------------- */ .wf-root .wf-pagehead { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; padding-top: 28px; } .wf-root .wf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* -------------------------------------------------------------------------- Module navigation — the slider stays (it works); its labels stop colliding -------------------------------------------------------------------------- */ .wf-root .wf-modulebar { padding: 0 6px 34px; border-bottom: 1px solid var(--wf-rule); margin-bottom: 28px; } .wf-root .rc-slider-rail { background: var(--wf-rule) !important; height: 3px !important; } .wf-root .rc-slider-track { background: var(--wf-navy) !important; height: 3px !important; } .wf-root .rc-slider-dot { border-color: var(--wf-rule) !important; background: var(--wf-surface) !important; width: 9px !important; height: 9px !important; bottom: -3px !important; } .wf-root .rc-slider-dot-active { border-color: var(--wf-navy) !important; } .wf-root .rc-slider-handle { border: 2px solid var(--wf-navy) !important; background: var(--wf-surface) !important; opacity: 1 !important; width: 15px !important; height: 15px !important; margin-top: -6px !important; box-shadow: none !important; } .wf-root .rc-slider-handle:focus-visible { box-shadow: 0 0 0 4px rgba(0, 173, 239, .28) !important; } .wf-root .rc-slider-mark-text { color: var(--wf-ink-3) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; /* the labels used to run into each other on a phone: they were a single nowrap line each, positioned by percentage */ white-space: normal !important; max-width: 74px; line-height: 1.25; padding-top: 4px; } .wf-root .rc-slider-mark-text-active { color: var(--wf-navy) !important; } /* -------------------------------------------------------------------------- Section headings — used to be teal pills with a per-title hard-coded width (400px, 420px, 450px…), each of them wider than a phone -------------------------------------------------------------------------- */ .wf-root .wf-section { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1.5px solid var(--wf-teal-pale); } .wf-root .wf-section-title { margin: 0; font-size: clamp(15px, 2.2vw, 18px); font-weight: 750; letter-spacing: -.01em; color: var(--wf-navy); overflow-wrap: anywhere; } .wf-root .wf-section-info { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--wf-rule); background: var(--wf-surface); color: var(--wf-ink-3); font-family: var(--wf-mono); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: color .15s var(--wf-ease), border-color .15s var(--wf-ease); } .wf-root .wf-section-info:hover { color: var(--wf-cyan); border-color: var(--wf-cyan); } /* the "Total X:" caption above each subtotal table */ .wf-root .wf-subtotal-label { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-ink-3); margin: 22px 0 6px; } /* -------------------------------------------------------------------------- Table shell — a scroll area per table, so the page never slides sideways -------------------------------------------------------------------------- */ .wf-root .wf-scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: thin; scrollbar-color: var(--wf-rule) transparent; } .wf-root .wf-scroll::-webkit-scrollbar { height: 9px; } .wf-root .wf-scroll::-webkit-scrollbar-track { background: transparent; } .wf-root .wf-scroll::-webkit-scrollbar-thumb { background: var(--wf-rule); border-radius: 999px; } .wf-root .wf-scroll::-webkit-scrollbar-thumb:hover { background: var(--wf-ink-3); } .wf-root .wf-scroll > .table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; width: 100%; /* dbc's bordered=True leaves a 1px frame on the table element itself, which is enough to overflow the wrapper by 2px and raise a scrollbar on a table that otherwise fits exactly. */ border: 0; } /* -------------------------------------------------------------------------- Headers — a band row saying what each group of columns is, then short labels -------------------------------------------------------------------------- */ .wf-root .wf-band { background: var(--wf-surface); color: var(--wf-ink-3); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 10px 10px 5px; border: none; border-bottom: 1px solid var(--wf-rule-soft); white-space: nowrap; } .wf-root .wf-band-empty { border-bottom-color: transparent; } .wf-root .wf-th { background: var(--wf-surface); color: var(--wf-ink-2); font-size: 10.5px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; line-height: 1.32; text-align: center; vertical-align: middle; padding: 8px 10px 12px; border: none; border-bottom: 1.5px solid var(--wf-rule); white-space: normal; min-width: 84px; position: relative; } .wf-root .wf-th[title] { cursor: help; } .wf-root .wf-th-accent { color: var(--wf-navy); } /* Absolutely positioned rather than a block with negative margins: negative margins spill past the cell and count toward the wrapper's scrollWidth, which was enough to raise a scrollbar on a table that otherwise fit exactly. */ .wf-root .wf-th-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wf-teal-pale); } /* -------------------------------------------------------------------------- Body — hairlines, roomy rows, figures on a monospaced face -------------------------------------------------------------------------- */ .wf-root .wf-scroll > .table > tbody > tr > td { border: none; border-bottom: 1px solid var(--wf-rule-soft); padding: 10px; font-size: 13.5px; color: var(--wf-ink); vertical-align: middle; text-align: center; background: var(--wf-surface); font-variant-numeric: tabular-nums; white-space: nowrap; } .wf-root .wf-scroll > .table > tbody > tr:last-child > td { border-bottom: none; } .wf-root .wf-scroll > .table > tbody > tr:hover > td { background: var(--wf-canvas); } /* dbc still ships its striped/bordered classes; neutralise them so the ledger look is not fighting Bootstrap's zebra stripes */ .wf-root .wf-scroll > .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; box-shadow: none; color: inherit; } .wf-root .wf-scroll > .table-bordered > :not(caption) > * > * { border-width: 0; } /* The MXN / USD pairs. Bootstrap's lg=6 put them side by side from 992px up, which on a 1440px screen left each table 517px to render four money columns in — so both of them scrolled. This hands the decision to the content: two columns only when each can have 640px, otherwise stacked and full width. */ .wf-root .wf-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(640px, 1fr)); gap: 8px 30px; margin: 0; } .wf-root .wf-pair > [class*="col"] { width: 100%; max-width: 100%; flex: none; padding-inline: 0 !important; border-left: none !important; } /* Density by column count, set on the wrapper by `wf_table`. A 4-column totals table can afford air; a 13-column data table cannot, and there the same padding is what pushes the last column past the edge of the screen. */ .wf-root .wf-scroll-wide > .table > tbody > tr > td { padding-inline: 7px; } .wf-root .wf-scroll-wide .wf-th { padding-inline: 7px; min-width: 78px; } .wf-root .wf-scroll-wide .wf-band { padding-inline: 7px; } .wf-root .wf-scroll-wide .wf-input { width: 70px !important; } .wf-root .wf-scroll-compact > .table > tbody > tr > td { padding-inline: 8px; font-size: 13px; } .wf-root .wf-scroll-compact .wf-th { padding-inline: 8px; min-width: 74px; } .wf-root .wf-scroll-compact .wf-sticky { min-width: 104px; max-width: 168px; } /* -------------------------------------------------------------------------- Sticky first column — the row label stays put while the numbers scroll. Requires the .wf-scroll wrapper above; sticky with nothing to stick against silently collapses the remaining columns instead. -------------------------------------------------------------------------- */ .wf-root .wf-sticky { position: sticky; left: 0; z-index: 2; text-align: left !important; font-weight: 620; min-width: 132px; max-width: 200px; white-space: normal; background: var(--wf-surface); box-shadow: 1px 0 0 var(--wf-rule-soft); } .wf-root th.wf-sticky { z-index: 3; } .wf-root .wf-scroll > .table > tbody > tr:hover > td.wf-sticky { background: var(--wf-canvas); } /* -------------------------------------------------------------------------- Editable cells -------------------------------------------------------------------------- */ .wf-root .wf-input { border: 1.5px solid #c9d5ea; border-radius: 7px; background: var(--wf-surface); color: var(--wf-ink); font-family: var(--wf-mono); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; padding: 5px 9px; transition: border-color .15s var(--wf-ease), box-shadow .15s var(--wf-ease), background .15s var(--wf-ease); } /* Near-black, not grey: a faint hint made the cells read as disabled rather than as empty and ready to type in. */ .wf-root .wf-input::placeholder { color: var(--wf-ink); opacity: .74; } .wf-root .wf-input:hover { border-color: var(--wf-up-soft); } .wf-root .wf-input:focus { outline: none; background: var(--wf-surface); border-color: var(--wf-cyan); box-shadow: 0 0 0 3px rgba(0, 173, 239, .18); } /* -------------------------------------------------------------------------- Proyección salarial — scenario picker and the text around the chart -------------------------------------------------------------------------- */ .wf-root .wf-proj-lede { margin: 7px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.55; color: var(--wf-ink-2); } .wf-root .wf-proj-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 4px; } .wf-root .wf-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--wf-canvas); border: 1px solid var(--wf-rule); border-radius: 999px; } .wf-root .wf-segmented label { display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 640; color: var(--wf-ink-2); cursor: pointer; white-space: nowrap; transition: background .16s var(--wf-ease), color .16s var(--wf-ease); } .wf-root .wf-segmented label:hover { color: var(--wf-ink); } /* the radio itself is the state; the pill is what the eye reads */ .wf-root .wf-segmented input { position: absolute; opacity: 0; pointer-events: none; } .wf-root .wf-segmented label:has(input:checked) { background: var(--wf-surface); color: var(--wf-navy); box-shadow: 0 1px 3px rgba(13, 21, 48, .12); } /* The explanation under the chart. Three short columns rather than one long paragraph: what the lines mean, what this scenario assumes, and what it does to payroll — the three questions the chart raises, in that order. */ .wf-root .wf-explain { display: grid; gap: 1px; background: var(--wf-rule); border: 1px solid var(--wf-rule); border-radius: 12px; overflow: hidden; margin-top: 14px; } @media (min-width: 900px) { .wf-root .wf-explain { grid-template-columns: repeat(3, 1fr); } } .wf-root .wf-explain-col { background: var(--wf-surface); padding: 15px 17px 17px; } .wf-root .wf-explain-title { margin: 0 0 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-ink-3) !important; } .wf-root .wf-explain-body { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--wf-ink-2); } .wf-root .wf-explain-body b { color: var(--wf-ink); font-weight: 680; } .wf-root .wf-proj-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wf-ink-3); } /* -------------------------------------------------------------------------- Live cost track — base → simulated, drawn by assets/whatif-cost-track.js -------------------------------------------------------------------------- */ .wf-root .wf-track { margin: 0 0 30px; } .wf-root .wf-track-canvas { width: 100%; } .wf-root .wf-track-svg { display: block; width: 100%; height: 72px; overflow: visible; } .wf-root .wf-track-notch { font-family: var(--wf-mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; fill: var(--wf-ink-2); } .wf-root .wf-track-legend { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: 6px; font-family: var(--wf-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--wf-ink); } .wf-root .wf-track-k { font-family: var(--wf-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-ink-3); margin-right: 5px; } .wf-root .wf-track-delta { font-weight: 700; } /* -------------------------------------------------------------------------- Summary — the reading above the detail tables, by assets/whatif-summary.js -------------------------------------------------------------------------- */ .wf-root .wf-summary { display: grid; gap: 1px; background: var(--wf-rule); border: 1px solid var(--wf-rule); border-radius: 12px; overflow: hidden; margin-bottom: 30px; } @media (min-width: 900px) { .wf-root .wf-summary { grid-template-columns: 1.5fr 1fr 1fr; } .wf-root .wf-summary:has(.wf-sum-panel:nth-child(2):last-child) { grid-template-columns: 1.6fr 1fr; } } .wf-root .wf-sum-panel { background: var(--wf-surface); padding: 20px 22px 22px; } .wf-root .wf-sum-title { margin: 0 0 14px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-ink-3) !important; } .wf-root .wf-sum-drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .wf-root .wf-sum-driver { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: baseline; } .wf-root .wf-sum-driver-name { font-size: 13.5px; font-weight: 620; color: var(--wf-ink); overflow-wrap: anywhere; } .wf-root .wf-sum-driver-amount { font-family: var(--wf-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .wf-root .wf-sum-bar { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: var(--wf-rule-soft); overflow: hidden; } .wf-root .wf-sum-bar i { display: block; height: 100%; border-radius: 999px; transition: width .35s var(--wf-ease); } .wf-root .wf-sum-bar-up { background: var(--wf-up); } .wf-root .wf-sum-bar-down { background: var(--wf-down); } .wf-root .wf-sum-more { margin: 2px 0 0; font-size: 12px; color: var(--wf-ink-3); } .wf-root .wf-sum-empty { margin: 0; font-size: 13px; line-height: 1.55; color: var(--wf-ink-3); max-width: 42ch; } .wf-root .wf-sum-figure { display: flex; flex-direction: column; gap: 8px; } .wf-root .wf-sum-big { font-family: var(--wf-mono); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--wf-ink); } .wf-root .wf-sum-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--wf-ink-2); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Deltas — colour is data here, not decoration. Applied by whatif-motion.js from the sign of the figure, so an increase in cost reads as one at a glance. -------------------------------------------------------------------------- */ .wf-root .wf-up { color: var(--wf-up); font-weight: 680; } .wf-root .wf-down { color: var(--wf-down); font-weight: 680; } .wf-root .wf-flat { color: var(--wf-ink-3); } /* -------------------------------------------------------------------------- Totals block — in this direction the number is the hero -------------------------------------------------------------------------- */ .wf-root .table-custom thead th { background: transparent !important; color: var(--wf-ink-3) !important; font-size: 10px; font-weight: 800 !important; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--wf-rule) !important; padding: 8px 14px !important; } .wf-root .table-custom tbody td { padding: 12px 14px !important; font-size: 14px; color: var(--wf-ink); border-bottom: 1px solid var(--wf-rule-soft) !important; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Dropdowns and modals -------------------------------------------------------------------------- */ .wf-root .Select-control, .wf-root .Select--single > .Select-control { border: 1px solid var(--wf-rule) !important; border-radius: 9px !important; background: var(--wf-surface) !important; } .wf-root .is-focused:not(.is-open) > .Select-control { border-color: var(--wf-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 173, 239, .18) !important; } .wf-root .wf-modeswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .wf-root .wf-modeswitch > label { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-ink-3); margin: 0; } /* -------------------------------------------------------------------------- Modals — the dollar setup and the per-section info panels. They portal to , so they are styled through the opt-in `.wf-modal` class rather than the page scope. -------------------------------------------------------------------------- */ .wf-modal .modal-content { border: 1px solid var(--wf-rule); border-radius: 16px; box-shadow: 0 34px 70px -34px rgba(13, 21, 48, .45); color: var(--wf-ink); } .wf-modal .modal-header { border-bottom: 1px solid var(--wf-rule); padding: 22px 26px 16px; align-items: flex-start; } .wf-modal .modal-title { display: block; } .wf-modal .wf-modal-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--wf-ink-3); } .wf-modal .wf-modal-name, .wf-modal .modal-title { font-size: 19px; font-weight: 740; letter-spacing: -.024em; color: var(--wf-navy); line-height: 1.25; } .wf-modal .wf-modal-name { display: block; margin-top: 4px; } .wf-modal .btn-close { margin-top: 4px; } .wf-modal .modal-body { padding: 22px 26px; font-size: 14px; line-height: 1.6; color: var(--wf-ink-2); display: flex; flex-direction: column; gap: 20px; } .wf-modal .modal-body p { margin: 0; } .wf-modal .modal-body p + p { margin-top: 8px; } .wf-modal .modal-footer { border-top: 1px solid var(--wf-rule); padding: 16px 26px 20px; } .wf-modal .wf-field { display: flex; flex-direction: column; gap: 8px; } .wf-modal .wf-field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .wf-modal .wf-field-label { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--wf-ink-3); margin: 0; } .wf-modal .wf-field-note { margin: 4px 0 0; font-size: 12.5px; color: var(--wf-ink-2); } .wf-modal .wf-modal-note { font-size: 12.5px; line-height: 1.55; color: var(--wf-ink-3); padding-top: 16px; border-top: 1px solid var(--wf-rule-soft); } .wf-modal .wf-radio label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--wf-rule); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--wf-ink); cursor: pointer; transition: border-color .15s var(--wf-ease), background .15s var(--wf-ease); } .wf-modal .wf-radio label + label { margin-top: 8px; } .wf-modal .wf-radio label:hover { border-color: var(--wf-up-soft); background: var(--wf-canvas); } /* dcc.RadioItems emits text — the text is a bare node, so the gap is set on the input rather than relying on flex `gap`. */ .wf-modal .wf-radio input { accent-color: var(--wf-cyan); width: 15px; height: 15px; margin: 0 10px 0 0; flex: none; } .wf-modal .wf-radio input:checked + span, .wf-modal .wf-radio label:has(input:checked) { border-color: var(--wf-cyan); background: #f2faff; } .wf-modal .wf-input { border: 1.5px solid #c9d5ea; border-radius: 9px; background: var(--wf-surface); color: var(--wf-ink); font-family: var(--wf-mono); font-variant-numeric: tabular-nums; padding: 9px 13px; transition: border-color .15s var(--wf-ease), box-shadow .15s var(--wf-ease); } .wf-modal .wf-input::placeholder { color: var(--wf-ink); opacity: .5; } .wf-modal .wf-input-lg { font-size: 16px; font-weight: 650; } .wf-modal .wf-input:focus { outline: none; border-color: var(--wf-cyan); box-shadow: 0 0 0 3px rgba(0, 173, 239, .18); } .wf-modal .wf-callout { background: var(--wf-canvas); border: 1px solid var(--wf-rule); border-radius: 12px; padding: 16px 18px; text-align: center; } .wf-modal .wf-modal-figure { margin: 6px 0 0; font-family: var(--wf-mono); font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--wf-navy) !important; } .wf-modal .wf-chip { flex: none; font-family: var(--wf-mono); font-size: 15px; font-weight: 700; color: var(--wf-navy); background: var(--wf-canvas); border: 1px solid var(--wf-rule); border-radius: 9px; padding: 7px 14px; } /* buttons inside a modal reuse the page's pill, since the tokens travel */ .wf-modal .wf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid #d7deec; background: var(--wf-surface); color: var(--wf-ink); font: inherit; font-size: 13.5px; font-weight: 640; cursor: pointer; transition: background .16s var(--wf-ease), color .16s var(--wf-ease), border-color .16s var(--wf-ease); } .wf-modal .wf-btn:hover { background: var(--wf-navy); border-color: var(--wf-navy); color: #fff; } .wf-modal .wf-btn-primary { background: var(--wf-navy); border-color: var(--wf-navy); color: #fff; } .wf-modal .wf-btn-primary:hover { background: var(--wf-cyan); border-color: var(--wf-cyan); } .wf-modal .wf-btn-block { width: 100%; padding-block: 12px; font-size: 15px; } /* -------------------------------------------------------------------------- Changes drawer -------------------------------------------------------------------------- */ /* bottom-right, out of the way of the header actions it used to sit on top of */ .wf-root .wf-drawer-toggle { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(16px, 2.4vw, 26px); z-index: 1000; padding: 11px 20px !important; box-shadow: 0 10px 26px -12px rgba(0, 42, 92, .75) !important; } /* the count is a chip, not part of the label — reading "Ver Cambios (3)" as a button name was the thing that felt wrong before */ .wf-root .wf-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-family: var(--wf-mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .wf-root .wf-drawer { position: fixed; top: 0; width: min(420px, 100vw); height: 100vh; background: var(--wf-navy); color: #fff; z-index: 2000; box-shadow: -18px 0 46px -20px rgba(0, 0, 0, .55); transition: right .32s var(--wf-ease); } .wf-root .wf-drawer-inner { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 4vw, 32px); gap: 22px; } .wf-root .wf-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .wf-root .wf-drawer-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .wf-root .wf-drawer-title { margin: 4px 0 0; color: #fff !important; font-size: 19px; font-weight: 700; letter-spacing: -.02em; } .wf-root .wf-drawer-close { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: rgba(255, 255, 255, .8); font-size: 12px; cursor: pointer; transition: background .15s var(--wf-ease), color .15s var(--wf-ease); } .wf-root .wf-drawer-close:hover { background: rgba(255, 255, 255, .14); color: #fff; } .wf-root .wf-drawer-body { flex: 1 1 auto; overflow-y: auto; margin-right: -8px; padding-right: 8px; } .wf-root .wf-drawer-body::-webkit-scrollbar { width: 6px; } .wf-root .wf-drawer-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; } /* one changed line inside the drawer */ .wf-root .wf-change-group { margin-bottom: 20px; } .wf-root .wf-change-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 7px; margin-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .wf-root .wf-change-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-teal-pale); } .wf-root .wf-change-n { font-family: var(--wf-mono); font-size: 11px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; } .wf-root .wf-change-list { margin: 0; padding: 0; list-style: none; } .wf-root .wf-change-list li { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .84); padding: 4px 0 4px 13px; position: relative; overflow-wrap: anywhere; } .wf-root .wf-change-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--wf-cyan); } .wf-root .wf-change-empty { text-align: center; padding: 48px 18px; color: rgba(255, 255, 255, .5); font-size: 13.5px; line-height: 1.6; } .wf-root .wf-change-empty i { font-size: 26px; display: block; margin-bottom: 14px; opacity: .45; } /* -------------------------------------------------------------------------- Narrow screens — the table scrolls, the page does not -------------------------------------------------------------------------- */ @media (max-width: 768px) { .wf-root .wf-th { font-size: 9.5px; padding: 8px 9px 10px; min-width: 84px; } .wf-root .wf-band { font-size: 9px; letter-spacing: .1em; } .wf-root .wf-scroll > .table > tbody > tr > td { padding: 9px; font-size: 12.5px; } .wf-root .wf-sticky { min-width: 116px; max-width: 136px; } .wf-root .wf-input { width: 68px !important; font-size: 12.5px; } /* Two things fight here. `max-width` alone does not contain "ADMINISTRATIVOS" — it has no space to wrap at, so it overflows its slot and collides with its neighbour. But `overflow-wrap: anywhere` also lets a box shrink to its narrowest fragment, which squashed "Resumen" to one character. A fixed width gives every mark the same slot and settles both. */ .wf-root .rc-slider-mark-text { width: 58px; max-width: 58px; font-size: 8.5px !important; letter-spacing: .02em; overflow-wrap: anywhere; } .wf-root .wf-modulebar { padding-bottom: 54px; } } @media (prefers-reduced-motion: reduce) { .wf-root *, .wf-root *::before, .wf-root *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }