/* ============================================================================
   55Onze OS — Design System
   Identidade: concreto + estrutura metálica. Neutros de concreto (viés frio-verde),
   petróleo como cor de interface, âmbar de sinalização reservado à marca.
   Paleta categórica validada (OKLab/CVD) para os dois temas.
   ========================================================================== */

:root{
  color-scheme: light;

  /* — neutros: concreto — */
  --ground:#EEF0ED; --surface:#FFFFFF; --surface-2:#F7F8F5; --surface-3:#E8EBE6;
  --line:#DCDFD9; --line-2:#C4C9C1; --line-3:#A9AFA7;
  --ink:#141817; --ink-2:#4A534F; --ink-3:#78827D; --ink-4:#9BA39E;

  /* — marca — */
  --brand:#0F4C5C; --brand-2:#0B3A46; --brand-3:#082B34;
  --brand-lt:#3C7B8C; --brand-soft:#E2EEF1; --brand-soft-2:#CFE3E8; --on-brand:#FFFFFF;
  --mark:#E4A11B;              /* sinalização — só identidade estrutural */
  --mark-soft:#FBF0D8;

  /* — status reservados (nunca usados como série de dados) — */
  --ok:#2E7A55;   --ok-soft:#E2F0E8;   --ok-line:#B6D8C6;
  --warn:#B26A0C; --warn-soft:#FAEDDC; --warn-line:#EAD1AC;
  --risk:#A83A32; --risk-soft:#F9E7E5; --risk-line:#EBC3BF;
  --info:#2B6E9C; --info-soft:#E4EEF6; --info-line:#BCD5E7;
  --idle:#6E7874; --idle-soft:#ECEEEA; --idle-line:#D5DAD4;

  /* — categórico (validado: banda L, chroma, CVD, contraste) — */
  --c1:#0E86A6; --c2:#D07F1E; --c3:#5B45A8; --c4:#4E9B4C;
  --c5:#A02F45; --c6:#3F9BE0; --c7:#8C6A14; --c8:#C25FA0;
  /* sequencial (magnitude) — um matiz, claro→escuro */
  --s1:#E3EFF2; --s2:#BFDCE3; --s3:#8FC2CE; --s4:#4E9DB0; --s5:#22758C; --s6:#0F4C5C;
  /* divergente */
  --d-neg:#A83A32; --d-mid:#DCDFD9; --d-pos:#2E7A55;

  --sobre-escuro:#FFFFFF;       /* texto sobre preenchimento escuro, nos dois temas */
  --sobre-foto:#FFFFFF;         /* legenda sobre foto: clara nos dois temas */
  --veu-foto:rgba(16,26,24,.82); /* véu escuro sob a legenda da foto */
  --grid:#E6E9E4;              /* linhas de grade de gráfico */
  --shadow-1:0 1px 2px rgba(16,26,24,.06);
  --shadow-2:0 6px 20px -6px rgba(16,26,24,.18), 0 2px 6px rgba(16,26,24,.06);
  --shadow-3:0 24px 60px -18px rgba(16,26,24,.34), 0 4px 12px rgba(16,26,24,.10);

  --r-sm:4px; --r:7px; --r-lg:12px; --r-pill:999px;
  --sb:264px; --sb-min:64px; --tb:56px;

  --f-display:'Archivo','Archivo Narrow',system-ui,sans-serif;
  --f-ui:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme: dark;
    --ground:#0F1315; --surface:#161B1D; --surface-2:#1C2225; --surface-3:#242B2E;
    --line:#2A3235; --line-2:#3A4448; --line-3:#4E5A5E;
    --ink:#EAEEEC; --ink-2:#AEB8B5; --ink-3:#7E8A87; --ink-4:#5F6B68;
    --brand:#3FA3BC; --brand-2:#58B6CD; --brand-3:#7CCADD;
    --brand-lt:#88C6D6; --brand-soft:#12333C; --brand-soft-2:#17414D; --on-brand:#08252D;
    --mark:#E9B24A; --mark-soft:#33270E;
    --ok:#57B183;   --ok-soft:#12291F;   --ok-line:#265440;
    --warn:#D89B3F; --warn-soft:#2C2110; --warn-line:#5A431A;
    --risk:#DD7168; --risk-soft:#2E1715; --risk-line:#5E2E29;
    --info:#5EA3D2; --info-soft:#132633; --info-line:#2A4B63;
    --idle:#8B9793; --idle-soft:#1E2426; --idle-line:#333C3F;
    --c1:#2E97B2; --c2:#CC7C26; --c3:#8878D0; --c4:#3D8C4C;
    --c5:#D4707C; --c6:#3F97D2; --c7:#A78A36; --c8:#C468A6;
    --s1:#12333C; --s2:#194B58; --s3:#22697C; --s4:#2E8AA1; --s5:#4FADC4; --s6:#8FD3E3;
    --d-neg:#DD7168; --d-mid:#3A4448; --d-pos:#57B183;
    --grid:#252D30;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 6px 20px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    --shadow-3:0 24px 60px -18px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{ color-scheme: dark;
  --ground:#0F1315; --surface:#161B1D; --surface-2:#1C2225; --surface-3:#242B2E;
  --line:#2A3235; --line-2:#3A4448; --line-3:#4E5A5E;
  --ink:#EAEEEC; --ink-2:#AEB8B5; --ink-3:#7E8A87; --ink-4:#5F6B68;
  --brand:#3FA3BC; --brand-2:#58B6CD; --brand-3:#7CCADD;
  --brand-lt:#88C6D6; --brand-soft:#12333C; --brand-soft-2:#17414D; --on-brand:#08252D;
  --mark:#E9B24A; --mark-soft:#33270E;
  --ok:#57B183;   --ok-soft:#12291F;   --ok-line:#265440;
  --warn:#D89B3F; --warn-soft:#2C2110; --warn-line:#5A431A;
  --risk:#DD7168; --risk-soft:#2E1715; --risk-line:#5E2E29;
  --info:#5EA3D2; --info-soft:#132633; --info-line:#2A4B63;
  --idle:#8B9793; --idle-soft:#1E2426; --idle-line:#333C3F;
  --c1:#2E97B2; --c2:#CC7C26; --c3:#8878D0; --c4:#3D8C4C;
  --c5:#D4707C; --c6:#3F97D2; --c7:#A78A36; --c8:#C468A6;
  --s1:#12333C; --s2:#194B58; --s3:#22697C; --s4:#2E8AA1; --s5:#4FADC4; --s6:#8FD3E3;
  --d-neg:#DD7168; --d-mid:#3A4448; --d-pos:#57B183;
  --grid:#252D30;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 6px 20px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px -18px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:650; letter-spacing:-.012em; margin:0; text-wrap:balance; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--line-3); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* ===================== SHELL ===================== */
.app{ display:grid; grid-template-columns:var(--sb) 1fr; height:100vh; overflow:hidden; }
.app.is-collapsed{ grid-template-columns:var(--sb-min) 1fr; }

.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; position:relative; z-index:20;
}
.sb-brand{
  height:var(--tb); display:flex; align-items:center; gap:10px; padding:0 14px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.logo{ width:30px; height:30px; border-radius:6px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:-.03em; flex:0 0 auto; position:relative; }
.logo::after{ content:''; position:absolute; left:6px; right:6px; bottom:4px; height:2px; background:var(--mark); border-radius:2px; }
.sb-name{ font-family:var(--f-display); font-weight:700; font-size:14px; letter-spacing:-.02em; white-space:nowrap; }
.sb-name small{ display:block; font-family:var(--f-ui); font-weight:500; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.app.is-collapsed .sb-name,.app.is-collapsed .sb-grouptitle,.app.is-collapsed .nav-item span,
.app.is-collapsed .sb-foot-txt,.app.is-collapsed .nav-count{ display:none; }
.app.is-collapsed .nav-item{ justify-content:center; padding-inline:0; }

.sb-scroll{ flex:1 1 auto; overflow-y:auto; padding:10px 8px 18px; min-height:0; }
.sb-group{ margin-bottom:2px; }
.sb-grouptitle{
  display:flex; align-items:center; gap:6px; width:100%; background:none; border:0; cursor:pointer;
  padding:9px 8px 5px; font-family:var(--f-display); font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.sb-grouptitle:hover{ color:var(--ink-2); }
.sb-grouptitle .caret{ margin-left:auto; transition:transform .15s ease; opacity:.6; }
.sb-group.collapsed .caret{ transform:rotate(-90deg); }
.sb-group.collapsed .sb-items{ display:none; }
.nav-item{
  display:flex; align-items:center; gap:9px; padding:6.5px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:13px; font-weight:450; cursor:pointer; position:relative;
  border-left:3px solid transparent; margin-bottom:1px; white-space:nowrap;
}
.nav-item:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.nav-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:600; border-left-color:var(--mark); }
.nav-item svg{ flex:0 0 auto; opacity:.85; }
.nav-count{ margin-left:auto; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3);
  background:var(--surface-3); padding:1px 5px; border-radius:var(--r-pill); }
.nav-item.active .nav-count{ background:var(--brand); color:var(--on-brand); }
.sb-foot{ border-top:1px solid var(--line); padding:8px; display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{
  height:var(--tb); flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:0 14px; position:relative; z-index:15;
}
.topbar::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px; mask-image:linear-gradient(90deg,transparent 42%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 100%); }
.topbar > *{ position:relative; z-index:1; }
.icon-btn{
  width:32px; height:32px; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer; flex:0 0 auto;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.icon-btn.has-dot{ position:relative; }
.icon-btn.has-dot::after{ content:''; position:absolute; top:5px; right:6px; width:6px; height:6px;
  border-radius:50%; background:var(--risk); border:1.5px solid var(--surface); }

.proj-picker{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 7px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface-2); cursor:pointer; max-width:330px; min-width:0;
}
.proj-picker:hover{ border-color:var(--line-2); }
.proj-thumb{ width:26px; height:26px; border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:10px; font-weight:600; flex:0 0 auto; }
.proj-meta{ min-width:0; line-height:1.25; text-align:left; }
.proj-meta b{ display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj-meta span{ display:block; font-size:10.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.search{ flex:1 1 auto; max-width:420px; position:relative; }
.search input{
  width:100%; height:32px; padding:0 10px 0 32px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface-2); font-size:12.5px;
}
.search input::placeholder{ color:var(--ink-4); }
.search svg{ position:absolute; left:9px; top:8px; color:var(--ink-4); }
.search kbd{ position:absolute; right:8px; top:7px; font-family:var(--f-mono); font-size:10px;
  color:var(--ink-4); border:1px solid var(--line); border-radius:3px; padding:1px 4px; background:var(--surface); }

.role-switch{ display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-2); flex:0 0 auto; }
.role-switch button{ border:0; background:transparent; padding:5px 10px; font-size:11.5px; font-weight:600;
  cursor:pointer; color:var(--ink-3); display:flex; align-items:center; gap:5px; }
.role-switch button.on{ background:var(--brand); color:var(--on-brand); }

.view{ flex:1 1 auto; overflow-y:auto; min-height:0; }

/* ===================== PÁGINA ===================== */
.page{ padding:18px 22px 56px; max-width:1560px; margin:0 auto; }
.crumbs{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); margin-bottom:7px; flex-wrap:wrap; }
.crumbs i{ opacity:.5; font-style:normal; }
.page-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.page-head .ph-txt{ min-width:240px; flex:1 1 auto; }
.page-title{ font-size:22px; letter-spacing:-.022em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-sub{ color:var(--ink-3); font-size:12.5px; margin-top:3px; max-width:78ch; }
.page-actions{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.sect-label{ font-family:var(--f-display); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; margin:22px 0 10px; }
.sect-label::before{ content:''; width:14px; height:2px; background:var(--mark); border-radius:2px; flex:0 0 auto; }
.sect-label::after{ content:''; flex:1 1 auto; height:1px; background:var(--line); }

.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.tab{ padding:8px 12px; border:0; background:transparent; cursor:pointer; font-size:12.5px; font-weight:500;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.tab .cnt{ font-family:var(--f-mono); font-size:10px; background:var(--surface-3); color:var(--ink-3); padding:0 5px; border-radius:var(--r-pill); }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.c3{ grid-column:span 3; } .c4{ grid-column:span 4; } .c5{ grid-column:span 5; }
.c6{ grid-column:span 6; } .c7{ grid-column:span 7; } .c8{ grid-column:span 8; }
.c9{ grid-column:span 9; } .c12{ grid-column:span 12; }
@media (max-width:1180px){ .c3,.c4,.c5{ grid-column:span 6; } .c7,.c8,.c9{ grid-column:span 12; } }
@media (max-width:820px){ .grid > *{ grid-column:span 12; } }
.stack{ display:flex; flex-direction:column; gap:14px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.grow{ flex:1 1 auto; min-width:0; }

/* ===================== CARD ===================== */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0; }
.card.flat{ background:var(--surface-2); }
.card.lift{ box-shadow:var(--shadow-1); }
.card-head{ display:flex; align-items:flex-start; gap:12px; padding:13px 15px 0; }
.card-head.bordered{ padding-bottom:12px; border-bottom:1px solid var(--line); }
.card-title{ font-family:var(--f-display); font-size:13.5px; font-weight:650; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; }
.card-sub{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.card-tools{ margin-left:auto; display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.card-body{ padding:13px 15px 15px; }
.card-body.tight{ padding:0; }
.card-foot{ padding:10px 15px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; justify-content:space-between; }

/* ===================== KPI ===================== */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; min-width:0; }
.kpi-label{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; }
.kpi-value{ font-family:var(--f-display); font-size:25px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-top:5px; line-height:1.1; }
.kpi-value small{ font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.kpi-foot{ margin-top:6px; font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.delta{ font-family:var(--f-mono); font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.delta.up{ color:var(--ok); } .delta.down{ color:var(--risk); } .delta.flat{ color:var(--ink-3); }

/* ===================== BADGE / CHIP / DOT ===================== */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:1.5px 8px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; line-height:1.55; white-space:nowrap; border:1px solid transparent; }
.badge svg{ flex:0 0 auto; }
.b-ok{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.b-warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.b-risk{ background:var(--risk-soft); color:var(--risk); border-color:var(--risk-line); }
.b-info{ background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.b-idle{ background:var(--idle-soft); color:var(--idle); border-color:var(--idle-line); }
.b-brand{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft-2); }
.b-mark{ background:var(--mark-soft); color:var(--warn); border-color:var(--warn-line); }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface-2); font-size:11.5px; color:var(--ink-2); cursor:pointer; }
.chip:hover{ border-color:var(--line-2); }
.chip.on{ background:var(--brand-soft); border-color:var(--brand-soft-2); color:var(--brand); font-weight:600; }
.dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.hint{ font-size:11.5px; color:var(--ink-3); }
.mono{ font-family:var(--f-mono); font-size:11.5px; font-variant-ligatures:none; }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.muted{ color:var(--ink-3); }
.divider{ height:1px; background:var(--line); margin:14px 0; }
.vdiv{ width:1px; align-self:stretch; background:var(--line); }

/* ===================== BOTÕES ===================== */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px;
  font-weight:550; cursor:pointer; white-space:nowrap; }
.btn:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.btn-primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }
.btn-ghost{ border-color:transparent; background:transparent; color:var(--ink-2); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-danger{ background:var(--risk); border-color:var(--risk); color:#fff; }
.btn-sm{ padding:3.5px 9px; font-size:11.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.seg button{ border:0; background:transparent; padding:5px 11px; font-size:11.5px; cursor:pointer; color:var(--ink-3); font-weight:500; }
.seg button + button{ border-left:1px solid var(--line); }
.seg button.on{ background:var(--brand-soft); color:var(--brand); font-weight:600; }

/* ===================== TABELA ===================== */
.tablewrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.tbl th{
  text-align:left; font-family:var(--f-ui); font-size:10.5px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding:8px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2); white-space:nowrap;
}
table.tbl th.num,table.tbl td.num{ text-align:right; }
table.tbl td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tbody tr:hover td{ background:var(--surface-2); }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl td b{ font-weight:600; }
table.tbl td .sub{ display:block; font-size:11px; color:var(--ink-3); margin-top:1px; }
table.tbl.dense td{ padding:6px 12px; }
table.tbl .rowlink{ cursor:pointer; }

.list{ display:flex; flex-direction:column; }
.list-item{ display:flex; align-items:center; gap:11px; padding:10px 15px; border-bottom:1px solid var(--line); }
.list-item:last-child{ border-bottom:0; }
.list-item:hover{ background:var(--surface-2); }
.li-title{ font-size:12.5px; font-weight:550; }
.li-sub{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }

/* ===================== BARRA / MEDIDOR ===================== */
.bar{ height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; min-width:56px; }
.bar > i{ display:block; height:100%; background:var(--brand); border-radius:var(--r-pill); }
.bar.ok > i{ background:var(--ok); } .bar.warn > i{ background:var(--warn); } .bar.risk > i{ background:var(--risk); }
.bar.lg{ height:9px; }
.meter{ display:flex; align-items:center; gap:8px; }
.meter .bar{ flex:1 1 auto; }
.meter .val{ font-family:var(--f-mono); font-size:11px; color:var(--ink-2); min-width:38px; text-align:right; }
.stackbar{ display:flex; height:9px; border-radius:var(--r-pill); overflow:hidden; background:var(--surface-3); gap:2px; }
.stackbar > span{ display:block; height:100%; }

/* ===================== AVATAR ===================== */
.av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-size:10px; font-weight:700; font-family:var(--f-display); letter-spacing:-.02em;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--surface); }
.av.sm{ width:21px; height:21px; font-size:9px; }
.av.lg{ width:36px; height:36px; font-size:12.5px; }
.avs{ display:flex; }
.avs .av + .av{ margin-left:-7px; }

/* ===================== KANBAN ===================== */
.kanban{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.kcol{ flex:0 0 282px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; }
.kcol-head{ display:flex; align-items:center; gap:7px; padding:10px 12px; border-bottom:1px solid var(--line); }
.kcol-head b{ font-family:var(--f-display); font-size:11.5px; font-weight:650; letter-spacing:.02em; }
.kcol-head .cnt{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); background:var(--surface-3); padding:0 6px; border-radius:var(--r-pill); }
.kcol-body{ padding:9px; display:flex; flex-direction:column; gap:8px; max-height:560px; overflow-y:auto; }
.kcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; cursor:pointer; box-shadow:var(--shadow-1); }
.kcard:hover{ border-color:var(--line-2); }
.kcard-labels{ display:flex; gap:4px; margin-bottom:6px; flex-wrap:wrap; }
.klabel{ height:4px; width:26px; border-radius:2px; }
.kcard-title{ font-size:12.5px; font-weight:550; line-height:1.35; }
.kcard-meta{ display:flex; align-items:center; gap:9px; margin-top:8px; font-size:11px; color:var(--ink-3); flex-wrap:wrap; }

/* ===================== TIMELINE ===================== */
.timeline{ position:relative; padding-left:22px; }
.timeline::before{ content:''; position:absolute; left:6px; top:5px; bottom:5px; width:1.5px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:15px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-19px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--brand); }
.tl-dot.ok{ border-color:var(--ok); } .tl-dot.warn{ border-color:var(--warn); }
.tl-dot.risk{ border-color:var(--risk); } .tl-dot.idle{ border-color:var(--line-2); }
.tl-time{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); }
.tl-title{ font-size:12.5px; font-weight:550; margin-top:1px; }
.tl-body{ font-size:12px; color:var(--ink-2); margin-top:3px; }

