/* ============================================================
CONSTRUSUD — Sistema de Gestão (CRM + Orçamentação)
v0.2 · React + TS + Vite + Firebase
(Idêntico ao styles.css original — UI parity garantida)
============================================================ */
/* ============================================================
FONTES — Lato (marca Construsud)
============================================================ */
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
:root{
/* Brand — bordô Construsud (2026-05-10: era #FF3B3B vermelho vivo, redesign mockup CRM) */
--red:#7A1818; /* Mantém nome --red por compatibilidade legacy; valor passou a bordô */
--red-main:#7A1818; /* alias canónico — usar este em código novo */
--red-mid:#D62E2E; /* hover/destaque secundário (mantém vermelho médio) */
--red-dark:#D62E2E; /* alias legacy */
--red-soft:#FFF5F5; /* fundo suave (era #FFE7E7) */
--red-line:#FBD9D9; /* bordas accent */
--red-ch:#FFEBEB; /* chapter cards background */
--red-ch-dark:#FFCECE;/* chapter cards "a definir" */
--bg:#F5F6F8;
--panel:#FFFFFF;
--line:#E6E8EE;
--line-strong:#CFD3DC;
--ink:#1B1F27;
--ink-2:#454B57;
--ink-3:#7A8190;
--ink-4:#AAB1BD;
--ink-5:#CFD3DC; /* novo — números/elementos desactivados */
--green:#2BAE66;
--amber:#E8A547;
--blue:#3F7BD7;
--purple:#8060D6;
/* Fundo subtil de linha por status (CRM lista, mockup 2026-05-10) */
--row-adjudicado:#F6FDF9;
--row-cancelado:#FFF8F8;
--row-arquivada:#FAFAFA;
--shadow:0 1px 3px rgba(20,25,40,.06), 0 4px 14px rgba(20,25,40,.05);
--radius:8px;
--radius-sm:5px;
--font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none}
/* Scrollbars bordô minimalistas (Onda 8.8) — webkit + firefox */
*{
scrollbar-width:thin;
scrollbar-color:var(--red-line) transparent;
}
*::-webkit-scrollbar{
width:6px;
height:6px;
}
*::-webkit-scrollbar-track{
background:transparent;
}
*::-webkit-scrollbar-thumb{
background:var(--red-line);
border-radius:3px;
border:1px solid transparent;
}
*::-webkit-scrollbar-thumb:hover{
background:var(--red);
}
*::-webkit-scrollbar-corner{
background:transparent;
}
input,select,textarea{font-family:inherit;font-size:14px}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#1B1F27;color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid #2A2F3B}
.sidebar .brand svg{width:28px;height:28px}
.sidebar .brand span{font-weight:700;letter-spacing:.5px;font-size:16px}
.nav{padding:10px 8px;flex:1;overflow-y:auto}
.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7A8190;padding:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:#D2D6DE;text-decoration:none;border-radius:6px;font-size:13.5px;transition:background .12s}
.nav a:hover{background:#262B36;color:#fff}
.nav a.active{background:var(--red);color:#fff}
.nav a .ic{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.nav a .badge{margin-left:auto;font-size:10px;background:#2A2F3B;padding:2px 6px;border-radius:10px;color:#9AA0AC}
.nav a.coming{opacity:.55;cursor:not-allowed}
.nav a.coming:hover{background:transparent;color:#D2D6DE}
.sidebar .footer{padding:12px 16px;border-top:1px solid #2A2F3B;font-size:11px;color:#7A8190}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:10}
.crumb{font-size:13px;color:var(--ink-3)}
.crumb b{color:var(--ink)}
.topbar .grow{flex:1}
.topbar input.search{padding:7px 10px;border:1px solid var(--line);border-radius:6px;width:280px;background:#F8F9FB}
.user-chip{font-size:12px;color:var(--ink-2);padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:18px}
.content{padding:22px 28px;flex:1;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel + .panel{margin-top:18px}
.panel-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.panel-head h2{margin:0;font-size:15px;font-weight:600}
.panel-head .grow{flex:1}
.panel-body{padding:18px}
.panel-body.tight{padding:0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3)}
.kpi .val{font-size:22px;font-weight:700;margin-top:4px}
.kpi .sub{font-size:11px;color:var(--ink-3);margin-top:3px}
.kpi.red .val{color:var(--red)}
.kpi.green .val{color:var(--green)}
.kpi.blue .val{color:var(--blue)}
.kpi.amber .val{color:var(--amber)}
/* ── Gestão de Obras: filtros + ordenação (mesma linguagem da app) ── */
.obras-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.obras-chip{font-family:var(--font);font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:20px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);cursor:pointer;transition:all .12s;letter-spacing:.3px}
.obras-chip:hover{border-color:var(--red);color:var(--red)}
.obras-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.obras-search{font-family:var(--font);font-size:13px;padding:6px 12px 6px 30px;border:1px solid var(--line-strong);border-radius:7px;background:#fff url("data:image/svg+xml;utf8,") no-repeat 9px center;color:var(--ink);min-width:200px}
.obras-search:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
table.tbl th.so{cursor:pointer;user-select:none;transition:color .1s}
table.tbl th.so:hover{color:var(--red)}
table.tbl th.so .ar{margin-left:5px;font-size:9px;color:var(--red);vertical-align:middle}
.obras-row{transition:background .1s}
.obras-row:hover td{background:var(--row-adjudicado)}
.estado-toggle{border:none;font-family:var(--font);cursor:pointer}
.estado-toggle:hover{filter:brightness(.96);box-shadow:0 0 0 2px var(--line)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-size:13px;font-weight:500;background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;transition:all .12s}
.btn:hover{background:#F1F2F6}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:#EDEFF3}
.btn-danger{background:#fff;color:var(--red);border-color:#FFB5B5}
.btn-danger:hover{background:#FFE7E7}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-icon{padding:6px;width:30px;height:30px;justify-content:center}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-weight:600;color:var(--ink-2);padding:10px 14px;background:#F8F9FB;border-bottom:1px solid var(--line);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
table.tbl td{padding:0 14px;height:54px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:#FAFBFC;cursor:pointer}
table.tbl tr.no-hover:hover td{background:transparent;cursor:default}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td.muted{color:var(--ink-3)}
/* StatusPill — estilo "pill" do mockup (2026-05-10):
bolinha 5px à esquerda + uppercase + radius 11px.
A bolinha herda currentColor com opacity .85 — fica subtil
mas legível em todos os tons de status. */
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;font-size:10.5px;font-weight:700;border-radius:11px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;text-decoration:none !important}
.status-pill::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85;flex-shrink:0}
.status-por_enviar{background:#E8EDF6;color:#3C5AA6}
.status-por_aprovar{background:#FFF3D9;color:#A77400}
.status-adjudicado{background:#DFF5E6;color:#1F7A3D}
.status-cancelado{background:#FFE7E7;color:#D62E2E}
.status-anulado, .status-reprovado{background:#F0EEEE;color:#7A7375}
/* Microalteração D (2026-05-11): pill arquivada passa de cinza para bordô (mesma paleta da linha) */
.status-arquivada{background:var(--red-soft);color:var(--red);font-style:italic}
/* status internos do orçamentar */
.status-para_analise{background:#FFF0E0;color:#B35C00}
.status-para_envio{background:#E6F0FF;color:#1A56A6}
/* Paleta orcamento (semaforo) — apenas usada na aba Orcamentar (Bloco E4 refresh 2026-05-11) */
.status-pill-orc{ text-decoration:none !important; }
.status-orc-nova_proposta{background:#E8F1FE;color:#1E4D8C;text-decoration:none}
.status-orc-em_orcamentacao{background:#F0E8FE;color:#5A2EA6;text-decoration:none}
.status-orc-para_analise{background:#FFF3D9;color:#A77400;text-decoration:none}
.status-orc-para_envio{background:#DFF5E6;color:#1F7A3D;text-decoration:none}
/* Bolinha de alerta laranja — aparece por cima do status pill no CRM */
.status-with-alert{position:relative;display:inline-block}
.status-with-alert .alert-dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;background:var(--amber);border-radius:50%;border:1.5px solid #fff}
/* CodePill — pill mono para códigos (V12618, 1.1.1, V0/V1, unidades).
Mockup 2026-05-10. Cores derivam dos tokens do brand. */
.code-pill{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:500;border-radius:4px;white-space:nowrap;line-height:1}
.code-pill-md{font-size:11px;padding:3px 8px}
.code-pill-sm{font-size:10.5px;padding:2px 6px;border-radius:3px}
.code-pill-accent{color:var(--red);background:var(--red-soft);border:1px solid var(--red-line)}
.code-pill-muted{color:var(--ink-4);background:var(--line);border:1px solid var(--line)}
/* IconButton — botão quadrado pequeno (28x28) para acções de linha:
copy morada, eliminar, expandir versões. Mockup 2026-05-10.
3 variantes: accent (bordô neutro), danger (vermelho em hover), muted (cinza). */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer;background:transparent;font-family:inherit;flex-shrink:0;transition:all .12s}
.icon-btn-accent{border:1px solid var(--line);color:var(--red)}
.icon-btn-accent:hover{background:#F4F5F8;border-color:var(--red-line)}
.icon-btn-danger{border:1px solid var(--line);color:var(--ink-3)}
.icon-btn-danger:hover{background:#FFE7E7;color:#D62E2E;border-color:#D62E2E}
.icon-btn-muted{border:1px solid var(--line);color:var(--ink-4)}
.icon-btn-muted:hover{background:#F4F5F8;color:var(--ink-2)}
/* Bolinha verde — indica que a proposta tem orçamento preenchido */
.orc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-left:2px}
/* Barra de ações do workflow de orçamentação */
.workflow-bar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#F8F9FB;border-bottom:1px solid var(--line);flex-wrap:wrap}
.workflow-bar .wf-status{font-size:12px;font-weight:600;color:var(--ink-2)}
.workflow-bar .wf-notes{flex:1;font-size:12px;color:var(--amber);background:#FFF8EE;border:1px solid #FFD89A;border-radius:6px;padding:6px 10px}
.workflow-bar .spacer{flex:1}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.form-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11px;color:var(--ink-3)}
.field input, .field select, .field textarea{padding:8px 10px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;outline:none;width:100%}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field textarea{resize:vertical;min-height:60px}
.tabs{display:flex;border-bottom:1px solid var(--line);background:#fff}
.tab{padding:12px 18px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--red);border-bottom-color:var(--red)}
.tree-chap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.tree-chap-head{padding:11px 14px;background:#262B36;color:#fff;display:flex;align-items:center;gap:10px}
.tree-chap-head .num{font-weight:700;font-size:13px}
.tree-chap-head input{background:transparent;border:none;color:#fff;font-size:14px;font-weight:600;flex:1;outline:none}
.tree-chap-head input:focus{background:rgba(255,255,255,.1)}
.tree-chap-head .total{font-variant-numeric:tabular-nums;font-weight:600}
.tree-chap-body{padding:10px}
.tree-sub{border:1px solid var(--line);border-radius:6px;margin-bottom:10px;background:#FAFBFC}
.tree-sub-head{padding:8px 12px;background:#EFF1F5;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.tree-sub-head .num{font-weight:600;color:var(--ink-2);font-size:12px;min-width:42px}
.tree-sub-head input{background:transparent;border:none;flex:1;font-weight:600;color:var(--ink);outline:none}
.tree-sub-head input:focus{background:#fff;border-radius:4px;padding:2px 4px}
.tree-act{border-top:1px solid var(--line);padding:10px 12px}
.tree-act:first-child{border-top:none}
.tree-act-head{display:grid;grid-template-columns:60px 1fr 70px 80px 100px 110px 30px;gap:8px;align-items:center;margin-bottom:6px}
.tree-act-head .acode{font-weight:600;font-size:12px;color:var(--ink-2)}
.tree-act-head input{border:1px solid transparent;background:transparent;padding:6px 8px;border-radius:4px}
.tree-act-head input:hover{background:#fff;border-color:var(--line)}
.tree-act-head input:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.tree-act-head input.num{text-align:right;font-variant-numeric:tabular-nums}
.tree-act-body{display:none;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-top:8px}
.tree-act.open .tree-act-body{display:block}
.tree-act .toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--ink-3);cursor:pointer;background:transparent;border:none}
.tree-act .toggle:hover{background:#EFF1F5;color:var(--ink)}
.act-section{margin-bottom:14px}
.act-section h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);font-weight:700}
/* ── 5 cards de custo no drill-in de atividades ── */
.cost-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
@media(max-width:1000px){.cost-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cost-cards{grid-template-columns:1fr}}
.cost-card{border-radius:8px;border:1px solid;padding:12px 14px}
.cost-card h4{margin:0 0 10px;font-size:10px;text-transform:uppercase;letter-spacing:.9px;font-weight:700}
.cost-card.mat{background:#E8F1FE;border-color:#B8D4F5}
.cost-card.mat h4{color:#1E4D8C}
.cost-card.mo{background:#FFF1E0;border-color:#FFD8A0}
.cost-card.mo h4{color:#A04E00}
.cost-card.subs{background:#F0E8FE;border-color:#D5BFF5}
.cost-card.subs h4{color:#5A2EA6}
.cost-card.log{background:#FFFAE0;border-color:#F0DD8A}
.cost-card.log h4{color:#8A6A00}
.cost-card.amort{background:#E0F5E8;border-color:#A0E0B0}
.cost-card.amort h4{color:#1A7A3A}
.cost-total{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);padding:6px 8px;text-align:left;background:#F8F9FB;border-bottom:1px solid var(--line)}
table.mini td{padding:5px 4px;border-bottom:1px solid var(--line)}
table.mini td input, table.mini td select{padding:5px 7px;font-size:12.5px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%}
table.mini td.num input{text-align:right;font-variant-numeric:tabular-nums}
.totals-band{background:#F8F9FB;border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin-top:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;font-size:12px}
.totals-band .b{font-weight:700;color:var(--ink);font-size:13px}
.totals-band .l{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.modal-back{position:fixed;inset:0;background:rgba(15,18,28,.45);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:10px;width:560px;max-width:90vw;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(15,20,30,.3)}
.modal.large{width:880px}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.empty{padding:50px 30px;text-align:center;color:var(--ink-3)}
.empty .icon{font-size:36px;margin-bottom:10px;opacity:.5}
.empty h3{margin:6px 0;color:var(--ink-2);font-size:16px;font-weight:600}
.empty p{margin:0;max-width:400px;margin-left:auto;margin-right:auto}
.coming-soon{background:linear-gradient(135deg,#F8F9FB,#EFF1F5);border:2px dashed var(--line-strong);border-radius:10px;padding:50px;text-align:center}
.coming-soon h2{margin:0 0 8px;font-size:20px}
.coming-soon p{color:var(--ink-3);max-width:520px;margin:6px auto}
.coming-soon ul{text-align:left;display:inline-block;margin:18px auto 6px;color:var(--ink-2)}
.row{display:flex;gap:10px;align-items:center}
.row.gap-sm{gap:6px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--ink-3)}
.bad{color:var(--red)}
.good{color:var(--green)}
.right{text-align:right}
.b{font-weight:600}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;background:#EEF1F6;color:var(--ink-2);border-radius:10px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:11px 16px;border-radius:8px;font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.2);animation:slideIn .2s;z-index:200;max-width:420px;line-height:1.4}
.toast--clickable{cursor:pointer;transition:background 0.15s;user-select:text}
.toast--clickable:hover{background:#000}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
/* ── DialogContext (substitui confirm()/prompt() do browser) ─────── */
/* A1.1.a — 2026-05-11 */
.dlg-back{position:fixed;inset:0;background:rgba(15,18,28,.5);display:flex;align-items:center;justify-content:center;z-index:300;animation:fadeIn .15s}
.dlg{background:#fff;border-radius:10px;width:420px;max-width:92vw;box-shadow:0 24px 60px rgba(15,20,30,.32);overflow:hidden;display:flex;flex-direction:column;animation:dlgPop .18s}
@keyframes dlgPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.dlg-head{padding:16px 20px 0;display:flex;align-items:center}
.dlg-title{margin:0;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.dlg-body{padding:14px 20px 6px}
.dlg-msg{font-size:13px;color:var(--ink-2);line-height:1.55;white-space:pre-line}
.dlg-label{display:block;font-size:11px;color:var(--ink-3);margin:12px 0 4px;letter-spacing:.04em;text-transform:uppercase}
.dlg-input{width:100%;height:34px;padding:0 10px;border:1px solid var(--line-strong);border-radius:6px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.dlg-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(122,24,24,.12)}
/* João 2026-05-19: flex-wrap + texto a quebrar — diálogos com vários
botões (ex.: 4 opções do "puxar da BD") já não cortam o texto. */
.dlg-foot{padding:14px 20px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-btn{min-height:32px;padding:7px 14px;font-size:13px;font-family:inherit;font-weight:500;border-radius:6px;cursor:pointer;border:1px solid transparent;white-space:normal;line-height:1.2;transition:background .15s,border-color .15s,color .15s}
.dlg-btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-2)}
.dlg-btn--ghost:hover{background:#F5F6F8;color:var(--ink)}
.dlg-btn--primary{background:var(--red);border-color:var(--red);color:#fff}
.dlg-btn--primary:hover{background:#5e1212}
.dlg-btn--danger{background:#B91C1C;border-color:#B91C1C;color:#fff}
.dlg-btn--danger:hover{background:#8c1414}
.dlg--danger .dlg-title{color:#B91C1C}
.dlg--warning .dlg-title{color:#A77400}
.dlg--info .dlg-title{color:#1E4D8C}
.lock-banner{background:#FFF3D9;border:1px solid #E8A547;border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:#7A5500}
/* ── Filtros CRM ──────────────────────────────────────────────── */
/* Escalões chips */
.esc-btn{display:inline-flex;align-items:center;padding:5px 12px;font-size:12px;font-weight:500;border:1px solid var(--line-strong);border-radius:20px;background:#fff;color:var(--ink-2);cursor:pointer;transition:all .15s;white-space:nowrap}
.esc-btn:hover{border-color:var(--red);color:var(--red)}
.esc-btn.active{background:var(--red);border-color:var(--red);color:#fff}
/* Altura padrão dos três controles de filtro: 36px */
.f-status-btn,.f-cal-trigger{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;height:36px;white-space:nowrap}
.f-status-btn{min-width:160px}
.f-cal-trigger{min-width:180px}
.f-status-btn:hover,.f-cal-trigger:hover{border-color:var(--red)}
.f-status-btn.has-sel,.f-cal-trigger.has-sel{border-color:var(--red)}
/* Status dropdown */
.f-status-drop{position:relative}
.f-status-menu{position:absolute;top:calc(100% + 3px);left:0;min-width:200px;background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:50;overflow:hidden}
.f-status-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px}
.f-status-opt:hover{background:#F5F6F8}
.f-status-chk{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0}
.f-status-opt.selected .f-status-chk{background:var(--red);border-color:var(--red)}
.f-status-sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Autocomplete cliente — mesma altura via min-height+padding */
.f-ac-wrap{position:relative}
.f-ac-box{display:flex;flex-wrap:wrap;gap:4px;padding:0 8px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;cursor:text;min-height:36px;align-items:center}
.f-ac-box:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.f-ac-box.has-sel{border-color:var(--red)}
.f-ac-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#E8EDF6;color:#3C5AA6;border-radius:12px;font-size:12px;white-space:nowrap;margin:2px 0}
.f-ac-tag button{background:none;border:none;cursor:pointer;color:#3C5AA6;font-size:13px;padding:0;line-height:1;display:flex}
.f-ac-input{border:none;outline:none;font-size:13px;flex:1;min-width:100px;padding:2px 4px;background:transparent}
.f-ac-list{position:absolute;top:calc(100% + 3px);left:0;right:0;background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:50;overflow:hidden;max-height:240px;overflow-y:auto}
.f-ac-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;font-size:13px}
.f-ac-item:hover{background:#F5F6F8}
.f-ac-item mark{background:#FFF3D9;border-radius:2px;padding:0 1px}
.f-ac-chk{color:var(--green);font-weight:700;font-size:13px}
/* Calendário range picker */
.f-cal-wrap{position:relative}
.f-cal-popup{position:absolute;top:calc(100% + 3px);left:0;background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:50;padding:14px;min-width:262px}
.f-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.f-cal-mlbl{font-weight:600;font-size:13px}
.f-cal-nav{background:none;border:none;cursor:pointer;font-size:18px;color:var(--ink-2);padding:2px 6px;border-radius:4px}
.f-cal-nav:hover{background:#F0F1F4}
.f-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.f-cal-dow{text-align:center;font-size:10px;font-weight:600;color:var(--ink-3);padding:3px 0;text-transform:uppercase}
.f-cal-empty{height:30px}
.f-cal-day{text-align:center;font-size:12px;padding:6px 2px;cursor:pointer;border-radius:4px;user-select:none}
.f-cal-day:hover{background:#F0F1F4}
.f-cal-day.rs{background:var(--red)!important;color:#fff!important;border-radius:4px 0 0 4px}
.f-cal-day.re{background:var(--red)!important;color:#fff!important;border-radius:0 4px 4px 0}
.f-cal-day.rs.re{border-radius:4px}
.f-cal-day.ri{background:var(--red-soft);color:var(--red);border-radius:0}
.f-cal-day.ss{background:#3C5AA6!important;color:#fff!important;border-radius:4px 0 0 4px}
.f-cal-day.se{background:#3C5AA6!important;color:#fff!important;border-radius:0 4px 4px 0}
.f-cal-day.si{background:#E8EDF6;color:#3C5AA6;border-radius:0}
.f-cal-hint{font-size:11px;color:var(--ink-3);margin-top:8px;text-align:center}
.f-cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.f-cal-mini{font-size:11px;color:var(--ink-3)}
/* Tags de filtros ativos */
.f-active-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.f-active-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#E8EDF6;color:#3C5AA6;border-radius:12px;font-size:12px}
.f-active-tag button{background:none;border:none;cursor:pointer;color:#3C5AA6;font-size:14px;padding:0;line-height:1}
.f-clear-all{background:none;border:none;cursor:pointer;color:var(--red);font-size:12px;font-weight:600;padding:3px 8px;text-decoration:underline}
@media (max-width:1100px){
.kpi-grid{grid-template-columns:repeat(2,1fr)}
.form-grid{grid-template-columns:1fr}
.form-grid.cols-3, .form-grid.cols-4{grid-template-columns:1fr 1fr}
}
/* ============================================================
FILTROS CRM — escalões, status multi-select, autocomplete, calendário
============================================================ */
/* Escalões de valor */
.esc-btn{display:inline-flex;align-items:center;padding:4px 11px;border-radius:20px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;transition:all .12s;font-family:var(--font)}
.esc-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.esc-btn.active{background:var(--red);border-color:var(--red);color:#fff}
/* Status multi-select dropdown */
.f-status-drop{position:relative}
.f-status-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;cursor:pointer;width:100%;font-size:13px;text-align:left;font-family:var(--font);color:var(--ink)}
.f-status-btn:hover{border-color:var(--ink-3)}
.f-status-btn.has-sel{border-color:var(--red)}
.f-status-menu{position:absolute;top:calc(100% + 3px);left:0;min-width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);z-index:50;overflow:hidden;box-shadow:var(--shadow)}
.f-status-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px;transition:background .08s;color:var(--ink)}
.f-status-opt:hover{background:var(--bg)}
.f-status-chk{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:all .1s}
.f-status-opt.selected .f-status-chk{background:var(--red);border-color:var(--red)}
.f-status-sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Autocomplete multi-cliente */
.f-ac-wrap{position:relative}
.f-ac-box{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;min-height:36px;cursor:text;transition:border-color .12s}
.f-ac-box:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.f-ac-box.has-sel{border-color:var(--red)}
.f-ac-tag{display:inline-flex;align-items:center;gap:4px;background:#E8EDF6;color:#3C5AA6;border-radius:12px;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap}
.f-ac-tag button{background:none;border:none;color:#3C5AA6;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.7;font-family:var(--font)}
.f-ac-tag button:hover{opacity:1}
.f-ac-input{border:none;outline:none;font-size:13px;background:transparent;min-width:80px;flex:1;color:var(--ink);padding:2px 0;font-family:var(--font)}
.f-ac-list{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);z-index:50;overflow:hidden;box-shadow:var(--shadow)}
.f-ac-item{padding:9px 12px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.f-ac-item:hover{background:var(--bg)}
.f-ac-item mark{background:none;color:var(--red);font-weight:600}
.f-ac-chk{margin-left:auto;color:var(--green);font-size:12px}
/* Calendário range */
.f-cal-wrap{position:relative}
.f-cal-trigger{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;white-space:nowrap;min-width:180px;user-select:none;transition:border-color .12s}
.f-cal-trigger:hover{border-color:var(--ink-3)}
.f-cal-trigger.has-sel{border-color:var(--red)}
.f-cal-popup{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);z-index:50;padding:14px 16px;box-shadow:0 8px 24px rgba(20,25,40,.12);min-width:262px}
.f-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.f-cal-nav{background:none;border:1px solid var(--line);border-radius:5px;padding:3px 10px;color:var(--ink-2);cursor:pointer;font-size:14px;font-family:var(--font)}
.f-cal-nav:hover{background:var(--bg)}
.f-cal-mlbl{font-size:13px;font-weight:600;color:var(--ink)}
.f-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.f-cal-dow{font-size:10px;color:var(--ink-3);text-align:center;padding:3px 0;font-weight:600;text-transform:uppercase}
.f-cal-day{font-size:12px;text-align:center;padding:6px 2px;border-radius:4px;cursor:pointer;color:var(--ink);transition:background .08s}
.f-cal-day:hover{background:#F0F5FD;color:var(--blue)}
.f-cal-empty{padding:6px 2px}
/* seleção em curso (vermelho) */
.f-cal-day.rs{background:var(--red)!important;color:#fff!important;font-weight:600;border-radius:4px 0 0 4px}
.f-cal-day.re{background:var(--red)!important;color:#fff!important;font-weight:600;border-radius:0 4px 4px 0}
.f-cal-day.rs.re{border-radius:4px}
.f-cal-day.ri{background:var(--red-soft);color:var(--red);border-radius:0}
/* períodos confirmados (azul) */
.f-cal-day.ss{background:#3C5AA6!important;color:#fff!important;border-radius:4px 0 0 4px}
.f-cal-day.se{background:#3C5AA6!important;color:#fff!important;border-radius:0 4px 4px 0}
.f-cal-day.ss.se{border-radius:4px}
.f-cal-day.si{background:#E8EDF6;color:#3C5AA6;border-radius:0}
.f-cal-hint{font-size:11px;color:var(--ink-3);text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.f-cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.f-cal-mini{font-size:11px;color:var(--ink-3)}
/* Filtros ativos — barra de tags */
.f-active-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);align-items:center}
.f-active-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 10px;border-radius:20px;background:#E8EDF6;color:#3C5AA6;font-size:12px;font-weight:500}
.f-active-tag button{background:none;border:none;color:#3C5AA6;cursor:pointer;font-size:14px;line-height:1;padding:0 1px;opacity:.6;font-family:var(--font)}
.f-active-tag button:hover{opacity:1}
.f-clear-all{font-size:12px;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:3px 10px;border-radius:20px;font-family:var(--font)}
.f-clear-all:hover{background:var(--bg);color:var(--ink)}
/* ============================================================
NOVO APP SHELL v0.3 — Header horizontal + sidebar fina BD
============================================================ */
/* Grelha raiz */
.app-shell{
display:grid;
grid-template-rows:46px 1fr; /* mockup 2026-05-10: era 52px (sincronizar com .app-header height) */
grid-template-columns:48px 1fr;
height:100vh;
overflow:hidden;
}
/* ── Header — fundo accent bordô (mockup 2026-05-10) ─────────
Antes era dark (#1B1F27, height 52px, nav vermelho).
Agora é bordô (var(--red), height 46px, nav branco). */
.app-header{
grid-column:1/-1;
grid-row:1;
background:var(--red); /* era #1B1F27 */
border-bottom:none; /* era 1px solid; agora conecta com sidebar bordô formando L */
display:flex;
align-items:center;
height:46px; /* era 52px (mockup é 46px) */
min-height:46px;
max-height:46px;
overflow:hidden;
position:sticky;
top:0;
z-index:30;
}
.header-brand{
display:flex;
align-items:center;
gap:10px;
padding:0 14px;
height:100%;
border-right:1px solid rgba(255,255,255,.18); /* era #252B38 */
text-decoration:none;
flex-shrink:0;
overflow:hidden;
}
.header-brand:hover{background:rgba(255,255,255,.06)}
/* Ícone do logo — original é bordô sobre transparente.
Filter brightness(10) vira-o branco para contraste com header bordô. */
.header-logo-icon{
height:22px;
width:auto;
filter:brightness(10);
flex-shrink:0;
}
.header-brand-text{
color:#fff;
font-size:13px;
font-weight:700;
letter-spacing:.4px;
font-family:var(--font);
white-space:nowrap;
}
/* Logo legacy (full image — só usado se algum sítio ainda chamar) */
.header-logo{
height:26px;
width:auto;
max-width:140px;
object-fit:contain;
display:block;
flex-shrink:0;
}
.header-nav{
display:flex;
align-items:stretch;
height:100%;
padding:0 4px;
flex:1;
overflow:hidden;
}
.header-nav-link{
display:inline-flex;
align-items:center;
height:100%;
padding:0 13px; /* era 0 4px */
margin:0 2px;
text-decoration:none;
font-size:12.5px; /* era 13px */
font-weight:500; /* era 600 */
color:rgba(255,255,255,.72); /* era var(--red) — agora branco translucido */
white-space:nowrap;
cursor:pointer;
user-select:none;
font-family:var(--font);
border-bottom:2px solid transparent;
transition:color .12s,background .12s;
}
.header-nav-link:hover{color:#fff} /* era #ff6b6b */
.header-nav-link.active{
background:rgba(255,255,255,.25); /* era var(--red) */
color:#fff; /* era #000 */
font-weight:700; /* nova ênfase */
border-radius:5px;
border-bottom-color:transparent;
padding:0 13px;
margin:7px 2px;
height:calc(100% - 14px);
}
.header-nav-link.coming{
opacity:.4; /* era .35 */
cursor:not-allowed;
font-size:12.5px;
font-weight:500;
pointer-events:none;
}
.header-right{
display:flex;
align-items:center;
gap:10px;
padding:0 14px;
flex-shrink:0;
}
.header-user-chip{
font-size:12px;
color:rgba(255,255,255,.9); /* era #6A7280 */
padding:4px 10px;
background:rgba(255,255,255,.14); /* era rgba(255,255,255,.05) */
border:1px solid rgba(255,255,255,.22); /* era #2A3040 */
border-radius:14px;
white-space:nowrap;
}
.header-user-chip.offline{color:rgba(255,255,255,.55)}
.header-config-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:6px;
color:rgba(255,255,255,.85); /* era #7A8090 */
font-size:16px;
text-decoration:none;
transition:background .15s,color .15s;
}
.header-config-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.header-config-btn.active{background:rgba(255,255,255,.28);color:#fff}
/* Pill "Teste Varredura Email" — ao lado do Config (T2.5 v3.12o, 2026-05-16) */
.header-pill-teste{
display:inline-flex;
align-items:center;
height:28px;
padding:0 10px;
border-radius:14px;
background:rgba(255,255,255,.12);
color:rgba(255,255,255,.85);
font-size:11.5px;
font-weight:500;
text-decoration:none;
margin-right:6px;
transition:background .15s,color .15s;
}
.header-pill-teste:hover{background:rgba(255,255,255,.22);color:#fff}
.header-pill-teste.active{background:rgba(255,255,255,.32);color:#fff}
/* ── BD Sidebar fina — bordô em L com a topbar (mockup 2026-05-10) ───
Header bordô + sidebar bordô forma um L no canto superior esquerdo,
sem linha de separação entre as duas. */
.bd-sidebar{
grid-column:1;
grid-row:2;
background:var(--red); /* era #1B1F27 (dark) */
border-right:1px solid rgba(0,0,0,.18); /* era #252B38; subtil para separar do conteúdo */
display:flex;
flex-direction:column;
align-items:center;
padding:10px 0;
gap:3px;
overflow:visible;
position:relative;
z-index:20;
}
.bd-sidebar-item{
position:relative;
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
text-decoration:none;
color:rgba(255,255,255,.7); /* era #505868; agora branco translucido */
font-size:17px;
transition:background .15s,color .15s;
cursor:pointer;
/* P6 — fundo presente sempre, mais opaco quando active */
background:rgba(255,255,255,.15);
}
.bd-sidebar-item:hover{
background:rgba(255,255,255,.22); /* P6 — hover acima do default */
color:#fff;
}
.bd-sidebar-item.active{
background:rgba(255,255,255,.38); /* P6 — selected: bem mais opaco */
color:#fff;
}
/* Tooltip animado */
.bd-tooltip{
position:absolute;
left:calc(100% + 11px);
top:50%;
transform:translateY(-50%) translateX(-7px);
background:#262C3A;
color:#DDE0E8;
padding:5px 11px;
border-radius:6px;
font-size:12px;
font-weight:500;
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity .18s ease,transform .18s ease;
box-shadow:0 4px 16px rgba(0,0,0,.38);
border:1px solid #353C4E;
z-index:200;
font-family:var(--font);
}
.bd-tooltip::before{
content:'';
position:absolute;
right:100%;
top:50%;
transform:translateY(-50%);
border:5px solid transparent;
border-right-color:#353C4E;
}
.bd-sidebar-item:hover .bd-tooltip{
opacity:1;
transform:translateY(-50%) translateX(0);
}
/* ── Area de conteudo ────────────────────────────────────── */
.app-content{
grid-column:2;
grid-row:2;
overflow-y:auto;
overflow-x:hidden;
display:flex;
flex-direction:column;
min-height:0;
background:var(--bg);
}
/* ═══════════════════════════════════════════════════════════════
CRM 2-PANEL LAYOUT
═══════════════════════════════════════════════════════════════ */
/* CRM ocupa toda a area de conteudo via position:fixed */
.crm-page{
position:fixed;
top:52px; /* altura do topbar */
left:48px; /* largura da sidebar */
right:0;
bottom:0;
z-index:5;
background:var(--bg);
display:grid;
grid-template-rows:1fr;
overflow:hidden;
padding:10px;
}
/* minmax(0,1fr) garante que cada coluna fica a 50% mesmo se o conteudo for mais largo */
.crm-panels{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px;
overflow:hidden;
min-height:0;
}
/* Bloco E4 refresh 2026-05-11 — Split 40/60 na aba Orçamentar
(PropostaPanel à direita precisa de espaço para edição/análise). */
.crm-panels--orc{
/* T2.5 Fase B v7 (2026-05-13): 2fr 3fr = 40/60 robusto. % puro estava a
ser ignorado por algum override em conteúdo largo. fr partilha o
restante respeitando minmax(0, ...) na regra base .crm-panels. */
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
/* Coluna esquerda — 2 cards físicos separados (Listagem + Estatísticas).
Proporção fixa 60/40 (Onda 8.6): CRM 60% / Estatísticas 40% — não muda com nº de propostas.
overflow:visible para o calendário do date range picker não ser cortado. */
.crm-left-column{
display:grid;
grid-template-rows:6fr 4fr;
gap:10px;
min-height:0;
/* T2.5 Fase B v7 (2026-05-13): min-width:0 garante que a coluna respeita
o grid 2fr/3fr do .crm-panels--orc — sem isto, conteúdo intrínseco
largo dentro da listagem pode forçar a expansão para fora dos 40%. */
min-width:0;
overflow:visible;
}
/* Estatísticas escondidas (botão 📊): a listagem cresce p/ ocupar tudo */
.crm-left-column--no-stats{
grid-template-rows:1fr;
}
/* Card esquerdo (Listagem) — overflow:visible para popover do calendário sair (Onda 8.6).
O scroll interno fica no `.crm-list-scroll`. */
.crm-list-card{
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 1px 3px rgba(0,0,0,.05);
display:flex;
flex-direction:column;
overflow:visible;
min-height:0;
min-width:0;
position:relative;
}
/* Header dentro do card: casinha + pesquisa + filtros */
.crm-list-card-header{
display:flex;
align-items:center;
gap:6px;
padding:8px 10px;
border-bottom:1px solid var(--line);
background:#FAFBFC;
flex-shrink:0;
}
/* Botão Nova Proposta — ícone + texto (mockup 2026-05-10).
Fundo bordô soft, border accent — alinhado com chip do mockup. */
.crm-nova-btn{
display:inline-flex;
align-items:center;
gap:5px;
height:30px;
padding:3px 12px 3px 10px;
background:var(--red-soft);
border:1px solid var(--red-line);
border-radius:14px;
cursor:pointer;
flex-shrink:0;
transition:background .12s,border-color .12s;
font-family:var(--font);
}
.crm-nova-btn:hover{background:var(--red-ch);border-color:var(--red)}
.crm-nova-icon{
width:18px;
height:18px;
object-fit:contain;
display:block;
flex-shrink:0;
}
.crm-nova-label{
font-size:11px;
font-weight:700;
color:var(--red);
white-space:nowrap;
}
/* Input de pesquisa */
.crm-search-input{
flex:1;
min-width:0;
padding:5px 8px;
border:1px solid var(--line);
border-radius:5px;
font-size:12px;
background:#fff;
color:var(--ink);
}
.crm-search-input:focus{outline:none;border-color:var(--red)}
/* Selects de filtro */
.crm-filter-select{
padding:5px 6px;
border:1px solid var(--line);
border-radius:5px;
font-size:11.5px;
background:#fff;
color:var(--ink-2);
cursor:pointer;
}
.crm-filter-select:focus{outline:none;border-color:var(--red)}
/* Botão Anular — bordô para se ver claramente (Onda 8.6).
Antes era cinza claro; agora destaque accent quando há acções disponíveis. */
.crm-undo-btn{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:1.5px solid var(--red-line);
border-radius:6px;
font-size:14px;
background:var(--red-soft);
color:var(--red);
cursor:pointer;
flex-shrink:0;
font-weight:700;
transition:all .12s;
}
.crm-undo-btn:hover:not(:disabled){
background:var(--red);
color:#fff;
border-color:var(--red);
}
.crm-undo-btn:disabled{
opacity:.35;
cursor:not-allowed;
background:transparent;
color:var(--ink-4);
border-color:var(--line);
}
/* Subheader: labels das colunas */
.crm-list-subheader{
display:flex;
align-items:center;
gap:0;
padding:4px 8px;
background:#F5F6F8;
border-bottom:1px solid var(--line);
font-size:9.5px;
font-weight:700;
color:var(--ink-4);
text-transform:uppercase;
letter-spacing:.4px;
flex-shrink:0;
}
.clsh-num{width:36px;flex-shrink:0}
.clsh-ver{width:34px;flex-shrink:0}
.clsh-toggle{
width:18px;flex-shrink:0;
cursor:pointer;
color:var(--ink-3);
font-size:11px;
font-weight:400;
text-transform:none;
letter-spacing:0;
}
.clsh-obra{flex:1.4;min-width:0}
.clsh-cliente{flex:1;min-width:0}
.clsh-status{width:80px;flex-shrink:0}
.clsh-valor{width:84px;flex-shrink:0;text-align:right}
.clsh-data{width:42px;flex-shrink:0;text-align:right}
.clsh-count{
margin-left:auto;
font-size:9px;
font-weight:400;
color:var(--ink-4);
text-transform:none;
letter-spacing:0;
white-space:nowrap;
}
/* Lista com scroll interno */
.crm-list-scroll{
flex:1;
overflow-y:auto;
overflow-x:hidden;
min-height:0;
}
/* Tabela da lista */
table.crm-tbl{
width:100%;
border-collapse:collapse;
font-size:11.5px;
}
table.crm-tbl td{
padding:0 6px;
height:36px;
vertical-align:middle;
border-bottom:1px solid #F0F2F5;
white-space:nowrap;
}
table.crm-tbl tr:hover td{ background:#F8F9FB }
table.crm-tbl tr.row-selected td{
color:var(--red);
background:#FFF5F5;
}
table.crm-tbl tr.row-selected:hover td{ background:#FFECEC }
table.crm-tbl tr.row-dropdown td{
background:#F8F9FB;
color:var(--ink-2);
font-size:11px;
}
table.crm-tbl tr.row-arquivada td{
font-style:italic;
text-decoration:underline;
color:var(--ink-3);
}
table.crm-tbl tr.row-dropdown.row-arquivada td{
color:var(--ink-4);
}
/* Colunas da tabela */
.col-num{
width:36px;
font-size:10.5px;
font-weight:700;
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.col-ver{
width:34px;
font-size:10.5px;
font-weight:700;
color:var(--ink-2);
}
.ver-toggle{ cursor:pointer }
.ver-exp{
font-size:9px;
font-weight:400;
color:var(--ink-4);
margin-left:2px;
transition:opacity .15s;
}
.col-obra{
max-width:0;
overflow:hidden;
text-overflow:ellipsis;
font-weight:600;
color:var(--ink-1);
}
.col-cliente{
max-width:0;
overflow:hidden;
text-overflow:ellipsis;
color:var(--ink-3);
font-size:11px;
}
.col-status{ width:80px }
.col-valor{
width:84px;
text-align:right;
font-variant-numeric:tabular-nums;
font-weight:600;
color:var(--ink-1);
font-size:11px;
}
.col-adj-val{
font-size:9.5px;
font-weight:400;
color:var(--green);
display:block;
}
.col-data{
width:42px;
text-align:right;
color:var(--ink-4);
font-size:10.5px;
font-variant-numeric:tabular-nums;
}
.col-acts{
width:54px;
text-align:right;
transition:opacity .15s;
}
.crm-del-btn{
cursor:pointer;
color:#DC2626;
font-size:14px;
font-weight:700;
padding:0 3px;
user-select:none;
}
.crm-del-btn:hover{ color:#991B1B }
/* Contador de obras/propostas */
.crm-count-label{
font-size:10.5px;
color:var(--ink-4);
white-space:nowrap;
flex-shrink:0;
font-weight:400;
}
/* Botão toggle CRM ↔ Listagem */
.view-toggle-btn{
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border:1px solid var(--line-strong);
border-radius:5px;
background:#fff;
cursor:pointer;
flex-shrink:0;
transition:all .12s;
}
.view-toggle-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.view-toggle-active{ background:var(--red); border-color:var(--red); color:#fff; }
.view-toggle-icon{ font-size:14px; line-height:1; }
/* ═══════════════════════════════════════════════════════
CRM LIST — GRID ROW CARDS
Grid: Nº | V | Obra | Cliente | Valor | Envio | Status | D.Adj | V.Adj | Ações
═══════════════════════════════════════════════════════ */
/* Nº | V | Obra | Cliente | Valor | Envio | Status | D.Adj | V.Adj | Ações */
/* Nº | V | Obra | Cliente | Valor | Envio | Status | D.Adj | V.Adj | Ações */
/* Grid CRM split (mockup 2026-05-10).
Onda 5.8: Nº alargado 80→92px para Lato 900 32px selected caber sem cortar. */
:root { --crm-grid: 78px minmax(0,1fr) 44px 86px 76px 108px 56px; }
/* Cabeçalho sticky */
.crm-row-header{
display:grid;
grid-template-columns:var(--crm-grid);
column-gap:4px;
align-items:center;
padding:5px 6px; /* igual ao crm-row-card — mantém colunas alinhadas */
background:#F5F6F8;
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:2;
font-family:var(--font);
font-size:9.5px;
font-weight:700;
color:var(--ink-4);
text-transform:uppercase;
letter-spacing:.5px;
}
/* Todas as células do cabeçalho: mesma fonte, sem bold — só alinhamento difere */
.crm-row-header > * {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-family:var(--font) !important;
font-size:9.5px !important;
font-weight:700 !important;
color:var(--ink-4) !important;
letter-spacing:.5px !important;
}
/* Wrapper dos cards */
.crm-cards-body{
display:flex;
flex-direction:column;
gap:3px;
padding:5px 6px;
}
/* Card de uma proposta */
.crm-row-card{
display:grid;
grid-template-columns:var(--crm-grid);
column-gap:4px;
align-items:center;
padding:5px 6px;
background:#fff;
border:1px solid var(--line);
border-radius:4px;
cursor:pointer;
transition:background .1s, border-color .1s;
min-height:34px;
}
.crm-row-card:hover{ background:#F8F9FB; border-color:var(--line-strong); }
/* Linha SELECCIONADA — não muda fundo (preserva o fundo de status).
Só destaca: barra esquerda accent + texto obra/cliente/valor bordô + número grande bordô (.crc-num separado).
Mockup 2026-05-10. */
.crm-row-sel{
border-left:3px solid var(--red) !important;
border-color:var(--red-line);
}
.crm-row-sel .crc-obra,
.crm-row-sel .crc-cli,
.crm-row-sel .crc-val{
color:var(--red);
font-weight:700;
}
/* Sub-rows do dropdown (versões arquivadas) — cinzentadas + opacity baixa.
Italic só no texto (obra/cliente); número fica sem italic (Onda 8.8). */
.crm-row-drop{
background:#F8F9FB;
opacity:.75;
min-height:auto;
}
.crm-row-drop .crc-num{
font-style:normal; /* override italic herdado de crm-row-arq */
color:var(--ink-4);
}
.crm-row-drop .crc-obra-line,
.crm-row-drop .crc-cli-line{
font-size:11.5px;
color:var(--ink-3);
}
/* Footer Total Orçamentado (mockup 2026-05-10).
Lato 900 grande na cor INK; aparece no fim do crm-list-card. */
.crm-list-footer{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 18px;
border-top:2px solid var(--ink);
flex-shrink:0;
background:#fff;
}
.crm-list-footer-label{
font-size:9.5px;
font-weight:800;
color:var(--ink);
letter-spacing:1.1px;
text-transform:uppercase;
}
.crm-list-footer-value{
font-family:var(--font);
font-weight:900;
font-size:28px;
color:var(--ink);
font-variant-numeric:tabular-nums;
letter-spacing:-.4px;
line-height:1;
white-space:nowrap;
}
/* Background subtil por status (mockup 2026-05-10) — só aplica se não for selecionada */
.crm-row-adj:not(.crm-row-sel){ background:var(--row-adjudicado); }
.crm-row-adj:not(.crm-row-sel):hover{ background:#EBF7EE; }
.crm-row-canc:not(.crm-row-sel){ background:var(--row-cancelado); color:var(--ink-3); }
.crm-row-canc:not(.crm-row-sel):hover{ background:#FFEFEF; }
/* Microalteração C+E (2026-05-11): texto em bordô (era cinza-ink-3) para diferenciar
propostas arquivadas mesmo quando os dropdowns das versões estão todos abertos.
Reforço de selectores para vencer o color:var(--ink) específico no .lst-obra-text
e similares. O pill V mantém-se neutro (usa CodePill com paleta própria). */
.crm-row-arq:not(.crm-row-sel){ background:var(--row-arquivada); font-style:italic; color:var(--red); }
.crm-row-arq:not(.crm-row-sel) > div{ color:var(--red); }
/* Vista LISTAGEM */
.crm-row-arq:not(.crm-row-sel) .lst-obra-text,
.crm-row-arq:not(.crm-row-sel) .lst-cli,
.crm-row-arq:not(.crm-row-sel) .lst-num,
.crm-row-arq:not(.crm-row-sel) .lst-val,
.crm-row-arq:not(.crm-row-sel) .lst-env{
color:var(--red);
}
/* Vista CRM */
.crm-row-arq:not(.crm-row-sel) .crc-obra-line,
.crm-row-arq:not(.crm-row-sel) .crc-cli-line,
.crm-row-arq:not(.crm-row-sel) .crc-num,
.crm-row-arq:not(.crm-row-sel) .crc-val,
.crm-row-arq:not(.crm-row-sel) .crc-env{
color:var(--red);
}
.crm-row-arq:not(.crm-row-sel):hover{ background:#F0F0F0; }
/* ── Células das colunas ──────────────────────────── */
/* Texto geral: cinzento escuro suave */
.crm-row-card > div{
font-size:11.5px;
color:var(--ink-2);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding:0 2px;
}
/* Nº — Lato 300 22px default (Onda 8.8, igual às arquivadas).
Selected: Lato 900 32px bordô. Mesma estética em toda a lista — só selected destaca. */
.crc-num{
text-align:center;
font-family:var(--font);
font-weight:300;
font-size:22px;
color:var(--ink-5);
font-variant-numeric:tabular-nums;
letter-spacing:-.4px;
line-height:1;
transition:font-size .15s, font-weight .15s, color .15s;
}
.crm-row-sel .crc-num{
font-weight:900;
font-size:32px;
color:var(--red);
letter-spacing:-.8px;
}
/* V — centrado; seta posicionada absolutamente para não deslocar o texto.
overflow:visible vence o overflow:hidden genérico de .crm-row-card > div
(senão a seta de expandir, em right:-11px, fica cortada e o dropdown
parece não funcionar). */
.crm-row-card > .crc-ver{ overflow:visible; }
.crc-ver{
text-align:center;
font-size:11px;
color:var(--ink-3);
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.ver-clickable{
cursor:pointer;
position:relative;
display:inline-block;
text-align:center;
}
.ver-exp{
font-size:9px;
color:var(--red);
line-height:1;
transition:opacity .15s;
position:absolute;
right:-11px;
top:50%;
transform:translateY(-50%);
width:10px;
text-align:center;
}
/* Cabeçalho da coluna V — toggle */
.th-ver-toggle{
cursor:pointer;
display:inline-flex;
align-items:center;
gap:2px;
font-size:9.5px;
font-weight:700;
color:var(--ink-4);
text-transform:uppercase;
letter-spacing:.5px;
}
.th-ver-toggle .sf-arrow,
.th-ver-toggle span:last-child{ color:var(--red); }
/* Obra — alinhada à esquerda */
.crc-obra{
text-align:left;
font-size:11.5px;
color:var(--ink-2);
}
/* Cliente — centrado */
.crc-cli{ text-align:center; font-size:10.5px; color:var(--ink-3); }
/* Valor — centrado, bold */
.crc-val{
text-align:center;
font-weight:600;
font-size:11.5px;
color:var(--ink-1);
font-variant-numeric:tabular-nums;
}
/* Envio — centrado */
.crc-env{ text-align:center; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* Data Limite de entrega no CRM — 2 linhas em bordô, só aparece quando dataEnvio=null.
Quando passa do prazo, .is-overdue muda para vermelho sangue + linha extra "Atrasado X dias".
(Bloco E4 refresh 2026-05-11) */
.crc-env-dlim{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
line-height:1.15;
color:var(--red-main);
}
.crc-env-dlim-label{
font-size:9px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.4px;
opacity:.85;
}
.crc-env-dlim-date{
font-size:11px;
font-weight:700;
font-variant-numeric:tabular-nums;
}
.crc-env-dlim.is-overdue{ color:#B91C1C; }
.crc-env-dlim-overdue{
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#B91C1C;
margin-top:1px;
}
/* Status — centrado, overflow:visible para o pill não ser cortado */
.crc-sts{ text-align:center; overflow:visible !important; }
/* D.Adj — centrado */
.crc-dadj{ text-align:center; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* V.Adj — centrado, verde se adjudicado (via inline style) */
.crc-vadj{
text-align:center;
font-size:11px;
font-variant-numeric:tabular-nums;
color:var(--ink-3);
}
/* Ações — centrado, aparece on hover */
.crc-act{
display:flex;
align-items:center;
justify-content:center;
gap:4px;
transition:opacity .15s;
}
/* Botão morada */
.crm-morada-btn{
position:relative;
cursor:pointer;
font-size:13px;
user-select:none;
line-height:1;
}
.crm-morada-btn::after{
content:'Copiar Morada';
position:absolute;
bottom:calc(100% + 6px);
right:0;
background:#1B1F27;
color:#fff;
font-size:10px;
padding:4px 8px;
border-radius:5px;
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity .18s;
z-index:20;
}
.crm-morada-btn:hover::after{ opacity:1; }
/* ═══════════════════════════════════════════════════════
STATUS FILTER PILL
═══════════════════════════════════════════════════════ */
.sf-wrap{ position:relative; flex-shrink:0; }
.sf-pill{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 10px;
border-radius:20px;
border:1px solid var(--line-strong);
background:#3A3F4B;
color:#fff;
font-size:11.5px;
font-weight:500;
cursor:pointer;
white-space:nowrap;
transition:background .12s;
font-family:var(--font);
}
.sf-pill:hover{ background:#2E3340; }
.sf-pill-active{ background:#1B1F27; border-color:#1B1F27; }
.sf-arrow{ font-size:9px; opacity:.7; }
.sf-dropdown{
position:absolute;
top:calc(100% + 6px);
left:0;
background:#fff;
border:1px solid var(--line-strong);
border-radius:8px;
box-shadow:0 4px 16px rgba(0,0,0,.12);
min-width:160px;
padding:6px 0;
z-index:50;
}
.sf-option{
display:flex;
align-items:center;
gap:8px;
padding:7px 14px;
font-size:12px;
color:var(--ink-2);
cursor:pointer;
transition:background .1s;
font-family:var(--font);
}
.sf-option:hover{ background:#F5F6F8; }
.sf-option input[type=checkbox]{ accent-color:var(--red); cursor:pointer; }
.sf-clear{
display:block;
width:calc(100% - 28px);
margin:6px 14px 2px;
padding:5px;
border:none;
border-top:1px solid var(--line);
background:none;
font-size:11px;
color:var(--ink-3);
cursor:pointer;
text-align:left;
font-family:var(--font);
}
.sf-clear:hover{ color:var(--red); }
/* ═══════════════════════════════════════════════════════
DATE RANGE PICKER
═══════════════════════════════════════════════════════ */
.drp-wrap{ position:relative; flex-shrink:0; }
.drp-btn{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 10px;
border-radius:6px;
border:1px solid var(--line-strong);
background:#fff;
color:var(--ink-2);
font-size:11.5px;
font-weight:500;
cursor:pointer;
white-space:nowrap;
transition:all .12s;
font-family:var(--font);
}
.drp-btn:hover{ background:#F5F6F8; border-color:var(--ink-3); }
.drp-btn-active{ background:#FFF5F5; border-color:var(--red); color:var(--red); }
.drp-popup{
position:absolute;
top:calc(100% + 6px);
right:0;
background:#fff;
border:1px solid var(--line-strong);
border-radius:10px;
box-shadow:0 6px 24px rgba(0,0,0,.14);
padding:14px;
z-index:50;
min-width:560px;
}
.drp-hint{
text-align:center;
font-size:11px;
color:var(--ink-3);
margin-bottom:10px;
font-weight:500;
}
.drp-months{
display:flex;
gap:20px;
}
.drp-month{
flex:1;
min-width:0;
}
.drp-month-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
}
.drp-month-name{
font-size:12px;
font-weight:700;
color:var(--ink-1);
text-align:center;
flex:1;
}
.drp-nav{
background:none;
border:1px solid var(--line);
border-radius:4px;
padding:2px 8px;
font-size:13px;
color:var(--ink-3);
cursor:pointer;
line-height:1.4;
transition:all .1s;
font-family:var(--font);
}
.drp-nav:hover{ background:#F5F6F8; color:var(--ink-1); border-color:var(--ink-3); }
.drp-days-hdr{
display:grid;
grid-template-columns:repeat(7, 1fr);
text-align:center;
font-size:9.5px;
font-weight:700;
color:var(--ink-4);
text-transform:uppercase;
letter-spacing:.3px;
margin-bottom:3px;
}
.drp-days-grid{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:1px;
}
.drp-day{
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
color:var(--ink-2);
border-radius:50%;
cursor:pointer;
transition:background .1s, color .1s;
}
.drp-day:hover{ background:#F5F6F8; }
.drp-start, .drp-end{
background:var(--red) !important;
color:#fff !important;
border-radius:50%;
font-weight:700;
}
.drp-range{
background:#FFE7E7;
border-radius:0;
color:var(--ink-1);
}
.drp-footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--line);
}
.drp-range-label{
font-size:11.5px;
color:var(--ink-2);
font-variant-numeric:tabular-nums;
}
.drp-clear{
font-size:11px;
color:var(--ink-3);
background:none;
border:none;
cursor:pointer;
padding:3px 8px;
border-radius:4px;
font-family:var(--font);
transition:color .1s;
}
.drp-clear:hover{ color:var(--red); }
/* ═══════════════════════════════════════════════════════
PROPOSTA PANEL — Resumo do Orçamento
═══════════════════════════════════════════════════════ */
/* Resumo card: flex coluna — label + scroll + total bar */
.det-resumo-card{
display:flex;
flex-direction:column;
overflow:hidden;
padding:0; /* override .det-card padding — usamos padding nos filhos */
}
.det-resumo-card .section-label{
padding:10px 12px 6px;
flex-shrink:0;
border-bottom:1px solid var(--line);
margin-bottom:0;
}
/* T4 (2026-05-11): header do Resumo com label à esquerda + Orçamentista à direita */
.det-resumo-card .resumo-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.resumo-orcamentista{
display:inline-flex;
align-items:center;
gap:6px;
font-size:10px;
letter-spacing:.7px;
text-transform:uppercase;
font-weight:400;
color:var(--ink-3);
}
.resumo-orcamentista-label{
font-weight:700;
}
/* T4.1 (2026-05-11): mesma fonte do .folha-rosto-meta-value (30 dias) */
.resumo-orcamentista .inline-text{
font-family:var(--font);
font-size:11px;
font-weight:400;
color:var(--ink-3);
text-transform:none;
letter-spacing:0;
line-height:1.45;
}
.resumo-scroll{
flex:1;
overflow-y:auto;
min-height:0;
display:flex;
flex-direction:column;
gap:5px;
padding:8px 10px;
}
/* Card de capítulo (mockup 2026-05-10) — compactado para caber ~5 cards no viewport.
Antes: padding 12 14, número 26 → ~50px. Agora: padding 8 12, número 22 → ~40px. */
.resumo-cap-card{
display:grid;
grid-template-columns:34px 1fr auto;
gap:10px;
align-items:center;
padding:8px 12px;
flex-shrink:0;
background:var(--red-ch);
border:1px solid var(--red-line);
border-radius:6px;
cursor:pointer;
transition:filter .12s, transform .08s;
}
.resumo-cap-card:hover{ filter:brightness(.97); }
.resumo-cap-card:active{ transform:scale(.99); }
.resumo-cap-card-zero{ background:var(--red-ch-dark); }
.resumo-cap-num{
font-family:var(--font);
font-weight:300;
font-size:22px;
color:var(--red);
line-height:1;
font-variant-numeric:tabular-nums;
letter-spacing:-.5px;
text-align:center;
}
.resumo-cap-card-zero .resumo-cap-num{ color:#E5E7EC; }
.resumo-cap-mid{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.resumo-cap-titulo{
font-size:11.5px;
font-weight:600;
color:var(--ink);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.resumo-cap-card-zero .resumo-cap-titulo{ color:var(--ink-4); }
.resumo-cap-progress{
display:flex;
align-items:center;
gap:7px;
}
.resumo-cap-pct{
font-size:9.5px;
color:var(--red);
font-weight:700;
min-width:28px;
}
.resumo-cap-bar{
flex:1;
height:3px;
background:#EFE3E3;
border-radius:2px;
overflow:hidden;
}
.resumo-cap-bar-fill{
height:100%;
background:var(--red);
border-radius:2px;
transition:width .25s ease-out;
}
.resumo-cap-valor{
font-size:12.5px;
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
white-space:nowrap;
text-align:right;
}
.resumo-cap-adefinir{
font-size:10px;
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
color:var(--red);
}
/* Barra de total: sempre colada ao fundo do card, fora do scroll (mockup 2026-05-10) */
.resumo-total-bar{
display:flex;
align-items:baseline;
justify-content:space-between;
padding:11px 14px;
background:#fff;
border-top:2px solid var(--ink); /* sólido preto, mais marcado (mockup) */
flex-shrink:0;
}
.resumo-total-label{
font-size:10px;
font-weight:800;
text-transform:uppercase;
letter-spacing:1.1px;
color:var(--ink);
}
.resumo-total-valor{
font-family:var(--font);
font-size:18px;
font-weight:900;
color:var(--ink);
font-variant-numeric:tabular-nums;
letter-spacing:-.3px;
}
/* ═══════════════════════════════════════════════════════
PROPOSTA PANEL — card direito (crm-detail-wrapper)
═══════════════════════════════════════════════════════ */
/* Wrapper direito — agora flex container, sem bordas próprias.
Cada filho (.det-top-row -> FR + Resumo; .det-card-last -> Detalhada) ganha bordas individuais.
Mockup 2026-05-10, Onda 5.8 — separação física dos 5 cards. */
.crm-detail-wrapper{
display:flex;
flex-direction:column;
gap:10px;
background:transparent;
border:none;
border-radius:0;
box-shadow:none;
overflow:hidden;
min-height:0;
height:100%;
}
/* Estado vazio — nenhuma proposta selecionada */
.crm-detail-empty{
display:flex;
align-items:center;
justify-content:center;
height:100%;
color:var(--ink-4);
font-size:13px;
border:1px solid var(--line);
border-radius:8px;
background:#fff;
}
/* Fila superior: FR + Resumo — agora 2 cards físicos separados com gap (Onda 5.8) */
.det-top-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
border:none;
flex-shrink:0;
height:320px;
}
.det-top-row .det-card:first-child{
border-right:none;
overflow:hidden;
display:flex;
flex-direction:column;
}
/* Card genérico — cada .det-card é agora um card físico independente
(Onda 5.8): bordas + radius + shadow individuais, alinhado com os Cards 1 e 5. */
.det-card{
padding:12px 14px;
overflow:hidden;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 1px 3px rgba(0,0,0,.05);
}
/* Último card: proposta detalhada — ocupa resto, é O ÚNICO que rola. */
.det-card-last{
flex:1 1 0;
overflow:hidden auto; /* x:hidden y:auto — explícito para o sticky context */
min-height:0;
padding:0;
/* O sticky do .atv-card-header (filho de .det-list) cola no topo deste container. */
}
.det-card-last > .det-list{
/* Garante que o flex child .det-list ocupa a altura total do scroll context.
Sem isto, em alguns browsers o sticky não cola. */
min-height:100%;
}
/* Label de secção */
.section-label{
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--ink-4);
margin-bottom:8px;
}
/* ── Folha de Rosto (mockup 2026-05-10) ─────────────────────
Layout: 3 rows (header / content 2 cols / actions) sobre watermark.
Header: logo + tag PROPOSTA
Content: esquerda (obra/cliente/morada/valor) | direita (meta enviado/validade/pagamento)
Actions: ActionButton circular + Button rect pequeno
Watermark: logo-icon-black.png opacity .22 no canto inferior-direito */
.folha-rosto{
position:relative;
display:flex;
flex-direction:column;
overflow:hidden;
}
/* Watermark — logo grande translúcido, ancorado canto inferior direito */
.folha-rosto-watermark{
position:absolute;
right:-26px;
bottom:-44px;
height:200px;
width:auto;
opacity:.18;
pointer-events:none;
user-select:none;
z-index:0;
}
/* TOP: logo + tag PROPOSTA */
.folha-rosto-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-bottom:8px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
position:relative;
z-index:1;
flex-shrink:0;
}
.folha-rosto-logo{
height:24px;
width:auto;
object-fit:contain;
}
.folha-rosto-tag{
font-size:11px;
font-weight:800;
color:var(--red);
letter-spacing:1.4px;
text-transform:uppercase;
padding:3px 9px;
background:var(--red-soft);
border:1.5px solid var(--red-line);
border-radius:5px;
white-space:nowrap;
}
/* T2.5 Precificação v2 (2026-05-13): nota interna global da proposta.
Wrap em volta do pill com bolinha cinza absolute no canto superior direito.
Quando sem nota, o pill vira botão (variante --nota-btn). */
.folha-rosto-tag-wrap{
position:relative;
display:inline-block;
}
.folha-rosto-tag-nota-dot{
position:absolute;
top:-5px;
right:-5px;
width:11px;
height:11px;
border-radius:50%;
background:#7A8190;
border:1.5px solid #fff;
padding:0;
cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,0.15);
transition:transform .12s, background .12s;
}
.folha-rosto-tag-nota-dot:hover{
background:#454B57;
transform:scale(1.15);
}
.folha-rosto-tag-nota-dot:disabled{
cursor:default;
opacity:.65;
}
.folha-rosto-tag-nota-dot:disabled:hover{
transform:none;
background:#7A8190;
}
/* Variante "botão" — pill todo clicável quando ainda não há nota.
Adiciona um "+" subtil à direita em hover para dar a entender que se edita. */
.folha-rosto-tag--nota-btn{
cursor:pointer;
font-family:inherit;
position:relative;
transition:background .12s, border-color .12s;
}
.folha-rosto-tag--nota-btn:hover{
background:#fff;
border-color:var(--red);
}
.folha-rosto-tag--nota-btn::after{
content:"+";
position:absolute;
top:-7px;
right:-7px;
width:14px;
height:14px;
border-radius:50%;
background:#fff;
border:1.5px dashed var(--red-line);
color:var(--red);
font-size:11px;
font-weight:700;
line-height:11px;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity .15s;
}
.folha-rosto-tag--nota-btn:hover::after{
opacity:1;
}
/* CONTENT: 2 colunas — esquerda flex / direita 175px (era 150).
Coluna direita maior para acomodar valores grandes (pagamento longo)
sem precisar de empilhar / cortar. */
/* A1.2 T3.4 (2026-05-11): grid com pagamento na col 2 abaixo da Meta (à direita
do card). Sem border/linha — a watermark fica no fundo, conteúdo por cima. */
.folha-rosto-content{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
grid-template-rows:auto auto 1fr;
grid-template-areas:
"obra meta"
"left meta"
"left pgto";
align-items:start;
gap:8px 16px;
flex:1;
min-height:0;
position:relative;
z-index:1;
}
.folha-rosto-content.fr-wide{
grid-template-areas:
"obra obra"
"left meta"
"left pgto";
}
.fr-obra-cell{ grid-area:obra; }
.folha-rosto-left{
grid-area:left;
display:flex;
flex-direction:column;
min-width:0;
}
.fr-pgto-cell{
grid-area:pgto;
min-width:180px;
margin-top:6px;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.folha-rosto-obra{
font-family:var(--font);
font-weight:900;
font-size:22px;
color:var(--ink);
letter-spacing:-.4px;
/* Microalteração AH (2026-05-11): pill encostada ao topo visual do texto.
line-height: 1 para reduzir leading. A pill recebe margin-top negativo
para compensar o leading residual do glyph e ficar mesmo no topo. */
line-height:1;
display:flex;
align-items:flex-start;
gap:0.4em;
flex-wrap:nowrap;
}
/* Pill dentro da obra — compensa leading visual da fonte Lato 22px black */
.folha-rosto-obra > .mini-pill-wrap{
margin-top:-3px;
}
.folha-rosto-cliente{
font-size:12px;
font-weight:500;
color:var(--ink-2);
line-height:1;
display:flex;
align-items:center;
gap:0.4em;
flex-wrap:nowrap;
}
.folha-rosto-morada{
font-size:11px;
color:var(--ink-3);
line-height:1.45;
margin-bottom:8px;
}
.folha-rosto-morada > div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folha-rosto-morada-zip{ color:var(--ink-4); }
/* Zona Valor Total — destacada no fim da coluna esquerda.
margin-bottom dá folga até à linha de actions. */
.folha-rosto-valor-zone{
margin-top:auto;
padding-top:6px;
padding-bottom:8px;
}
/* Q1 — pill orçamento em cima do valor total (só CRM + por_enviar) */
.folha-rosto-valor-orc-pill{
margin-bottom:6px;
display:flex;
}
.folha-rosto-valor-label{
font-size:9px;
font-weight:700;
color:var(--ink-3);
letter-spacing:1.1px;
text-transform:uppercase;
margin-bottom:3px;
line-height:1.4;
}
.folha-rosto-valor{
font-family:var(--font);
font-weight:900;
font-size:24px;
color:var(--ink);
line-height:1;
font-variant-numeric:tabular-nums;
letter-spacing:-.5px;
white-space:nowrap;
}
/* Desconto comercial (2026-05-17): sem → desconto → com.
Só renderiza quando a obra tem desconto. */
.folha-rosto-desconto{
margin-top:8px;
padding-top:8px;
border-top:1px dashed var(--line, rgba(0,0,0,.12));
display:flex;
flex-direction:column;
gap:3px;
font-variant-numeric:tabular-nums;
}
.fr-desc-row{
display:flex;
justify-content:space-between;
gap:14px;
font-size:11px;
color:var(--ink-3);
white-space:nowrap;
}
.fr-desc-row--desc{ color:#c0392b; }
.fr-desc-row--total{
font-weight:800;
color:var(--ink);
font-size:12px;
margin-top:2px;
}
/* Coluna direita — meta (Enviado / Validade) — encostado à DIREITA do card.
A1.2 T3.3 (2026-05-11). Pagamento saiu daqui (agora em fr-pgto-cell). */
.folha-rosto-right{
grid-area:meta;
display:flex;
flex-direction:column;
gap:8px;
min-width:140px;
align-self:start;
text-align:right;
}
.folha-rosto-meta-row{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:1px;
}
.folha-rosto-meta-row-pgto{
flex-direction:column;
align-items:flex-end;
gap:2px;
}
.folha-rosto-meta-label{
font-family:var(--font);
font-size:9px;
color:var(--ink-3);
letter-spacing:.7px;
text-transform:uppercase;
font-weight:700;
white-space:nowrap;
line-height:1.2;
}
.folha-rosto-meta-value{
/* Uniforme com .folha-rosto-morada e .cond-editor (T3.6) */
font-family:var(--font);
font-size:11px;
color:var(--ink-3);
font-weight:400;
white-space:nowrap;
min-width:0;
line-height:1.45;
}
/* Os InlineText/InlineDate/InlineDropdown dentro do meta herdam tudo via font:inherit */
.folha-rosto-meta-value .inline-text,
.folha-rosto-meta-value .inline-text-input{
color:var(--ink-3);
font-weight:400;
}
/* T5.3: área clicável da validade/data limite maior — quando placeholder, fica fácil de clicar */
.folha-rosto-meta-value .inline-text{
display:inline-block;
min-width:80px;
}
.folha-rosto-meta-pgto{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:1px;
width:100%;
}
/* ACTIONS — circulares + rectangulares
margin-top maior para o separador não atropelar o valor (sintonizado com o
espaçamento do .folha-rosto-header que tem padding-bottom 8 + margin-bottom 10) */
.folha-rosto-actions{
display:flex;
gap:8px;
align-items:center;
padding-top:10px;
margin-top:18px;
border-top:1px solid var(--line);
flex-wrap:wrap;
flex-shrink:0;
position:relative;
z-index:1;
}
/* Botão secundário (rectangular pequeno) — para +V2 e PDF.
Cinza claro neutro, hover ligeiro. PDF tem alinhamento à direita. */
.fr-btn-secondary{
padding:6px 14px;
border-radius:6px;
font-size:11px;
font-weight:600;
background:#F4F5F8;
color:var(--ink-2);
border:1px solid var(--line);
cursor:pointer;
font-family:inherit;
transition:background .12s, border-color .12s;
}
.fr-btn-secondary:hover:not(:disabled){
background:#E9EBF0;
border-color:var(--line-strong);
}
.fr-btn-secondary:disabled{ opacity:.5; cursor:not-allowed; }
.fr-btn-pdf{ margin-left:auto; }
/* Botões legacy preservados para retrocompat (não usados pela FR actual) */
.fr-btn{
padding:5px 12px;
border-radius:5px;
font-size:12px;
font-weight:600;
cursor:pointer;
border:1px solid transparent;
transition:all .12s;
}
.fr-btn:disabled{ opacity:.5; cursor:not-allowed; }
.fr-btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.fr-btn-primary:hover:not(:disabled){ background:var(--red-dark); }
.fr-btn-success{ background:#2BAE66; color:#fff; border-color:#2BAE66; }
.fr-btn-success:hover:not(:disabled){ background:#1F8A50; }
.fr-btn-danger{ background:#fff; color:var(--red); border-color:#FFB5B5; }
.fr-btn-danger:hover:not(:disabled){ background:#FFE7E7; }
.fr-btn-neutral{ background:#fff; color:var(--ink-2); border-color:var(--line-strong); }
.fr-btn-neutral:hover:not(:disabled){ background:#F5F6F8; }
/* ── Proposta Detalhada — lista de atividades ───────── */
.det-list{
display:flex;
flex-direction:column;
}
/* CAP-BLOCK (Onda 8.8): sem position:relative para o sticky cap-header ancorar
no scroll context certo (.det-card-last com overflow-y:auto).
Sem overflow:hidden mas o header tem border-radius próprio nos topos.
Onda 8.9: scroll-margin-top 8px para o scrollIntoView posicionar o cap-block
imediatamente abaixo do topo do scroll, deixando o cap-header completo visível. */
.det-cap-block{
margin:8px 12px;
background:var(--panel);
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 1px 3px rgba(20,25,40,.03);
scroll-margin-top:8px;
}
.det-cap-block:first-child{ margin-top:8px; }
.det-cap-body{
/* container das atividades dentro do cap-block. T2.5 (2026-05-12):
padding-top dá ar para o gap-card abaixo do header animar sem encostar. */
padding-top:6px;
}
/* Cabeçalho de capítulo — sticky no topo do scroll do det-card-last (Onda 8.8).
Border-radius próprio nos topos (cap-block já não tem overflow:hidden). */
.det-cap-header{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:14px;
padding:13px 18px;
background:var(--red-ch);
border:none;
border-bottom:1px solid var(--red-line);
border-radius:8px 8px 0 0;
margin:0;
/* T2.5 v3.6 (2026-05-14): sticky abaixo do .atv-card-header (toolbar) que
cola em top:0. Como o cap-block aparece sempre depois do toolbar +
det-cap-gap--first (~45px), o offset natural > 33 e o sticky não puxa
antes do scroll. Trocará automaticamente conforme o scroll passa de
um cap para o seguinte. */
position:-webkit-sticky;
position:sticky;
top:33px;
/* z-index 20 (T2.5 v3.7): tem de vencer .code-pill-trevo-wrap (z:10) das
pills das ATVs abaixo, senão a pill aparece a flutuar por cima do header
sticky. Continua abaixo do .atv-card-header (z:50). */
z-index:20;
}
.det-cap-header:first-child{ margin-top:0; }
/* Número grande Lato 900 (ex: 01, 02, 03) — editável inline (A1.3 T2.2) */
.det-cap-bignum{
font-family:var(--font);
font-weight:900;
font-size:34px;
color:var(--red);
line-height:.85;
letter-spacing:-1.5px;
font-variant-numeric:tabular-nums;
flex-shrink:0;
min-width:46px;
text-align:center;
}
/* T2.3 (2026-05-12): input minimalista — tamanho do índice (2 dígitos).
Anula o min-width 120px do base. ch = largura de um caractere "0". */
.det-cap-bignum .inline-text-input{
min-width:0;
width:2.2ch;
max-width:3.5ch;
text-align:center;
padding:0 1px;
margin:0;
font-variant-numeric:tabular-nums;
}
/* Coluna texto: eyebrow em cima, título uppercase embaixo */
.det-cap-textcol{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.det-cap-eyebrow{
font-size:10px;
font-weight:700;
color:var(--red);
letter-spacing:1.3px;
text-transform:uppercase;
}
.det-cap-titulo{
font-size:14px;
font-weight:700;
color:var(--ink);
letter-spacing:.2px;
text-transform:uppercase;
line-height:1.2;
}
/* Coluna subtotal: label uppercase em cima + linha (chart + valor) à direita.
T2.5 v3.7 (2026-05-14): o chart de status vive numa flex-row junto do valor
para se mover conforme o tamanho do número (limite direito = label, limite
esquerdo = livre). */
.det-cap-subtotal{
display:flex;
flex-direction:column;
align-items:flex-end;
text-align:right;
white-space:nowrap;
}
.det-cap-subtotal-label{
font-size:9px;
font-weight:700;
color:var(--red);
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:2px;
}
.det-cap-subtotal-value{
font-family:var(--font);
font-weight:900;
font-size:16px;
color:var(--ink);
font-variant-numeric:tabular-nums;
letter-spacing:-.2px;
}
.det-cap-subtotal-adefinir{
font-size:11px;
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
color:var(--red);
}
/* .det-cap-num — legacy, mantido para retrocompat (não usado pelo PropostaPanel actual). */
.det-cap-num{
font-size:10px;
font-weight:700;
color:var(--red);
text-transform:uppercase;
letter-spacing:.5px;
flex-shrink:0;
}
/* Cabeçalho de subcapítulo — grid alinhada com atividades (Onda 8.9).
`det-sub-inner` (wrapper) fica na 1ª coluna (1fr — onde a descrição das atividades vive).
Pill e texto não esticam nem cruzam para colunas UN/QTD/€un/TOTAL. */
.det-sub-header{
display:grid;
grid-template-columns:1fr 36px 60px 86px 94px;
gap:14px;
align-items:start;
padding:12px 20px 8px;
background:#FAFBFC;
font-size:13px;
font-weight:700;
color:var(--ink);
border:none;
border-radius:0;
margin:0;
border-top:1px solid var(--line);
text-transform:uppercase;
letter-spacing:.8px;
}
.det-sub-inner{
display:flex;
align-items:flex-start;
gap:12px;
min-width:0;
line-height:1.35;
}
.det-sub-inner > .code-pill{
margin-top:1px; /* topo da pill alinhado com topo do texto */
flex-shrink:0;
}
.det-sub-inner > span{
white-space:normal;
word-break:break-word;
line-height:1.35;
}
.det-cap-body > .det-sub-header:first-child{ border-top:none; }
/* Empty state — proposta sem capítulos mostra botão grande "+ Capítulo" (A1.3 T2.1) */
.det-add-capitulo-empty{
display:block;
width:calc(100% - 40px);
margin:24px 20px;
padding:18px 16px;
background:var(--red-soft);
border:1px dashed var(--red-line);
color:var(--red);
font-family:var(--font);
font-size:13px;
font-weight:700;
letter-spacing:0.6px;
text-transform:uppercase;
border-radius:6px;
cursor:pointer;
transition:background 0.15s;
}
.det-add-capitulo-empty:hover{ background:#FEE2E2; }
/* Gaps entre capítulos — toda a zona é clicável; hover mostra prévia do header
(A1.3 T2.2 — 2026-05-11). Sem margin lateral para a zona ocupar largura toda. */
.det-cap-gap{
height:12px;
cursor:pointer;
transition:height 0.22s ease;
overflow:hidden;
display:flex;
align-items:stretch;
justify-content:stretch;
}
.det-cap-gap--first{ margin-top:0; }
.det-cap-gap--last{ margin-bottom:0; }
.det-cap-gap:hover{
height:78px;
}
.det-cap-gap-ghost{
display:grid;
grid-template-columns:auto 1fr auto;
gap:14px;
align-items:center;
background:var(--red-soft);
border:1px dashed var(--red-line);
padding:14px 20px;
margin:6px 20px;
border-radius:8px;
width:calc(100% - 40px);
opacity:0;
transform:translateY(-6px);
transition:opacity 0.18s ease 0.05s, transform 0.18s ease 0.05s, background 0.15s;
pointer-events:none;
}
.det-cap-gap:hover .det-cap-gap-ghost{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.det-cap-gap-ghost:hover{ background:#FEE2E2; }
.det-cap-bignum--ghost{
color:var(--red);
font-weight:900;
font-size:32px;
line-height:1;
}
.det-cap-titulo--ghost{
color:var(--red);
font-style:italic;
opacity:0.85;
}
/* Zona de eliminação do capítulo — hover do header faz o subtotal deslizar
para a esquerda e aparece um ícone de lixo grande à direita (A1.3 T2.2).
Só aparece quando a proposta está editável (em /orcamentos). No CRM o
header é estático (sem animação).
T2.5 v3.7 (2026-05-14): REMOVIDO position:relative — estava a anular o
position:sticky declarado mais acima (mesma especificidade, regra abaixo
ganhava). Como sticky também cria containing block para children abs,
.det-cap-trash continua a posicionar-se contra o header. */
.det-cap-header{ overflow:hidden; }
.det-cap-subtotal{
transition:transform 0.22s ease, opacity 0.22s ease;
}
.crm-detail-wrapper--editable .det-cap-header:hover .det-cap-subtotal{
transform:translateX(-72px);
opacity:0.4;
}
.det-cap-trash{
position:absolute;
top:0;
right:0;
bottom:0;
width:64px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
border:none;
color:#5e1212; /* bordô escuro — destaca-se sobre o rosa */
cursor:pointer;
padding:0;
opacity:0;
transform:translateX(20px);
transition:opacity 0.18s ease 0.05s, transform 0.22s ease, background 0.15s;
}
.crm-detail-wrapper--editable .det-cap-header:hover .det-cap-trash{
opacity:1;
transform:translateX(0);
}
.det-cap-trash:hover{
background:rgba(94,18,18,0.10);
}
/* No CRM (não editável) o botão lixo nunca aparece e o cursor do header
não convida ao hover. */
.crm-detail-wrapper:not(.crm-detail-wrapper--editable) .det-cap-trash{
display:none;
}
/* ──────────────────────────────────────────────────────────────────────────
GAP-CARD DE ITEMS (T2.5 — 2026-05-12)
Card único entre items de um capítulo, com 3 zonas clicáveis:
┌───────────────────┬──────────────┐
│ │ + Subcap │
│ + Atividade ├──────────────┤
│ │ + Linha aux │
└───────────────────┴──────────────┘
Quando dentro de subcap/linha aux, só mostra 2 zonas (sem +Subcap),
layout 50/50 — usa modificador .det-item-gap-card--two.
Hover na zona pequena (10px) abre o card (64px). Container vazio: aberto sempre.
────────────────────────────────────────────────────────────────────────── */
.det-item-gap{
height:10px;
cursor:pointer;
transition:height 0.22s ease;
overflow:hidden;
display:flex;
align-items:stretch;
justify-content:stretch;
}
.det-item-gap:hover,
.det-item-gap--always-open{
height:64px;
}
.det-item-gap--always-open{ cursor:default; }
.det-item-gap-card{
display:grid;
grid-template-columns:1fr 220px;
grid-template-rows:1fr 1fr;
gap:0;
background:var(--red-soft);
border:1px dashed var(--red-line);
margin:4px 20px;
border-radius:8px;
width:calc(100% - 40px);
opacity:0;
transform:translateY(-4px);
transition:opacity 0.18s ease 0.05s, transform 0.18s ease 0.05s;
pointer-events:none;
overflow:hidden;
}
.det-item-gap:hover .det-item-gap-card,
.det-item-gap--always-open .det-item-gap-card{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.det-item-gap-zone{
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
color:var(--red);
text-transform:uppercase;
letter-spacing:.5px;
padding:8px 12px;
cursor:pointer;
transition:background 0.12s;
background:transparent;
border:none;
font-family:var(--font);
}
.det-item-gap-zone:hover{ background:#FEE2E2; }
.det-item-gap-zone--atv{
grid-column:1;
grid-row:1 / span 2;
border-right:1px dashed var(--red-line);
}
.det-item-gap-zone--sub{
grid-column:2;
grid-row:1;
border-bottom:1px dashed var(--red-line);
}
.det-item-gap-zone--aux{
grid-column:2;
grid-row:2;
}
/* Variante 2-zonas (dentro de subcap/linha aux): 50/50 atv vs aux, sem coluna direita partida */
.det-item-gap-card--two{
grid-template-columns:1fr 1fr;
grid-template-rows:1fr;
}
.det-item-gap-card--two .det-item-gap-zone--atv{
grid-column:1;
grid-row:1;
border-right:1px dashed var(--red-line);
}
.det-item-gap-card--two .det-item-gap-zone--aux{
grid-column:2;
grid-row:1;
border:none;
}
/* Linha Auxiliar — visual mais leve que subcapítulo (A1.3 T1 — 2026-05-11).
Mesma grid das atividades para alinhamento, mas sem uppercase + peso mais discreto.
Serve para agrupar atividades sob um título (ex: "Fornecimento e montagem de:"). */
.det-linha-aux-header{
display:grid;
grid-template-columns:1fr 36px 60px 86px 94px;
gap:14px;
align-items:start;
padding:8px 20px 4px;
background:transparent;
font-size:12px;
font-weight:600;
color:var(--ink-2);
border:none;
margin:0;
font-style:italic;
}
.det-linha-aux-inner{
display:flex;
align-items:flex-start;
gap:10px;
min-width:0;
line-height:1.35;
}
.det-linha-aux-inner > .code-pill{
margin-top:1px;
flex-shrink:0;
}
.det-linha-aux-inner > span{
white-space:normal;
word-break:break-word;
line-height:1.35;
}
.det-codigo{
font-size:10px;
font-weight:700;
color:var(--ink-4);
min-width:30px;
flex-shrink:0;
letter-spacing:.3px;
}
/* Cabeçalho fixo das colunas — Onda 8.9: alinhado com cor cinza das colunas (UN/QTD/€un). */
/* Selector .atv-card.atv-card-header (especificidade 020) para vencer
a regra `.atv-card { position: relative }` declarada mais abaixo no
ficheiro (linha ~6717), que estava a sobrescrever o sticky.
z-index alto (50) para passar à frente dos pills de código (que têm
position:relative + bolinhas com z:10) quando o conteúdo scrolla. */
.atv-card.atv-card-header{
display:grid;
grid-template-columns:1fr 36px 60px 86px 94px;
align-items:center;
gap:4px;
padding:8px 20px;
background:#F5F6F8;
border-bottom:2px solid var(--line);
font-size:10px;
font-weight:700;
color:var(--ink-4);
text-transform:uppercase;
letter-spacing:.6px;
position:-webkit-sticky;
position:sticky;
top:0;
z-index:50;
flex-shrink:0;
align-self:stretch;
box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.atv-header-title{
color:var(--ink-3);
text-transform:none;
letter-spacing:0;
font-weight:600;
font-size:11px;
}
/* Atividade — row dentro do det-cap-body (mockup 2026-05-10, Onda 5.6).
Sem border individual; separadores via border-top entre rows; padding generoso;
font 14px line-height 1.55 para respiração. Texto descrição limita-se a 70% (Onda 4.7). */
.atv-card{
display:grid;
grid-template-columns:1fr 36px 60px 86px 94px;
align-items:flex-start;
padding:14px 20px;
background:#fff;
border:none;
border-radius:0;
margin:0;
font-size:14px;
color:var(--ink);
gap:14px;
transition:background .12s;
border-top:1px solid var(--line);
line-height:1.55;
font-weight:500;
}
/* Primeira atividade dentro do cap-block — sem border-top (já tem o cap-header em cima) */
.det-cap-body > .atv-card:first-child,
.det-cap-body > .det-sub-header + .atv-card{
border-top:none;
}
.atv-card:hover{ background:#FAFBFC; }
/* Descrição: pill código + texto. Texto limita-se a ~70% da célula para reservar
espaço a notas futuras (orçamentação — vermelho italico bordô) que vão
aparecer ao lado da descrição.
Onda 8.9: pill alinhada ao TOPO do texto (não ao centro). */
.atv-desc{
display:flex;
align-items:flex-start;
gap:12px;
min-width:0;
line-height:1.55;
}
/* T2.5 F0.5 / Fase B v3 (2026-05-13) — RODELA com FURO no meio.
8 botões equidistantes (45° entre cada) ao longo de um anel branco com
furo central. O furo deixa ver o pill da atividade através e mantém-no
clicável. Botões minimalistas (38px) com cores alinhadas com ActionButton
da folha de rosto. */
.pill-trevo-host{
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
flex-shrink:0;
/* T2.5 Fase B v8: cria stacking context próprio + z-index alto para o pill
ficar SEMPRE em cima de qualquer elemento que possa estar a sobrepor
(cards de outras colunas com overflow estourado, etc.). */
z-index:10;
isolation:isolate;
}
/* Wrapper button do CodePill — sem estilo próprio, só capture do click.
T2.5 Fase B v8 (2026-05-13): position:relative + z-index alto garante que
o pill fica POR CIMA de elementos invisíveis que possam estar a sobrepor
(overflow de outras colunas, tooltips órfãos, etc.). */
.pill-trevo-pill-btn{
background:none;
border:none;
padding:0;
margin:0;
font:inherit;
cursor:pointer;
display:inline-flex;
align-items:center;
position:relative;
z-index:9999;
pointer-events:auto;
}
.pill-trevo-pill-btn:focus{
outline:none;
}
.pill-trevo{
/* Container redondo invisível, 180px à volta do pill central. */
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
width:180px;
height:180px;
pointer-events:none;
z-index:30;
}
/* T2.5 Fase C v3 (2026-05-13): quando aberto, captura hover (mouseenter/leave)
no container inteiro para detectar transições suaves entre botões da rodela.
Como pointer-events:auto cobre o pill central, o click no pill passa a ser
tratado pelo onClick do próprio popover (que ignora zones). */
.pill-trevo--open{
pointer-events:auto;
}
/* ── anel SVG donut — DECORATIVO apenas (pointer-events:none).
O browser não respeita fiavelmente `visiblePainted` no