/* * Logitools brand theme — single source of truth for both hosts (Web + MAUI). * Loaded as _content/Logitools.Client.Shared/theme.css. * * Palette derived from the current Logitools logo (2026): a bright cyan/azure mark * with a dark slate-grey wordmark — NOT the old teal/navy icon set in Funcoes/imagens. */ :root { /* Brand */ --lt-brand: #16abde; /* primary cyan/azure (logo mark) */ --lt-brand-600: #1298c7; /* hover / pressed */ --lt-brand-700: #0e83ac; /* deep accent */ --lt-brand-tint: #e7f6fc; /* pale cyan fill (chips, hover rows) */ --lt-brand-glow: rgba(22, 171, 222, .25); /* Ink — slate grey wordmark family */ --lt-ink: #363c42; /* headings / wordmark */ --lt-ink-2: #4b535b; /* body text */ --lt-muted: #7a8590; /* secondary text */ --lt-placeholder: #69737d; /* texto num campo vazio que diz o que o vazio vale: 4,8:1 no branco (WCAG 1.4.3 — o do browser fica abaixo de 4,5:1 no Firefox e no Safari; o --lt-muted dá 3,8:1) */ --lt-line: #d9e1e7; /* borders / dividers */ /* Surfaces */ --lt-bg: #eef2f5; /* app background */ --lt-surface: #ffffff; /* cards / panels */ --lt-surface-2: #f6f9fb; /* subtle raised areas */ --lt-header: #2a3138; /* dark bar (top of panel) */ --lt-header-ink: #eef3f6; /* text on dark bar */ --lt-wh-h: 64px; /* WorkHeader height — overlays (ficha/drawer) start below it */ /* State */ --lt-danger: #d64027; /* errors + controlled substances (psico/benzo) */ --lt-danger-tint: #fdecec; --lt-success: #2f9e68; --lt-success-tint: #e7f6ee; --lt-warning: #e8a13a; --lt-warning-tint: #fdf3e2; --lt-info: #2f6f9e; --lt-info-tint: #e8f0f8; /* Shape */ --lt-radius: 12px; --lt-radius-sm: 8px; --lt-shadow: 0 10px 30px rgba(28, 43, 58, .12); --lt-shadow-lg: 0 18px 50px rgba(28, 43, 58, .22); --lt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* Linguagem do mockup do CRM (2026-09-25, objetivo O1 da spec do CRM): cartões mais redondos com sombra suave em duas camadas, texto de estado escuro sobre o tom claro (contraste ≥ 4,5:1), cores de área e de avatar. */ --lt-radius-lg: 14px; --lt-shadow-card: 0 1px 2px rgba(28, 43, 58, .04), 0 6px 20px -6px rgba(28, 43, 58, .10); --lt-success-ink: #1e6b46; --lt-danger-ink: #9c2a18; --lt-warning-ink: #8a5a12; --lt-info-ink: #204d70; --lt-neutro-tint: #eef1f4; --lt-acc-azul: #0a84ff; --lt-acc-ciano: #1aa3d9; --lt-acc-laranja: #f08c00; --lt-acc-violeta: #5e5ce6; --lt-acc-vermelho: #e5484d; --lt-acc-rosa: #e5446d; --lt-acc-verde: #2fa84a; --lt-acc-turquesa: #0f9fb5; --lt-acc-cinza: #7a8590; --lt-acc-castanho: #9a7b55; --lt-acc-roxo: #a64fd6; --lt-av-1-bg: #e3efff; --lt-av-1-ink: #1d5fbf; --lt-av-2-bg: #e1f5ea; --lt-av-2-ink: #1e7a46; --lt-av-3-bg: #fff0dc; --lt-av-3-ink: #9a5b00; --lt-av-4-bg: #ffe5e8; --lt-av-4-ink: #b3263b; --lt-av-5-bg: #ecebff; --lt-av-5-ink: #4b44c4; --lt-av-6-bg: #dff5f6; --lt-av-6-ink: #117178; --lt-av-7-bg: #f6e6fb; --lt-av-7-ink: #8a2fa8; --lt-av-8-bg: #eef0f3; --lt-av-8-ink: #4b535b; } /* ---- Product ficha window (ProductDetailWindow, global because it's a shared component) ---- */ .lt-fx__overlay { position: fixed; inset: 0; background: rgba(28, 43, 58, .55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 2vh 2vw; } .lt-fx { background: var(--lt-surface); border-radius: var(--lt-radius); box-shadow: var(--lt-shadow-lg); width: min(1000px, 96vw); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; font-family: var(--lt-font); } .lt-fx__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.4rem; background: var(--lt-header); color: var(--lt-header-ink); } .lt-fx__head h2 { margin: 0; font-size: 1.15rem; } .lt-fx__head p { margin: .2rem 0 0; font-size: .82rem; color: rgba(238, 243, 246, .7); } .lt-fx__head div:first-child { flex: 1; } .lt-fx__close { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--lt-header-ink); font-size: 1rem; cursor: pointer; } .lt-fx__close:hover { background: var(--lt-danger); } .lt-fx__body { padding: 1.2rem 1.4rem; overflow-y: auto; } .lt-fx__group { margin-bottom: 1.5rem; } .lt-fx__group h3 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lt-brand-700); border-bottom: 2px solid var(--lt-brand-tint); padding-bottom: .3rem; } .lt-fx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.5rem; margin: 0; } .lt-fx__grid--dense { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .lt-fx__field { display: flex; flex-direction: column; padding: .25rem 0; border-bottom: 1px solid var(--lt-surface-2); } .lt-fx__field dt { font-size: .72rem; color: var(--lt-muted); } .lt-fx__field dd { margin: 0; font-size: .9rem; color: var(--lt-ink); font-weight: 600; word-break: break-word; } .lt-fx__toggle { border: none; background: none; cursor: pointer; font: inherit; color: var(--lt-brand-700); text-transform: uppercase; letter-spacing: .05em; padding: 0; } /* ficha tabs (the 7 legacy labels) */ .lt-fx__tabs { display: flex; gap: .15rem; padding: .5rem .8rem 0; background: var(--lt-surface-2); border-bottom: 1px solid var(--lt-line); overflow-x: auto; } .lt-fx__tabs button { border: none; background: transparent; cursor: pointer; padding: .55rem .9rem; font-size: .85rem; font-weight: 600; color: var(--lt-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .lt-fx__tabs button:hover:not(:disabled) { color: var(--lt-ink); } .lt-fx__tabs button.is-active { color: var(--lt-brand-700); border-bottom-color: var(--lt-brand); } .lt-fx__tabs button:disabled { opacity: .4; cursor: default; } .lt-fx__editbtn, .lt-fx__mode { align-self: center; padding: .4rem .9rem; border-radius: var(--lt-radius-sm); font-size: .82rem; font-weight: 600; } .lt-fx__editbtn { border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; } .lt-fx__editbtn:hover { background: var(--lt-brand); border-color: var(--lt-brand); } .lt-fx__mode { background: var(--lt-warning); color: #3a2c00; } .lt-fx__msg { padding: .6rem 1.4rem; font-size: .85rem; } .lt-fx__msg.is-ok { background: #e3f5eb; color: #1c7a4d; } .lt-fx__msg.is-err { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-fx__note { color: var(--lt-muted); font-size: .9rem; padding: 1rem; } .lt-fx__hint { font-size: .78rem; color: var(--lt-muted); margin: .5rem 0 0; } /* per-batch balances table (ficha → Lotes tab) */ .lt-fx__lotes { width: 100%; border-collapse: collapse; font-size: .84rem; } .lt-fx__lotes th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); background: var(--lt-surface); border-bottom: 2px solid var(--lt-line); padding: .4rem .6rem; position: sticky; top: 0; } .lt-fx__lotes td { padding: .4rem .6rem; border-bottom: 1px solid var(--lt-line); } .lt-fx__lotes .c-num, .lt-fx__lotes th.c-num { text-align: right; font-variant-numeric: tabular-nums; } /* edit inputs */ .lt-fx__egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem 1rem; align-items: end; } .lt-fx__e { display: flex; flex-direction: column; gap: .2rem; } .lt-fx__e--wide { grid-column: span 2; } .lt-fx__e--full { grid-column: 1 / -1; } .lt-fx__e span { font-size: .72rem; color: var(--lt-muted); font-weight: 600; } .lt-fx__e input, .lt-fx__e select, .lt-fx__e textarea { box-sizing: border-box; padding: .45rem .55rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .9rem; font-family: inherit; } /* nativo renderiza mais baixo que o ; appearance:none + box-sizing + altura fixa alinham-nos (o select estava mais pequeno que os vizinhos — 2026-07-14). */ .lt-ue__f input, .lt-ue__f select { box-sizing: border-box; height: 42px; width: 100%; padding: .55rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .95rem; font-family: inherit; background: var(--lt-surface); color: var(--lt-ink); } .lt-ue__f select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a8590' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px 8px; } .lt-ue__f input:focus, .lt-ue__f select:focus { outline: none; border-color: var(--lt-brand); box-shadow: 0 0 0 3px var(--lt-brand-glow); } .lt-ue__chk { display: flex; align-items: center; gap: .4rem; align-self: end; font-size: .9rem; color: var(--lt-ink-2); } .lt-ue__foot { justify-content: flex-end; gap: .6rem; } .lt-ue__save { padding: .6rem 1.6rem; border: none; border-radius: var(--lt-radius-sm); background: var(--lt-brand); color: #fff; font-weight: 600; cursor: pointer; } .lt-ue__save:hover:not(:disabled) { background: var(--lt-brand-600); } .lt-ue__save:disabled { opacity: .6; } /* ---- Post-sale print dialog ---- */ .lt-pd__overlay { position: fixed; inset: 0; background: rgba(28,43,58,.5); display: flex; align-items: center; justify-content: center; z-index: 80; } .lt-pd { width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--lt-surface); border-radius: var(--lt-radius); box-shadow: var(--lt-shadow-lg); overflow: hidden; } .lt-pd__status { padding: .6rem 1.25rem; font-size: .85rem; } .lt-pd__status.is-ok { background: #e3f5eb; color: #1c7a4d; } .lt-pd__status.is-err { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-pd__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.25rem; overflow-y: auto; } .lt-pd__col h3 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lt-brand-700); } .lt-pd__empty { color: var(--lt-muted); font-size: .9rem; } .lt-pd__doc { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); margin-bottom: .5rem; cursor: pointer; } .lt-pd__doc.is-on { border-color: var(--lt-brand); background: var(--lt-brand-tint); } .lt-pd__docmain { display: flex; flex-direction: column; } .lt-pd__docmain small { color: var(--lt-muted); font-size: .72rem; } /* Os documentos de um atendimento com várias vendas: «Imprimir» manda-os todos; o escolhido é o que se prevê, exporta ou envia. */ .lt-pd__docs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--lt-line); background: var(--lt-surface-2); } .lt-pd__docs > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lt-muted); margin-right: .25rem; } .lt-pd__docpick { padding: .35rem .7rem; border: 1px solid var(--lt-line); border-radius: 999px; background: var(--lt-surface); color: var(--lt-ink-2); font-size: .85rem; font-variant-numeric: tabular-nums; cursor: pointer; } .lt-pd__docpick:hover { border-color: var(--lt-brand); } .lt-pd__docpick.is-on { border-color: var(--lt-brand); background: var(--lt-brand-tint); color: var(--lt-brand-700); font-weight: 600; } .lt-pd__docpick:focus-visible { outline: 2px solid var(--lt-brand-700); outline-offset: 1px; } .lt-pd__printer, .lt-pd__email { width: 100%; box-sizing: border-box; padding: .55rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .9rem; } .lt-pd__printer { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.9rem; background-color: var(--lt-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a8590' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: 12px 8px; } .lt-pd__emailrow { display: flex; gap: .5rem; } .lt-pd__foot { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.25rem; border-top: 1px solid var(--lt-line); background: var(--lt-surface-2); } .lt-pd__spacer { flex: 1; } .lt-pd__act { padding: .6rem 1.1rem; border: 1px solid var(--lt-brand); border-radius: var(--lt-radius-sm); background: var(--lt-brand-tint); color: var(--lt-brand-700); font-weight: 600; cursor: pointer; } .lt-pd__act:hover:not(:disabled) { background: var(--lt-brand); color: #fff; } .lt-pd__act:disabled { opacity: .5; } .lt-pd__done { padding: .6rem 1.6rem; border: none; border-radius: var(--lt-radius-sm); background: var(--lt-brand); color: #fff; font-weight: 700; cursor: pointer; } .lt-pd__done:hover { background: var(--lt-brand-600); } .lt-pd__previewshade { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(28,43,58,.56); padding: 1rem; } .lt-pd__previewdialog { width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--lt-surface); border-radius: var(--lt-radius); box-shadow: var(--lt-shadow-lg); overflow: hidden; } .lt-pd__previewhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: var(--lt-ink); color: white; } .lt-pd__previewhead h3 { margin: 0; font-size: 1rem; } .lt-pd__previewhead p { margin: .2rem 0 0; color: rgba(255,255,255,.76); font-size: .85rem; } .lt-pd__previewclose { border: 0; background: transparent; color: white; font-size: 1.8rem; line-height: 1; cursor: pointer; } .lt-pd__previewbody { flex: 1; min-height: 0; padding: 1rem; overflow: auto; background: var(--lt-surface-2); } .lt-pd__previewframe { width: 100%; min-height: min(64vh, 680px); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: white; } .lt-pd__previewstate { margin: 0; padding: 1rem; color: var(--lt-ink-2); } .lt-pd__previewstate.is-error { color: var(--lt-danger); background: var(--lt-danger-tint); border-radius: var(--lt-radius-sm); } .lt-pd__previewraw { margin: 0; padding: 1rem; min-height: 40vh; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: white; overflow: auto; } .lt-pd__previewwarn { margin: .6rem 0 0; font-size: .8rem; color: #8a5a00; } .lt-pd__previewfoot { display: flex; justify-content: flex-end; padding: .75rem 1rem; border-top: 1px solid var(--lt-line); background: var(--lt-surface); } @media (max-width: 760px) { .lt-pd__body { grid-template-columns: 1fr; } .lt-pd__foot { flex-wrap: wrap; } .lt-pd__spacer { display: none; } .lt-pd__act, .lt-pd__done { flex: 1 1 140px; } } /* ---- Comparticipação — plan management ---- */ .lt-cp { min-height: 100vh; display: flex; flex-direction: column; background: var(--lt-bg); font-family: var(--lt-font); color: var(--lt-ink); } .lt-cp__main { flex: 1; display: flex; gap: .75rem; padding: .75rem; min-height: 0; } .lt-cp__list { width: clamp(300px, 26vw, 380px); flex-shrink: 0; display: flex; flex-direction: column; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); overflow: hidden; } .lt-cp__search { padding: .6rem; border-bottom: 1px solid var(--lt-line); display: flex; flex-direction: column; gap: .4rem; } .lt-cp__search input[type=text], .lt-cp__search input:not([type]) { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .9rem; } .lt-cp__search label { font-size: .8rem; color: var(--lt-ink-2); display: flex; gap: .35rem; align-items: center; } .lt-cp__planos { overflow-y: auto; flex: 1; } .lt-cp__plano { display: flex; flex-direction: column; width: 100%; text-align: left; padding: .5rem .7rem; border: none; border-bottom: 1px solid var(--lt-surface-2); background: transparent; cursor: pointer; } .lt-cp__plano:hover { background: var(--lt-brand-tint); } .lt-cp__plano.is-sel { background: var(--lt-brand-tint); box-shadow: inset 3px 0 0 var(--lt-brand); } .lt-cp__plano.is-off .lt-cp__pdesign { color: var(--lt-muted); text-decoration: line-through; } .lt-cp__pcode { font-weight: 700; font-size: .8rem; color: var(--lt-brand-700); } .lt-cp__pdesign { font-size: .85rem; } .lt-cp__detail { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: 1rem; overflow: hidden; } .lt-cp__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .lt-cp__dhead h2 { margin: 0; font-size: 1.1rem; } .lt-cp__dhead p { margin: .15rem 0 0; font-size: .82rem; color: var(--lt-muted); } .lt-cp__estado { padding: .5rem .9rem; border-radius: var(--lt-radius-sm); border: 1px solid var(--lt-line); font-weight: 600; cursor: pointer; background: var(--lt-surface); } .lt-cp__estado.is-on { color: #1c7a4d; border-color: #bfe6cf; } .lt-cp__estado.is-off { color: var(--lt-danger); border-color: var(--lt-danger); background: var(--lt-danger-tint); } .lt-cp__badge.is-off { color: var(--lt-danger); font-weight: 600; } .lt-cp__status { margin: .6rem 0 0; padding: .5rem .75rem; border-radius: var(--lt-radius-sm); font-size: .85rem; } .lt-cp__status.is-ok { background: #e3f5eb; color: #1c7a4d; } .lt-cp__status.is-err { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-cp__valfilter { margin: .75rem 0 .5rem; padding: .5rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .9rem; max-width: 320px; } .lt-cp__valwrap { flex: 1; overflow-y: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); } .lt-cp__grid { width: 100%; border-collapse: collapse; font-size: .85rem; } .lt-cp__grid th { position: sticky; top: 0; background: var(--lt-surface); text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--lt-muted); padding: .5rem .6rem; border-bottom: 2px solid var(--lt-line); } .lt-cp__grid td { padding: .35rem .6rem; border-bottom: 1px solid var(--lt-surface-2); } .lt-cp__grid .c-num { text-align: right; font-variant-numeric: tabular-nums; } .lt-cp__grid .c-design { min-width: 220px; } .lt-cp__grp { font-weight: 700; } .lt-cp__pct { width: 76px; text-align: right; padding: .3rem .4rem; border: 1px solid var(--lt-line); border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums; } .lt-cp__pct:focus { outline: none; border-color: var(--lt-brand); box-shadow: 0 0 0 3px var(--lt-brand-glow); } .lt-cp__save { padding: .3rem .7rem; border: 1px solid var(--lt-brand); border-radius: 6px; background: var(--lt-brand-tint); color: var(--lt-brand-700); font-weight: 600; cursor: pointer; } .lt-cp__save:hover:not(:disabled) { background: var(--lt-brand); color: #fff; } .lt-cp__msg { padding: 1rem; color: var(--lt-muted); } .lt-cp__msg--center { text-align: center; margin-top: 3rem; } /* ---- Compras (fornecedores + docs de compra) — mirrors the lt-cp two-pane layout ---- */ /* Fixed viewport height so the LIST and DETAIL panes scroll internally (min-height let the page grow instead, so long result lists never showed a scrollbar). */ .lt-cm { height: 100vh; display: flex; flex-direction: column; background: var(--lt-bg); font-family: var(--lt-font); color: var(--lt-ink); } .lt-cm__main { flex: 1; display: flex; gap: .75rem; padding: .75rem; min-height: 0; } .lt-cm__list { width: clamp(300px, 26vw, 380px); flex-shrink: 0; display: flex; flex-direction: column; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); overflow: hidden; } .lt-cm__search { padding: .6rem; border-bottom: 1px solid var(--lt-line); display: flex; flex-direction: column; gap: .5rem; } .lt-cm__search input { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .9rem; } /* Search panel layout (shared by Fornecedores/Clientes): input+Procurar on one bar, then a tidy options row (checkbox left, Novo right) — no floating orphan controls. */ .lt-cm__searchbar { display: flex; gap: .5rem; } .lt-cm__searchbar input { flex: 1; min-width: 0; } .lt-cm__searchopts { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .lt-cm__searchrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .lt-cm__searchrow label { font-size: .8rem; color: var(--lt-ink-2); display: flex; gap: .35rem; align-items: center; } .lt-cm__btn { padding: .45rem .85rem; border: 1px solid var(--lt-brand); border-radius: var(--lt-radius-sm); background: var(--lt-brand-tint); color: var(--lt-brand-700); font-weight: 600; cursor: pointer; } .lt-cm__btn:hover { background: var(--lt-brand); color: #fff; } .lt-cm__rows { overflow-y: auto; flex: 1; } .lt-cm__row { display: flex; flex-direction: column; width: 100%; text-align: left; padding: .5rem .7rem; border: none; border-bottom: 1px solid var(--lt-surface-2); background: transparent; cursor: pointer; } .lt-cm__row:hover { background: var(--lt-brand-tint); } .lt-cm__row.is-sel { background: var(--lt-brand-tint); box-shadow: inset 3px 0 0 var(--lt-brand); } .lt-cm__rname { font-weight: 600; font-size: .88rem; } .lt-cm__rmeta { font-size: .76rem; color: var(--lt-muted); } .lt-cm__detail { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: 1rem; overflow-y: auto; } .lt-cm__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .lt-cm__dhead h2 { margin: 0; font-size: 1.1rem; } .lt-cm__dhead p { margin: .15rem 0 0; font-size: .82rem; color: var(--lt-muted); } .lt-cm__badge.is-off { color: var(--lt-danger); font-weight: 600; } .lt-cm__tabs { display: flex; gap: .25rem; margin: .8rem 0 .6rem; border-bottom: 1px solid var(--lt-line); } .lt-cm__tabs button { padding: .45rem .9rem; border: none; background: transparent; color: var(--lt-ink-2); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; } .lt-cm__tabs button.is-active { color: var(--lt-brand-700); border-bottom-color: var(--lt-brand); } .lt-cm__ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; overflow-y: auto; align-content: start; } .lt-cm__group { border: 1px solid var(--lt-surface-2); border-radius: var(--lt-radius-sm); padding: .6rem .75rem; } .lt-cm__group h3 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); } .lt-fld { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; font-size: .85rem; border-bottom: 1px dotted var(--lt-surface-2); } .lt-fld:last-child { border-bottom: none; } .lt-fld__label { color: var(--lt-muted); } .lt-fld__value { text-align: right; font-weight: 500; } .lt-cm__docs { flex: 1; display: flex; flex-direction: column; min-height: 0; } .lt-cm__docfilter { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; font-size: .82rem; color: var(--lt-ink-2); } .lt-cm__docfilter input { padding: .35rem .5rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); } .lt-cm__grid { width: 100%; border-collapse: collapse; font-size: .85rem; } .lt-cm__grid th { position: sticky; top: 0; background: var(--lt-surface); text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--lt-muted); padding: .5rem .6rem; border-bottom: 2px solid var(--lt-line); } .lt-cm__grid td { padding: .35rem .6rem; border-bottom: 1px solid var(--lt-surface-2); } .lt-cm__grid .c-num { text-align: right; font-variant-numeric: tabular-nums; } .lt-cm__tag { display: inline-block; padding: .05rem .4rem; border-radius: 4px; background: var(--lt-brand-tint); color: var(--lt-brand-700); font-size: .72rem; font-weight: 700; } .lt-cm__msg { padding: 1rem; color: var(--lt-muted); } .lt-cm__msg--center { text-align: center; margin-top: 3rem; } /* ---- Compras: novo/editar buttons + fornecedor edit modal extras ---- */ .lt-cm__btn--new { width: 100%; margin-top: .1rem; } .lt-cm__dactions { display: flex; align-items: center; gap: .6rem; } .lt-ue--wide { max-width: 900px; width: 92vw; } .lt-ue__section { margin: .9rem 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); border-bottom: 1px solid var(--lt-surface-2); padding-bottom: .25rem; } .lt-ue__section:first-child { margin-top: 0; } /* ---- Compras: documentos de fornecedor (search + launch) ---- */ .lt-cm__docarea { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: .75rem; min-height: 0; } .lt-cm__doctop { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } /* Toda a barra de pesquisa à MESMA altura (38px): inputs, selects e botões. Os em consulta: mantém-se nativo (é ele que sabe o TEXTO da opção escolhida), mas sem moldura nem seta — parece texto, e é o que é. */ .lt-ctl--ro { border: none; border-bottom: 1px solid var(--lt-surface-2); border-radius: 0; background: none; padding-left: 0; color: var(--lt-ink); opacity: 1; -webkit-appearance: none; appearance: none; } /* The one control style: inputs + selects. 42px touch-friendly, brand focus ring. appearance:none strips native chrome so EVERY control (incl. : re-add a custom chevron (appearance:none removed the native one). */ select.lt-ctl { padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a8590' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px 8px; } /* Checkbox row. */ .lt-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; -webkit-user-select: none; user-select: none; min-height: 42px; } .lt-check input { width: 18px; height: 18px; accent-color: var(--lt-brand); cursor: pointer; } /* Buttons — same family as the POS action keys. */ .lt-btn { min-height: 42px; padding: .5rem .9rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface); color: var(--lt-ink); font-weight: 700; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .lt-btn:hover:not(:disabled) { background: var(--lt-surface-2); } .lt-btn:disabled { opacity: .55; cursor: not-allowed; } .lt-btn--primary { background: var(--lt-brand); color: #fff; border-color: var(--lt-brand); } .lt-btn--primary:hover:not(:disabled) { background: var(--lt-brand-600); } .lt-btn--danger { color: var(--lt-danger); border-color: var(--lt-danger); } .lt-btn--danger:hover:not(:disabled) { background: var(--lt-danger-tint); } .lt-btn--link { min-height: 28px; padding: .12rem .38rem; border-color: transparent; background: transparent; color: var(--lt-brand-700); text-decoration: underline; text-underline-offset: 2px; } .lt-btn--link:hover:not(:disabled) { border-color: transparent; background: var(--lt-brand-tint); } .lt-btn--link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lt-brand-glow); } /* The row-delete button — the Atendimento "eliminar linha" (lt-at__rowdel). */ .lt-del { width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: var(--lt-muted); font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .lt-del:hover { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-del:active { transform: scale(.94); } /* Line-grid cells hosting design-system controls. */ .lt-cm__delcell { text-align: center; width: 52px; } .lt-cm__grid td .lt-field { gap: 0; } /* Alerts / inline feedback (lt-alert). One block, four intents. */ .lt-alert { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .8rem; border: 1px solid var(--lt-line); border-left-width: 4px; border-radius: var(--lt-radius-sm); background: var(--lt-surface-2); color: var(--lt-ink); font-size: .88rem; line-height: 1.35; } .lt-alert__icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.3; } .lt-alert__body { min-width: 0; } .lt-alert--ok { border-left-color: var(--lt-success); background: var(--lt-success-tint); color: #1e6b46; } .lt-alert--err { border-left-color: var(--lt-danger); background: var(--lt-danger-tint); color: #9c2a18; } .lt-alert--warn { border-left-color: var(--lt-warning); background: var(--lt-warning-tint); color: #8a5a12; } .lt-alert--info { border-left-color: var(--lt-info); background: var(--lt-info-tint); color: #204d70; } /* Live clock (lt-clock) — inherits text colour from its container (e.g. the dark app bar). */ .lt-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-variant-numeric: tabular-nums; } .lt-clock strong { font-size: 1rem; font-weight: 800; letter-spacing: .02em; } .lt-clock span { font-size: .68rem; opacity: .64; text-transform: capitalize; } /* Top-bar section tabs (lt-wh__tab) — global so pages can author tabs into the WorkHeader nav slot and still get the dark-bar styling (scoped CSS wouldn't reach slotted content). */ .lt-wh__tab { display: inline-flex; align-items: center; flex: 0 0 auto; height: 38px; padding: 0 .95rem; border: 1px solid transparent; border-radius: var(--lt-radius-sm); background: transparent; color: rgba(238, 243, 246, .72); font-family: var(--lt-font); font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .lt-wh__tab:hover { background: rgba(255, 255, 255, .1); color: #fff; } .lt-wh__tab.is-active { background: var(--lt-brand); color: #fff; } /* Global document/data grid (lt-grid) — scrolls horizontally (many columns) AND vertically (many rows); the header stays pinned. Cells don't wrap so wide grids trigger the H scroll. */ .lt-grid__wrap { overflow: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface); -webkit-overflow-scrolling: touch; /* Barras de scroll que OCUPAM ESPAÇO em vez de flutuarem sobre o conteúdo. No macOS as barras são "overlay" por omissão: aparecem por cima e tapam a última linha e a última coluna da grelha — foi exatamente o que o dono reportou. Declarar o tamanho do ::-webkit-scrollbar faz o motor usar a barra clássica DENTRO deste elemento, que entra no layout; o scrollbar-gutter reserva a calha para o conteúdo não saltar quando ela aparece. */ scrollbar-gutter: stable; } /* ⚠️ As propriedades PADRÃO (`scrollbar-width`/`scrollbar-color`) NÃO podem estar na regra acima: quando o motor as suporta, elas VENCEM e anulam os ::-webkit-scrollbar — e a barra volta a ser overlay, por cima do conteúdo. Medido: com `scrollbar-width: thin` a barra ocupava 2px (só a borda); sem ela, ocupa 14px (12 da barra + 2 da borda), que é o que a tira de cima do conteúdo. Por isso o padrão fica só onde não há pseudo-elementos WebKit (Firefox). */ @supports not selector(::-webkit-scrollbar) { .lt-grid__wrap { scrollbar-width: thin; scrollbar-color: #b9c4cf var(--lt-surface-2); } } /* Barras SEMPRE VISÍVEIS quando há para onde rolar (pedido do dono). Com barras overlay do sistema, uma grelha com 20 colunas parece não ter mais nada à direita: a barra só aparece quando já se está a rolar, ou seja quando já se descobriu que havia. Declarar o ::-webkit-scrollbar torna-as clássicas — persistentes e a ocupar layout — e a `track` visível é o que dá a pista de que há conteúdo escondido, mesmo antes de tocar no rato. Não se usa `overflow: scroll`: isso desenharia barras mortas em grelhas que cabem todas. */ .lt-grid__wrap::-webkit-scrollbar { width: 12px; height: 12px; } .lt-grid__wrap::-webkit-scrollbar-track { background: var(--lt-surface-2); box-shadow: inset 0 0 0 1px var(--lt-line); /* a calha vê-se sempre que existe */ } .lt-grid__wrap::-webkit-scrollbar-thumb { background: #b9c4cf; border-radius: 6px; border: 3px solid var(--lt-surface-2); /* "respiro" à volta do polegar */ background-clip: content-box; } .lt-grid__wrap::-webkit-scrollbar-thumb:hover { background: #93a3b1; background-clip: content-box; } .lt-grid__wrap::-webkit-scrollbar-corner { background: var(--lt-surface-2); } /* Fill: dentro de uma coluna flex full-height, a grelha cresce até ao fundo (sem teto fixo). min-height:0 é obrigatório — sem ele o flex-item não encolhe e o scroll interno não acontece. */ .lt-grid__wrap--fill { flex: 1 1 auto; min-height: 0; align-self: stretch; } .lt-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--lt-font); font-size: .88rem; color: var(--lt-ink); } .lt-grid th, .lt-grid td { padding: .5rem .65rem; border-bottom: 1px solid var(--lt-line); text-align: left; white-space: nowrap; } .lt-grid--compact th, .lt-grid--compact td { padding: .3rem .5rem; } .lt-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--lt-surface); color: var(--lt-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; border-bottom: 2px solid var(--lt-line); } .lt-grid tbody tr:hover { background: var(--lt-brand-tint); } .lt-grid tbody tr:last-child td { border-bottom: none; } .lt-grid th.c-num, .lt-grid td.c-num { text-align: right; font-variant-numeric: tabular-nums; } .lt-grid .lt-grid__empty { text-align: center; color: var(--lt-muted); padding: 1.2rem; white-space: normal; } /* Lookup dialog (lupa) — advanced pick-and-import over a full filtered list. */ .lt-lkp__filters { display: grid; grid-template-columns: 2fr 1fr auto auto; gap: .6rem 1rem; align-items: end; margin-bottom: .8rem; } @media (max-width: 720px) { .lt-lkp__filters { grid-template-columns: 1fr 1fr; } } .lt-lkp__row { cursor: pointer; } .lt-lkp__hint { margin: .5rem 0 0; font-size: .78rem; color: var(--lt-muted); } /* ═══ Ficha de Produto v2 (.lt-fx2) — specs/stocks/ficha-produto.spec.md ═══ Takeover de ecrã inteiro: header identidade + tabs, main (cartões) + aside "Resumo". 3 naturezas de campo: editável / calculado / dicionário (pílula + tinta esbatida). */ /* Overlay starts BELOW the WorkHeader so the global top bar (search, loja, relógio, conta) stays visível e utilizável enquanto a ficha completa está aberta (top: altura do WorkHeader). */ .lt-fx2 { position: fixed; top: var(--lt-wh-h); left: 0; right: 0; bottom: 0; z-index: 60; background: var(--lt-bg); display: flex; flex-direction: column; font-family: var(--lt-font); color: var(--lt-ink-2); } .lt-fx2__id { background: var(--lt-surface); border-bottom: 1px solid var(--lt-line); flex: none; } .lt-fx2__idrow { max-width: 1280px; margin: 0 auto; padding: .9rem clamp(1rem,3vw,2rem) 0; display: flex; align-items: flex-start; gap: 1rem; } .lt-fx2__idmain { flex: 1; min-width: 0; } .lt-fx2__name { margin: 0; font-size: 1.22rem; font-weight: 650; color: var(--lt-ink); letter-spacing: -.01em; } .lt-fx2__codes { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .25rem; font-size: .8rem; color: var(--lt-muted); font-variant-numeric: tabular-nums; } .lt-fx2__codes b { color: var(--lt-ink-2); font-weight: 600; } .lt-fx2__dim { color: var(--lt-muted); } .lt-fx2__chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; } .lt-fx2__chip { display: inline-flex; align-items: center; padding: .16rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 650; } .lt-fx2__chip.is-brand { background: var(--lt-brand-tint); color: var(--lt-brand-700); } .lt-fx2__chip.is-gray { background: var(--lt-surface-2); color: var(--lt-muted); border: 1px solid var(--lt-line); } .lt-fx2__chip.is-danger { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-fx2__chip.is-ok { background: var(--lt-success-tint); color: var(--lt-success); } .lt-fx2__actions { display: flex; gap: .5rem; align-items: center; flex: none; } .lt-fx2__mode { background: var(--lt-warning-tint); color: var(--lt-warning); border-radius: 999px; padding: .3rem .8rem; font-size: .78rem; font-weight: 700; } .lt-fx2__btn { height: 36px; padding: 0 .95rem; border-radius: var(--lt-radius-sm); border: 1px solid var(--lt-line); background: var(--lt-surface); color: var(--lt-ink-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; } .lt-fx2__btn:hover { background: var(--lt-surface-2); } .lt-fx2__btn:disabled { opacity: .55; cursor: default; } .lt-fx2__btn--primary { background: var(--lt-brand); border-color: var(--lt-brand); color: #fff; } .lt-fx2__btn--primary:hover { background: var(--lt-brand-600); } .lt-fx2__btn--icon { width: 36px; padding: 0; font-size: 1rem; color: var(--lt-muted); } .lt-fx2__btn--icon:hover { background: var(--lt-danger); border-color: var(--lt-danger); color: #fff; } .lt-fx2__btn--danger { background: var(--lt-danger); border-color: var(--lt-danger); color: #fff; } .lt-fx2__btn--dangerghost { color: var(--lt-danger); border-color: var(--lt-danger); background: transparent; } .lt-fx2__btn--dangerghost:hover { background: var(--lt-danger-tint); } .lt-fx2__tabs { max-width: 1280px; margin: 0 auto; padding: .7rem clamp(1rem,3vw,2rem) .85rem; display: flex; gap: .35rem; flex-wrap: wrap; } .lt-fx2__tabs button { padding: .42rem .85rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface); font: inherit; font-size: .84rem; font-weight: 600; color: var(--lt-muted); cursor: pointer; } .lt-fx2__tabs button:hover:not(:disabled) { background: var(--lt-surface-2); } .lt-fx2__tabs button.is-active { background: var(--lt-brand-tint); border-color: var(--lt-brand); color: var(--lt-brand-700); } .lt-fx2__tabs button:disabled { opacity: .5; cursor: default; } .lt-fx2__tabn { display: inline-block; min-width: 1.1rem; text-align: center; margin-left: .3rem; padding: 0 .25rem; border-radius: 999px; background: var(--lt-surface-2); border: 1px solid var(--lt-line); font-size: .68rem; color: var(--lt-muted); } .lt-fx2__msg { max-width: 1280px; margin: .6rem auto 0; padding: .5rem .8rem; border-radius: var(--lt-radius-sm); font-size: .85rem; width: calc(100% - 2 * clamp(1rem,3vw,2rem)); } .lt-fx2__msg.is-ok { background: var(--lt-success-tint); color: var(--lt-success); } .lt-fx2__msg.is-err { background: var(--lt-danger-tint); color: var(--lt-danger); } /* Scroller a toda a largura; o conteúdo centra-se a 1280px via padding lateral dinâmico (assim a roda do rato funciona também sobre as goteiras laterais). */ .lt-fx2__wrap { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 1rem; align-items: start; box-sizing: border-box; width: 100%; padding: 1rem max(clamp(1rem, 3vw, 2rem), calc((100vw - 1280px) / 2)) 2.5rem; } .lt-fx2__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .lt-fx2__aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; } @media (max-width: 960px) { .lt-fx2__wrap { grid-template-columns: minmax(0,1fr); } .lt-fx2__aside { position: static; order: -1; } } .lt-fx2__card { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); } .lt-fx2__card.is-editing { border-color: var(--lt-brand); box-shadow: 0 0 0 3px var(--lt-brand-glow); } .lt-fx2__card--ghost { background: transparent; border-style: dashed; } .lt-fx2__cardhd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--lt-line); } .lt-fx2__cardhd h3 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-muted); display: flex; align-items: center; gap: .5rem; } .lt-fx2__cardbd { padding: .9rem 1rem; } .lt-fx2__pill { display: inline-block; font-size: .66rem; font-weight: 600; color: var(--lt-muted); border: 1px solid var(--lt-line); border-radius: 999px; padding: .02rem .4rem; text-transform: none; letter-spacing: 0; vertical-align: 1px; } .lt-fx2__fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .8rem 1.2rem; margin: 0; } .lt-fx2__f dt { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-muted); margin-bottom: .14rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .3rem; } .lt-fx2__f dd { margin: 0; font-size: .88rem; color: var(--lt-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lt-fx2__f dd.is-calc { color: var(--lt-muted); } .lt-fx2__f--wide { grid-column: 1 / -1; } .lt-fx2__egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .7rem 1rem; } /* Linha de flags (checkboxes) por baixo da grelha de campos — envolve sem forçar colunas. */ .lt-fx2__eflags { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--lt-line); } .lt-fx2__e { display: flex; flex-direction: column; gap: .22rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-muted); } .lt-fx2__e input, .lt-fx2__e select, .lt-fx2__e textarea { height: 38px; padding: 0 .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface); color: var(--lt-ink); font: inherit; font-size: .88rem; font-weight: 400; letter-spacing: 0; text-transform: none; } .lt-fx2__e textarea { height: auto; padding: .45rem .6rem; resize: vertical; } .lt-fx2__e input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; } .lt-fx2__e input:focus, .lt-fx2__e select:focus, .lt-fx2__e textarea:focus { outline: none; border-color: var(--lt-brand); box-shadow: 0 0 0 3px var(--lt-brand-glow); } .lt-fx2__e--wide { grid-column: span 2; } .lt-fx2__e--full { grid-column: 1 / -1; } .lt-fx2__chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: var(--lt-ink-2); align-self: end; padding-bottom: .5rem; } .lt-fx2__chk input { width: 17px; height: 17px; accent-color: var(--lt-brand); } .lt-fx2__hint { margin: .6rem 0 0; font-size: .78rem; color: var(--lt-muted); } /* Um aviso DENTRO da grelha de edição ocupa a linha inteira (o da designação trancada ficava espremido numa célula de ~200 px). */ .lt-fx2__egrid > .lt-fx2__hint--linha { grid-column: 1 / -1; margin: 0; } .lt-fx2__note { margin: 0; font-size: .86rem; color: var(--lt-muted); } .lt-fx2__acao { margin-top: .7rem; display: flex; } .lt-fx2__p2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .65rem; border: 1px dashed var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .85rem; color: var(--lt-muted); } .lt-fx2__p2 + .lt-fx2__p2 { margin-top: .5rem; } .lt-fx2__table { width: 100%; border-collapse: collapse; font-size: .85rem; } .lt-fx2__table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); padding: .4rem .6rem; border-bottom: 1px solid var(--lt-line); font-weight: 700; } .lt-fx2__table td { padding: .4rem .6rem; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-fx2__table tr:last-child td { border-bottom: none; } .lt-fx2__table .c-num { text-align: right; } .lt-fx2__kv { display: grid; grid-template-columns: 190px 1fr; gap: .45rem .9rem; font-size: .86rem; margin: 0; } .lt-fx2__kv dt { color: var(--lt-muted); font-size: .78rem; padding-top: .1rem; } .lt-fx2__kv dd { margin: 0; color: var(--lt-ink); overflow-wrap: anywhere; } @media (max-width: 560px) { .lt-fx2__kv { grid-template-columns: 1fr; } } .lt-fx2__stat { padding: .9rem 1rem; } .lt-fx2__stat h4 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-muted); } .lt-fx2__big { display: flex; align-items: baseline; gap: .5rem; } .lt-fx2__big .n { font-size: 1.85rem; font-weight: 650; color: var(--lt-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .lt-fx2__big .u { font-size: .8rem; color: var(--lt-muted); } .lt-fx2__mini { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .45rem; } .lt-fx2__mini td { padding: .22rem 0; border-bottom: 1px solid var(--lt-line); color: var(--lt-muted); } .lt-fx2__mini tr:last-child td { border-bottom: none; } .lt-fx2__mini td:last-child { text-align: right; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-fx2__mini tr.tot td { color: var(--lt-ink); font-weight: 650; } .lt-fx2__vd { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; } .lt-fx2__vd.is-ok { background: var(--lt-success-tint); color: var(--lt-success); } .lt-fx2__vd.is-near { background: #fff8dd; color: #8a6d00; } .lt-fx2__vd.is-soon { background: var(--lt-warning-tint); color: #a35a00; } .lt-fx2__vd.is-expired { background: var(--lt-danger-tint); color: var(--lt-danger); } .lt-fx2__vd.is-none { background: var(--lt-surface-2); color: var(--lt-muted); border: 1px solid var(--lt-line); } .lt-fx2__dim2 { font-size: .76rem; color: var(--lt-muted); margin-top: .35rem; } .lt-fx2__mv { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; border-bottom: 1px solid var(--lt-line); font-size: .82rem; } .lt-fx2__mv:last-child { border-bottom: none; } .lt-fx2__mv .k { color: var(--lt-muted); flex: 1; } .lt-fx2__mv .d { color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-fx2__mv .ago { font-size: .7rem; color: var(--lt-muted); background: var(--lt-surface-2); border: 1px solid var(--lt-line); border-radius: 999px; padding: .02rem .38rem; font-variant-numeric: tabular-nums; } .lt-fx2__toggle { border: none; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--lt-muted); cursor: pointer; padding: .2rem 0; display: block; } .lt-fx2__toggle:hover { color: var(--lt-brand-700); } .lt-fx2__dense { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .35rem .9rem; margin: .5rem 0 0; } .lt-fx2__dense div { display: flex; gap: .4rem; font-size: .76rem; border-bottom: 1px dotted var(--lt-line); padding: .12rem 0; } .lt-fx2__dense dt { color: var(--lt-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-fx2__dense dd { margin: 0; color: var(--lt-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lt-fx2__foot { flex: none; display: flex; gap: .5rem; align-items: center; padding: .7rem clamp(1rem,3vw,2rem); background: var(--lt-surface); border-top: 1px solid var(--lt-line); } .lt-fx2__footspacer { flex: 1; } .lt-fx2__delconfirm { font-size: .85rem; color: var(--lt-danger); font-weight: 600; } /* Ficha v2 — cartão de imagem (estado honesto: ficheiro numa share, não blob) + atalho de movimentos */ .lt-fx2__imgrow { display: flex; gap: 1rem; align-items: flex-start; } .lt-fx2__imgslot { width: 96px; height: 96px; flex: none; border: 1px dashed var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface-2); display: flex; align-items: center; justify-content: center; text-align: center; padding: .4rem; } .lt-fx2__imgslot span { font-size: .72rem; color: var(--lt-muted); overflow-wrap: anywhere; } .lt-fx2__imgslot.has-file { border-style: solid; border-color: var(--lt-brand); background: var(--lt-brand-tint); } .lt-fx2__imgslot.has-file span { color: var(--lt-brand-700); font-weight: 600; } .lt-fx2__asidelink { display: block; width: 100%; margin-top: .55rem; padding: .5rem; border: 1px dashed var(--lt-line); border-radius: var(--lt-radius-sm); background: transparent; color: var(--lt-brand-700); font: inherit; font-size: .8rem; font-weight: 600; text-align: center; cursor: pointer; } .lt-fx2__asidelink:hover { background: var(--lt-brand-tint); border-color: var(--lt-brand); } /* Ficha v2 fase C — edição POR CARTÃO: botão Editar no cabeçalho + rodapé inline por cartão */ .lt-fx2__cardedit { border: none; background: none; color: var(--lt-brand-700); font: inherit; font-size: .8rem; font-weight: 650; padding: .2rem .4rem; border-radius: 6px; cursor: pointer; } .lt-fx2__cardedit:hover { background: var(--lt-brand-tint); } .lt-fx2__cardfoot { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--lt-line); } /* Variante multi-linha do controlo partilhado (LtTextArea) — mesma pele do .lt-ctl, altura livre. */ .lt-ctl--area { height: auto; min-height: 64px; padding: .5rem .6rem; resize: vertical; line-height: 1.4; } /* ---- LtDocLines: grelha de linhas dirigida pelo layout (wk/wklcols) ---- */ /* Centrado para os sim/não; os numéricos já herdam .c-num do .lt-grid. */ .lt-grid th.c-mid, .lt-grid td.c-mid { text-align: center; } .lt-dl__actions { width: 2.2rem; text-align: right; } /* O título da secção e a proveniência das colunas na mesma linha: quem vê a grelha deve poder saber, sem clicar, se as colunas vêm da configuração da farmácia ou da predefinição. */ .lt-ue__sectionrow { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; } .lt-dl__source { font-size: .72rem; color: var(--lt-muted); cursor: help; white-space: nowrap; } /* Ligações Origens/Destinos: um botão por documento apontado. Discreto até se passar por cima — uma grelha de 20 colunas não pode ter 40 botões a competir com os números. */ .lt-dl__link { display: inline-block; max-width: 100%; padding: .1rem .4rem; margin: 0 .1rem; border: 1px solid var(--lt-line); border-radius: 999px; background: #fff; font-size: .74rem; line-height: 1.35; color: var(--lt-brand); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-dl__link:hover { background: var(--lt-brand); border-color: var(--lt-brand); color: #fff; } .lt-dl__link:disabled { color: var(--lt-muted); cursor: default; background: #fff; } .lt-dl__nolink { color: var(--lt-muted); } /* ---- Filter bar + toolbar de tabela (padrão de list report) ---- Estrutura: barra de filtros numa superfície própria com ação primária "Procurar" (filter bar do SAP Fiori em modo manual), fichas dos filtros ativos (facets do Odoo), e toolbar da tabela com título + contagem e os totais como subtítulo (Fiori "table title (optionally with count)" + Primer "a subtitle … to give extra context to the data"). */ .lt-fb { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: .7rem .8rem; } .lt-fb__fields { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; flex: 1; } .lt-fb__f { display: flex; flex-direction: column; gap: .2rem; min-width: 120px; } .lt-fb__f > span:first-child { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); font-weight: 600; } .lt-fb__f--wide { flex: 1; min-width: 200px; } .lt-fb__f--num { max-width: 120px; } .lt-fb__range { display: flex; align-items: center; gap: .35rem; } .lt-fb__to { color: var(--lt-muted); font-size: .8rem; } .lt-fb__actions { display: flex; gap: .5rem; align-items: center; } .lt-fb__chips { display: flex; gap: .4rem; flex-wrap: wrap; } .lt-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border: 1px solid var(--lt-line); border-radius: 999px; background: #fff; font-size: .76rem; cursor: pointer; } .lt-chip:hover { border-color: var(--lt-brand); } .lt-chip__k { color: var(--lt-muted); } .lt-chip__v { font-weight: 600; } .lt-chip__x { color: var(--lt-muted); font-size: .7rem; } .lt-tb { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 0 .5rem; } .lt-tb__title h2 { margin: 0; font-size: 1rem; } .lt-tb__count { color: var(--lt-muted); font-weight: 500; } .lt-tb__sub { margin: .15rem 0 0; font-size: .8rem; color: var(--lt-muted); } .lt-tb__sub strong { color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-tb__credit { color: var(--lt-brand-700); } .lt-tb__actions { flex-shrink: 0; } /* Estado vazio com saída: distinguir "não há nada" de "os filtros não deixam ver". */ .lt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: 1.4rem; } .lt-empty__t { margin: 0; font-weight: 600; } .lt-empty__s { margin: 0 0 .5rem; color: var(--lt-muted); font-size: .85rem; } /* Primer: uma única ação de linha é um ícone na última coluna, com cabeçalho invisível. */ .lt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lt-dl__open { color: var(--lt-muted); font-size: 1.1rem; line-height: 1; } .lt-cm__docrow:hover .lt-dl__open { color: var(--lt-brand); } .lt-cm__tag--credit { background: #fdecec; color: #a3282f; } /* ---- Reconciliação de stock (painel de diagnóstico) ---- Cada mosaico é um facto verificável com o seu contexto por baixo. A cor é estado acionável (bate / divergem), nunca decoração — a regra do projeto. */ .lt-rec { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: .8rem; } .lt-rec__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; } .lt-rec__head h3 { margin: 0; font-size: .95rem; } .lt-rec__store { color: var(--lt-muted); font-weight: 500; } .lt-rec__never { margin: 0; color: var(--lt-muted); font-size: .85rem; } .lt-rec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; } .lt-rec__tile { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: #fff; } .lt-rec__tile.is-ok { border-left: 3px solid #2f9e44; } .lt-rec__tile.is-warn { border-left: 3px solid #e8a33d; } .lt-rec__k { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); } .lt-rec__tile strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .lt-rec__tile small { color: var(--lt-muted); font-size: .76rem; } .lt-rec__when { margin: .6rem 0 .4rem; font-size: .76rem; color: var(--lt-muted); } /* ---- Ficha ÚNICA (LtFicha / LtFichaSection) — FI-1 ------------------------------------------ Substitui os três invólucros que existiam (lt-us__ para o quick-edit, lt-ue__ para cliente e fornecedor): os CAMPOS variam, o ENQUADRAMENTO não. Métricas herdadas do .lt-ue para a mudança não se notar como um salto visual — o que muda é haver um só sítio onde mexer. */ .lt-fi__overlay { position: fixed; inset: 0; background: rgba(28,43,58,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 2rem; z-index: 70; } .lt-fi { width: min(760px, 96vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--lt-surface); border-radius: var(--lt-radius); box-shadow: var(--lt-shadow-lg); overflow: hidden; } .lt-fi--wide { width: min(1040px, 96vw); } .lt-fi__head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem; background: var(--lt-header); color: var(--lt-header-ink); } .lt-fi__ident { min-width: 0; flex: 1; } .lt-fi__title { margin: 0; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-fi__sub { margin: .1rem 0 0; font-size: .78rem; opacity: .75; } .lt-fi__badges { display: flex; gap: .35rem; flex: 0 0 auto; } .lt-fi__close { width: 34px; height: 34px; flex: 0 0 auto; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1rem; } .lt-fi__close:hover:not(:disabled) { background: var(--lt-danger); } .lt-fi__close:disabled { opacity: .5; cursor: default; } /* ── FI-3: o mesmo invólucro em PÁGINA ──────────────────────────────────────────────────────── Sem sombra e sem tecto de altura: aqui a ficha É o ecrã (regra do dono: os ecrãs de trabalho usam a largura toda). O conteúdo mantém-se — muda o enquadramento. */ .lt-fi__page { display: block; } .lt-fi--pagina { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; } .lt-fi--pagina .lt-fi__body { flex: 1 1 auto; } /* Separadores da ficha: mesma gramática dos da ficha de produto (lt-fx2__tabs) — o operador reconhece o padrão de um ecrã para o outro. */ .lt-fi__tabs { display: flex; gap: .15rem; padding: 0 1.25rem; overflow-x: auto; background: var(--lt-surface); border-bottom: 1px solid var(--lt-line); } .lt-fi__tabs > button { border: none; background: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: var(--lt-muted); padding: .6rem .8rem; border-bottom: 2px solid transparent; white-space: nowrap; } .lt-fi__tabs > button:hover { color: var(--lt-ink); } .lt-fi__tabs > button.is-active { color: var(--lt-brand-700); border-bottom-color: var(--lt-brand); } /* Contagem/indicador discreto ao lado do nome do separador (ex.: nº de documentos). */ .lt-fi__tabn { margin-left: .35rem; padding: .05rem .3rem; border-radius: 999px; background: var(--lt-surface-2); color: var(--lt-muted); font-size: .68rem; font-weight: 700; } /* Corpo + painel lateral lado a lado (só em página). Abaixo de 1100px o painel desce para baixo do corpo — não se corta contexto num ecrã estreito, muda-se a ordem. */ .lt-fi__wrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 0; align-items: start; } .lt-fi__aside { padding: 1.1rem 1.25rem; border-left: 1px solid var(--lt-line); background: var(--lt-surface-2); } .lt-fi__aside h4 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lt-brand-700); } .lt-fi__stat { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; font-size: .84rem; border-bottom: 1px solid var(--lt-line); } /* As marcações da pessoa no painel da ficha: cada próxima é um botão (abre-a na agenda), sem realce — a não ser as faltas. */ .lt-fi__marc { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; } .lt-fi__marc-vazio { margin: 0; font-size: .84rem; color: var(--lt-muted); } .lt-fi__marc-linha { display: flex; gap: .5rem; align-items: baseline; padding: .3rem .4rem; border: 1px solid var(--lt-line); border-radius: 6px; background: var(--lt-surface); color: var(--lt-ink); font-size: .84rem; text-align: left; cursor: pointer; } .lt-fi__marc-linha:hover { background: var(--lt-surface-2); } .lt-fi__marc-linha:focus-visible { outline: 2px solid var(--lt-brand); outline-offset: 2px; } .lt-fi__marc-linha span { color: var(--lt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-fi__marc-linha small { margin-left: auto; color: var(--lt-muted); white-space: nowrap; } .lt-fi__marc-linha:disabled { cursor: default; background: var(--lt-surface-2); } .lt-fi__marc > .lt-btn { align-self: flex-start; } .lt-fi__stat b { font-variant-numeric: tabular-nums; } .lt-fi__stat.is-due b { color: var(--lt-danger); } /* ── CRM na ficha do cliente (F0.2/F0.4) ─────────────────────────────────────────────────────── */ /* O bloco da caixa lateral reutiliza .lt-fi__stat: é contexto calculado, como a conta-corrente. */ .lt-fi__crm { display: block; } /* Aviso de ficha repetida: uma linha por candidato, dentro do LtAlert (que já traz a cor de aviso). */ .lt-fi__dup { margin: 0 0 .75rem; } .lt-fi__dup-linha + .lt-fi__dup-linha { margin-top: .25rem; } .lt-fi__dup-inativo { color: var(--lt-muted); } /* Linha do tempo: uma linha por acontecimento, a data à esquerda em largura fixa para o olho descer pela coluna sem saltar. Realce = estado acionável, por isso o tipo é neutro. */ .lt-fi__timeline { display: flex; flex-direction: column; gap: .1rem; max-height: 60vh; overflow-y: auto; } .lt-fi__timeline-msg { margin: 0; padding: 1.5rem .25rem; color: var(--lt-muted); text-align: center; } .lt-fi__tl { display: grid; grid-template-columns: 6.5rem 6rem 1fr auto; gap: .5rem; align-items: baseline; padding: .3rem .25rem; border-bottom: 1px solid var(--lt-line); font-size: .84rem; } .lt-fi__tl:hover { background: var(--lt-surface-2); } .lt-fi__tl-data { color: var(--lt-muted); font-variant-numeric: tabular-nums; } .lt-fi__tl-tipo { color: var(--lt-muted); } .lt-fi__tl-titulo { color: var(--lt-ink); } .lt-fi__tl-detalhe { color: var(--lt-muted); font-variant-numeric: tabular-nums; } /* O que o CRM regista (notas): o texto ocupa a linha de baixo, com as quebras de linha de quem escreveu; o autor ao lado do título. */ .lt-fi__tl.is-crm .lt-fi__tl-detalhe { grid-column: 3 / -1; white-space: pre-wrap; font-variant-numeric: normal; } .lt-fi__tl-autor { color: var(--lt-muted); font-size: .82em; } @media (max-width: 720px) { .lt-fi__tl { grid-template-columns: 6.5rem 1fr; } .lt-fi__tl-detalhe, .lt-fi__tl.is-crm .lt-fi__tl-detalhe { grid-column: 2; } } @media (max-width: 1100px) { .lt-fi__wrap { grid-template-columns: 1fr; } .lt-fi__aside { border-left: none; border-top: 1px solid var(--lt-line); } } .lt-fi__msg { padding: .6rem 1.25rem 0; } .lt-fi__body { padding: 1.1rem 1.25rem; overflow-y: auto; } /* ⚠️ Feedback do dono (2026-08-18): «os divisores parecem campos». Medido, e era literal — o título de secção e a etiqueta de campo tinham .72rem/uppercase/.04em/--lt-muted IGUAIS, só variando 100 de peso. Na ficha de produto o mesmo tipo de título safa-se porque o CARTÃO faz a hierarquia; aqui não há moldura, logo tem de ser o próprio título a fazê-la: maior (.78 > .72), com COR de marca, régua de marca e mais ar antes. */ .lt-fi__sec + .lt-fi__sec { margin-top: 1.6rem; } .lt-fi__sect { display: flex; align-items: baseline; gap: .45rem; width: 100%; margin: 0 0 .6rem; padding: 0 0 .3rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lt-brand-700); border-bottom: 2px solid var(--lt-brand-tint); } /* Cabeçalho clicável de secção recolhível: continua a parecer um título, não um botão — o que muda é o cursor e o caret. Um botão desenhado como botão aqui competia com Gravar pela atenção. */ .lt-fi__sect--btn { background: none; border-width: 0 0 2px 0; cursor: pointer; text-align: left; font: inherit; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lt-brand-700); } .lt-fi__sect--btn:hover { border-bottom-color: var(--lt-brand); } .lt-fi__caret { font-size: .7rem; opacity: .8; } .lt-fi__hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; } /* Dentro da JANELA DE DOCUMENTO, os rótulos da linha 1 (.lt-ue__f, herdados do ecrã antigo) passam a ter o mesmo tratamento dos das secções (.lt-field__label): maiúsculas pequenas espaçadas. Com dois estilos de rótulo lado a lado no mesmo cabeçalho — "Data do documento" em caixa mista e "DATA DE VENCIMENTO" em maiúsculas — o ecrã parece montado por duas pessoas diferentes. Restrito a .lt-doc de propósito: o resto dos ecrãs que usam .lt-ue__f fica como está, e a uniformização global é a passagem por todos os ecrãs que o design system ainda tem em aberto. */ .lt-doc .lt-ue__f > span { text-transform: uppercase; letter-spacing: .04em; } /* Linha-resumo de uma secção fechada ("30 dias · vence 26/08"). Fica em minúsculas e sem peso para não competir com o título, e trunca em vez de empurrar o selo para fora do cabeçalho. */ .lt-fi__resumo { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .74rem; color: var(--lt-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-fi__resumo::before { content: "— "; } /* Selo com o nº de campos preenchidos numa secção fechada: fechada não pode significar vazia. */ .lt-fi__filled { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .68rem; background: var(--lt-brand-tint); color: var(--lt-brand-700); border-radius: 999px; padding: .05rem .4rem; } .lt-fi__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem 1rem; } /* O conteúdo fica no DOM quando recolhido (não se perde o que está escrito), só deixa de ocupar espaço. */ .lt-fi__sec.is-collapsed > .lt-fi__grid { display: none; } .lt-fi__foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .8rem 1.25rem; border-top: 1px solid var(--lt-line); background: var(--lt-surface-2); } .lt-fi__footextra { margin-right: auto; } /* ---- Janela de DOCUMENTO (LtDocumento / LtDocEntidade / LtDocTotais) — COL-1g ------------------ Estrutura do Fiori object page (título + facetas) e do BC document page (entidade → linhas → totais fixos). A janela é larga porque as grelhas de linhas têm 16+ colunas configuráveis. */ .lt-doc__overlay { position: fixed; inset: 0; background: rgba(28,43,58,.45); display: flex; align-items: center; justify-content: center; padding: 2.5vh 1.5vw; z-index: 70; } /* A janela de documento é um ECRÃ DE TRABALHO, não um aviso: ocupa a maior parte do monitor e tem um tamanho ESTÁVEL, igual de documento para documento. Antes tinha `width: min(1320px,98vw)` e altura ditada pelo conteúdo. Num documento com 20 colunas configuradas isso dava uma grelha apertada com scroll horizontal quase sempre, e num documento de 1 linha a janela encolhia — a mesma janela mudava de tamanho a cada documento e nada ficava onde o operador esperava. O `min-height` resolve o segundo problema: a área das linhas fica com o tamanho de uma grelha de trabalho mesmo quando o documento tem uma linha só. */ .lt-doc { width: min(1560px, 95vw); height: min(880px, 95vh); /* tamanho de trabalho fixo — não salta entre documentos */ max-height: 95vh; display: flex; flex-direction: column; background: var(--lt-surface); border-radius: var(--lt-radius); box-shadow: var(--lt-shadow-lg); overflow: hidden; } .lt-doc--wide { width: min(1860px, 97vw); } /* Em ecrãs baixos (portáteis de 13") não vale a pena forçar altura: usa-se o que há. */ @media (max-height: 760px) { .lt-doc { height: 95vh; } } .lt-doc__head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem; background: var(--lt-header); color: var(--lt-header-ink); } .lt-doc__ident { min-width: 0; flex: 1; } .lt-doc__title { margin: 0; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-doc__sub { margin: .1rem 0 0; font-size: .78rem; opacity: .75; } .lt-doc__badges { display: flex; gap: .35rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .lt-doc__close { width: 34px; height: 34px; flex: 0 0 auto; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1rem; } .lt-doc__close:hover:not(:disabled) { background: var(--lt-danger); } .lt-doc__msg { padding: .6rem 1.25rem 0; } /* Coluna flex: a entidade/facetas ocupam o que precisam e a GRELHA DE LINHAS come o resto até ao rodapé dos totais. Sem isto a grelha tinha um teto fixo (380-440px) e sobrava uma faixa vazia entre a última linha e os totais — o vazio que fazia a janela parecer mal montada. */ .lt-doc__body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .25rem; } .lt-doc__top { flex: 0 0 auto; } /* A grelha cresce; o resto (notas, secções) mantém-se do seu tamanho. Os componentes Blazor não acrescentam wrappers, por isso o .lt-grid__wrap do LtDocLines É filho direto do corpo. ⚠️ O `min-height` NÃO pode ser 0: com pouca altura de ecrã o cartão de entidade e as facetas comem todo o espaço e o flex encolhe a grelha até ela DESAPARECER — ficava "LINHAS · 20 colunas configuradas" e nada por baixo (apanhado a olho num viewport pequeno). Com um piso, a grelha mantém sempre ~4 linhas visíveis e é o corpo que passa a rolar. */ .lt-doc__body > .lt-grid__wrap { flex: 1 1 auto; min-height: min(240px, 45vh); } /* Entidade + facetas: a entidade tem largura fixa mínima (é um bloco de leitura), as facetas fluem. */ .lt-doc__top { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1.25rem; align-items: start; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--lt-line); } @media (max-width: 860px) { .lt-doc__top { grid-template-columns: 1fr; } } /* Sem entidade E sem facetas com valor, a faixa desaparece em vez de deixar uma tira em branco com um traço por cima das linhas — na janela de introdução, antes de escolher o fornecedor, era isso que aparecia e lia-se como erro de layout. Os slots existem sempre (são RenderFragment), por isso quem sabe se há conteúdo é o CSS, não o C#. */ /* A faixa só desaparece se estiver REALMENTE vazia. A regra anterior era `:not(:has(.lt-ent)):not(:has(.lt-facet))` e escondia qualquer cabeçalho que não usasse exatamente essas duas classes — foi o que apagou o cabeçalho inteiro da janela de novo documento de cliente (usa `lt-ue__grid`, como o lançamento de compras). O dono apanhou-o ao vivo: "não consigo selecionar tipo de documento, não tem headers". Guardar contra o vazio, não contra classes que eu conheça hoje. */ /* E com os slots presentes mas VAZIOS (o cartão da entidade só aparece depois de escolher o cliente ou o fornecedor), a faixa também sai: ficava uma tira em branco com um traço por cima do cabeçalho (visto na pré-visualização, 2026-10-02). */ .lt-doc__top:not(:has(> :not(:empty))) { display: none; } .lt-ent { padding: .7rem .85rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); background: var(--lt-surface-2); } .lt-ent__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .lt-ent__label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--lt-brand-700); } .lt-ent__no { font-size: .74rem; color: var(--lt-muted); font-variant-numeric: tabular-nums; } .lt-ent__nome { margin: .15rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--lt-ink); line-height: 1.3; } .lt-ent__linhas { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--lt-ink-2); } .lt-ent__nif { font-variant-numeric: tabular-nums; } .lt-ent__contacto { color: var(--lt-muted); } /* Facetas: pontos de dados rotulados, em linha e a ajustar-se ao conteúdo (Fiori header facets). */ .lt-doc__facets { display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; align-content: flex-start; } .lt-facet { display: flex; flex-direction: column; min-width: 0; } .lt-facet__label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lt-muted); } .lt-facet__value { font-size: .88rem; color: var(--lt-ink); font-variant-numeric: tabular-nums; } /* Totais: FORA do corpo com scroll, sempre visíveis por baixo das linhas (Totals do BC). */ .lt-doc__totais { padding: .8rem 1.25rem; border-top: 1px solid var(--lt-line); background: var(--lt-surface-2); } .lt-tot { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: flex-end; align-items: flex-start; } .lt-tot__iva { border-collapse: collapse; font-size: .8rem; } .lt-tot__iva th { text-align: left; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); padding: .1rem .6rem .25rem 0; border-bottom: 1px solid var(--lt-line); } .lt-tot__iva td { padding: .12rem .6rem .12rem 0; color: var(--lt-ink-2); } .lt-tot__num { text-align: right; font-variant-numeric: tabular-nums; } .lt-tot__resumo { margin: 0; display: flex; flex-direction: column; gap: .1rem; min-width: 200px; } .lt-tot__resumo > div { display: flex; justify-content: space-between; gap: 1.5rem; } .lt-tot__resumo dt { font-size: .8rem; color: var(--lt-muted); } .lt-tot__resumo dd { margin: 0; font-size: .88rem; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-tot__final { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--lt-line); } .lt-tot__final dt { font-weight: 700; color: var(--lt-ink); } .lt-tot__final dd { font-size: 1.1rem; font-weight: 800; color: var(--lt-ink); } .lt-tot__aviso { flex: 1 1 100%; margin: .5rem 0 0; padding: .45rem .6rem; border-radius: var(--lt-radius-sm); background: var(--lt-warning-tint, #fff3d6); color: #8a5a12; font-size: .78rem; line-height: 1.5; } .lt-doc__foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .8rem 1.25rem; border-top: 1px solid var(--lt-line); background: var(--lt-surface); } .lt-doc__footextra { margin-right: auto; display: flex; gap: .5rem; } /* Selos de estado que faltavam ao par do --editing (amarelo): verde para o que está resolvido e vermelho para o que está anulado. */ .lt-hbadge--ok { background: var(--lt-success, #2e7d55); color: #fff; } .lt-hbadge--off { background: var(--lt-danger, #b3261e); color: #fff; } /* ── Cabeçalho de coluna ordenável (SortTh) ───────────────────────────────────── O botão herda a tipografia do para o cabeçalho não mudar de aspeto por ser clicável; só o cursor e o hover dizem que é acionável. A seta só aparece na coluna ativa (realce = estado, não decoração). */ .lt-sortth { padding: 0; } .lt-sort { display: inline-flex; align-items: center; gap: .3rem; width: 100%; padding: .5rem .6rem; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit; text-transform: inherit; } .lt-sortth.c-num .lt-sort { justify-content: flex-end; } .lt-sort:hover { background: var(--lt-surface-2); } .lt-sort:focus-visible { outline: 2px solid var(--lt-focus, var(--lt-brand)); outline-offset: -2px; } .lt-sort__dir { font-size: .7em; opacity: .85; } /* Marcador de observações numa linha de lista: um texto longo não merece coluna própria (rouba largura a todas as linhas para servir poucas), mas esconder que existe é pior — o marcador diz que há, o tooltip diz o quê. Discreto de propósito: não é estado acionável. */ .lt-obsmark { margin-left: .35rem; opacity: .55; font-size: .85em; cursor: help; } /* ── Zona de totais em duas colunas (DOC-V2-B1) ─────────────────────────────────────────────────── À esquerda o que se confere e o que ALTERA os números (contadores, desconto financeiro, despesas); à direita a decomposição por taxa e o total. É o rodapé de totais do Business Central, que também tem campos editáveis lá dentro — e a razão é a mesma: um campo que muda o total é lido ao lado do total, não numa secção do cabeçalho. Em ecrã estreito passa a uma coluna, com os valores por baixo. */ .lt-tot2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; } .lt-tot2__esq { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem .9rem; align-items: end; } .lt-tot2__dir { min-width: 260px; } /* Contadores: leitura, discretos, e ocupam a linha toda para não competirem com os campos. */ .lt-tot2__cont { grid-column: 1 / -1; display: flex; gap: 1rem; font-size: .8rem; color: var(--lt-muted); } .lt-tot2__cont span { white-space: nowrap; } @media (max-width: 900px) { .lt-tot2 { grid-template-columns: 1fr; } .lt-tot2__dir { min-width: 0; } } /* ── Importar encomenda (DOC-V2-E1) ─────────────────────────────────────────────────────────────── Diálogo de multi-seleção de encomendas por receber + sinais de conferência. O overlay reutiliza o .lt-fi__overlay (mesmo escurecimento das fichas). */ .lt-imp { background: var(--lt-surface); border-radius: var(--lt-radius); width: min(680px, 92vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--lt-shadow-lg, 0 18px 50px rgba(15,29,42,.35)); } .lt-imp__hd { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--lt-line); } .lt-imp__hd h3 { margin: 0; font-size: 1rem; } .lt-imp__empty { padding: 1.4rem 1.1rem; color: var(--lt-muted); } .lt-imp__tbl { width: 100%; border-collapse: collapse; font-size: .88rem; overflow-y: auto; } .lt-imp__tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); padding: .45rem .7rem; border-bottom: 1px solid var(--lt-line); } .lt-imp__tbl td { padding: .45rem .7rem; border-bottom: 1px solid var(--lt-line); } .lt-imp__tbl th.num, .lt-imp__tbl td.num { text-align: right; } .lt-imp__tbl tbody tr { cursor: pointer; } .lt-imp__tbl tbody tr:hover { background: var(--lt-bg); } .lt-imp__tbl tbody tr.is-sel { background: color-mix(in srgb, var(--lt-brand) 10%, var(--lt-surface)); } .lt-imp__ft { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--lt-line); font-size: .85rem; color: var(--lt-muted); } .lt-imp__spacer { flex: 1; } .lt-imp__bar { display: flex; align-items: center; gap: .8rem; margin: 0 0 .5rem; } .lt-imp__hint { font-size: .8rem; color: var(--lt-muted); } /* Receber MAIS do que faltava na encomenda: o saldo dela ficaria negativo — realce acionável. */ .lt-imp__over .lt-ctl, .lt-imp__over input { border-color: var(--lt-danger); background: color-mix(in srgb, var(--lt-danger) 7%, var(--lt-surface)); } /* Alvo de conferência sob os totais: "fatura diz X" + semáforo. */ .lt-imp__alvo { display: flex; align-items: end; gap: .7rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--lt-line); } .lt-imp__alvo label { display: flex; flex-direction: column; gap: .25rem; } .lt-imp__alvo label > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lt-muted); font-weight: 600; } .lt-imp__delta { font-size: .85rem; font-weight: 600; padding-bottom: .55rem; white-space: nowrap; } .lt-imp__delta.is-ok { color: var(--lt-success, #1d7a3e); } .lt-imp__delta.is-off { color: var(--lt-danger); } .lt-imp__done { color: var(--lt-success, #1d7a3e); font-weight: 600; } /* ── Fatia D: teclado & scanner ─────────────────────────────────────────────────────────────────── O item realçado do picker (↑/↓) usa o mesmo azul da seleção do diálogo de importação — um só vocabulário de "isto está selecionado" em todo o ecrã. */ .lt-pick__row.is-hot { background: color-mix(in srgb, var(--lt-brand) 12%, var(--lt-surface)); } .lt-cm__linefilter { height: 34px; padding: .3rem .6rem; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); font-size: .85rem; width: 220px; }