/* ===================== FORMULÁRIO ===================== */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.label{ font-size:11px; font-weight:600; color:var(--ink-2); letter-spacing:.02em; display:flex; gap:5px; align-items:center; }
.label .req{ color:var(--risk); }
.input,.select,.textarea{ width:100%; padding:6.5px 10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); font-size:12.5px; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--brand); }
.textarea{ min-height:76px; resize:vertical; font-family:inherit; }
.select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px; }
.check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; cursor:pointer; }
.check input{ margin-top:2.5px; accent-color:var(--brand); }
.formgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.filters .input,.filters .select{ width:auto; min-width:130px; }

/* ===================== ESTADO VAZIO ===================== */
.empty{ text-align:center; padding:38px 20px; color:var(--ink-3); }
.empty h4{ font-size:14px; color:var(--ink-2); margin-bottom:4px; }
.empty p{ font-size:12.5px; margin:0 auto 14px; max-width:46ch; }

/* ===================== MODAL / DRAWER ===================== */
.scrim{ position:fixed; inset:0; background:rgba(10,16,15,.42); z-index:60; }
.modal{ position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(780px,calc(100vw - 40px)); max-height:86vh; overflow:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3); }
.modal-head{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2; }
.modal-body{ padding:18px; }
.modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:13px 18px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--surface); }
.drawer{ position:fixed; z-index:61; top:0; right:0; bottom:0; width:min(460px,100vw);
  background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-3); display:flex; flex-direction:column; }
