/* RUMBO LIBRE Manager — brand-consistent admin shell (reuses tokens.css). */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{font-family:Manrope,system-ui,-apple-system,sans-serif;background:var(--sand,#F5EFE3);color:var(--ink,#0C3A5B);-webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none;} h1,h2,h3{letter-spacing:-.01em;} /* App shell: sidebar + main */ .mgr{display:grid;grid-template-columns:212px 1fr;min-height:100vh;} /* Pinned to the viewport height so the brand header and the collapse toggle always stay put; .nav (below) is the only part that scrolls once the role-gated link list grows taller than the screen. */ /* No side padding (1:1 with the design canvas): the rows run edge to edge, so the active row's accent sits on the sidebar's own left edge and a label has the full 212px to itself — with 12px gutters «Cobertura de tarifas», «Importar contenido» and four more labels broke onto two lines. */ .side{background:var(--ink-deep,#0C3A5B);color:#fff;display:flex;flex-direction:column;padding:16px 0 0;position:sticky;top:0;height:100vh;overflow:hidden;} .side .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;padding:8px 20px 18px;flex:none;} .side .brand img{width:30px;height:30px;border-radius:50%;} .side .brand small{display:block;font-size:12px;font-weight:600;color:#9fc0c7;letter-spacing:.04em;text-transform:uppercase;} /* flex:1 1 auto + min-height:0 is what lets a flex child scroll instead of forcing its flex-column parent (.side) to grow past the viewport — min-height:0 overrides flexbox's default min-height:auto sizing. */ .nav{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-height:0;padding-bottom:16px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;} .nav::-webkit-scrollbar{width:0;height:0;display:none;} /* Redesign sidebar (1:1 with the design canvas): grouped, flat rows with a left accent on the active one — not rounded pills. Headings are a quiet divider; items sit at 13px (the secondary tier: at 14px «Reporte de campañas» and «Facturas de proveedor» broke onto two lines in the 212px rail) with a 3px transparent left border so the active border never shifts the text. Type floor (2026-10-17): the group heading was 10.5px in #5F7E8A — 2.73:1 on the navy, unreadable. It is now 12px (the floor of anything read; the board audit measures the chrome at 12) in #8FABB5, 4.89:1 on --ink-deep: still quieter than the #AAB4C2 items (5.65:1), now legible. */ .nav .grp{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8FABB5;padding:14px 18px 5px;} .nav a{display:flex;align-items:center;gap:11px;padding:9px 18px;border-left:3px solid transparent;color:#AAB4C2;font-size:13px;font-weight:600;transition:background .12s,color .12s;} .nav a i{font-size:17px;width:18px;text-align:center;} .nav a:hover{background:rgba(255,255,255,.06);color:#fff;} /* Active item: white label (≈13:1 on --ink-deep — well past AA) on a subtle wash, with the ocean-500 accent down the left edge. The accent is decorative; the white-on-dark label carries the contrast. */ .nav a.active{background:rgba(255,255,255,.08);border-left-color:var(--teal,#1577B5);color:#fff;} .nav a.active i{color:#5EA9DA;} .nav a.disabled{opacity:.5;cursor:default;} .nav a .soon{margin-left:auto;font-size:12px;font-weight:700;background:rgba(255,255,255,.14);padding:2px 7px;border-radius:999px;} /* Blazor Server's built-in circuit-error banner (MainLayout.razor). Hidden by default — the framework's boot script sets an inline display:block only when an unhandled circuit error actually occurs; without this rule the div has no default state and renders visible on every page load. */ /* Same look as an error toast (.toast.toast-error): a card at the bottom centre, not a red strip across the page. Blazor sets display:block when it shows it, so the flex layout lives on a :not([style*=none]) guard. */ #blazor-error-ui{display:none;position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9999;width:min(520px,calc(100vw - 32px)); box-sizing:border-box;padding:13px 15px;border-radius:12px;background:#FDECEC;border:1px solid #F3C0BD;color:#B42318; font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 10px 30px rgba(8,20,24,.18);} #blazor-error-ui[style*="block"]{display:flex !important;align-items:center;gap:11px;} #blazor-error-ui > i{font-size:20px;flex:none;} #blazor-error-ui .err-text{flex:1;min-width:0;} #blazor-error-ui .reload{color:#B42318;text-decoration:underline;font-weight:700;white-space:nowrap;} #blazor-error-ui .dismiss{margin-left:4px;} .main{display:flex;flex-direction:column;min-width:0;} /* Minimal top bar (redesign, 1:1 with the canvas): search left, notifications + user menu right. No page title — each page carries its own

. */ .topbar{height:56px;background:#fff;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;position:sticky;top:0;z-index:5;} .topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;} .topbar-right{display:flex;align-items:center;gap:12px;flex:none;} /* The menu button (owner, 2026-10-10): on desktop it folds the sidebar to its icons and back; on mobile, where the sidebar is an off-canvas drawer, it opens it. One button, one icon per breakpoint. */ .navtoggle{display:inline-flex;flex:none;} .navtoggle .nt-menu{display:none;} /* FocusOnNavigate (Routes.razor, Selector="h1") moves focus to the page's

after each SPA navigation for screen-reader users. A heading isn't an interactive control, so its visible focus ring reads as a stuck selection — suppress it (keyboard focus on real controls is unaffected). */ h1:focus{outline:none;} /* User menu — a CSS-only
dropdown (SSR-safe, no circuit). The summary is the avatar + name chip. */ .usermenu{position:relative;} .usermenu > summary{list-style:none;cursor:pointer;} .usermenu > summary::-webkit-details-marker{display:none;} .userchip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px 4px 4px;transition:background .12s,border-color .12s;} .userchip:hover{background:rgba(31,42,46,.04);} .usermenu[open] > .userchip{border-color:var(--teal,#1577B5);} .uav{width:30px;height:30px;border-radius:50%;background:var(--teal-d,#0E4C77);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;} .uwho{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0;} .uwho b{font-size:13px;font-weight:700;color:var(--ink,#0C3A5B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;} .uwho span{font-size:12px;color:var(--muted);} .uchev{font-size:13px;color:var(--faint,#626F73);flex:none;} .usermenu-pop{position:absolute;top:calc(100% + 8px);right:0;width:210px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 12px 32px rgba(21,51,61,.18);z-index:61;} .usermenu-pop form{margin:0;} .umi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:14px;font-weight:600;color:var(--ink,#0C3A5B);background:none;border:0;border-radius:8px;padding:9px 10px;cursor:pointer;font-family:inherit;} .umi i{font-size:17px;color:var(--muted);} .umi:hover{background:var(--teal-50,#E2F0F8);color:var(--teal-d,#0E4C77);} .umi:hover i{color:var(--teal-d,#0E4C77);} .btn.sm{padding:6px 10px;font-size:12px;} /* Notification bell (MainLayout topbar) */ .bellwrap{position:relative;} .bellbtn{position:relative;background:transparent;border:1px solid var(--line-2);border-radius:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--ink,#0C3A5B);} .bellbtn:hover{background:rgba(31,42,46,.06);} /* The counter reads at the 12px floor; the disc grows with it (18px, round for one digit, a pill for «99+»). */ .bell-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:12px;font-weight:700;line-height:1;padding:3px 5px;border-radius:999px;min-width:18px;text-align:center;} .bell-scrim{position:fixed;inset:0;z-index:20;background:transparent;} .bell-panel{position:absolute;top:46px;left:50%;transform:translateX(-60%);width:340px;max-height:420px;display:flex;flex-direction:column;z-index:21;box-shadow:0 12px 32px rgba(21,51,61,.18);} .bell-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-2);} .bell-empty{padding:20px 14px;text-align:center;} .bell-list{overflow-y:auto;} .bell-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 14px;border:none;border-bottom:1px solid var(--line-2);background:#fff;cursor:pointer;font-family:inherit;} .bell-item:hover{background:var(--row-hover);} .bell-item:last-child{border-bottom:none;} .bell-item-title{font-weight:700;font-size:13px;color:var(--ink,#0C3A5B);} .bell-item-body{font-size:12px;color:var(--muted);} .bell-item-time{font-size:12px;color:var(--muted);margin-top:2px;} @media (max-width:900px){ /* Reset the desktop centering transform (translateX(-60%), relative to left:50%) — otherwise it still applies on top of the fixed left/right positioning below and drags the panel off-screen to the left. */ .bell-panel{position:fixed;top:62px;left:12px;right:12px;width:auto;transform:none;} } .content{padding:24px 28px;} /* The File workspace (redesign) draws its own full-bleed header band + sand body, exactly like the design canvas, so it opts out of the 24px content gutter when its root (.fw) is the page. */ .content:has(> .fw){padding:0;} /* Primary is the BRAND's own call to action: solid deep teal with white text — the same --teal-d the public site puts on every CTA, so the console and the site are visibly one product. It was a pale celeste tint for a while; the tint read as a disabled control and belonged to no palette in particular, and a pastel primary next to a white secondary gives the eye almost nothing to rank. Solid brand blue vs. paper is unmistakable at a glance, and #0E4C77 on white is 5.8:1 — past AA with room to spare. */ .btn{background:var(--teal-d,#0E4C77);color:#fff;border:1px solid var(--teal-d,#0E4C77);border-radius:8px;padding:9px 16px;min-height:44px;box-sizing:border-box;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;} /* Small pill buttons (bulk actions, select-all) keep their compact height. */ .btn.sm{min-height:0;} .btn:hover{background:#0C3A5B;border-color:#0C3A5B;} /* Nothing styled a disabled .btn, so every blocked action in the Manager — Send with a rate missing, Confirm sale on an already-confirmed file — looked exactly like a live button and simply did nothing when clicked. :disabled wins over :hover here because it is declared after it. */ .btn:disabled,.btn[disabled]{opacity:.45;cursor:default;box-shadow:none;} .btn:disabled:hover,.btn[disabled]:hover{background:var(--teal-d,#0E4C77);border-color:var(--teal-d,#0E4C77);} .btn.ghost:disabled:hover,.btn.ghost[disabled]:hover{background:#fff;} /* Was `background:transparent` — on the cream (--sand) page background that left only a 1px gray border to read the whole button by, which all but disappeared (reported live: "Move"/"Reply (AI)" on a lead's header). White + a small shadow is the same "elevated surface on cream" treatment .panel/.lead/.bcard already use — consistent, and it actually separates the button from the page. */ .btn.ghost{background:#fff;color:var(--ink,#0C3A5B);border:1px solid var(--line-2);box-shadow:var(--shadow-pill,0 1px 4px rgba(0,0,0,.05));} /* A translucent dark overlay (not an opaque sand fill) so the hover darkens whatever's actually behind it — white, sand, or a tinted card (e.g. the pink "overdue" reminder background) — instead of stamping an opaque sand rectangle that clashes against a differently-colored container. */ .btn.ghost:hover{background:rgba(31,42,46,.06);} /* Dashboard cards */ .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;} /* Exactly four cards never leave an orphan on a second row: four across, or two by two. */ .kpis:has(> .kpi:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));} @media(max-width:1000px){.kpis:has(> .kpi:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}} .kpi{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;} /* A figure with a list behind it is a link to that list — same card, the whole of it clickable. */ a.kpi.kpi-link{display:block;color:inherit;text-decoration:none;} a.kpi.kpi-link:hover{border-color:var(--teal,#1577B5);} a.kpi.kpi-link:focus-visible{outline:2px solid var(--teal,#1577B5);outline-offset:2px;} .kpi .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;} .kpi .v{font-size:24px;font-weight:800;margin-top:6px;} .kpi .soon{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--teal-d,#0E4C77);background:var(--teal-50,#E2F0F8);padding:3px 9px;border-radius:999px;} .kpi.link{transition:border-color .12s,box-shadow .12s,transform .12s;} .kpi.link:hover{border-color:var(--teal,#1577B5);box-shadow:0 6px 18px rgba(21,119,181,.10);transform:translateY(-1px);} /* Dashboard section heading with a "view all" link on the right. */ .dsec{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 12px;} .dsec h2{font-size:16px;margin:0;} /* A section title with its counter: the pill sat glued to the last word («nuevas2»). */ .dsec h2.with-count{display:inline-flex;align-items:center;gap:8px;} /* The counter is a circle for one digit (22×22) and grows sideways only when the number needs it — it measured 25×23, an oval. */ .dsec h2.with-count .pill{box-sizing:border-box;min-width:22px;height:22px;padding:0 6px;justify-content:center;line-height:1;} /* The intake row's one action, as on the board (design/MainDashboard): a quiet outlined button that lines up with the panel's 16px inset — it was a solid primary 4px from the edge, the heaviest thing on the dashboard. */ .tbl td.intake-act{text-align:right;} /* What a date in a list is the date OF, under it («12 oct» / «seña»): small, muted, on its own line, never wider than the cell. */ .tbl td .tbl-note{display:block;font-size:12px;font-weight:400;color:var(--muted);line-height:1.25;} .tbl td.intake-act .btn.sm{min-height:30px;padding:5px 12px;font-size:12px;} /* The "see all" link of a dashboard section is a standalone control, not a link inside a sentence, so it owes the same 24px as the rest — it measured 18. */ .dsec a{font-size:13px;font-weight:700;color:var(--teal-d,#0E4C77);display:inline-flex;align-items:center;min-height:24px;} /* Quick-access tiles: compact icon + label shortcuts to the most-used areas. */ .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} @media(max-width:1200px){.quick{grid-template-columns:repeat(3,1fr);}} @media(max-width:820px){.quick{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.quick{grid-template-columns:1fr;}} .qtile{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:14px 15px;font-weight:700;color:var(--ink,#0C3A5B);transition:border-color .12s,box-shadow .12s,transform .12s;} .qtile:hover{border-color:var(--teal,#1577B5);box-shadow:0 6px 18px rgba(21,119,181,.10);transform:translateY(-1px);} .qtile i{font-size:22px;color:var(--teal-d,#0E4C77);flex:0 0 auto;} /* Catalog & audience snapshot — clean white stat cards (no grey container/gaps). */ /* Same column ladder as .quick above it, deliberately: the two sections sit one under the other, so a width where one is three across and the other four reads as a mistake rather than as two grids. */ .snap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} /* Five or six tiles (a role that sees catalogue, contacts, campaigns and leads) sit in ONE row on a wide screen instead of wrapping 4 + 2. */ @media(min-width:1201px){.snap:has(> .s:nth-child(5):last-child){grid-template-columns:repeat(5,1fr);}.snap:has(> .s:nth-child(6):last-child){grid-template-columns:repeat(6,1fr);}} @media(max-width:1200px){.snap{grid-template-columns:repeat(3,1fr);}} @media(max-width:820px){.snap{grid-template-columns:repeat(2,1fr);}} .snap .s{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:15px 16px;} .snap .s .sv{font-size:23px;font-weight:800;color:var(--ink,#0C3A5B);} .snap .s .sk{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:4px;} .snap .s .sk i{color:var(--teal-d,#0E4C77);font-size:15px;} /* Horizontal mini-bars (e.g. "what clients ask about" by source). */ .bars{display:flex;flex-direction:column;gap:9px;} .bars .row{display:grid;grid-template-columns:150px 1fr 40px;align-items:center;gap:10px;font-size:13px;} .bars .track{background:var(--teal-50,#E2F0F8);border-radius:999px;height:9px;overflow:hidden;} .bars .fill{background:var(--teal-d,#0E4C77);height:100%;border-radius:999px;} .bars .cnt{text-align:right;font-weight:700;color:var(--muted);} @media (max-width:560px){ .bars .row{grid-template-columns:110px 1fr 34px;} } /* Login — same Atlantic language as the shell: deep-azure field, elevated white card, wave-mark brand with the «Manager» kicker, a warm welcome. */ .auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 20% -10%,#15568A 0%,transparent 60%),linear-gradient(135deg,#0C3A5B,#0E4C77);padding:20px;} /* width must fit inside .auth's own 20px×2 padding, or the card overflows its grid track — when a centered grid item can't fit, browsers fall back to "safe" start-alignment instead of true centering, which is what made this look shoved to the left rather than centered on narrow screens. */ .authcard{background:#fff;border-radius:18px;padding:36px 34px;width:min(392px,calc(100vw - 40px));box-shadow:0 24px 64px rgba(8,20,32,.38);} .authcard .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.2px;color:var(--ink,#0C3A5B);} .authcard .brand img{width:38px;height:38px;border-radius:50%;} .authcard .brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;} .authcard h1{font-size:22px;font-weight:750;letter-spacing:-.01em;margin:22px 0 4px;color:var(--ink,#0C3A5B);} .authcard .sub{color:var(--muted);font-size:14px;margin-bottom:20px;} .authcard .btn{width:100%;margin-top:4px;} .field{margin-bottom:14px;} .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;} /* One note size for every legend under a control. .fieldnote and .hint are the same note seen from two places (a field, a form block), and a note written with the generic .muted colour helper inherited body size — so three explanations on one form rendered at three different sizes. */ .fieldnote{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45;} /* A titled part of a long dialog (flight, passenger, service): small caps with an icon over a hairline, so a form of ten fields reads as four short ones. */ .msec{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-2);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);} .msec:first-child{margin-top:0;} .msec > i{font-size:16px;color:var(--teal-d);} /* A narrow field of a row (a code, a number) keeps its width; its neighbours take the rest. */ .frow > .field.w-sm{flex:0 0 150px;} .pax-lead{margin-top:4px;} .field input.up{text-transform:uppercase;} .field input.up::placeholder{text-transform:none;} /* What is wrong in one row of a dialog: said once under the row, over the full width, so no field grows and the boxes stay on one line. */ .rowmsgs{display:flex;flex-direction:column;gap:4px;margin:-6px 0 14px;} .rowmsgs .field-msg{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:#A03225;line-height:1.4;} .rowmsgs .field-msg > i{flex:none;font-size:16px;} .field .field-msg{display:flex;gap:6px;align-items:flex-start;} .field .field-msg > i{flex:none;font-size:16px;margin-top:0;} /* Origin → destination: the arrow sits on the inputs' line, between the two fields. */ .frow.route{align-items:flex-end;} .frow.route > .route-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:44px;margin-bottom:14px;color:var(--muted);font-size:18px;} .field > .muted,.field > p.muted{font-size:12px;line-height:1.45;} .field.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} @media(max-width:480px){.field.grid2{grid-template-columns:minmax(0,1fr);}} /* Two fields side by side in a form or a dialog. The class existed only as «.field.grid2»: a plain
around two fields (the emergency-contact dialog) had no style at all, so its ten fields stacked into a 1.017px dialog. */ .grid2:not(.field){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start;} @media(max-width:560px){.grid2:not(.field){grid-template-columns:minmax(0,1fr);}} .chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:20px;color:var(--ink,#0C3A5B);margin:9px 0;cursor:pointer;user-select:none;} .chk input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--teal-d,#0E4C77);cursor:pointer;flex:0 0 auto;} /* 20px line, 18px box: level with the first line of a label that wraps */ /* Form controls — one shared, modern base for every text input/select/textarea across the app (login card, Leads/LeadDetail, Settings, Quote/Reservation/Invoice editors, table line-item cells, etc.). Consolidated here instead of duplicated per page so radius/border/focus stay consistent; `.cell` (compact table line-item inputs) shares the same treatment at a smaller size. */ .field input,.field textarea,.field select,.cell,.mkf-input{ width:100%;font-family:inherit;font-size:14px;color:var(--ink,#0C3A5B); background:#fff;border:1px solid var(--line-2);border-radius:10px; padding:11px 13px;transition:border-color .12s ease,box-shadow .12s ease; } /* Pin form controls to the 44px control height so they line up with .btn / .ssel-control in any row. Compact table .cell stays short (it overrides padding below); wide search bars (.cell.wide) opt back in. */ .field input,.field select{min-height:44px;box-sizing:border-box;} .field textarea{min-height:80px;box-sizing:border-box;} .field textarea{resize:vertical;} /* Every real checkbox looks the same everywhere: 16px, teal tick. (Switch inputs are visually hidden by the later, equally-specific `.switch input` rule, so this base never affects toggles.) */ /* 18px, not 16: the WCAG 2.2 target minimum is 24px, and a checkbox in a picking list (rate requests, bulk selects) is a target an operator hits repeatedly, not decoration. With the padding on the cells around it this clears the standard's spacing exception. */ /* Radios get the same treatment as checkboxes. They were never styled at all — Selection policy is the only screen in the console that uses one, so its three options sat at the browser's 13×13 default, in the browser's blue, beside a console that is 18px and brand-teal everywhere else. */ input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--teal-d,#0E4C77);cursor:pointer;} .field input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;padding:0;accent-color:var(--teal-d,#0E4C77);cursor:pointer;} /* Modern async file/image picker — a dashed drop-zone that's click-to-browse AND drag-and-drop (the Blazor InputFile is stretched invisibly over the whole box). Consistent across image + document uploads. */ .dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; text-align:center;border:2px dashed var(--line-2);border-radius:12px;padding:24px 20px;background:#fdfefe; cursor:pointer;transition:border-color .12s ease,background .12s ease;} .dropzone:hover{border-color:var(--teal,#1577B5);background:var(--teal-50,#E2F0F8);} .dropzone i{font-size:30px;color:var(--teal-d,#0E4C77);} .dropzone .dz-title{font-weight:700;font-size:14px;color:var(--ink,#0C3A5B);} .dropzone .dz-sub{font-size:12px;color:var(--muted);max-width:520px;} .dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;} .dropzone.busy{opacity:.55;pointer-events:none;} /* Toggle switch — replaces action checkboxes in lists/forms for a cleaner, more professional look. Wrap a real so Blazor @bind keeps working: */ .switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;} .switch input{position:absolute;opacity:0;width:0;height:0;margin:0;} .switch .slider{width:38px;height:22px;background:#c9d4d2;border-radius:999px;position:relative;transition:background .15s ease;flex:0 0 auto;} .switch .slider::before{content:"";position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.28);} .switch input:checked + .slider{background:var(--teal-d,#0E4C77);} .switch input:checked + .slider::before{transform:translateX(16px);} .switch input:focus-visible + .slider{outline:2px solid var(--teal,#1577B5);outline-offset:2px;} .switch input:disabled + .slider{opacity:.5;cursor:default;} /* A switch followed by its label on one row (used in edit modals). */ .switchrow{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:22px;} /* the switch (22px) is level with the label's FIRST line, so a label that wraps never leaves it floating in the middle of the block */ /* When a switch row IS a field's control (sibling of the field label, e.g. "Primary"), keep its own inline-flex centring instead of inheriting the block `.field label` style — and give it the same height as an input so it lines up with a neighbouring input/select in a two-column .frow. */ .field label.switchrow{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;line-height:22px;font-weight:400;margin-bottom:0;min-height:42px;padding-top:10px;box-sizing:border-box;} /* Stacked group of switch rows (e.g. Suggested / Featured / Allow online payment). */ .switchset{display:flex;flex-direction:column;gap:11px;margin:8px 0 4px;} /* Reusable filter bar (search + dropdowns) above a data table. Wraps on narrow screens. The search input is forced to full input height so it lines up with the dropdown controls next to it. */ /* Canonical filter bar: one layout for every list's search + filters row (wrap it in .panel.pad). .filters is kept as an alias so existing pages stay consistent without a rename. */ /* The bar OWNS its layout — padding, gap, wrapping, the space below it and the margin a labelled field would otherwise add. Every list used to repeat the same declarations in a style= attribute, each copy drifting a little (center vs flex-end, with and without the bottom margin), so no two bars in the Manager lined up and the mobile rule below needed !important to beat the inline. One rule, every list. */ .filterbar,.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:12px 16px;margin-bottom:14px;} .filterbar > .field,.filters > .field{margin-bottom:0;} /* Six filters on one row squeezed each to ~160px; as two rows of three every one reads its full value. */ .filterbar.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;} .filterbar.grid3 > .field{min-width:0;max-width:none;} /* A lone switch in the grid sits level with the fields' controls (44 px), at the bottom of its cell. */ .filterbar.grid3 > .switchrow{align-self:end;align-items:center;min-height:44px;} @media(max-width:820px){.filterbar.grid3{grid-template-columns:1fr;}} /* Three roles, so no page needs a style= to lay out a bar: the search box takes the biggest share of the row, a filter grows into whatever is left over, and anything else keeps its own size. The row SHARES its width rather than letting one control take it all. A search on `flex:1 1 220px` with no ceiling swallowed every spare pixel on a wide screen while the dropdown beside it stayed pinned at 175px and truncated its own longest option — "Todas las antigüedades" rendered as "Todas las antigü…" next to a 1000px-wide search box. The search now stops at a readable width and the pickers expand. */ /* The row is filled EDGE TO EDGE (owner 2026-10-30: the dropdowns should fill the whole width, there are too many blank spaces): the search takes the biggest share, every filter takes an equal share of the rest, and no control stops at a fixed width — a 340/720 px cap left a blank strip at the right of every bar on a wide screen. A long option label is still protected by the min-width and by the flex-basis. */ .filterbar .grow,.filters .grow{flex:2 1 260px;min-width:200px;max-width:none;} .filterbar .pick,.filters .pick{flex:1 1 190px;min-width:170px;max-width:none;} .filterbar .fixed,.filters .fixed{flex:0 0 auto;} /* Opt-in: park a trailing action (Export) against the right edge instead of crowding the last filter. */ .filterbar .end,.filters .end{margin-left:auto;} .filters .cell{padding:11px 13px;font-size:14px;} /* A segmented control used AS a filter lines up with the inputs beside it — same 44px control height, and none of the standalone strip's bottom margin (which pushed it off the row's baseline). */ .filterbar .seg,.filters .seg{margin-bottom:0;min-height:44px;box-sizing:border-box;align-items:stretch;} /* The same strip as a page-head action (Files ↔ Board): 44 px like the button beside it, one centre line, no global bottom margin. A link is a segment too. */ .pa-actions .seg{margin:0;min-height:44px;box-sizing:border-box;align-items:stretch;flex-wrap:nowrap;} .pa-actions .seg-btn,.filterbar .seg a.seg-btn{padding-top:0;padding-bottom:0;text-decoration:none;} .seg a.seg-btn{white-space:nowrap;} .filterbar .seg.sm .seg-btn,.filters .seg.sm .seg-btn, .filterbar .seg .seg-btn,.filters .seg .seg-btn{padding-top:0;padding-bottom:0;} /* A checkbox filter is centred on the control height too, instead of sitting on the row's bottom edge. */ .filterbar > .chk,.filters > .chk{margin:0;min-height:44px;align-items:center;} /* On mobile AND tablet every control stacks to full width so a select never sits half-width or wraps ragged (search full, selects capped at their flex-basis). 820 aligns with .filterbar.grid3's own stack point and the Manager's main breakpoint, so the awkward 641–820 flex-wrap band is gone. */ @media(max-width:820px){ .filterbar,.filters{flex-direction:column;align-items:stretch;} .filterbar > *,.filters > *{width:100%;min-width:0;max-width:none;} /* flex:0 0 auto is not cosmetic: stacked, the container's main axis is VERTICAL, so the row's `flex:3 1 260px` reads 260px as a HEIGHT and renders the search box as a 260px-tall block. Spelled out per role because the roles' own rules outrank a `.filterbar > *` reset. */ /* width:100% + max-width:none at THIS specificity (2 classes) is required: the desktop `.filterbar .pick` caps max-width at 340px and out-specifies the `.filterbar > *{max-width:none}` reset above (1 class), so a stacked pick stayed 340px (≈83% of a ~410px bar — the "half-width select" symptom). */ .filterbar .grow,.filterbar .pick,.filterbar .fixed, .filters .grow,.filters .pick,.filters .fixed{flex:0 0 auto;width:100%;max-width:none;} .filterbar .cell,.filterbar .field,.filters .cell,.filters .field{width:100%;box-sizing:border-box;} .filterbar .field .cell{width:100%;max-width:none;} .filterbar .end,.filters .end{margin-left:0;} } /* The result count is a note ABOUT the list, not a control that filters it. Inside the bar it sat as a stray "0 results" floating between the inputs, aligned to nothing; here it reads as a caption directly under the bar, small and muted, right where the eye lands before the table. */ .filter-note{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:-8px 0 12px;padding:0 2px; font-size:13px;color:var(--muted);} /* The same caption under an ACTION inside a form/modal (why «Cotizar» is off, a basis warning). .filter-note's -8px top margin is for sitting tight under a filter bar; under a button it slid up into the button. */ .action-note{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--muted);} .action-note i{font-size:14px;margin-top:1px;flex:none;} .action-note.warn{color:#9A5B00;margin:0 0 12px;} /* Room-mix rows: the table scrolls inside its own box instead of pushing past the modal's edge. */ .mix-rows{overflow-x:auto;border:1px solid var(--line-2);border-radius:12px;} .mix-tbl thead th,.mix-tbl tbody td{padding:6px 10px;} /* Markup · «Get rates» on one row, the button on the input's baseline; nothing stretches. */ .frow.mix-foot{margin-top:10px;} .frow.mix-foot > .field{flex:0 0 auto;} .frow.mix-foot > .field:first-child:not(.btn-field){max-width:260px;} .frow.mix-foot{align-items:flex-start;} .frow.mix-foot > .field.btn-field{justify-content:flex-start;padding-top:24px;} /* 24 px = the label above the markup input: the button sits on the input's line, not under its hint */ .mix-tbl tbody td{vertical-align:middle;} .mix-tbl td .ssel{min-width:150px;} .mix-tbl input.cell.sm{width:76px;text-align:right;} .mix-tbl tbody tr:hover{background:transparent;} /* Was --line-2 (a border colour) at 1.08:1 — the separator simply was not there. */ .filter-note .sep{color:var(--faint,#626F73);} /* The count prints only once the list has loaded (never «0 results» beside the spinner); the empty note keeps its line so nothing jumps when it fills. */ .filter-note:empty{min-height:20px;} /* Belt-and-suspenders: any panel that currently has an open dropdown lets it overflow (covers non-padded panels). */ .panel:has(.ssel.is-open){overflow:visible;} /* Campaign editor: compose column + sticky live preview. Collapses to one column on narrow screens. */ .camp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;} .camp-form{display:flex;flex-direction:column;gap:16px;min-width:0;} .camp-preview{position:sticky;top:16px;min-width:0;} .camp-preview-tools{display:flex;align-items:center;gap:8px;} /* The email is a fixed 600px design; the iframe is scaled down by campPreview (App.razor) to fit the panel with NO horizontal scroll. The wrap clips the scaled frame and its height is set to match. */ .camp-frame-wrap{width:100%;overflow:hidden;border:1px solid var(--line-2);border-radius:10px;background:#fff;} .camp-frame{border:0;display:block;background:#fff;} @media(max-width:1100px){.camp-cols{grid-template-columns:1fr;}.camp-preview{position:static;}} /* Single-image slot (ImageSlot.razor) — same upload pipeline as the product galleries, one image. */ .imgslot{width:100%;} .imgslot-shell{display:flex;gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:10px;background:#fff;} .imgslot-thumb{width:104px;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2);flex:0 0 auto;background:var(--sand,#F5EFE3);} .imgslot-meta{display:flex;flex-direction:column;gap:8px;min-width:0;} .imgslot-name{font-size:13px;font-weight:600;color:var(--ink,#0C3A5B);} .imgslot-actions{display:flex;gap:8px;align-items:center;} /* One centred loading state everywhere (Loader.razor): brand spinner + caption. */ .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:56px 16px;min-height:180px;} .loader-spin{width:34px;height:34px;border:3px solid var(--line-2);border-top-color:var(--teal,#1577B5);border-radius:50%;animation:rl-spin .7s linear infinite;} .loader-text{color:var(--muted);font-size:14px;font-weight:600;} /* Skeleton loaders (Loader Kind="list|editor|board"): a modern shimmer placeholder that holds the page's shape so the content does not jump in when the data arrives (owner, 2026-09-25). */ .skel{padding:2px 0;} .skel-block{display:block;background:linear-gradient(90deg,var(--line-2) 25%,rgba(255,255,255,.6) 37%,var(--line-2) 63%);background-size:400% 100%;border-radius:8px;height:16px;animation:skel-shimmer 1.4s ease infinite;} @keyframes skel-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}} @media (prefers-reduced-motion: reduce){.skel-block{animation:none;}} .skel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;} .skel-title{height:28px;width:220px;max-width:60%;} .skel-btn{height:34px;width:130px;border-radius:10px;flex:none;} .skel-filters{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;} .skel-filters .skel-block{height:44px;flex:1;min-width:160px;border-radius:10px;} .skel-rows{display:flex;flex-direction:column;gap:10px;} .skel-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;} .skel-row .skel-block{height:20px;} /* Body-only skeletons (Loader Kind="table" | "form"): the head and the tabs above are real, so this is drawn as the panel that is coming — same surface, same inset — and tall enough that the page does not collapse and refill (the spinner it replaces was 180px). */ .skel.skel-form{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-card);padding:18px;min-height:300px;box-sizing:border-box;} .skel.skel-form > .skel-form{margin:0;} .skel-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .skel-field{display:flex;flex-direction:column;gap:8px;} .skel-label{height:12px;width:40%;} .skel-input{height:40px;border-radius:10px;} .skel-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .skel-col{display:flex;flex-direction:column;gap:10px;} .skel-colhead{height:18px;width:70%;} .skel-card{height:64px;border-radius:12px;} @media (max-width:900px){.skel-form{grid-template-columns:repeat(2,1fr);}.skel-cols{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.skel-form{grid-template-columns:1fr;}.skel-row{grid-template-columns:1fr;}} /* Static preloader (App.razor): covers the blank moment between the HTML and the first draw of the circuit; gone once the app rendered a shell, a sign-in card, or the framework's own error surface. */ .app-preload{position:fixed;inset:0;z-index:2;display:grid;place-items:center;background:var(--sand,#F5EFE3);animation:app-preload-out 0s linear 8s forwards;} /* Safety net: a browser without :has(), or a page that never draws, still gets its screen back after 8 s instead of a permanent cover. */ @keyframes app-preload-out{to{visibility:hidden;pointer-events:none;}} body:has(.mgr, .auth, #blazor-error-ui) .app-preload{display:none;} @keyframes rl-spin{to{transform:rotate(360deg);}} /* Inline spinner for a button mid-action (Saving…/Sending…) — pair with a disabled button to block double-clicks. */ .spin{display:inline-block;animation:rl-spin .7s linear infinite;} /* Any button whose click is still being handled (window.rlBusy, BusyAwareComponent): its icon becomes a spinner (a spinner is added in front when it has no icon), the text stays, and it takes no further clicks. */ .btn.is-busy,.iconbtn.is-busy{pointer-events:none;cursor:progress;} /* Filters, pager arrows, select options and the bell have no spinner slot: dim them, so a stale table never looks idle (UI-25). */ .seg-btn.is-busy,.mv.is-busy,.bellbtn.is-busy,.pager button.is-busy{pointer-events:none;cursor:progress;opacity:.6;} .btn.is-busy > i.ph:first-child,.iconbtn.is-busy > i.ph{display:none;} .btn.is-busy::before,.iconbtn.is-busy::before{content:"";display:inline-block;flex:none;width:15px;height:15px;box-sizing:border-box; border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rl-spin .7s linear infinite;} .iconbtn.is-busy::before{width:18px;height:18px;vertical-align:middle;} .btn.icon.is-busy::before{width:18px;height:18px;} /* Bottom toast notifications — the ONLY place confirmations/errors appear (never inline banners, which can be scrolled out of view). Centered stack, auto-dismiss, manual close; full-width on mobile. */ .toast-stack{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:3000;width:min(460px,calc(100vw - 32px));pointer-events:none;} .toast{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.4; background:#fff;border:1px solid var(--line-2);box-shadow:0 10px 34px rgba(14,42,51,.20);pointer-events:auto;animation:toastin .2s ease;} .toast i{font-size:20px;flex:0 0 auto;} .toast span{flex:1;min-width:0;} .toast-x{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.55;flex:0 0 auto;padding:0 2px;} .toast-x:hover{opacity:1;} .toast-success{background:#E5F3E7;border-color:#BFE3C8;color:#2A7440;} .toast-error{background:#FDECEC;border-color:#F3C0BD;color:#B42318;} .toast-info{background:#E2F0F8;border-color:#BEE0E8;color:#0E4C77;} @keyframes toastin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} @media(max-width:560px){.toast-stack{bottom:12px;width:calc(100vw - 24px);}} /* Searchable dropdown (SearchSelect.razor). Matches .field select chrome (border, radius, teal focus) so it drops in anywhere a select was used, but adds a type-to-filter popup. `.sm` is the compact table-cell size. */ .ssel{position:relative;width:100%;} /* Matches .field input height exactly (min-height pins it to the same 44px so a dropdown and a text input line up perfectly next to each other). */ .ssel-control{width:100%;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff; border:1px solid var(--line-2);border-radius:10px;padding:10px 13px;font-family:inherit;font-size:14px; color:var(--ink,#0C3A5B);cursor:pointer;text-align:left;line-height:1.2;} .ssel-control:hover{border-color:#C7D2D1;} .ssel.is-open .ssel-control{border-color:var(--teal,#1577B5);box-shadow:0 0 0 3px var(--teal-50,#E2F0F8);} .ssel-control i.ph-caret-down{font-size:15px;color:var(--muted);transition:transform .15s ease;flex:0 0 auto;} .ssel.is-open .ssel-control i.ph-caret-down{transform:rotate(180deg);} /* line-height 1.45 + 1px of air: the ellipsis needs overflow:hidden, and at the inherited 1.2 the box was shorter than the font's descent — the tails of g, p, y and the parentheses were cut. */ .ssel-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45;padding:1px 0;} .ssel-value.placeholder{color:var(--faint,#8A969A);} .ssel.is-disabled{opacity:.6;} .ssel.is-disabled .ssel-control{cursor:default;background:var(--sand,#F5EFE3);} /* position:fixed — ssel.open (App.razor) sets left/top/width so the popup anchors to its control, flips up when there's no room below, right-aligns near the edge, and is never clipped by a panel/modal. opacity starts at 0 to avoid a top-left flash before JS positions it. */ /* A column, so ssel.open can cap the whole popup to the room it actually has on screen and let the LIST take the slack: a country list opened from the middle of a tall modal used to run off the bottom of the window with its last options unreachable — scrolling to them closed it. */ .ssel-pop{position:fixed;z-index:2600;min-width:200px;background:#fff;opacity:0;display:flex;flex-direction:column; border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 36px rgba(14,42,51,.18);overflow:hidden;} .ssel-search{flex:0 0 auto;} .ssel-search{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line-2);} .ssel-search i{font-size:15px;color:var(--muted);flex:0 0 auto;} .ssel-input{border:none;outline:none;width:100%;font-family:inherit;font-size:14px;background:transparent;color:var(--ink,#0C3A5B);} .ssel-list{max-height:244px;min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:5px;} .ssel-opt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:none; border-radius:8px;padding:9px 10px;font-family:inherit;font-size:14px;color:var(--ink,#0C3A5B);cursor:pointer;text-align:left;} .ssel-opt:hover{background:var(--teal-50,#E2F0F8);} .ssel-opt.sel{color:var(--teal-d,#0E4C77);font-weight:600;} .ssel-opt.sel i{color:var(--teal-d,#0E4C77);font-size:15px;flex:0 0 auto;} .ssel-empty{padding:14px 12px;color:var(--muted);font-size:13px;text-align:center;} .ssel.sm .ssel-control{padding:5px 10px;font-size:13px;border-radius:8px;min-height:34px;} /* «bare»: on a board card the control is text with a caret until the card is hovered or the list is open. */ .ssel.bare{width:auto;min-width:0;max-width:100%;flex:1;} .ssel.bare .ssel-control{border-color:transparent;background:transparent;padding-left:4px;} .lead:hover .ssel.bare .ssel-control,.ssel.bare.is-open .ssel-control{border-color:var(--line-2);background:#fff;} /* The %/USD switch beside an adjustment's value: as wide as its two short options need. */ .ssel.adj-mode{width:auto;min-width:78px;flex:0 0 auto;} /* Restricted HTML editor (HtmlLite.razor): a toolbar over a contenteditable area. Same border/focus chrome as the other inputs so it reads as one field. */ .htmled{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff;} .htmled:focus-within{border-color:var(--teal,#1577B5);box-shadow:0 0 0 3px var(--teal-50,#E2F0F8);} .htmled-tools{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line-2);background:var(--sand,#F5EFE3);} .htmled-b{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent; border-radius:7px;background:transparent;color:var(--ink,#0C3A5B);cursor:pointer;font-size:16px;} .htmled-b:hover{background:#fff;border-color:var(--line-2);} .htmled-hint{margin-left:auto;font-size:12px;color:var(--muted);} .htmled-area{min-height:120px;max-height:360px;overflow:auto;padding:12px 14px;font-size:14px;line-height:1.55;color:var(--ink,#0C3A5B);outline:none;} .htmled-area p{margin:0 0 10px;} .htmled-area p:last-child{margin-bottom:0;} @media(max-width:560px){.htmled-hint{display:none;}} /* Image picker spans the full content width and its dropzone fills the panel. */ .img-gallery{width:100%;} .img-gallery .dropzone{width:100%;box-sizing:border-box;} .cell{font-size:13px;padding:7px 9px;border-radius:8px;} .field input::placeholder,.field textarea::placeholder,.cell::placeholder,.mkf-input::placeholder{color:var(--faint,#8A969A);opacity:1;} .field input:hover,.field textarea:hover,.field select:hover,.cell:hover,.mkf-input:hover{border-color:#C7D2D1;} .field input:focus,.field textarea:focus,.field select:focus,.cell:focus,.mkf-input:focus{ outline:none;border-color:var(--teal,#1577B5);box-shadow:0 0 0 3px var(--teal-50,#E2F0F8); } .field input:disabled,.field textarea:disabled,.field select:disabled,.cell:disabled{ background:var(--sand,#F5EFE3);color:var(--muted);border-color:var(--line-2); opacity:1;cursor:not-allowed; } /* Custom on purpose: its list escapes the table's own horizontal scroller, which would clip any popover drawn inside the cell. */ .cf-pick{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12px;font-weight:700; padding:4px 24px 4px 10px;border-radius:999px;border:1px solid transparent;cursor:pointer;max-width:100%; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23445' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 7px center;background-size:11px;} /* A compact control inside a table row is 34px, like .cell beside it — it measured 32. */ .cf-pick{min-height:34px;box-sizing:border-box;} .cf-pick:hover{filter:brightness(.97);} .cf-pick.cf-pending{background-color:#EDF0EF;color:#41545A;} .cf-pick.cf-requested{background-color:var(--amber-50,#FBF1DD);color:var(--amber-d,#7A5A12);} .cf-pick.cf-confirmed{background-color:var(--green-50,#E5F3E7);color:#1E6B33;} .cf-pick.cf-declined,.cf-pick.cf-cancelled{background-color:#FDECEC;color:#9A1F14;} .cf-penalty{font-size:12px;font-weight:700;color:#B42318;margin-top:3px;display:flex;align-items:center;gap:3px;} /* How long a supplier has been sitting on a rate request. Quiet while it is normal, and only turns amber once it crosses the same threshold the chase job uses — a row that shouts on day one teaches people to stop reading it. */ .cf-waiting{font-size:12px;font-weight:600;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:3px;} /* The full text of a logged message, folded away. The subject is what an operator scans; the body is what they need only when they are reconstructing what was actually said. */ /* Why an action is unavailable, written next to the disabled button instead of hidden in its title — a tooltip on a disabled button is unreachable by keyboard and silent to a screen reader. It rides on its own line UNDER the action row (.head-note): a sentence in a row of buttons was reading as a fifth button, and it stretched the row until the real ones went out of line. */ .blocked-why{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.3;color:#9A5B00; background:#FFF7E6;border:1px solid #F5D9A3;border-radius:8px;padding:6px 10px;max-width:340px;} .blocked-why i{font-size:14px;flex:none;} .head-actions .head-note,.pa-actions .head-note{flex:1 0 100%;display:flex;justify-content:flex-end;} @media(max-width:820px){.head-actions .head-note,.pa-actions .head-note{justify-content:flex-start;}} /* The same note under the page's subtitle, when a page has a single blocked action and the reason is really about the record (the quote editor: «Esta cotización todavía no tiene servicios»). */ .page-head .head-why{margin-top:10px;} .page-head .head-why .blocked-why{max-width:none;} /* Lead detail: a named main column + rail, instead of letting seven panels of very different heights flow into a 2-track grid in document order (which put the short "Details" card beside a panel three times its height and left a hole under it). */ /* The rail GROWS with the screen (32%, floor 380px): at a fixed 340px its paired fields (Nombre | Empresa) and the mailing-group picker + button were squeezed while the main column had room to spare. */ .leadgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,32%);gap:18px;align-items:start;} .leadgrid .lead-main,.leadgrid .lead-rail{display:flex;flex-direction:column;gap:18px;min-width:0;} /* Read view: the SAME two columns as the File workspace (design/Lead.dc.html and File.dc.html share them) — a 340px rail, 16px between the columns and between the main cards, 12px between the rail cards. The edit view keeps the wider rail its forms need. */ .leadgrid.read{grid-template-columns:minmax(0,1fr) 340px;gap:16px;} .leadgrid.read .lead-main{gap:16px;} .leadgrid.read .lead-rail{gap:12px;} @media(max-width:1100px){.leadgrid,.leadgrid.read{grid-template-columns:1fr;}} /* Board card: a converted lead is a different KIND of card — it already produced a file — so it reads as one at a glance instead of only through its badge. */ .lead.is-converted{border-left:3px solid var(--green,#2A7440);} /* The owner control sat on every card as a full-width dropdown, which made "Unassigned" the loudest thing on the board. It recedes to a chip until pointed at or focused; keyboard focus still shows it fully. */ /* One line under a column head saying what the stage MEANS. "Descartado" reads as destructive until you know nothing is deleted. */ /* Lead timeline: audit entries and communications in one list. Replaces .thread/.tmsg, which described only half of it. */ .tl{display:flex;flex-direction:column;gap:8px;} .tl-row{border:1px solid var(--line,#ECEFEE);border-radius:10px;padding:9px 11px;background:#fff;} .tl-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;} .tl-meta{margin-bottom:2px;} /* A timeline badge names what happened; cut at the default 200px it read «Datos de la solicitud actualiza…». */ .tl-meta .badge{max-width:none;white-space:normal;} .tl-title{font-weight:700;font-size:14px;margin-top:8px;} .tl-body{font-size:13px;color:var(--muted);margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;} /* The two stages the palette was missing. «Reserva» is sold but not yet held — amber, because it still needs somebody; «Cerrado» is finished and filed — deep and quiet, so it stops competing for attention. */ .st-booked{background:#FBF1DD;color:#92600a;} .st-closed{background:#DDE6E4;color:#0C3A5B;} /* --- My profile (/profile) ------------------------------------------------- Two-column form on a desktop, one on a phone; the save button spans both so it never sits beside a field looking like it belongs to it. */ .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;} .formgrid .field.wide{grid-column:1 / -1;} /* Starts a fresh row in column one (see Profile.razor's password block). A no-op once the grid collapses to a single column. */ .formgrid .field.newrow{grid-column:1;} /* The comment above promises the save button spans both columns, but nothing enforced it: .formfoot is a plain grid item, so it auto-flowed into whatever cell came next in the field count's parity (beside the last field on an odd count, e.g. Profile.razor's Role) instead of sitting on its own full-width row. */ .formgrid .formfoot{grid-column:1 / -1;} @media(max-width:700px){.formgrid{grid-template-columns:1fr;}} /* Read-only value shown where a field would be (email, role): same height and rhythm as an input so the form does not go ragged, but visibly not editable. */ .ro{min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:10px;background:var(--sand,#F5EFE3);color:var(--ink,#0C3A5B);font-size:14px;} /* One line of guidance under a field. Used by the profile, the circuit rate importer and the content import — it was written into the markup on those pages but never actually styled. */ .nowrap{white-space:nowrap;} /* A panel that replaces a keeps the loader's 180px, so the page below does not jump when a short table arrives (UI-27). */ .panel.reserve{min-height:180px;} .not-found-title{font-size:18px;font-weight:700;margin:0 0 10px;color:var(--ink,#0C3A5B);} .hint{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45;} /* A hint that explains the row ABOVE it belongs to that row. Sitting after the row's own 14px field gap put «Ingrese un nombre o un email» closer to the Teléfono label below than to the Nombre box it is about; the row gives up its bottom margin and the hint carries the gap instead. */ .frow:has(+ .hint) > .field{margin-bottom:0;} .frow + .hint{margin:6px 0 14px;} /* A row of unlabeled inputs with buttons beside them (e.g. «Agregar ajuste»). .frow stretches its items, so the buttons grew over the fields' 14px bottom margin and stood 58px tall next to 44px inputs; with the margin gone every control on the row is the same 44px. */ .frow.bare > .field{margin-bottom:0;} .ok-note{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#2A7440;border-color:#CDE6D3;background:#F3FAF5;} .ok-note i{font-size:17px;} /* Its counterpart: why a password change was refused. Red, because unlike the save banner this one means nothing happened. */ .err-note{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#A03225;border-color:#EFCFCA;background:#FDF4F3;} .err-note i{font-size:17px;} /* A required field left empty (or malformed) after a refused save: red box + one line under it saying what is wrong. The asterisk marks the field as required before anyone tries. */ .field label .req{color:#B42318;font-weight:700;} .field.bad input,.field.bad select,.field.bad textarea{border-color:#D14343;} .field.bad input:focus,.field.bad select:focus,.field.bad textarea:focus{border-color:#B42318;box-shadow:0 0 0 3px rgba(209,67,67,.15);} .field .field-msg{font-size:12px;color:#A03225;margin-top:5px;line-height:1.35;} /* The service editor's «price of ONE unit» note sits under BOTH price inputs, across the whole row (it is not inside a .field): same look as a field's note. */ .price-hint{font-size:12px;color:#A03225;margin:-4px 0 8px;line-height:1.35;} /* --- Catalog product picker (quote builder) ------------------------------------------------------------ A shortlist of real products the operator picks by NAME. Rows are buttons, not table cells: the whole row is the target, and it has to read as clickable without a "select" affordance next to it. */ .pick-results{max-height:264px;overflow-y:auto;padding:4px;margin-bottom:12px;} .pick-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0; padding:9px 11px;border-radius:9px;cursor:pointer;font:inherit;color:inherit;} .pick-row:hover,.pick-row:focus-visible{background:var(--teal-50,#E2F0F8);outline:none;} .pick-main{display:flex;align-items:center;gap:8px;} .pick-sub{font-size:12px;color:var(--muted);} /* The confirmed pick. Same two lines as a result row so the choice looks like the thing that was chosen, with the escape hatch parked at the end of the row rather than under it. */ .picked{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 12px; background:var(--sand,#F5EFE3);border:1px solid var(--line-2);border-radius:10px;} /* Two lines at the left, «Cambiar» centred against both at the right. As a wrapping flex row the full-width second line pushed the button to a THIRD line of its own. */ .picked .pick-main,.picked .pick-sub{grid-column:1;min-width:0;} .picked .btn{grid-column:2;grid-row:1 / span 2;} /* A bar with SIX filters (Leads) could not fit them at a laptop width: five landed on the row and the sixth wrapped alone, then grew to the 340px cap while its five peers sat at 196px — so the second line read as a different control rather than the same one continued. `dense` trims the cap AND stops the pickers growing. Left on flex-grow:1 they expanded to fill the row and pushed the sixth off it regardless of their basis: the first attempt fit at 1131px of bar and wrapped again at 1116. Fixed at their basis, five pickers plus their gaps leave the slack to the search box and all six fit with room to spare. Opt-in, so the 340px cap that keeps long option labels from truncating stays the default everywhere else. */ /* Wider viewports ONLY. `dense` is about fitting six controls on one row, and stacked there is no row to fit. Unscoped it also applied on a phone, where the column layout reads a flex-basis as a HEIGHT — the very trap the max-width:640px block above is written to disarm. It won there not by being more specific in a way that mattered but by being declared later, so /leads drew its six filters as 165–200px-tall blocks with ~600px of empty panel between them and pushed the lead cards off the screen entirely. */ @media(min-width:641px){ /* `dense` only trims the BASIS so six controls fit on one row; it no longer caps their width — the bar still fills edge to edge (2026-10-30). In a .grid3 bar the grid cell decides. */ .filterbar.dense .pick{flex:1 1 165px;min-width:160px;max-width:none;} .filterbar.dense .grow{flex:2 1 200px;min-width:190px;} .filterbar.grid3.dense .pick,.filterbar.grid3.dense .grow{flex:none;max-width:none;} } /* A badge that IS a control (a one-click filter), not just a label. Keeps the badge's look while dropping the button chrome, so it does not need an inline style= in the bar. */ /* A badge that is also a BUTTON needs two things a plain badge does not: a hit target (21px tall was under the WCAG 24px floor) and something that says it can be clicked. The active/inactive toggles on Markups and Exchange rates were a badge wrapped in a bare .iconbtn — visually identical to the read-only badges in the next column, so nothing told a new operator that this one changes the record. */ .badge-btn{border:1px solid transparent;cursor:pointer;font:inherit;min-height:26px;transition:border-color .12s,filter .12s;} .badge-btn:hover{border-color:currentColor;filter:brightness(.97);} /* A badge that filters a list (the composition counters of the Circuits list): the chosen one carries a ring, and a long label is never cut. */ .badge-btn.on{border-color:currentColor;box-shadow:0 0 0 2px #fff,0 0 0 3px currentColor;} /* The composition counters sit in their own row (no negative margin: a second line of chips never slides under the bar above). Label first, the count in a small disc at the end; a gap with none is quiet (grey, tick) so the ones to look at are the amber ones. */ .gapbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 14px;} .gapbar > b{margin-right:4px;} .gapbar .badge{display:inline-flex;align-items:center;gap:6px;max-width:none;overflow:visible;margin-left:0;padding:3px 6px 3px 10px;} .gapbar .badge .n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:inherit;font-size:12px;font-variant-numeric:tabular-nums;} .gapbar .badge.zero{background:var(--line-2);color:var(--muted);font-weight:600;} .gapbar .badge.zero .n{background:transparent;} .gapbar .badge.on.zero{color:var(--ink,#0C3A5B);} /* On a phone the counters are two to a row, the label wraps inside its chip and the count stays at the right edge. */ @media (max-width:640px){.gapbar{display:grid;grid-template-columns:1fr 1fr;gap:6px;}.gapbar > b,.gapbar > .btn{grid-column:1 / -1;}.gapbar .badge{white-space:normal;justify-content:space-between;text-align:left;border-radius:12px;padding:5px 6px 5px 10px;}.gapbar .badge .lbl{flex:1;min-width:0;line-height:1.25;}.gapbar .badge .n{flex:none;}} /* An unsaved mark on a tab: a small amber dot after its name. */ .tab-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0b000;margin-left:7px;vertical-align:middle;} /* A totals row that is a warning rather than a number — used when a quote would go out at cost. */ .totals .warn-row{color:var(--rose,#A72F5C);} .totals .warn-row b{font-weight:600;font-size:13px;text-align:right;} /* --- Supplier rate request (RFQ) modal ------------------------------------------------------------------ Grouped by supplier because that is the unit that gets sent: one card = one email. A group that cannot be emailed is shown, not hidden — greyed and struck through with its reason — so "these three services were not asked about" is visible at the moment of sending rather than discovered days later. */ .rfq-group{border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff;} .rfq-group.is-blocked{background:#FAF9F6;border-style:dashed;} .rfq-group.is-blocked .rfq-head b{color:var(--muted);} .rfq-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;} .rfq-copy{margin-left:auto;} .rfq-head .badge.warn{margin-left:auto;} .rfq-group .tbl.compact td{padding:5px 8px;font-size:13px;} .rfq-group .tbl.compact tr:last-child td{border-bottom:none;} /* Long service names wrap inside their card instead of running past the modal. */ .rfq-group{overflow-x:auto;} .rfq-group .tbl.compact td.wrap{white-space:normal;overflow-wrap:anywhere;min-width:0;} .rfq-assign{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;} .rfq-assign-pick{min-width:240px;} .rfq-preview{margin-top:14px;border:1px solid var(--line-2);border-radius:12px;background:#FBFAF7;} .rfq-preview>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:13px;color:var(--teal-d,#0E4C77);} .rfq-preview>summary::marker{color:var(--muted);} .rfq-preview-b{padding:0 14px 14px;} .rfq-preview-b pre{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.55;color:var(--ink,#1F2A2E); background:#fff;border:1px solid var(--line,#ECEFEE);border-radius:9px;padding:11px 13px;margin:0;} /* The request as plain text (mail to suppliers off): the whole text visible, scrolling inside its own box, selectable as one block. */ .rfq-preview-b pre.rfq-text{max-height:min(420px,50dvh);overflow:auto;user-select:text;} .rfq-frame{display:block;width:100%;height:min(520px,60dvh);border:1px solid var(--line-2);border-radius:10px;background:#fff;} /* A modal that lists things needs more width than the 460px form modals. */ .modal.wide{max-width:960px;} /* The modal width scale (owner, 2026-10-12: they should fit well and not be too narrow) — FIVE steps, chosen by what the dialog holds, never an inline max-width and never narrower than 480: w480 a confirmation, or ONE field (a reason, a password) w560 a short form: up to 4 fields, at most two side by side; a search-and-pick list w640 a form of 5–9 fields or three side by side; anything with a table or a charge allocator w760 10 fields or more, four side by side, the rate and service editors wide (960) dialogs that are a working table: room mix, supplier reply, rate request, day by day A guard fails on any other width class or a bare .modal. */ .modal.w480{max-width:480px;} .modal.w560{max-width:560px;} .modal.w640{max-width:640px;} .modal.w760{max-width:760px;} /* Supplier reply: the rows scroll inside their card instead of pushing the table's header past the modal. */ .reply-rows{overflow-x:auto;} .reply-tbl tbody td{vertical-align:middle;} .reply-tbl td.wrap:first-child{min-width:220px;} .reply-tbl td.reply-pick{min-width:260px;} .reply-tbl input.cell.sm{width:100px;} .reply-tbl tbody tr:hover{background:transparent;} /* Why a form is read-only, said where the read-only fields are. A disabled form with no sentence beside it is indistinguishable from a broken screen — which is exactly how a first-time operator reads it. */ .lockbar{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:10px 13px;border-radius:10px; background:var(--amber-50,#FBF1DD);color:var(--amber-d,#7A5A12);font-size:13px;line-height:1.5;} .lockbar i{font-size:17px;flex:none;margin-top:1px;} /* A notification that navigates says so; one that only clears itself does not pretend to. */ /* width:100% because .bell-item is a column with align-items:flex-start — without it the title shrinks to its text and the arrow's margin-left:auto has nothing to push against. */ .bell-item .bell-item-title{display:flex;align-items:center;gap:6px;width:100%;} .bell-item-go{margin-left:auto;font-size:13px;color:var(--muted);flex:0 0 auto;} .bell-item.is-link:hover .bell-item-go{color:var(--teal-d);} /* Skip link (WCAG 2.4.1): the first Tab stop on every page, visible only while focused. */ .skip-link{position:absolute;left:12px;top:-64px;z-index:200;padding:10px 16px;border-radius:8px;background:var(--teal);color:#fff;font-weight:700;text-decoration:none;transition:top .12s ease;} .skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--teal-50);} .content:focus{outline:none;} /* Global search. Sits in the top bar next to the bell: the two things you reach for when you arrive with a reference in your hand or a question about what is late. */ .gsearch{position:relative;display:flex;align-items:center;min-width:0;} .gsearch-i{position:absolute;left:10px;font-size:15px;color:var(--faint);pointer-events:none;} .gsearch-in{ width:clamp(240px,26vw,340px);max-width:38vw;height:44px;padding:0 12px 0 32px; border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);font-size:13px; /* Every other field inherits the UI font; without this the search box (and its placeholder) fell back to the browser default. */ font-family:inherit; } .gsearch-in:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-50);} .gsearch-in::placeholder{color:var(--faint);} /* The clear (×) of every search field: the browser's own is a bare bold cross hugging the border. Here a soft round chip with a thin cross, a 24 px target with room to the right, darker on hover, the same ring as the fields on keyboard focus (owner 2026-11-03: «la x para limpiar … un estilo más moderno»). The chip and the cross are one SVG (a data URI), so it needs no icon font and the pseudo-element can carry it. */ input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none;appearance:none;box-sizing:border-box;width:24px;height:24px;margin:0 2px 0 8px;border-radius:50%;cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E6EAF0'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%235B6675' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; transition:filter .12s ease,transform .12s ease; } input[type=search]::-webkit-search-cancel-button:hover{filter:brightness(.92) contrast(1.15);} input[type=search]::-webkit-search-cancel-button:active{transform:scale(.92);} /* Above the panel so a click outside closes it, below the panel's own content. */ .gsearch-scrim{position:fixed;inset:0;z-index:60;} .gsearch-panel{ position:absolute;top:44px;right:0;z-index:61;width:340px;max-width:88vw; max-height:420px;overflow:auto;padding:6px;box-shadow:0 6px 18px rgba(21,119,181,.10); } .gsearch-empty{padding:16px 12px;font-size:13px;} .gsearch-group + .gsearch-group{margin-top:4px;border-top:1px solid var(--line);padding-top:4px;} .gsearch-label{ font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--faint);padding:7px 10px 3px; } .gsearch-item{ display:flex;flex-direction:column;gap:1px;width:100%;text-align:left; padding:8px 10px;border:0;background:none;border-radius:6px;cursor:pointer; } .gsearch-item:hover{background:var(--teal-50);} /* Keyboard focus needs a real indicator, not just the hover tint: teal-50 against white is about 1.1:1, which is a hint at best. Same outline the rest of the console uses. */ .gsearch-item:focus-visible{background:var(--teal-50);outline:2px solid var(--teal);outline-offset:-2px;} .gsearch-t{font-size:14px;font-weight:600;color:var(--ink);} .gsearch-s{font-size:12px;color:var(--muted);} /* The field and its close button; the icon button and the close button only exist on a phone (below). */ .gsearch-field{position:relative;display:flex;align-items:center;min-width:0;} .gsearch-btn,.gsearch-close{display:none;} /* On a phone (2026-09-14, owner: «el buscador en mobile sea un icono y se abra un contenedor, bien armado y prolijo»). It used to be a 44px input with an off-centre icon, and its 340px results panel — anchored to that tiny box — opened past the left edge of the screen. Now: a real 44×44 icon button like the other top-bar actions; tapping it opens the search as its own container over the top bar (field full width, close, results below, dimmed page). */ @media (max-width:860px){ .gsearch-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2); border-radius:10px;background:#fff;color:var(--ink);font-size:19px;cursor:pointer;} .gsearch-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;} .gsearch-field{display:none;} .gsearch.is-sheet .gsearch-field{display:flex;position:fixed;top:0;left:0;right:0;height:62px;gap:8px;padding:9px 12px; background:#fff;border-bottom:1px solid var(--line-2);z-index:72;} .gsearch.is-sheet .gsearch-i{left:25px;font-size:17px;} .gsearch.is-sheet .gsearch-in{flex:1;width:auto;max-width:none;height:44px;padding-left:38px;font-size:16px;border-radius:10px;} .gsearch.is-sheet .gsearch-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0; border-radius:10px;background:var(--sand,#F4EFE6);color:var(--ink);font-size:19px;cursor:pointer;} .gsearch.is-sheet .gsearch-scrim{background:rgba(8,20,24,.45);z-index:70;} .gsearch.is-sheet .gsearch-panel{position:fixed;top:62px;left:0;right:0;width:auto;max-width:none; max-height:calc(100dvh - 62px);border-radius:0 0 14px 14px;z-index:71;padding:6px 8px 10px;} .gsearch.is-sheet .gsearch-item{padding:11px 10px;min-height:44px;} /* The three top-bar actions read as one set: same 44×44 touch target (the bell was 38, sign-out 48×44). */ .bellbtn{width:44px;height:44px;} /* The label goes at the SAME width the button is squeezed to 44px: hidden only at ≤640 it spilled 3px out of the 44px box between 641 and 860, and every page scrolled sideways at 768. The button keeps its name in title/aria-label. */ } /* ==== UI consistency sweep (2026-09-10) ==== */ /* Nine screens write their caution banners as .formerr (scan cut off, email not configured, unmatched invoice lines, a charge billed twice…) and the Manager never styled it: the icon and the sentence rendered as plain body text, indistinguishable from the paragraph beside them. Amber like .lockbar for a caution; a real conflict (role=alert) goes red. */ .formerr{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:10px;border:1px solid #F5D9A3; background:#FFF7E6;color:#8A5A00;font-size:13px;line-height:1.5;} .formerr i{font-size:17px;flex:none;margin-top:1px;} .formerr[role=alert]{border-color:#F3C0BD;background:#FDECEC;color:#B42318;} /* An empty or not-found state at page level is the same white card an empty table sits in — it was loose grey text on the sand background on 20 screens, next to lists whose empty state is a row inside a white panel. */ .content > .empty{background:#fff;border:1px solid var(--line-2);border-radius:14px;} /* «Back to files» inside a not-found state inherited body colour (a{color:inherit}) — a link nobody could see. */ .empty a{color:var(--teal-d,#0E4C77);font-weight:700;} .empty a:hover{text-decoration:underline;} /* .tbl sets nowrap on every cell, so a long empty-state sentence stretched the table sideways instead of wrapping inside it. */ .tbl tbody td.empty{white-space:normal;} /* A KPI strip followed straight by a filter bar or a panel sat flush against it (AI usage, Import monitor); where a page already spaces it inline the two margins collapse to the larger one. */ .kpis + .panel,.kpis + .filterbar{margin-top:16px;} /* A segmented control used as a section's action carried its standalone 16px bottom margin into .sec-head and sat 8px above the title's centre line (campaign «Per-recipient results»). */ .sec-head .seg{margin-bottom:0;} /* Key/value list (rate import detail).
had no rule: each value sat under its label with the browser's 40px indent. */ .kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 22px;margin:0;font-size:14px;} .kv dt{color:var(--muted);font-weight:600;} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere;} @media(max-width:560px){.kv{grid-template-columns:1fr;gap:2px;}.kv dd{margin-bottom:8px;}} /* The quote editor's header links (customer record, originating lead) inherited body colour and read as text. */ .qmeta-links a{color:var(--teal-d,#0E4C77);font-weight:700;gap:5px;} .qmeta-links a:hover{text-decoration:underline;} /* Selection policy: the chosen strategy card said so only through its radio. */ .pol-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line,#e6e9eb);border-radius:8px;cursor:pointer;} .pol-card.sel{background:var(--teal-50,#E2F0F8);box-shadow:inset 0 0 0 1px var(--teal-d,#0E4C77);} /* Supplier-invoice lines: an amount needs more than .cell.sm's 84px (five-figure BRL plus the spinner). */ .si-lines input.cell.sm{width:110px;} /* A form footer whose destructive actions sit on the left, apart from Save and the primary action. */ .formfoot .foot-left{display:flex;gap:10px;flex-wrap:wrap;margin-right:auto;} /* An upload control inside a .field (the campaign image slots, the Settings logo) is itself a