/* Componentes das telas do Financeiro (`pt-*`). * * Portado de docs/wireframes/v4/src/portal-financeiro.src.html, que e o * desenho aprovado das telas. A casca (sidebar, navbar, login) NAO vem daqui: * ela ja existe em sidebar.css, navbar.css e login.css. * * Prefixo `pt-` pelo mesmo motivo do `bsc-` do app.css: nenhum nome colide * com o Bootstrap. Cor so vem de token (tokens.css, bloco "Telas"). */ /* ---------- faixa de ambiente e papel ---------- */ .pt-env { align-items: center; background: var(--pt-env-bg); border-bottom: 1px solid rgba(201, 133, 0, 0.35); color: var(--pt-warn-fg); display: flex; font-size: 0.76rem; font-weight: 600; gap: 0.5rem; padding: 0.4rem 1.5rem; } .navbar-user-papel { display: block; font-size: 0.7rem; font-weight: 500; opacity: 0.75; } /* ---------- conteudo ---------- */ .pt-heading { align-items: flex-end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.35rem; } .pt-heading h1 { color: var(--pt-ink); font-size: 1.6rem; font-weight: 700; margin: 0; } .pt-heading p { color: var(--pt-text-2); margin: 0.25rem 0 0; max-width: 60rem; } .pt-heading p strong { color: var(--pt-ink-2); } .pt-heading .acts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pt-eyebrow { color: var(--pt-primary); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; margin: 0 0 0.2rem; text-transform: uppercase; } .pt-updated { align-items: center; color: var(--pt-text-2); display: inline-flex; font-size: 0.88rem; gap: 0.5rem; white-space: nowrap; } .pt-updated i { color: var(--pt-primary); } .pt-back { background: none; border: 0; color: var(--pt-primary); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.85rem; font-weight: 600; gap: 0.4rem; margin-bottom: 0.9rem; padding: 0; } .pt-cols { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .pt-cols--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .pt-detail { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; } .mb { margin-bottom: 0.85rem; } .mono { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 0.82rem; font-variant-numeric: tabular-nums; } .red { color: var(--pt-danger); } .dim { color: var(--pt-text-3); } .pt-code, .pt-why code, .pt-kpi code, .pt-prop code, .pt-panel-foot code, .help code { background: rgba(4, 20, 34, 0.06); border-radius: 0.2rem; color: var(--pt-ink-2); font-size: 0.8em; padding: 0.05rem 0.3rem; } /* ---------- badges e etiquetas ---------- */ .pt-badge { border-radius: 0.28rem; display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.28rem 0.5rem; text-transform: uppercase; white-space: nowrap; } .pt-badge--ok { background: rgba(52, 176, 150, 0.14); color: var(--pt-ok-fg); } .pt-badge--warn { background: rgba(201, 133, 0, 0.14); color: var(--pt-warn-fg); } .pt-badge--danger { background: rgba(179, 38, 30, 0.12); color: var(--pt-danger); } .pt-badge--mute { background: transparent; border: 1px solid rgba(4, 20, 34, 0.18); color: var(--pt-text-2); } .pt-badge--soon { background: rgba(4, 20, 34, 0.07); color: var(--pt-text-2); } .pt-badge--info { background: rgba(16, 118, 154, 0.12); color: var(--pt-primary-dk); } .pt-etapa { background: rgba(16, 118, 154, 0.08); border: 1px solid rgba(16, 118, 154, 0.22); border-radius: 0.28rem; color: var(--pt-primary-dk); display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 0.2rem 0.5rem; white-space: nowrap; } .pt-tag { background: rgba(4, 20, 34, 0.05); border: 1px solid rgba(4, 20, 34, 0.12); border-radius: 0.28rem; color: var(--pt-text); display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.18rem 0.45rem; white-space: nowrap; } /* ---------- botoes ---------- */ .pt-btn { align-items: center; border: 1px solid transparent; border-radius: 0.3rem; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.85rem; font-weight: 600; gap: 0.45rem; justify-content: center; padding: 0.55rem 0.9rem; text-decoration: none; } .pt-btn--primary { background: var(--pt-primary); color: var(--white); } .pt-btn--primary:hover { background: var(--pt-primary-dk); } .pt-btn--outline { background: var(--white); border-color: rgba(4, 20, 34, 0.18); color: var(--pt-ink-2); } .pt-btn--outline:hover { border-color: var(--pt-primary); color: var(--pt-primary-dk); } .pt-btn--ghost { background: transparent; border-color: rgba(4, 20, 34, 0.16); color: var(--pt-primary-dk); } .pt-btn--ghost:hover { background: rgba(16, 118, 154, 0.08); } .pt-btn--danger { background: var(--white); border-color: rgba(179, 38, 30, 0.3); color: var(--pt-danger); } .pt-btn--danger:hover { background: rgba(179, 38, 30, 0.05); } .pt-btn--block { justify-content: flex-start; width: 100%; } .pt-btn--sm { font-size: 0.76rem; padding: 0.35rem 0.6rem; } .pt-btn[disabled] { background: rgba(4, 20, 34, 0.04); border-color: rgba(4, 20, 34, 0.1); color: var(--pt-text-4); cursor: not-allowed; } .pt-btn:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 2px; } .pt-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Acao listada com o efeito logo abaixo: botao indisponivel diz por que */ .pt-actions { display: grid; gap: 0.85rem; } .pt-why { color: var(--pt-text-2); font-size: 0.78rem; line-height: 1.5; margin: 0.35rem 0 0; } .pt-why b { color: var(--pt-ink-2); } /* ---------- paineis ---------- */ .pt-panel { background: var(--white); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.5rem; margin-bottom: 0.85rem; } .pt-panel--accent { border-left: 0.2rem solid var(--pt-accent); } .pt-panel-head { align-items: center; border-bottom: 1px solid rgba(4, 20, 34, 0.08); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; padding: 0.85rem 1rem; } .pt-panel-head h3 { align-items: center; color: var(--pt-ink); display: flex; flex-wrap: wrap; font-size: 0.95rem; font-weight: 700; gap: 0.5rem; margin: 0; } .pt-panel-head p { color: var(--pt-text-3); font-size: 0.78rem; margin: 0.15rem 0 0; } .pt-panel-body { padding: 1rem; } .pt-panel-body--flush { padding: 0; } .pt-panel-body > p { color: var(--pt-text); font-size: 0.88rem; line-height: 1.55; margin: 0 0 0.75rem; } .pt-panel-foot { border-top: 1px solid rgba(4, 20, 34, 0.07); color: var(--pt-text-3); font-size: 0.78rem; line-height: 1.5; padding: 0.7rem 1rem; } .pt-panel-foot b { color: var(--pt-text); } .pt-subhead { color: var(--pt-ink); font-family: var(--font); font-size: 0.82rem; font-weight: 700; margin: 1.1rem 0 0.55rem; } .pt-subhead:first-child { margin-top: 0; } /* ---------- KPIs ---------- */ .pt-kpis { display: grid; gap: 0.85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 0.85rem; } .pt-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pt-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pt-kpi { background: var(--white); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.5rem; padding: 0.95rem 1rem; } .pt-kpi dt { color: var(--pt-text-2); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.3rem; text-transform: uppercase; } .pt-kpi dd { color: var(--pt-ink); font-size: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .pt-kpi dd.sm { font-size: 1.3rem; } .pt-kpi dd small { color: var(--pt-text-3); font-size: 1rem; font-weight: 600; } .pt-kpi .delta { color: var(--pt-text-2); display: block; font-size: 0.76rem; font-weight: 500; line-height: 1.4; margin-top: 0.35rem; } .pt-kpi .delta a { color: var(--pt-primary); font-weight: 600; text-decoration: none; } .pt-kpi--alert { border-left: 0.2rem solid var(--pt-warn); } .pt-kpi--danger { border-left: 0.2rem solid var(--pt-danger); } .pt-kpi--ok { border-left: 0.2rem solid var(--pt-ok); } /* ---------- alertas ---------- */ .pt-alert { align-items: flex-start; border: 1px solid; border-radius: 0.45rem; display: flex; font-size: 0.85rem; gap: 0.7rem; line-height: 1.5; margin-bottom: 0.85rem; overflow-wrap: anywhere; padding: 0.8rem 0.95rem; } .pt-alert > div { flex: 1 1 0; min-width: 0; } .pt-alert > i { font-size: 1.1rem; line-height: 1.3; } .pt-alert b { display: block; font-size: 0.86rem; margin-bottom: 0.1rem; } .pt-alert .grow { flex: 1; } .pt-alert a { color: inherit; font-weight: 700; white-space: nowrap; } .pt-alert--info { background: rgba(16, 118, 154, 0.06); border-color: rgba(16, 118, 154, 0.25); color: var(--pt-primary-dk); } .pt-alert--warn { background: rgba(201, 133, 0, 0.07); border-color: rgba(201, 133, 0, 0.3); color: var(--pt-warn-dk); } .pt-alert--danger { background: rgba(179, 38, 30, 0.06); border-color: rgba(179, 38, 30, 0.28); color: var(--pt-danger-dk); } .pt-alert--ok { background: rgba(52, 176, 150, 0.08); border-color: rgba(52, 176, 150, 0.3); color: var(--pt-ok-dk); } /* Tarja de proposta: desenhado de proposito, mas o schema de hoje nao sustenta */ .pt-prop { background: repeating-linear-gradient(135deg, rgba(201, 133, 0, 0.06) 0 8px, transparent 8px 16px); border: 1px dashed rgba(201, 133, 0, 0.55); border-radius: 0.4rem; color: var(--pt-prop-fg); font-size: 0.78rem; line-height: 1.5; margin-top: 0.5rem; padding: 0.6rem 0.75rem; } .pt-prop-tag { background: var(--pt-warn); border-radius: 0.2rem; color: var(--white); display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; margin-right: 0.35rem; padding: 0.12rem 0.4rem; text-transform: uppercase; } /* ---------- tabelas ---------- */ .pt-table-wrap { overflow-x: auto; position: relative; } .pt-table { border-collapse: collapse; font-size: 0.85rem; min-width: 36rem; width: 100%; } .pt-table th { background: rgba(4, 20, 34, 0.03); border-bottom: 1px solid rgba(4, 20, 34, 0.1); color: var(--pt-text-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; padding: 0.65rem 0.85rem; text-align: left; text-transform: uppercase; white-space: nowrap; } .pt-table td { border-bottom: 1px solid rgba(4, 20, 34, 0.07); color: var(--pt-text); padding: 0.75rem 0.85rem; vertical-align: middle; } .pt-table tr:last-child td { border-bottom: 0; } .pt-table tr.is-current td { background: rgba(16, 118, 154, 0.06); } .pt-table tr.is-click { cursor: pointer; } .pt-table tr.is-click:hover td { background: rgba(16, 118, 154, 0.05); } .pt-table tr.is-click:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: -2px; } .pt-table strong { color: var(--pt-ink); } .pt-table .sub { color: var(--pt-text-3); display: block; font-size: 0.76rem; margin-top: 0.1rem; } .pt-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .pt-table .acts { text-align: right; white-space: nowrap; } .pt-table--compact td { padding: 0.55rem 0.85rem; } .pt-chk { border: 1px solid rgba(4, 20, 34, 0.3); border-radius: 0.2rem; display: inline-block; height: 1rem; vertical-align: middle; width: 1rem; } .pt-chk.is-on { background: var(--pt-primary); border-color: var(--pt-primary); position: relative; } .pt-chk.is-on::after { border-bottom: 2px solid var(--white); border-left: 2px solid var(--white); content: ""; height: 0.25rem; left: 0.18rem; position: absolute; top: 0.22rem; transform: rotate(-45deg); width: 0.55rem; } .pt-pg { align-items: center; color: var(--pt-text-3); display: flex; flex-wrap: wrap; font-size: 0.8rem; gap: 0.3rem; padding: 0.7rem 1rem; border-top: 1px solid rgba(4, 20, 34, 0.07); } .pt-pg .grow { flex: 1; } .pt-pg .p { border: 1px solid rgba(4, 20, 34, 0.14); border-radius: 0.25rem; color: var(--pt-text); min-width: 1.8rem; padding: 0.2rem 0.45rem; text-align: center; } .pt-pg .p.on { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--white); } /* ---------- filtros ---------- */ .pt-filter-bar { align-items: center; background: var(--white); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; padding: 0.7rem 0.85rem; } .pt-filter-bar .spacer { flex: 1; } .pt-pill { background: var(--white); border: 1px solid rgba(4, 20, 34, 0.16); border-radius: 999px; color: var(--pt-text); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.38rem 0.8rem; } .pt-pill:hover { border-color: var(--pt-primary); color: var(--pt-primary-dk); } .pt-pill.is-on { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--white); } .pt-pill .n { opacity: 0.7; margin-left: 0.25rem; } .pt-search { align-items: center; background: var(--white); border: 1px solid rgba(4, 20, 34, 0.16); border-radius: 0.3rem; color: var(--pt-text-4); display: inline-flex; font-size: 0.84rem; gap: 0.45rem; min-height: 2.2rem; min-width: 15rem; padding: 0 0.7rem; } /* ---------- formularios ---------- */ .pt-form { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-form .full { grid-column: 1 / -1; } .pt-field { display: grid; gap: 0.35rem; margin-bottom: 0.85rem; } .pt-form .pt-field { margin-bottom: 0; } .pt-field label, .pt-field .pt-label { color: var(--pt-ink-2); font-size: 0.8rem; font-weight: 600; } /* Template de e-mail: a pre-visualizacao e o proprio editor */ .pt-email-barra { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem; } .pt-email-editor { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--email-fg); font-family: var(--email-font); font-size: 14px; line-height: 1.6; min-height: 22rem; overflow-wrap: anywhere; padding: 1rem 1.15rem; } .pt-email-editor[contenteditable="true"] { cursor: text; } .pt-email-editor[contenteditable="true"]:focus { border-color: var(--pt-primary); box-shadow: 0 0 0 3px rgba(16, 118, 154, 0.15); outline: none; } .pt-email-editor p { margin: 0 0 1em; } .pt-email-var { background: var(--teal-bg); border: 1px dashed var(--teal-fg); border-radius: 4px; color: var(--teal-fg); cursor: default; padding: 0 0.25rem; white-space: nowrap; } .pt-field .req { color: var(--pt-danger); } .pt-field .help { color: var(--pt-text-3); font-size: 0.75rem; line-height: 1.45; } .pt-input { align-items: center; background: var(--white); border: 1px solid rgba(4, 20, 34, 0.16); border-radius: 0.3rem; color: var(--pt-text-4); display: flex; font-size: 0.86rem; gap: 0.5rem; justify-content: space-between; min-height: 2.45rem; padding: 0 0.75rem; } .pt-input--filled { color: var(--pt-ink-2); } .pt-input--ro { background: rgba(4, 20, 34, 0.03); color: var(--pt-text); } .pt-input--bad { border-color: rgba(179, 38, 30, 0.45); } .pt-input--area { align-items: flex-start; min-height: 4.5rem; padding-top: 0.6rem; } .pt-input--code { align-items: flex-start; background: var(--pt-ink); color: var(--pt-code-fg); display: block; font-family: Consolas, Menlo, monospace; font-size: 0.78rem; line-height: 1.65; overflow-wrap: anywhere; padding: 0.7rem 0.85rem; white-space: pre-wrap; } .pt-radios { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-radio { align-items: flex-start; background: var(--white); border: 1px solid rgba(4, 20, 34, 0.16); border-radius: 0.4rem; display: flex; gap: 0.6rem; padding: 0.7rem 0.8rem; } .pt-radio .dot { border: 2px solid rgba(4, 20, 34, 0.3); border-radius: 999px; flex: 0 0 auto; height: 1rem; margin-top: 0.1rem; width: 1rem; } .pt-radio.is-on { background: rgba(16, 118, 154, 0.06); border-color: var(--pt-primary); } .pt-radio.is-on .dot { border-color: var(--pt-primary); box-shadow: inset 0 0 0 3px var(--white); background: var(--pt-primary); } .pt-radio b { color: var(--pt-ink); display: block; font-family: var(--font); font-size: 0.86rem; } .pt-radio span { color: var(--pt-text-2); font-size: 0.78rem; } .pt-wizard { display: grid; gap: 1.1rem; } .pt-step { display: grid; gap: 0.2rem 0.85rem; grid-template-columns: 1.8rem minmax(0, 1fr); } .pt-step-n { align-items: center; background: rgba(16, 118, 154, 0.14); border-radius: 999px; color: var(--pt-primary-dk); display: inline-flex; font-size: 0.78rem; font-weight: 700; height: 1.8rem; justify-content: center; width: 1.8rem; } .pt-step h4 { color: var(--pt-ink); font-size: 0.92rem; margin: 0.2rem 0 0; } .pt-step > div > p { color: var(--pt-text-2); font-size: 0.82rem; margin: 0.15rem 0 0.7rem; } /* ---------- chave / valor ---------- */ .pt-kv { display: grid; gap: 0.8rem; margin: 0; } .pt-kv--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pt-kv > div { display: grid; gap: 0.1rem; } .pt-kv dt { color: var(--pt-text-3); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .pt-kv dd { color: var(--pt-ink-2); font-size: 0.95rem; font-weight: 700; margin: 0; } .pt-kv dd .sub { color: var(--pt-text-3); display: block; font-size: 0.76rem; font-weight: 400; margin-top: 0.1rem; } .pt-kvr { margin: 0; } .pt-kvr > div { align-items: baseline; border-bottom: 1px solid rgba(4, 20, 34, 0.07); display: flex; gap: 1rem; justify-content: space-between; padding: 0.5rem 0; } .pt-kvr > div:last-child { border-bottom: 0; } .pt-kvr dt { color: var(--pt-text-2); flex: 0 0 auto; font-size: 0.8rem; font-weight: 500; } .pt-kvr dd { color: var(--pt-ink-2); font-size: 0.85rem; font-weight: 600; margin: 0; text-align: right; } .pt-kvr dd.txt { color: var(--pt-text-2); font-weight: 400; text-align: left; } /* ---------- etapas do lote (stepper) ---------- */ .pt-pipe { display: grid; gap: 0.6rem; grid-template-columns: repeat(6, minmax(0, 1fr)); } .pt-pipe--v { grid-template-columns: 1fr; } .pt-pipe .node { background: var(--white); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.45rem; border-top: 0.2rem solid rgba(4, 20, 34, 0.14); padding: 0.7rem 0.75rem; } .pt-pipe .node.done { border-top-color: var(--pt-ok); } .pt-pipe .node.now { background: rgba(16, 118, 154, 0.05); border-color: rgba(16, 118, 154, 0.35); border-top-color: var(--pt-primary); } .pt-pipe .ord { color: var(--pt-text-3); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .pt-pipe .nm { color: var(--pt-ink); font-size: 0.86rem; font-weight: 700; margin: 0.15rem 0 0.35rem; } .pt-pipe .ct { color: var(--pt-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.1; } .pt-pipe .ct small { color: var(--pt-text-3); font-size: 0.78rem; font-weight: 600; } .pt-pipe .mt { color: var(--pt-text-3); font-size: 0.74rem; line-height: 1.6; margin-top: 0.4rem; } .pt-pipe .risk { color: var(--pt-danger); display: block; font-size: 0.7rem; font-weight: 600; } .pt-pipe--v .node { align-items: center; display: grid; gap: 0.2rem 0.85rem; grid-template-columns: minmax(0, 1fr) 6rem; } .pt-pipe--v .node .mt { grid-column: 1 / -1; margin-top: 0; } .pt-pipe--v .ct { text-align: right; } .pt-bar { background: rgba(4, 20, 34, 0.07); border-radius: 999px; height: 0.4rem; margin-top: 0.4rem; overflow: hidden; } .pt-bar i { background: var(--pt-ok); border-radius: 999px; display: block; height: 100%; } .now .pt-bar i { background: var(--pt-primary); } .pt-pipe--v .pt-bar { grid-column: 1 / -1; margin-top: 0.1rem; } .pt-progress { align-items: center; background: var(--white); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.5rem; display: grid; gap: 1.1rem; grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 0.85rem; padding: 0.9rem 1rem; } .pt-progress strong { color: var(--pt-ink); display: block; font-size: 1.6rem; line-height: 1.1; } .pt-progress .lab { color: var(--pt-text-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .pt-progress .pt-bar { height: 0.65rem; margin: 0; } .pt-progress .pt-bar i { background: var(--pt-primary); } .pt-progress .cur { align-items: center; color: var(--pt-text); display: flex; font-size: 0.85rem; gap: 0.5rem; } /* ---------- linha do tempo de execucoes ---------- */ .pt-tl { display: grid; gap: 0; margin: 0; padding: 0; } .pt-tl .ev { border-left: 2px solid rgba(4, 20, 34, 0.12); margin-left: 0.4rem; padding: 0 0 1rem 1.1rem; position: relative; } .pt-tl .ev:last-child { padding-bottom: 0; } .pt-tl .ev::before { background: var(--pt-text-4); border: 2px solid var(--white); border-radius: 999px; box-shadow: 0 0 0 1px rgba(4, 20, 34, 0.15); content: ""; height: 0.8rem; left: -0.48rem; position: absolute; top: 0.15rem; width: 0.8rem; } .pt-tl .ev.ok::before { background: var(--pt-ok); } .pt-tl .ev.err::before { background: var(--pt-danger); } .pt-tl .ev.rev::before { background: var(--pt-warn); } .pt-tl .hd { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pt-tl .et { color: var(--pt-ink); font-family: var(--font); font-size: 0.84rem; font-weight: 700; } .pt-tl .tm { color: var(--pt-text-3); font-size: 0.76rem; margin-left: auto; } .pt-tl .ms { color: var(--pt-text); font-size: 0.84rem; line-height: 1.5; margin-top: 0.25rem; } .pt-tl .pv { color: var(--pt-text-2); font-size: 0.76rem; margin-top: 0.25rem; } .pt-tl .pv b { color: var(--pt-primary-dk); } /* ---------- lotes: lista lateral + detalhe ---------- */ .pt-split { display: grid; gap: 0.85rem; grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } .pt-li { background: transparent; border: 0; border-bottom: 1px solid rgba(4, 20, 34, 0.07); border-left: 0.2rem solid transparent; cursor: pointer; display: block; font: inherit; padding: 0.7rem 0.85rem; text-align: left; width: 100%; } .pt-li:hover { background: rgba(16, 118, 154, 0.05); } .pt-li.on { background: rgba(16, 118, 154, 0.07); border-left-color: var(--pt-primary); } .pt-li .ti { align-items: center; color: var(--pt-ink); display: flex; font-size: 0.84rem; font-weight: 700; gap: 0.4rem; justify-content: space-between; } .pt-li .mt { color: var(--pt-text-3); display: block; font-size: 0.76rem; margin-top: 0.15rem; } /* ---------- graficos ---------- */ .pt-donut-wrap { align-items: center; display: grid; gap: 1.1rem; grid-template-columns: 10rem minmax(0, 1fr); } .pt-donut { display: block; height: auto; width: 10rem; } .pt-donut .track { fill: none; stroke: rgba(4, 20, 34, 0.06); stroke-width: 22; } .pt-donut .seg { fill: none; stroke-width: 22; transition: stroke-width 120ms ease; } .pt-donut .seg:hover { stroke-width: 26; } .pt-donut .mid-num { fill: var(--pt-ink); font-size: 22px; font-weight: 700; text-anchor: middle; } .pt-donut .mid-lab { fill: var(--pt-text-2); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-anchor: middle; text-transform: uppercase; } .pt-legend { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; } .pt-legend li { align-items: center; display: grid; gap: 0.6rem; grid-template-columns: 0.7rem minmax(0, 1fr) auto; } .pt-legend .sw { border-radius: 0.2rem; height: 0.7rem; width: 0.7rem; } .pt-legend .lab { color: var(--pt-text); font-size: 0.82rem; } .pt-legend .val { color: var(--pt-ink); font-size: 0.84rem; font-variant-numeric: tabular-nums; font-weight: 700; } /* ---------- tabela por etapa (empresa x etapa) ---------- */ .pt-mx-bar { align-items: center; border-bottom: 1px solid rgba(4, 20, 34, 0.08); display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; padding: 0.75rem 1rem; } .pt-mx-bar .grp { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; } .pt-mx-bar .lab { color: var(--pt-text-3); font-family: var(--font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; margin-right: 0.2rem; text-transform: uppercase; } .pt-mx-bar .pt-search { margin-left: auto; } .pt-search input { background: transparent; border: 0; color: var(--pt-ink-2); font: inherit; min-width: 0; outline: 0; width: 100%; } .pt-search:focus-within { border-color: var(--pt-primary); box-shadow: 0 0 0 2px rgba(16, 118, 154, 0.15); } .pt-mx { min-width: 58rem; } .pt-mx th.et, .pt-mx td.et { text-align: center; width: 6.2rem; } .pt-mx th.et span { color: var(--pt-text-3); display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 0.1rem; } .pt-mx .is-col { background: rgba(16, 118, 154, 0.07); } .pt-mx td.msg { line-height: 1.45; min-width: 17rem; } .pt-mx td.msg .pt-etapa { font-size: 0.68rem; margin-right: 0.25rem; padding: 0.1rem 0.4rem; } .pt-mx-vazio td { color: var(--pt-text-3); padding: 2rem 1rem; text-align: center; } .pt-st { align-items: center; border: 1px solid transparent; border-radius: 0.35rem; display: inline-flex; position: relative; font-size: 0.9rem; height: 1.65rem; justify-content: center; width: 1.65rem; } .pt-st--ok { background: rgba(52, 176, 150, 0.15); color: var(--pt-ok-fg); } .pt-st--rev { background: rgba(201, 133, 0, 0.16); color: var(--pt-warn-fg); } .pt-st--err { background: rgba(179, 38, 30, 0.13); color: var(--pt-danger); } .pt-st--run { background: rgba(16, 118, 154, 0.13); color: var(--pt-primary-dk); } .pt-st--pen { border: 1px dashed rgba(4, 20, 34, 0.22); color: var(--pt-text-4); } .pt-st--can { background: rgba(4, 20, 34, 0.07); color: var(--pt-text-2); } .pt-st--blq { background: rgba(140, 29, 23, 0.1); color: var(--pt-danger-dk); } .pt-st .vh { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; } .pt-mx-legend { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; } .pt-mx-legend > span { align-items: center; display: inline-flex; gap: 0.3rem; } .pt-mx-legend .pt-st { font-size: 0.66rem; height: 1.15rem; width: 1.15rem; } /* ---------- empresas: dado do SOC x dado do cliente ---------- */ .pt-tag--cli { background: rgba(35, 237, 184, 0.16); border-color: rgba(52, 176, 150, 0.45); color: var(--pt-ok-fg); } .pt-subhead i { color: var(--pt-primary); margin-right: 0.2rem; } .pt-cmp { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-cmp-side { background: rgba(4, 20, 34, 0.025); border: 1px solid rgba(4, 20, 34, 0.1); border-radius: 0.45rem; display: grid; gap: 0.3rem; padding: 0.75rem 0.85rem; } .pt-cmp-side.is-used { background: rgba(52, 176, 150, 0.06); border-color: rgba(52, 176, 150, 0.5); } .pt-cmp-side .hd { align-items: center; color: var(--pt-text-2); display: flex; flex-wrap: wrap; font-family: var(--font); font-size: 0.68rem; font-weight: 700; gap: 0.4rem; justify-content: space-between; letter-spacing: 0.06em; text-transform: uppercase; } .pt-cmp-side .val { color: var(--pt-ink); font-size: 0.88rem; font-weight: 600; word-break: break-word; } .pt-cmp-side .meta { color: var(--pt-text-3); font-size: 0.75rem; } @media (max-width: 760px) { .pt-cmp { grid-template-columns: minmax(0, 1fr); } .pt-mx-bar .pt-search { margin-left: 0; } } /* ---------- responsivo ---------- * Coluna unica e' `minmax(0, 1fr)`, nunca `1fr`: o minimo de `1fr` e' a largura * do conteudo, e uma tabela larga alargava a caixa e a pagina inteira em vez de * rolar dentro do `.pt-table-wrap`. */ @media (max-width: 1180px) { .pt-kpis, .pt-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-cols, .pt-cols--wide, .pt-detail, .pt-split { grid-template-columns: minmax(0, 1fr); } .pt-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pt-kv--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .pt-kpis, .pt-kpis--3, .pt-kpis--5, .pt-form, .pt-radios, .pt-kv--4, .pt-pipe { grid-template-columns: minmax(0, 1fr); } .pt-heading { display: block; } .pt-heading .acts { margin-top: 0.75rem; } .pt-progress { grid-template-columns: minmax(0, 1fr); } .pt-donut-wrap { grid-template-columns: 1fr; justify-items: center; } .pt-search { min-width: 0; width: 100%; } } /* ---------- controles reais ---------- * No prototipo `.pt-input`, `.pt-pill` e `.pt-radio` sao
/