.drawer-head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.drawer-body{ flex:1 1 auto; overflow-y:auto; padding:16px; }
.drawer-foot{ flex:0 0 auto; border-top:1px solid var(--line); padding:12px 16px; }

/* ===================== COPILOTO IA ===================== */
.ai-fab{ position:fixed; right:20px; bottom:20px; z-index:55; display:flex; align-items:center; gap:8px;
  padding:9px 15px 9px 12px; border-radius:var(--r-pill); border:1px solid var(--brand-2);
  background:var(--brand); color:var(--on-brand); font-weight:600; font-size:12.5px; cursor:pointer;
  box-shadow:var(--shadow-2); }
.ai-fab:hover{ background:var(--brand-2); }
.ai-msg{ display:flex; gap:9px; margin-bottom:14px; }
.ai-msg .who{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto;
  font-size:9.5px; font-weight:700; font-family:var(--f-display); }
.ai-msg.bot .who{ background:var(--brand); color:var(--on-brand); }
.ai-msg.me .who{ background:var(--surface-3); color:var(--ink-2); }
.ai-bubble{ font-size:12.5px; line-height:1.55; min-width:0; }
.ai-bubble p{ margin:0 0 7px; }
.ai-bubble ul{ margin:0 0 7px; padding-left:17px; }
.ai-bubble li{ margin-bottom:3px; }
.ai-src{ display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:10px;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px; color:var(--ink-3);
  background:var(--surface-2); margin:2px 3px 0 0; }
.ai-sugg{ display:flex; flex-direction:column; gap:6px; }
.ai-sugg button{ text-align:left; border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r);
  padding:8px 10px; font-size:12px; cursor:pointer; color:var(--ink-2); }
.ai-sugg button:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.ai-composer{ display:flex; gap:7px; align-items:flex-end; }

/* ===================== GRÁFICOS ===================== */
.chart{ width:100%; display:block; overflow:visible; }
.chart text{ font-family:var(--f-ui); fill:var(--ink-3); font-size:10px; }
.chart .axis-lbl{ fill:var(--ink-3); font-size:9.5px; }
.chart .val-lbl{ fill:var(--ink-2); font-size:10px; font-weight:600; font-family:var(--f-mono); }
.chart .grid-line{ stroke:var(--grid); stroke-width:1; }
.chart .axis-line{ stroke:var(--line-2); stroke-width:1; }
.legend{ display:flex; gap:13px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); margin-top:9px; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:9px; height:9px; border-radius:2.5px; display:block; flex:0 0 auto; }

/* Gantt */
.gantt{ overflow-x:auto; }
.gantt-grid{ min-width:760px; }
.gantt-row{ display:grid; grid-template-columns:236px 1fr; align-items:center; border-bottom:1px solid var(--line); }
.gantt-row:hover{ background:var(--surface-2); }
.gantt-lbl{ padding:6px 12px; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-right:1px solid var(--line); }
.gantt-lbl.lvl1{ font-weight:650; font-family:var(--f-display); }
.gantt-lbl.lvl2{ padding-left:26px; color:var(--ink-2); }
.gantt-track{ position:relative; height:30px; }
.gantt-bar{ position:absolute; top:8px; height:14px; border-radius:3px; background:var(--c1); overflow:hidden; }
.gantt-bar.sum{ background:var(--brand); height:9px; top:11px; border-radius:2px; }
.gantt-bar.crit{ background:var(--c5); }
.gantt-bar > i{ display:block; height:100%; background:rgba(255,255,255,.42); }
.gantt-ms{ position:absolute; top:9px; width:12px; height:12px; background:var(--mark); transform:rotate(45deg); border-radius:2px; }
.gantt-today{ position:absolute; top:0; bottom:0; width:1.5px; background:var(--risk); opacity:.75; }
.gantt-head{ display:grid; grid-template-columns:236px 1fr; border-bottom:1px solid var(--line-2); background:var(--surface-2); }
.gantt-months{ display:flex; }
.gantt-months div{ flex:1 1 0; text-align:center; font-size:10px; font-weight:600; color:var(--ink-3);
  padding:6px 0; border-left:1px solid var(--line); text-transform:uppercase; letter-spacing:.06em; }

/* Scorecard */
.dotgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(18px,1fr)); gap:3px; }
.dotgrid i{ aspect-ratio:1; border-radius:2px; background:var(--surface-3); display:block; }

.photo{ aspect-ratio:4/3; border-radius:var(--r); background:linear-gradient(135deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-4); position:relative; overflow:hidden; }
.photo span{ position:absolute; bottom:0; left:0; right:0; padding:6px 8px; font-size:10.5px;
  background:linear-gradient(transparent,rgba(0,0,0,.62)); color:#fff; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }

.callout{ display:flex; gap:10px; padding:11px 13px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface-2); font-size:12.5px; }
.callout.info{ background:var(--info-soft); border-color:var(--info-line); }
.callout.warn{ background:var(--warn-soft); border-color:var(--warn-line); }
.callout.risk{ background:var(--risk-soft); border-color:var(--risk-line); }
.callout.ok{ background:var(--ok-soft); border-color:var(--ok-line); }
.callout b{ display:block; margin-bottom:2px; }

.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:550; box-shadow:var(--shadow-2); }

.pill-tabs{ display:inline-flex; gap:3px; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); }
.pill-tabs button{ border:0; background:transparent; padding:4px 11px; border-radius:var(--r-sm);
  font-size:11.5px; cursor:pointer; color:var(--ink-3); font-weight:550; }
.pill-tabs button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }

.split{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; }
@media (max-width:1100px){ .split{ grid-template-columns:minmax(0,1fr); } }

/* Portal do cliente — densidade menor, respiro maior */
body.portal .page{ max-width:1280px; }
body.portal .kpi-value{ font-size:27px; }

/* ============================ tela de entrada =============================
   Cabe no celular porque é onde ela mais será usada: o apontador de campo
   entra pelo telefone, na obra, antes de lançar o diário do dia. */
.entrada-tela{display:block;min-height:100dvh;background:var(--ground)}
.entrada{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.entrada-cartao{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:28px 24px 20px;
  display:flex;flex-direction:column;gap:14px}
.entrada-marca{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.entrada-marca .logo{width:34px;height:34px;border-radius:var(--r);background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;flex:none}
.entrada-marca b{display:block;font-family:var(--f-display);font-size:15px;line-height:1.2}
.entrada-marca small{display:block;color:var(--ink-3);font-size:11px}
.entrada-cartao h1{margin:6px 0 0;font-family:var(--f-display);font-size:21px;line-height:1.2}
.entrada-sub{margin:0;color:var(--ink-2);font-size:13px;line-height:1.45}
.entrada-campo{display:flex;flex-direction:column;gap:5px}
.entrada-campo span{font-size:12px;font-weight:600;color:var(--ink-2)}
.entrada-campo input{width:100%;box-sizing:border-box;padding:11px 12px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.entrada-campo input:focus{outline:2px solid var(--brand-lt);outline-offset:1px;border-color:var(--brand)}
.entrada-botao{width:100%;justify-content:center;padding:11px 14px;font-size:15px;margin-top:4px}
.entrada-aviso{padding:9px 11px;border-radius:var(--r);font-size:13px;line-height:1.4;
  background:var(--risk-soft);border:1px solid var(--risk-line);color:var(--risk)}
.entrada-aviso.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.entrada-aviso.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.entrada-pe{margin:2px 0 0;color:var(--ink-3);font-size:11.5px;line-height:1.45}
.entrada-pe a{color:var(--brand);text-decoration:underline}
@media (max-width:420px){
  .entrada{padding:0}
  .entrada-cartao{max-width:none;min-height:100dvh;border:0;border-radius:0;box-shadow:none;
    justify-content:center;padding:24px 20px}
}

/* ---------------------- identidade da conta no rodapé --------------------- */
.sb-conta{position:relative}
.sb-menu{position:absolute;bottom:calc(100% + 6px);left:8px;right:8px;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-3);padding:5px;display:flex;flex-direction:column}
.sb-menu[hidden]{display:none}
.sb-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;
  background:none;border:0;border-radius:var(--r-sm);font:inherit;font-size:13px;
  color:var(--ink);text-align:left;cursor:pointer}
.sb-menu button:hover{background:var(--surface-2)}
.sb-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.sb-menu .hint{padding:6px 9px 4px;font-size:11px}

/* ======================= celular e tablet ================================
   Abaixo de 900px o menu vira gaveta e a barra superior fica só com o
   essencial: quem lança o diário na obra o faz pelo telefone, de pé, e não
   tem 264px de tela para gastar com navegação. */
.sb-abrir{display:none}
.sb-fundo{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .app.is-collapsed{grid-template-columns:1fr}

  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(84vw,var(--sb));
    transform:translateX(-100%);transition:transform .18s ease;z-index:60;box-shadow:var(--shadow-3)}
  .app.menu-aberto .sidebar{transform:none}
  .app.is-collapsed .sb-name,.app.is-collapsed .sb-grouptitle,
  .app.is-collapsed .nav-item span,.app.is-collapsed .sb-foot-txt,
  .app.is-collapsed .nav-count{display:revert}
  .app.is-collapsed .nav-item{justify-content:flex-start;padding-inline:10px}
  #btnCollapse{display:none}

  .sb-fundo{display:block;position:fixed;inset:0;z-index:55;background:rgba(16,26,24,.45);
    opacity:0;pointer-events:none;transition:opacity .18s ease}
  .app.menu-aberto .sb-fundo{opacity:1;pointer-events:auto}

  .sb-abrir{display:grid}
  .search{display:none}
  .role-switch{display:none}
  #btnNotif,#btnHelp{display:none}
  .topbar{padding:0 10px;gap:6px}
  .proj-picker{min-width:0;flex:1 1 auto;overflow:hidden}
  .proj-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  .page{padding:14px 14px 72px}
  .page-head{gap:10px}
  .page-head .ph-txt{min-width:0}
  .page-actions{width:100%}
  .page-actions .btn{flex:1 1 auto;justify-content:center}
  .ai-fab{bottom:14px;right:14px}

  /* tabela larga rola dentro do próprio cartão, nunca empurra a página */
  .card,.tablewrap{max-width:100%}
  .tablewrap,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:max-content}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-fab span{display:none}
}

/* ================== grade de permissão (contas e acessos) ================= */
.permgrid{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.permlin{display:flex;align-items:center;gap:10px;background:var(--surface);padding:6px 10px}
.permnome{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px}
.permnome b{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);flex:none;width:34px}
.permnome span{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.permvals{display:flex;gap:2px;flex:none}
.permbtn{width:30px;height:26px;border:1px solid var(--line-2);background:var(--surface-2);
  font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm)}
.permbtn:hover{border-color:var(--brand-lt);color:var(--ink)}
.permbtn.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.permoff{opacity:.42;pointer-events:none}

.obralista{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r);padding:6px}
.chkobra{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 6px;
  border-radius:var(--r-sm);cursor:pointer}
.chkobra:hover{background:var(--surface-2)}
.chkobra b{font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
@media (max-width:640px){
  .permlin{flex-wrap:wrap}
  .permnome span{white-space:normal}
}
.modal.wide{max-width:720px}
@media (max-width:900px){
  .modal,.modal.wide{max-width:none;width:100%;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    position:fixed;left:0;right:0;bottom:0;margin:0}
  .modal-body{max-height:none;overflow-y:auto}
  .modal-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line)}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
}


/* =========================== a conta, na barra superior ===================
   Fica aqui e não no rodapé do menu: no celular o menu é uma gaveta fechada,
   e quem entrou pela conta de campo não tinha como adivinhar que precisava
   abri-la para conseguir sair. */
.conta{position:relative;flex:0 0 auto}
.conta-botao{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);
  font:inherit;color:var(--ink-2);cursor:pointer}
.conta-botao:hover{border-color:var(--line-2);color:var(--ink)}
.conta-botao .av{width:24px;height:24px;font-size:10px;flex:none}
.conta-nome{font-size:12px;font-weight:600;max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conta-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-3);padding:5px;display:flex;flex-direction:column}
.conta-menu[hidden]{display:none}
.conta-cab{padding:8px 9px 6px;display:flex;flex-direction:column;gap:1px}
.conta-cab b{font-size:13px}
.conta-cab span{font-size:11px;color:var(--ink-3)}
.conta-menu hr{border:0;border-top:1px solid var(--line);margin:3px 2px}
.conta-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px;
  background:none;border:0;border-radius:var(--r-sm);font:inherit;font-size:13px;
  color:var(--ink);text-align:left;cursor:pointer}
.conta-menu button:hover{background:var(--surface-2)}
@media (max-width:560px){ .conta-nome{display:none} .conta-botao{padding:3px} }


/* ===================== foto e documento no lançamento do RDO ============== */
.fotocela{display:flex;align-items:center;gap:7px}
.fotomini{width:52px;height:40px;flex:none;border-radius:var(--r-sm);object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2);display:block}
.fotomini.vazia{display:grid;place-items:center;color:var(--ink-4);border-style:dashed}
.fotomini.sem-foto{border-color:var(--risk-line);background:var(--risk-soft)}
.fotoescolher{cursor:pointer;white-space:nowrap;padding-inline:8px}
.fotoescolher input{position:absolute;width:1px;height:1px;opacity:0}

/* galeria com foto de verdade: o quadro guarda o lugar enquanto carrega */
.photo[data-arq]{background-size:cover;background-position:center}
.photo[data-arq].com-foto svg{display:none}
.photo[data-arq].com-foto span{background:linear-gradient(transparent,var(--veu-foto));color:var(--sobre-foto)}
@media (max-width:640px){
  .fotocela{flex-direction:column;align-items:flex-start;gap:4px}
  .fotomini{width:100%;height:64px}
}


/* --------------------------- folha do RDO, também na tela ---------------- */
.folha{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;max-width:900px;margin:0 auto}
.folha-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--brand)}
.folha-cab h2{margin:0;font-family:var(--f-display);font-size:19px;line-height:1.2}
.folha-cab .hint{margin-top:2px}
.folha-num{text-align:right;flex:none}
.folha-num b{display:block;font-family:var(--f-mono);font-size:22px;line-height:1}
.folha-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;margin-bottom:16px}
.folha-grade div span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.folha-grade div b{font-size:13.5px}
.folha-assin{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:26px}
.folha-assin div{border-top:1px solid var(--ink-3);padding-top:5px;font-size:11px;color:var(--ink-2);text-align:center}
.caderno{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.caderno figure{margin:0}
.caderno img{width:100%;height:150px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);display:block}
.caderno figcaption{font-size:11.5px;line-height:1.35;padding-top:5px;color:var(--ink-2)}

/* ------------------------------------------ campo obrigatório e campo que falta */
.obrig{color:var(--risk);font-weight:700}
.input.falta,.select.falta{border-color:var(--risk)!important;background:var(--risk-soft)!important;
  box-shadow:0 0 0 2px var(--risk-line)}
/* exemplo não pode parecer valor: no diário a dica é itálica, e some do campo que falta —
   a Tag vazia mostrava 'GDT-60-01' em cinza e parecia preenchida */
[data-rdo-lancar] .input::placeholder{font-style:italic}
.input.falta::placeholder{color:transparent}

/* ------------------------------------------ cabeçalho de cartão no celular
   O seletor de diário e o botão de imprimir não cabiam em 375 px e empurravam
   a página inteira para o lado. */
@media (max-width:640px){
  .card-head{flex-wrap:wrap}
  .card-tools{flex:1 1 100%;flex-wrap:wrap;margin-left:0;gap:6px}
  .card-tools .select{flex:1 1 auto;min-width:0}
}

/* ============================== IMPRESSÃO =================================
   Fica no FIM do arquivo de propósito: regra de tela escrita depois de um bloco
   @media print vence a de impressão de mesma especificidade — foi assim que o
   caderno fotográfico saía com o tamanho da tela.

   Não existe gerador de PDF aqui: o navegador imprime em PDF pelo diálogo do
   sistema. `App.imprimir` marca a folha e esconde, com `.oculto-na-impressao`,
   cada irmão de cada ancestral dela. A primeira versão escondia um ancestral
   comum com display:none — e isso apagava a própria folha: saía página em
   branco. */
@media print{
  /* !important nos tokens: o tema escuro é declarado com seletor mais forte que
     :root, e sem isto a folha saía com texto quase branco em papel branco */
  :root{
    --ground:#FFFFFF!important; --surface:#FFFFFF!important; --surface-2:#FFFFFF!important;
    --surface-3:#F2F2F2!important; --line:#B8BDB6!important; --line-2:#8E948C!important;
    --ink:#111614!important; --ink-2:#333A37!important; --ink-3:#5A625E!important;
    --ink-4:#6F7773!important; --brand:#0F4C5C!important;
    --shadow-1:none!important; --shadow-2:none!important; --shadow-3:none!important;
  }
  @page{ size:A4 portrait; margin:14mm 12mm 16mm; }
  html,body{background:var(--ground)!important;color:var(--ink)!important;height:auto!important;overflow:visible!important}
  .sidebar,.topbar,.ai-fab,.sb-fundo,#overlay,.toast{display:none!important}
  .app{display:block!important;height:auto!important;overflow:visible!important}
  .main,.view{display:block!important;height:auto!important;overflow:visible!important}
  .page{padding:0!important;max-width:none!important}

  body.imprimindo .oculto-na-impressao{display:none!important}
  body.imprimindo .folha-imprimir{border:0!important;box-shadow:none!important;padding:0!important;max-width:none!important;margin:0!important}

  .card{border:1px solid var(--line)!important;box-shadow:none!important;break-inside:avoid}
  .kpis{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px}
  .kpi{break-inside:avoid;padding:8px!important}
  table{width:100%!important;border-collapse:collapse;font-size:10pt}
  thead{display:table-header-group}          /* o cabeçalho da tabela repete a cada página */
  tr,img,figure{break-inside:avoid}
  .tablewrap,.table-scroll{overflow:visible!important}
  a[href]{text-decoration:none;color:inherit}

  .folha-quebra{break-before:page}
  .folha-rodape{margin-top:10mm;padding-top:4mm;border-top:1px solid var(--line);
    font-size:9pt;color:var(--ink-3);display:flex;justify-content:space-between}

  /* caderno fotográfico: duas colunas, três linhas por folha */
  .caderno,.gallery{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6mm}
  .caderno figure,.gallery figure{break-inside:avoid;margin:0}
  .caderno img{width:100%;height:52mm;object-fit:cover;border:1px solid var(--line);border-radius:0}
  .gallery .photo{height:52mm}
  .caderno figcaption{font-size:8.5pt;line-height:1.3;padding-top:2mm}
}