/* Central TI — King Star Colchões
   Estilo suave e arredondado nas cores da marca: preto quente + dourado.
   Fluido: tipografia e espaçamentos com clamp(), grades que se reorganizam
   sozinhas (auto-fit) do monitor largo ao celular. */
:root {
  --bg: #eeebe4;
  --frame: #faf9f6;
  --card: #ffffff;
  --ink: #1b1812;
  --ink-2: #2e2819;
  --text: #2b2720;
  --muted: #6e6656;
  --line: #efeadf;
  --gold: #b8912f;
  --gold-2: #d9b65c;
  --gold-deep: #7c5e14;
  --wash: #f8f2e1;
  --ok: #1f8a4c;   --ok-wash: #e6f5ec;
  --warn: #b86e0a; --warn-wash: #fcf0dc;
  --bad: #d0453f;  --bad-wash: #fcebea;
  --info: #8e6d1c; --info-wash: #f8f2e1;
  --r-frame: clamp(18px, 2vw, 28px);
  --r-card: clamp(16px, 1.4vw, 20px);
  --r-ctl: 12px;
  --gap: clamp(12px, 1.4vw, 18px);
  --pad: clamp(14px, 1.6vw, 22px);
  --shadow: 0 14px 34px -16px rgba(40, 30, 10, .28);
  --shadow-sm: 0 4px 16px -8px rgba(40, 30, 10, .22);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t: .18s ease;
}
* { box-sizing: border-box; }
/* "hidden" vale sempre, mesmo quando a classe define display */
[hidden] { display: none !important; }
html { font-size: clamp(14px, 13px + .18vw, 15.5px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); line-height: 1.5; min-height: 100vh;
  background: radial-gradient(900px 500px at 0% -10%, #f6ecd2 0%, transparent 60%), radial-gradient(800px 500px at 100% 110%, #efe5cc 0%, transparent 55%), var(--bg); }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #e7cf8f; outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.85rem); font-weight: 800; }
h2 { font-size: clamp(1rem, .95rem + .25vw, 1.12rem); font-weight: 700; }
h3 { font-size: .98rem; font-weight: 600; }
p { margin: 0 0 .6rem; }
.num, .n, .kpi b, .pct, .mini b { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.ico { flex: none; }
img { max-width: 100%; }

/* ---------- moldura ---------- */
.app { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--gap); padding: var(--gap); min-height: 100vh; max-width: 1640px; margin: 0 auto; }
.rail { position: sticky; top: var(--gap); height: calc(100vh - 2 * var(--gap)); border-radius: var(--r-frame);
  background: linear-gradient(180deg, #2a241a 0%, #15120d 100%); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 4px; z-index: 50; }
.rail a.logo { width: 66px; height: auto; padding: 4px 0; margin-bottom: 14px; border-radius: 0; background: none; }
.rail a.logo:hover { background: none; }
.rail .logo img { width: 66px; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.rail a, .rail button { position: relative; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  color: #b9ad92; background: none; border: 0; cursor: pointer; transition: background var(--t), color var(--t); }
.rail a:hover, .rail button:hover { background: rgba(217, 182, 92, .14); color: #f3e3b4; text-decoration: none; }
.rail a.ativo { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--ink); box-shadow: 0 8px 18px -8px rgba(184, 145, 47, .8); }
.rail .dica { position: absolute; left: 62px; top: 50%; transform: translate(-4px, -50%); white-space: nowrap; background: var(--ink); color: #f3e3b4;
  font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); z-index: 40; box-shadow: var(--shadow-sm); }
.rail a:hover .dica, .rail a:focus-visible .dica, .rail button:hover .dica, .rail button:focus-visible .dica { opacity: 1; transform: translate(0, -50%); }
.rail .bolinha { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #1d1913; }
.rail .bolinha.ouro { background: var(--gold-2); color: var(--ink); }
.rail .sep { width: 32px; height: 1px; background: rgba(217, 182, 92, .22); margin: 8px 0; flex: none; }
.rail .fim { margin-top: auto; }

.main { background: var(--frame); border-radius: var(--r-frame); box-shadow: var(--shadow); padding: var(--pad) clamp(14px, 2.2vw, 32px) 48px; min-width: 0; animation: entra .35s ease both; }
/* Só deslocamento, sem opacidade: se o navegador pausar a animação (aba em segundo plano), a página continua visível */
@keyframes entra { from { transform: translateY(6px); } to { transform: none; } }

.barra-topo { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.8vw, 22px); }
.barra-topo .busca { flex: 1; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 0 14px; box-shadow: var(--shadow-sm); color: var(--muted); transition: box-shadow var(--t); }
.barra-topo .busca:focus-within { box-shadow: 0 0 0 3px #f1e2b8, var(--shadow-sm); }
.barra-topo .busca input { border: 0; box-shadow: none; padding: 11px 0; background: transparent; min-width: 0; }
.barra-topo .busca input:focus { box-shadow: none; }
.logo-cel { display: none; }
.logo-cel img { width: 58px; height: auto; display: block; }
.barra-topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-redondo { position: relative; width: 42px; height: 42px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--muted); flex: none; transition: color var(--t), transform var(--t); }
.btn-redondo:hover { color: var(--gold-deep); text-decoration: none; transform: translateY(-1px); }
.btn-redondo .bolinha { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #fff; }
.chip-usuario { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 5px 14px 5px 5px; box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; flex: none; }
.chip-usuario:hover { text-decoration: none; }

.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(14px, 1.8vw, 22px); }
.topo > div:first-child { min-width: 0; flex: 1 1 360px; }
.topo .sub { color: var(--muted); margin-top: 4px; }
.topo h1 .destaque { background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- avatar ---------- */
.av { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; letter-spacing: .02em; }
.av.p { width: 30px; height: 30px; font-size: .7rem; }
.av.lilas { background: #efe9fb; color: #6b4fc2; } .av.menta { background: #e2f4ea; color: #1a7a4c; }
.av.pessego { background: #fde9dc; color: #b8541f; } .av.ceu { background: #e3eefa; color: #2c62a8; }
.av.rosa { background: #fbe5ec; color: #b42a62; } .av.limao { background: #f6eed4; color: #8e6d1c; }

/* ---------- cards ---------- */
.bloco { background: var(--card); border-radius: var(--r-card); padding: var(--pad); margin-bottom: var(--gap); box-shadow: var(--shadow-sm); min-width: 0; }
.bloco > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); }
.grid > .bloco, .grid > section { margin-bottom: 0; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); margin-bottom: var(--gap); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: var(--gap); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.nota { background: var(--wash); border-radius: 16px; padding: 14px 18px; margin-bottom: var(--gap); }
.nota h3 { margin-bottom: 6px; color: var(--gold-deep); }
.nota.bad { background: var(--bad-wash); } .nota.bad h3 { color: var(--bad); }
.nota.ok { background: var(--ok-wash); } .nota.ok h3 { color: var(--ok); }
.nota.info { background: var(--info-wash); }
.flash { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 500; animation: entra .3s ease both; }
.flash.ok { background: var(--ok-wash); color: #136b38; }
.flash.erro { background: var(--bad-wash); color: #b02f29; }

/* ---------- painel ---------- */
.painel-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 350px); gap: var(--gap); align-items: start; }
.painel-grid > aside { display: grid; gap: var(--gap); align-content: start; }
.painel-grid > aside > * { margin-bottom: 0; }
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(18px, 2.2vw, 28px); color: #fff; margin-bottom: var(--gap);
  background: radial-gradient(520px 260px at 100% 0%, rgba(217, 182, 92, .55), transparent 70%), linear-gradient(125deg, #1b1812 0%, #2f281b 55%, #5c4a22 100%);
  box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 26px); align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: url('/img/padrao.png') top left / auto 100% repeat-x; opacity: .35; mix-blend-mode: screen; pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .rot { font-weight: 600; color: #e9d7a6; }
.hero .grande { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 3.6rem); font-weight: 800; line-height: 1; margin: 6px 0 18px; letter-spacing: -.02em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.hero .grande small { font-size: .95rem; font-weight: 600; color: #e9d7a6; letter-spacing: 0; }
.hero .grande small .up-ok { color: #9be0b5; } .hero .grande small .up-bad { color: #ffb1ab; }
.vidros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .vidros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vidros > .vidro:nth-child(3) { grid-column: 1 / -1; } }
.vidro { background: rgba(255, 255, 255, .94); color: var(--ink); border-radius: 16px; padding: 12px 16px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.vidro .t { font-size: .8rem; color: var(--muted); font-weight: 600; }
.vidro .v { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.vidro .v b { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; }
.anel { position: relative; width: clamp(130px, 12vw, 168px); aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .progresso { transition: stroke-dasharray .9s cubic-bezier(.2, .8, .2, 1); }
.anel .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel .centro b { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; line-height: 1; }
.anel .centro span { font-size: .74rem; color: #e9d7a6; margin-top: 5px; }

.painel-grid > div:first-child { container-type: inline-size; }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
/* 4 → 2 → 1 colunas pela largura da coluna (nunca sobra um sozinho na linha) */
@container (max-width: 820px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 330px) { .mini-stats { grid-template-columns: minmax(0, 1fr); } }
.mini { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; gap: 12px; align-items: center; color: inherit; transition: transform var(--t), box-shadow var(--t); }
a.mini:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.mini .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.mini .ic.ouro { background: var(--wash); color: var(--gold-deep); } .mini .ic.rosa { background: var(--bad-wash); color: var(--bad); }
.mini .ic.pessego { background: var(--warn-wash); color: var(--warn); } .mini .ic.menta { background: var(--ok-wash); color: var(--ok); }
.mini b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.mini span { font-size: .8rem; color: var(--muted); }

.pessoas { list-style: none; margin: 0; padding: 0; }
.pessoas li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; transition: background var(--t); flex-wrap: wrap; }
.pessoas li:hover { background: #fbf8f0; }
.pessoas .nome { font-weight: 600; color: var(--ink); line-height: 1.2; display: block; }
a.nome:hover { color: var(--gold-deep); }
.pessoas .sub { font-size: .8rem; color: var(--muted); }
.pessoas .fim { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.eq-linha { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 8px 0; }
.eq-linha .nome { font-weight: 600; color: var(--ink); }
.eq-linha .pct { text-align: right; font-weight: 800; }
.eq-linha .pct.abaixo { color: var(--bad); }
.regua { position: relative; height: 12px; background: #f3eee2; border-radius: 999px; }
.regua .feito { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #2a241a, var(--gold)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.regua .feito.abaixo { background: linear-gradient(90deg, #f08a80, var(--bad)); }
.regua .meta { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--ink); }

/* calendário */
.cal header { margin-bottom: 8px; }
.cal .mes { font-weight: 700; color: var(--ink); }
.cal .nav { display: flex; gap: 4px; }
.cal .nav a { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: var(--frame); transition: color var(--t), background var(--t); }
.cal .nav a:hover { color: var(--gold-deep); background: var(--wash); text-decoration: none; }
.cal table { width: 100%; border-collapse: collapse; text-align: center; font-size: .85rem; table-layout: fixed; }
.cal th { color: var(--muted); font-weight: 600; font-size: .7rem; padding: 6px 0; }
.cal td { padding: 2px 0; }
.cal .dia { position: relative; width: min(34px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 11px; display: grid; place-items: center; color: var(--text); }
.cal .dia.fora { color: #cdc5b3; }
.cal .dia.hoje { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--ink); font-weight: 800; box-shadow: var(--shadow-sm); }
.cal td { position: relative; }
.cal button.dia { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; transition: background var(--t); }
.cal button.dia:hover, .cal td:focus-within button.dia { background: var(--wash); }
.cal button.dia.hoje:hover, .cal td:focus-within button.dia.hoje { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.cal .pontos { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.cal .pontos i, .legenda-cal i, .pop-item .tipo { width: 5px; height: 5px; border-radius: 50%; display: block; flex: none; }
.p-atraso { background: var(--bad); } .p-prazo { background: var(--gold); } .p-tarefa { background: var(--ink); }
.cal .dia.hoje .pontos .p-prazo, .cal .dia.hoje .pontos .p-tarefa { background: var(--ink); }
.legenda-cal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.legenda-cal span { display: inline-flex; align-items: center; gap: 5px; }
/* janelinha do dia: abre ao passar o mouse ou ao tocar/focar o dia */
.pop-dia { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(280px, 82vw); padding-top: 6px; z-index: 45; text-align: left;
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; pointer-events: none; }
.pop-dia.esq { left: -4px; transform: none; } .pop-dia.dir { left: auto; right: -4px; transform: none; }
.cal td:hover > .pop-dia, .cal td:focus-within > .pop-dia { visibility: visible; opacity: 1; pointer-events: auto; }
.pop-card { background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 18px 40px -14px rgba(40, 30, 10, .45), 0 0 0 1px var(--line); }
.pop-titulo { font-size: .76rem; font-weight: 700; color: var(--muted); padding: 2px 6px 8px; }
.pop-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 10px; color: var(--text); }
.pop-item:hover { background: var(--frame); text-decoration: none; }
.pop-item .tipo { width: 8px; height: 8px; margin-top: 6px; }
.pop-item b { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pop-item small { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.pop-mais { font-size: .74rem; color: var(--muted); padding: 4px 6px 0; }
.prox { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--frame); margin-bottom: 8px; color: var(--text); transition: background var(--t), transform var(--t); }
.prox:hover { text-decoration: none; background: var(--wash); transform: translateX(2px); }
.prox .dt { width: 44px; height: 44px; border-radius: 13px; background: #fff; display: grid; place-content: center; text-align: center; flex: none; box-shadow: var(--shadow-sm); }
.prox .dt b { font-size: 1rem; line-height: 1; color: var(--ink); } .prox .dt span { font-size: .66rem; color: var(--muted); }
.prox.atrasado .dt { background: var(--bad-wash); } .prox.atrasado .dt b { color: var(--bad); }
.prox .t { font-weight: 600; color: var(--ink); font-size: .9rem; line-height: 1.25; }
.prox .s { font-size: .78rem; color: var(--muted); }

/* ---------- KPIs (outras telas) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.kpi { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.kpi b { display: block; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 800; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.kpi span { color: var(--muted); font-size: .84rem; }
.kpi .d { font-size: .82rem; font-weight: 600; }
.kpi.alerta { background: var(--bad-wash); } .kpi.alerta b { color: var(--bad); }
.up-bad, .down-bad { color: var(--bad); } .up-ok, .down-ok { color: var(--ok); } .up-warn { color: var(--warn); } .neutro { color: var(--muted); }

/* ---------- tabelas ---------- */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.t th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px; white-space: nowrap; font-size: .78rem; background: #f6f3ec; }
.t th:first-child { border-radius: 10px 0 0 10px; } .t th:last-child { border-radius: 0 10px 10px 0; }
.t td { border-bottom: 1px solid var(--line); padding: 10px; vertical-align: top; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr { transition: background var(--t); }
.t tbody tr:hover td { background: #fcfaf5; }
.t td.n, .t th.n { text-align: right; }
.t tr.destaque td { background: #fff7f6; }
.t tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
.t a { color: var(--ink); font-weight: 600; }
.t select { min-width: 160px; }

/* ---------- pílulas ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: #f2efe7; color: var(--muted); }
a.tag:hover { text-decoration: none; filter: brightness(.97); }
.tag.ok, .tag.entregue, .tag.concluido, .tag.vigente, .tag.verde { background: var(--ok-wash); color: #157341; }
.tag.warn, .tag.em_testes, .tag.em_validacao, .tag.aguardando_area, .tag.aguardando, .tag.em_renovacao, .tag.atencao, .tag.laranja { background: var(--warn-wash); color: #a45f06; }
.tag.bad, .tag.bloqueado, .tag.atrasado, .tag.critico, .tag.vencido, .tag.vermelho { background: var(--bad-wash); color: #b8322c; }
.tag.info, .tag.planejado, .tag.em_desenvolvimento, .tag.em_andamento, .tag.em_avaliacao, .tag.aberto { background: var(--wash); color: var(--gold-deep); }

.faixas { display: flex; height: 38px; border-radius: 12px; overflow: hidden; margin: 6px 0 8px; gap: 3px; }
.faixas div { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; min-width: 38px; border-radius: 10px; }
.faixas .verde { background: #2ea865; } .faixas .laranja { background: #e3a02b; } .faixas .vermelho { background: var(--bad); }

/* ---------- quadro de demandas ---------- */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(82vw, 265px), 1fr); gap: var(--gap); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.coluna { background: #f1ede4; border-radius: 18px; padding: 12px; min-height: 120px; scroll-snap-align: start; }
.coluna > h3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 12px; font-size: .92rem; }
.coluna > h3 .num { background: #fff; border-radius: 999px; padding: 0 9px; font-size: .78rem; color: var(--muted); }
.item { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: block; color: var(--text); box-shadow: 0 2px 10px -6px rgba(40, 30, 10, .3); border-left: 4px solid transparent; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.item:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); border-left-color: var(--gold); }
.item.atrasada { border-left-color: var(--bad); }
.item .titulo { font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; line-height: 1.3; }
.item .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; flex-wrap: wrap; }
.prog { height: 6px; background: #f3eee2; border-radius: 999px; margin-top: 10px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #2a241a, var(--gold)); border-radius: 999px; }

/* ---------- roadmap ---------- */
.roadmap-scroll { overflow-x: auto; }
.roadmap-scroll > div { min-width: 720px; }
.rm-linha { display: grid; grid-template-columns: clamp(150px, 22vw, 260px) 1fr; align-items: center; border-bottom: 1px solid var(--line); min-height: 36px; }
.rm-linha .rot { padding: 6px 10px 6px 0; font-size: .9rem; }
.rm-pista { position: relative; height: 36px; }
.rm-barra { position: absolute; top: 10px; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #2a241a, #57492a); }
.rm-barra.atrasada { background: var(--bad); } .rm-barra.entregue { background: #2ea865; } .rm-barra.em_testes, .rm-barra.em_validacao { background: var(--gold); }
.rm-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); z-index: 2; }
.rm-escala { display: grid; grid-template-columns: clamp(150px, 22vw, 260px) 1fr; font-size: .78rem; color: var(--muted); }
.rm-escala .marcas { position: relative; height: 20px; }
.rm-escala .marcas span { position: absolute; transform: translateX(-50%); }

/* ---------- formulários ---------- */
form.f { display: grid; gap: 14px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.s2 { grid-column: span 2; } .campo.s4 { grid-column: 1 / -1; }
.campo label { font-size: .82rem; font-weight: 600; color: var(--muted); }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid #e6e0d2; border-radius: var(--r-ctl); background: #fff; color: var(--text); width: 100%; transition: border-color var(--t), box-shadow var(--t); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px #f6ead0; }
input[type=file] { padding: 6px; }
.check { flex-direction: row; align-items: center; gap: 8px; }
.check input { width: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-ctl); border: 0; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(184, 145, 47, .9); transition: transform var(--t), filter var(--t); }
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: none; }
.btn.escuro { background: linear-gradient(135deg, #3a3122, var(--ink)); color: #f3e3b4; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
.btn.ouro { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.btn.sec { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.btn.sec:hover { color: var(--gold-deep); filter: none; }
.btn.perigo { background: var(--bad-wash); color: var(--bad); box-shadow: none; }
.btn.mini { padding: 4px 11px; font-size: .8rem; border-radius: 9px; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--gap); background: var(--card); border-radius: var(--r-card); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.filtros .campo { flex: 1 1 150px; min-width: 0; }
.filtros .campo.largo { flex: 3 1 240px; }
.abas { display: flex; gap: 4px; background: #ebe6db; padding: 4px; border-radius: 14px; margin-bottom: var(--gap); overflow-x: auto; width: fit-content; max-width: 100%; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a { padding: 7px 14px; color: var(--muted); border-radius: 11px; font-weight: 600; font-size: .88rem; white-space: nowrap; transition: background var(--t), color var(--t); }
.abas a.ativo { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.abas a:hover { text-decoration: none; color: var(--ink); }

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { padding: 8px 0 10px 18px; border-left: 2px solid #eadfc4; position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #f6ead0; }

.vazio { padding: 28px; text-align: center; color: var(--muted); }
.paginacao { margin-top: 14px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--gap); }
.login-cartao { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--shadow); animation: entra .4s ease both; }
.login-arte { color: #fff; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: clamp(220px, 50vh, 480px); position: relative; overflow: hidden;
  background: radial-gradient(420px 260px at 100% 100%, rgba(217, 182, 92, .6), transparent 70%), linear-gradient(150deg, #1b1812 0%, #2f281b 60%, #5c4a22 100%); }
.login-arte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; background: url('/img/padrao.png') top left / auto 100% repeat-x; opacity: .4; mix-blend-mode: screen; }
.login-arte > * { position: relative; z-index: 1; }
.login-arte .logo img { width: clamp(120px, 14vw, 160px); height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.login-arte p { font-size: clamp(1rem, .9rem + .4vw, 1.18rem); font-weight: 600; max-width: 340px; color: #f3e3b4; }
.login-form { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 44px); }
.login-form form { width: 100%; max-width: 320px; }


/* ---------- tarefas ---------- */
.tarefas-topo, .tarefas-pagina { max-width: 860px; margin-left: auto; margin-right: auto; }
.rodape-tarefas { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 8px; flex-wrap: wrap; }
.progresso-dia { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.progresso-dia .barra { flex: 1; height: 10px; border-radius: 999px; background: #f0eadb; overflow: hidden; }
.progresso-dia .barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2a241a, var(--gold)); transition: width .6s; }
.progresso-dia b { font-weight: 800; color: var(--ink); }
.nova-tarefa { display: grid; gap: 12px; }
.nova-tarefa .entrada { display: flex; align-items: center; gap: 10px; background: var(--frame); border-radius: 14px; padding: 0 14px; transition: box-shadow var(--t); }
.nova-tarefa .entrada:focus-within { box-shadow: 0 0 0 3px #f1e2b8; }
.nova-tarefa .entrada .ic { color: var(--gold); display: grid; }
.nova-tarefa .entrada input { border: 0; background: transparent; box-shadow: none; padding: 13px 0; font-size: 1.02rem; }
.nova-tarefa .entrada input:focus { box-shadow: none; }
.nova-tarefa .opcoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nova-tarefa .opcoes .btn { margin-left: auto; }
.nova-tarefa .data-livre { width: auto; padding: 7px 10px; }
.segmento { display: inline-flex; background: #ebe6db; border-radius: 12px; padding: 3px; }
.segmento label { cursor: pointer; position: relative; }
.segmento input, .estrela-toggle input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.segmento span { display: block; padding: 6px 13px; border-radius: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); transition: background var(--t), color var(--t); }
.segmento input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.segmento input:focus-visible + span { outline: 3px solid #e7cf8f; }
.estrela-toggle { cursor: pointer; position: relative; }
.estrela-toggle span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600; color: var(--muted); background: #f4f0e6; transition: background var(--t), color var(--t); }
.estrela-toggle input:checked + span { background: var(--wash); color: var(--gold-deep); }
.estrela-toggle input:checked + span svg { fill: currentColor; }
.estrela-toggle input:focus-visible + span { outline: 3px solid #e7cf8f; }

.secao-tarefas header h2 .cont { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: #f2eee5; color: var(--muted); font-size: .76rem; vertical-align: 2px; }
.secao-tarefas.atrasada header h2 { color: var(--bad); }
.secao-tarefas.atrasada header h2 .cont { background: var(--bad-wash); color: var(--bad); }
.lista-tarefas { list-style: none; margin: 0; padding: 0; }
.tarefa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 8px; border-radius: 14px; scroll-margin-top: 90px; transition: background var(--t); }
.tarefa + .tarefa { border-top: 1px solid var(--line); }
.tarefa:hover { background: #fcfaf5; }
.tarefa:target { background: var(--wash); }
.tarefa .marca { margin: 0; }
.check-redondo { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d6ccb4; background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; margin-top: 1px; transition: border-color var(--t), background var(--t), color var(--t); }
.check-redondo:hover { border-color: var(--gold); color: var(--gold); }
.tarefa.importante .check-redondo { border-color: var(--gold); }
.tarefa.feita .check-redondo { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: var(--gold); color: var(--ink); }
.tarefa .titulo { font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.tarefa.feita .titulo { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.tarefa .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; font-size: .8rem; }
.tarefa .meta:empty { display: none; }
.tarefa .estrela { color: var(--gold); display: inline-grid; } .tarefa .estrela svg { fill: currentColor; }
.tarefa .notas { margin-top: 4px; font-size: .86rem; color: var(--muted); white-space: pre-line; }
.acoes-tarefa { display: flex; gap: 2px; opacity: .55; transition: opacity var(--t); }
.tarefa:hover .acoes-tarefa, .tarefa:focus-within .acoes-tarefa { opacity: 1; }
.acoes-tarefa form { margin: 0; }
.btn-icone { width: 34px; height: 34px; border-radius: 10px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background var(--t), color var(--t); }
.btn-icone:hover { background: #f2eee5; color: var(--ink); }
.btn-icone.perigo:hover { background: var(--bad-wash); color: var(--bad); }
.editar-tarefa { grid-column: 2 / -1; display: grid; gap: 8px; margin-top: 6px; padding: 12px; background: var(--frame); border-radius: 12px; }
.editar-tarefa .linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.editar-tarefa .linha input[type=date] { width: auto; }
.prazo-sis { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; }
.prazo-sis + .prazo-sis { border-top: 1px solid var(--line); }
.prazo-sis .t { color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.3; display: block; }
.prazo-sis form { flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold-deep); font: inherit; cursor: pointer; text-decoration: underline; }
.bloco-tarefas .lista-tarefas .tarefa { padding: 8px 4px; }
.bloco-tarefas .mini-add { display: flex; gap: 8px; margin-top: 10px; }
.bloco-tarefas .mini-add input { padding: 8px 12px; }
@media (hover: none) { .acoes-tarefa { opacity: 1; } }
@media (max-width: 760px) {
  .nova-tarefa .opcoes .btn { margin-left: 0; flex: 1 1 100%; }
  .tarefa { grid-template-columns: auto minmax(0, 1fr); }
  .acoes-tarefa { grid-column: 2; opacity: 1; margin-left: -8px; }
  .editar-tarefa { grid-column: 1 / -1; }
  .progresso-dia { width: 100%; }
}

/* ---------- pontos de quebra ---------- */
@media (max-width: 1280px) {
  .painel-grid { grid-template-columns: minmax(0, 1fr); }
  .painel-grid > aside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
  .g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .campo.s2 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .rail { display: none; }
  .logo-cel { display: block; flex: none; }
  .main { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .barra-topo .chip-usuario span:last-child { display: none; }
  .barra-topo .chip-usuario { padding: 5px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .anel { order: -1; justify-self: center; }
  .eq-linha { grid-template-columns: minmax(0, 1fr) 52px; } .eq-linha .regua { grid-column: 1 / -1; }
  .login-cartao { grid-template-columns: 1fr; }
  .topo .acoes { width: 100%; } .topo .acoes .btn { flex: 1 1 auto; }
  .ocultar-celular { display: none !important; }
  .filtros { padding: 12px; gap: 10px; }
  .filtros .campo { flex: 1 1 calc(50% - 5px); }
  .filtros .campo.largo { flex-basis: 100%; }
  .filtros > .btn { flex: 1 1 auto; }
  .t td, .t th { padding: 8px; }
}
/* menu lateral em telas baixas (notebook 768px de altura): itens mais compactos, sem rolagem que cortaria as dicas */
@media (min-width: 761px) and (max-height: 860px) {
  .rail { padding: 12px 0; gap: 2px; }
  .rail a.logo { margin-bottom: 8px; } .rail .logo img { width: 54px; }
  .rail a, .rail button { width: 42px; height: 40px; border-radius: 12px; }
  .rail .sep { margin: 4px 0; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .rail a, .rail button { height: 34px; }
  .rail .logo img { width: 44px; }
}

/* ---------- celular: barra inferior + painel "Mais" ---------- */
.nav-cel, .folha, .folha-fundo { display: none; }
@media (max-width: 760px) {
  .nav-cel { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(40, 30, 10, .25);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .nav-cel a, .nav-cel button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none;
    color: var(--muted); font: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .nav-cel .ic { position: relative; width: 52px; height: 32px; border-radius: 999px; display: grid; place-items: center; transition: background var(--t), color var(--t); }
  .nav-cel .rot { font-size: .7rem; font-weight: 600; line-height: 1; }
  .nav-cel .ativo { color: var(--ink); }
  .nav-cel .ativo .ic { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--ink); }
  .nav-cel .cont { position: absolute; top: -2px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff;
    font-size: .62rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }

  .folha-fundo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(27, 24, 18, .45); opacity: 0; transition: opacity .2s; }
  .folha:not([hidden]) { display: block; position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, .35);
    transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  body.folha-aberta .folha { transform: none; }
  body.folha-aberta .folha-fundo { opacity: 1; }
  .folha:focus { outline: none; }
  .folha .puxador { width: 44px; height: 5px; border-radius: 3px; background: #e3ddcf; margin: 0 auto 14px; }
  .folha-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .folha-grade a, .folha-grade button { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 6px; border-radius: 16px;
    background: var(--frame); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; border: 0; width: 100%; cursor: pointer; text-decoration: none; }
  .folha-grade form { display: contents; }
  .folha-grade .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--gold-deep); box-shadow: var(--shadow-sm); }
  .folha-grade .ativo { background: var(--wash); }
  .folha-grade .ic.sair { color: var(--bad); }
  .folha-grade .ic { position: relative; }
  .folha-grade .cont { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
  .nav-cel .cont.ouro { background: var(--gold); color: var(--ink); }
}
@media (hover: none) { .item:hover, a.mini:hover, .btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .rail, .barra-topo, .acoes, .filtros { display: none !important; } .app { display: block; } .main { box-shadow: none; } }

/* avatar com foto */
img.av.foto { object-fit: cover; background: #eee; }
.av.g { width: 88px; height: 88px; font-size: 1.6rem; }

/* ---------- equipe ---------- */
.cartoes-pessoa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.cartao-pessoa { background: var(--card); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-sm); color: var(--text); display: grid; gap: 14px; transition: transform var(--t), box-shadow var(--t); }
.cartao-pessoa:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.topo-pessoa { display: flex; align-items: center; gap: 12px; }
.topo-pessoa .av { width: 48px; height: 48px; font-size: .9rem; }
.topo-pessoa b { display: block; color: var(--ink); font-size: 1.02rem; }
.topo-pessoa span { font-size: .8rem; color: var(--muted); }
.cartao-pessoa .numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--frame); border-radius: 14px; padding: 10px 6px; text-align: center; }
.cartao-pessoa .numeros b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.cartao-pessoa .numeros span { font-size: .7rem; color: var(--muted); }
.rodape-pessoa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.perfil-topo { display: flex; align-items: center; gap: 16px; }
.form-foto label { cursor: pointer; }
.assunto-linha { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9rem; }
.assunto-linha + .assunto-linha { border-top: 1px solid var(--line); }
.assunto-linha b { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 760px) { .perfil-topo .av.g { width: 64px; height: 64px; font-size: 1.2rem; } }

/* ---------- causas ---------- */
.causa { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 4px; }
.causa + .causa { border-top: 1px solid var(--line); }
.causa-pos { width: 30px; height: 30px; border-radius: 10px; background: var(--wash); color: var(--gold-deep); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.causa:nth-child(-n+4) .causa-pos { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--ink); }
.causa-cab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.causa-cab b { color: var(--ink); line-height: 1.3; }
.causa-num { font-weight: 800; font-size: 1.15rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.causa-num small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.barra-causa { height: 8px; border-radius: 999px; background: #f3eee2; margin: 8px 0; }
.barra-causa i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2a241a, var(--gold)); }
.barra-causa.fina { height: 6px; margin: 0; }
.causa-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .8rem; color: var(--muted); }
.causa-det { margin-top: 6px; }
.causa-det summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--gold-deep); width: fit-content; }
.causa-det p { margin: 6px 0 0; }
.causa-acao { padding-top: 2px; }
.linha-barra { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding: 6px 0; font-size: .88rem; }
.linha-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-barra b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .causa { grid-template-columns: 30px minmax(0, 1fr); }
  .causa-acao { grid-column: 2; }
}

/* ---------- impacto ---------- */
.hero-impacto { grid-template-columns: minmax(0, 1fr); }
.impacto-item { padding: 14px 4px; display: grid; gap: 8px; }
.impacto-item + .impacto-item { border-top: 1px solid var(--line); }
.impacto-item .cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.impacto-item .t { color: var(--ink); font-weight: 700; }
.numeros-impacto { display: flex; gap: 8px; flex-wrap: wrap; }
.numeros-impacto > div { background: var(--frame); border-radius: 12px; padding: 6px 12px; text-align: right; }
.numeros-impacto > div.destaque { background: var(--wash); }
.numeros-impacto b { display: block; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.numeros-impacto span { font-size: .72rem; color: var(--muted); }
.impacto-item .efeito { font-size: .88rem; background: var(--ok-wash); border-radius: 12px; padding: 8px 12px; }
.impacto-item .memoria { font-size: .84rem; color: var(--muted); white-space: pre-line; border-left: 3px solid var(--gold-line, #e8dcb8); padding-left: 10px; }
.ia-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--frame); border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.ia-barra .btn[disabled] { opacity: .45; }
textarea.ia-preenchido { border-color: var(--gold-2); background: #fffdf6; }

/* ---------- v3: faixas de meta, dicas, menu com nomes ---------- */
/* Cor pela distância da meta: verde bateu, âmbar até 10 p.p. abaixo, vermelho longe, cinza amostra pequena */
.st-ok { color: var(--ok); } .st-perto { color: var(--warn); } .st-longe { color: var(--bad); } .st-sem, .st-amostra { color: var(--muted); }
b.st-ok, b.st-perto, b.st-longe, td.st-perto, td.st-longe { font-weight: 700; }
.regua .feito.f-ok { background: linear-gradient(90deg, #2a241a, var(--gold)); }
.regua .feito.f-perto { background: linear-gradient(90deg, #f5c271, var(--warn)); }
.regua .feito.f-longe { background: linear-gradient(90deg, #f08a80, var(--bad)); }
.regua .feito.f-amostra, .regua .feito.f-sem { background: repeating-linear-gradient(45deg, #cfc6b3 0 6px, #ddd5c4 6px 12px); }
.eq-linha .pct small { display: block; font-size: .64rem; font-weight: 600; line-height: 1.15; white-space: normal; color: var(--muted); }
.eq-linha .pct.st-ok { color: var(--ok); } .eq-linha .pct.st-perto { color: var(--warn); } .eq-linha .pct.st-longe { color: var(--bad); }
.eq-sub { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.eq-sub .vol { color: var(--ink); font-weight: 800; }
.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark polyline { stroke: var(--gold-deep); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--ink); }
.spark .spark-meta { stroke: #d9cfb8; stroke-width: 1; stroke-dasharray: 2 2; }
.link-forte { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--gold-deep); }

/* anel: a cor acompanha a distância da meta (dourado só quando bate) */
.anel-perto .centro b { color: #ffd08a; } .anel-longe .centro b { color: #ffb4ab; }
.hero .rot-safra { font-weight: 500; color: #cdbb8c; }
.hero .vidro { color: var(--ink); }
a.vidro:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--gold-2), 0 10px 24px -14px rgba(0, 0, 0, .6); }
.vidro .p90 { font-size: .74rem; color: var(--muted); margin-top: 2px; } .vidro .p90 b { color: var(--ink); }
.projecao { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: .9rem; color: #f3e3b4; }
.projecao span { font-size: .76rem; color: #cdbb8c; }
.projecao b { font-size: 1.05rem; } .pj-ok { color: #9be0b5; } .pj-perto { color: #ffd08a; } .pj-longe { color: #ffb4ab; }

/* cards que levam a uma lista: seta para deixar claro que é clicável */
a.mini { text-decoration: none; }
.mini .ir { margin-left: auto; color: #c2b79f; transition: transform var(--t), color var(--t); }
a.mini:hover .ir { color: var(--gold-deep); transform: translateX(2px); }

/* dica "?" */
.info { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: .62rem; font-weight: 800;
  background: #ece5d3; color: var(--ink-2); cursor: help; vertical-align: 1px; margin-left: 2px; line-height: 1; font-style: normal; }
.hero .info { background: rgba(255, 255, 255, .22); color: #fff; }
.hero .vidro .info { background: #ece5d3; color: var(--ink-2); }
.info::after { content: attr(data-dica); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); width: max-content; max-width: 260px;
  background: var(--ink); color: #f6efdc; font-size: .76rem; font-weight: 500; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none;
  padding: 9px 12px; border-radius: 11px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); z-index: 70; white-space: normal; }
.info.esq::after { left: auto; right: -8px; transform: translate(0, -4px); }
.info:hover::after, .info:focus-visible::after, .info:focus::after { opacity: 1; transform: translate(-50%, 0); }
.info.esq:hover::after, .info.esq:focus::after { transform: none; }
.t th .info { margin-left: 3px; }

/* legenda do calendário legível */
.cal .pontos i { width: 6px; height: 6px; }
.legenda-cal { font-size: .76rem; color: var(--text); gap: 6px 14px; margin-top: 10px; }
.legenda-cal i { width: 8px; height: 8px; }

/* menu lateral com nomes */
.rail .alternar { color: #8d836c; }
.rail-aberto .app { grid-template-columns: 262px minmax(0, 1fr); }
.rail-aberto .rail { align-items: stretch; padding-left: 12px; padding-right: 12px; overflow-y: auto; scrollbar-width: none; }
.rail-aberto .rail a.logo { align-self: center; }
.rail-aberto .rail a:not(.logo), .rail-aberto .rail button { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 0 12px; flex: none; }
.rail-aberto .rail .dica { position: static; opacity: 1; transform: none; background: none; box-shadow: none; padding: 0; color: inherit; font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.rail-aberto .rail .dica .extra { display: none; }
.rail-aberto .rail .bolinha { position: static; order: 3; margin-left: auto; box-shadow: none; }
.rail-aberto .rail .sep { width: 100%; }
.rail-aberto .rail form { width: 100%; }
.rail .dica .extra { font-weight: 500; color: #d8c79c; }
@media (max-width: 760px) { .rail-aberto .app { grid-template-columns: minmax(0, 1fr); } }

/* ---------- feedback mensal ---------- */
.faixa-feedback { display: flex; align-items: center; gap: 14px; color: var(--text); border: 1px solid #efe1b8; background: linear-gradient(135deg, #fffaf0, #fff); }
.faixa-feedback:hover { text-decoration: none; box-shadow: var(--shadow); }
.faixa-feedback .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--wash); color: var(--gold-deep); flex: none; }
.faixa-feedback .ir { margin-left: auto; color: var(--gold-deep); }
.ciclo-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ciclo-topo .progresso-dia { flex: 1; max-width: 420px; }
.t.retrato th.eu, .t.retrato td.eu { background: #fbf6e8; }
.t.retrato td.eu b { font-size: 1.05rem; color: var(--ink); }
.t.retrato td.eu b.st-ok { color: var(--ok); } .t.retrato td.eu b.st-perto { color: var(--warn); } .t.retrato td.eu b.st-longe { color: var(--bad); }
.retrato-extra { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; color: var(--text); }
.sugestoes .sug { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--frame); margin-bottom: 6px; font-size: .86rem; line-height: 1.4; transition: opacity var(--t); }
.sugestoes .sug span { flex: 1; }
.sugestoes .sug.usada { opacity: .5; }
.sugestoes .sug.usada .btn-icone { color: var(--ok); }
.sug-tit { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 8px; }
.sug-tit.ok { color: var(--ok); } .sug-tit.warn { color: var(--warn); }
.sugestoes header + .sug-tit { margin-top: 0; }
.perguntas { margin: 0; padding-left: 20px; font-size: .88rem; } .perguntas li { margin-bottom: 7px; }
.combinado-ant { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.combinado-ant:last-child { border-bottom: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--frame); padding: 4px; border-radius: 12px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 5px 11px; border-radius: 9px; font-size: .8rem; font-weight: 600; color: var(--muted); transition: background var(--t), color var(--t); }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 3px solid #e7cf8f; }
.seg .s-cumprida input:checked + span { background: var(--ok-wash); color: #157341; }
.seg .s-parcial input:checked + span { background: var(--warn-wash); color: #a45f06; }
.seg .s-nao_cumprida input:checked + span { background: var(--bad-wash); color: #b8322c; }
.acao-linha { display: grid; grid-template-columns: minmax(0, 1fr) 140px 150px; gap: 8px; margin-bottom: 8px; }
@media (max-width: 640px) { .acao-linha { grid-template-columns: 1fr 1fr; } .acao-linha > input:first-child { grid-column: 1 / -1; } }
a.assunto-linha { color: var(--text); } a.assunto-linha:hover { text-decoration: none; color: var(--gold-deep); }

/* ---------- chamados x projetos ---------- */
.sec-tit { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 0 8px; }
.numeros-proj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0 2px; margin-top: 10px; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); }
.numeros-proj b { color: var(--ink); font-size: 1rem; }
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.pilar { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; border-left: 5px solid #e3dccb; }
.pilar .rot { font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pilar b { font-size: 1.15rem; color: var(--ink); }
.pilar.f-ok { border-left-color: var(--ok); } .pilar.f-ok b { color: var(--ok); }
.pilar.f-perto { border-left-color: var(--warn); } .pilar.f-perto b { color: var(--warn); }
.pilar.f-longe { border-left-color: var(--bad); } .pilar.f-longe b { color: var(--bad); }
.pilar.f-sem b { color: var(--muted); }
.kpis-mini { margin-bottom: 12px; }
.pilar-tag { display: inline-block; font-style: normal; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; background: #efe9db; color: var(--muted); }
.pilar-tag.projetos { background: #e8eefc; color: #3b5aa8; } .pilar-tag.combinados { background: var(--wash); color: var(--gold-deep); }
.cad-lista { display: grid; gap: 8px; }
.cad-linha { display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 1fr 1.1fr 1.2fr auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 14px; background: var(--frame); }
.cad-linha.nova { grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1.2fr auto; background: none; padding: 0; }
.cad-linha.inativa { opacity: .55; }
.cad-quem { display: flex; align-items: center; gap: 10px; min-width: 0; } .cad-quem > div { display: flex; flex-direction: column; min-width: 0; }
.cad-nome a { color: var(--ink); }
@media (max-width: 1100px) { .cad-linha, .cad-linha.nova { grid-template-columns: 1fr 1fr; } .cad-quem { grid-column: 1 / -1; } }
.cad-linha .check { display: flex; white-space: nowrap; font-size: .85rem; }

/* ---------- contratos ---------- */
/* .bloco com .tabela-scroll na mesma tag: a margem negativa da rolagem fazia o card invadir o vizinho */
.bloco.tabela-scroll { margin: 0 0 var(--gap); padding: var(--pad); }
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: var(--gap); }
.barra-filtros .abas { margin: 0; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros-linha input[type=search] { width: clamp(200px, 22vw, 300px); }
.filtros-linha select { width: auto; max-width: 210px; }
.t.contratos td { vertical-align: middle; }
.t.contratos .c-obj { display: inline-block; line-height: 1.3; }
.t.contratos tr.encerrado td { opacity: .55; }
.c-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag.mini-tag { font-size: .68rem; padding: 1px 7px; }
.acoes-linha { white-space: nowrap; width: 1%; }
.acoes-linha > * { display: inline-grid; vertical-align: middle; }
.menu-acoes { position: relative; }
.menu-acoes > summary { list-style: none; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes[open] > summary { background: #f2eee5; color: var(--ink); }
.menu-acoes .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 210px; background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px -14px rgba(40, 30, 10, .45), 0 0 0 1px var(--line); text-align: left; }
.menu-acoes .menu a, .menu-acoes .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 9px;
  font: inherit; font-size: .86rem; color: var(--text); cursor: pointer; text-align: left; font-weight: 500; }
.menu-acoes .menu a:hover, .menu-acoes .menu button:hover { background: var(--frame); text-decoration: none; }
.menu-acoes .menu button.perigo { color: var(--bad); } .menu-acoes .menu button.perigo:hover { background: var(--bad-wash); }
.menu-acoes .menu form { margin: 0; }
.custo-linha { margin-bottom: 12px; } .custo-linha > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.custo-linha .prog { margin-top: 6px; height: 7px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rateio-wrap { max-height: 460px; overflow-y: auto; }
.t.rateio input, .t.rateio select { padding: 6px 8px; min-width: 0; }
.t.rateio td { padding: 4px 6px; vertical-align: middle; }
.t.rateio td:nth-child(1) { width: 90px; } .t.rateio td:nth-child(2) { width: 120px; } .t.rateio td:nth-child(4) { width: 120px; } .t.rateio td:nth-child(5) { width: 140px; }
.t.rateio .valor-item { text-align: right; }
.t.rateio thead th { position: sticky; top: 0; z-index: 1; }
.resumo-contrato { position: sticky; top: var(--gap); }
.linha-res { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.linha-res b { color: var(--ink); }
@media (max-width: 760px) { .filtros-linha, .filtros-linha input[type=search], .filtros-linha select { width: 100%; max-width: none; } .resumo-contrato { position: static; } }
@media (min-width: 901px) { .tabela-scroll.sem-rolagem { overflow: visible; } }
.t.contratos td.n b, .t.contratos td.n { white-space: nowrap; }

/* contratos agrupados por fornecedor */
.cab-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg-ver a { display: block; padding: 5px 11px; border-radius: 9px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.seg-ver a:hover { text-decoration: none; color: var(--ink); }
.seg-ver a.ativo { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.grupos-ctrl { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.grupos-forn { display: grid; gap: 10px; }
.grupo-forn { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: box-shadow var(--t), border-color var(--t); }
.grupo-forn[open] { border-color: #e9dcb6; box-shadow: var(--shadow-sm); }
.grupo-forn > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1.6fr) minmax(110px, .9fr) auto minmax(130px, auto) 20px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; }
.grupo-forn > summary::-webkit-details-marker { display: none; }
.grupo-forn > summary:hover { background: #fcfaf5; }
.g-ini { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; }
.g-nome { display: flex; flex-direction: column; min-width: 0; } .g-nome b { color: var(--ink); font-size: 1rem; }
.g-nome small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-barra { display: flex; flex-direction: column; gap: 3px; } .g-barra .prog { margin: 0; height: 8px; } .g-barra small { color: var(--muted); font-size: .72rem; }
.g-alertas { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.g-total { text-align: right; display: flex; flex-direction: column; } .g-total b { font-size: 1.08rem; color: var(--ink); white-space: nowrap; } .g-total small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.g-chev { color: var(--muted); transition: transform var(--t); display: grid; }
.grupo-forn[open] .g-chev { transform: rotate(90deg); color: var(--gold-deep); }
.g-corpo { border-top: 1px solid var(--line); padding: 4px 14px 10px; }
.g-contrato { display: grid; grid-template-columns: minmax(0, 1fr) 130px 96px 150px auto; gap: 12px; align-items: center; padding: 10px 0 10px 54px; border-bottom: 1px dashed var(--line); }
.g-contrato:last-of-type { border-bottom: 0; }
.gc-info { display: contents; }
.g-contrato.encerrado { opacity: .55; } .g-contrato.destaque { background: #fff7f6; border-radius: 10px; }
.gc-obj a, .gc-obj > b { color: var(--ink); font-weight: 600; }
.gc-valor, .gc-vence { text-align: right; display: flex; flex-direction: column; }
.gc-valor b { white-space: nowrap; color: var(--ink); } .gc-valor small, .gc-vence small { color: var(--muted); font-size: .72rem; }
.gc-vence b { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.gc-sit { display: flex; flex-wrap: wrap; gap: 4px; }
.drill { margin-top: 6px; }
.drill > summary { cursor: pointer; font-size: .8rem; color: var(--gold-deep); font-weight: 600; width: fit-content; }
.drill-tab { max-height: 340px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; }
.drill-tab .t th { position: sticky; top: 0; z-index: 1; }
.drill-barra { display: block; margin: 0; height: 6px; }
.g-rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0 0 54px; }
.g-links { display: flex; gap: 14px; }
@media (max-width: 1100px) {
  .grupo-forn > summary { grid-template-columns: 40px minmax(0, 1fr) auto 20px; }
  .g-barra, .g-alertas { display: none; }
  .g-contrato { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; row-gap: 6px; }
  .gc-info { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; grid-column: 1; grid-row: 2; }
  .gc-vence { text-align: left; flex-direction: row; gap: 6px; align-items: baseline; }
  .gc-acoes { grid-row: 1; grid-column: 2; align-self: start; }
  .gc-valor { grid-column: 2; grid-row: 2; }
  .g-rodape { padding-left: 0; }
}
.resumo-contratos .bloco { margin-bottom: 0; }
.resumo-contratos { margin-bottom: var(--gap); align-items: start; }

/* =========================================================
   CELULAR (até 760px): tabelas viram cartões, toque confortável
   ========================================================= */
@media (max-width: 760px) {
  /* tabelas .cartoes: cada linha é um cartão, cada célula uma linha "rótulo — valor" */
  .tabela-scroll:has(> table.cartoes) { overflow: visible; margin: 0; padding: 0; }
  .t.cartoes, .t.cartoes > tbody, .t.cartoes > tfoot, .t.cartoes > tbody > tr, .t.cartoes > tfoot > tr { display: block; width: 100%; }
  .t.cartoes > thead { display: none; }
  .t.cartoes > tbody > tr, .t.cartoes > tfoot > tr { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; box-shadow: 0 2px 10px -6px rgba(40, 30, 10, .18); }
  .t.cartoes > tbody > tr:hover td { background: none; }
  .t.cartoes > tbody > tr.destaque { background: #fff7f6; border-color: #f3d3cf; }
  .t.cartoes > tbody > tr.destaque td { background: none; }
  .t.cartoes > tbody > tr > td, .t.cartoes > tfoot > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; text-align: right; min-height: 34px; }
  .t.cartoes > tbody > tr > td::before, .t.cartoes > tfoot > tr > td::before { content: attr(data-rot); flex: none; max-width: 45%; text-align: left; font-size: .76rem; font-weight: 600; color: var(--muted); }
  .t.cartoes > tbody > tr > td[data-rot=""]::before { display: none; }
  .t.cartoes > tbody > tr > td[data-rot=""] { justify-content: flex-end; }
  /* 1ª célula = título do cartão */
  .t.cartoes > tbody > tr > td:first-child { display: block; text-align: left; font-size: 1rem; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
  .t.cartoes > tbody > tr > td:first-child::before { display: none; }
  /* células de texto longo / com controles: rótulo em cima, conteúdo embaixo */
  .t.cartoes > tbody > tr > td.cel-bloco { display: block; text-align: left; }
  .t.cartoes > tbody > tr > td.cel-bloco::before { display: block; max-width: none; margin-bottom: 4px; }
  .t.cartoes > tbody > tr > td.cel-bloco select { width: 100%; }
  .t.cartoes td.n { text-align: right; }
  .t.cartoes .ocultar-celular { display: none !important; }
  .t.cartoes .acoes-linha { width: auto; }
  .t.cartoes td.acoes { justify-content: flex-end; flex-wrap: wrap; }
  /* rateio do contrato (formulário): rótulo em cima de cada campo */
  .t.rateio.cartoes > tbody > tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; position: relative; padding-right: 48px; }
  .t.rateio.cartoes > tbody > tr > td, .t.rateio.cartoes > tbody > tr > td:first-child { display: block; text-align: left; padding: 2px 0; margin: 0; border: 0; font-size: inherit; min-height: 0; }
  .t.rateio.cartoes > tbody > tr > td::before, .t.rateio.cartoes > tbody > tr > td:first-child::before { display: block; max-width: none; margin-bottom: 2px; font-size: .7rem; }
  .t.rateio.cartoes > tbody > tr > td:nth-child(3) { grid-column: 1 / -1; }
  .t.rateio.cartoes > tbody > tr > td:last-child { position: absolute; top: 8px; right: 6px; }
  .t.rateio.cartoes > tfoot > tr > td:first-child::before { display: none; }
  .rateio-wrap { max-height: none; overflow: visible; }
  .t.rateio.cartoes > tbody > tr > td { width: auto !important; }
  .t.rateio.cartoes input, .t.rateio.cartoes select { width: 100%; }
  .causa-select { min-height: 40px; }
  details > summary { padding: 6px 0; }
  .drill-tab .t th, .drill-tab .t td { padding: 6px 5px; }

  /* tabela de SLA do painel: compacta */
  .t.t-sla th, .t.t-sla td { padding: 6px 4px; font-size: .78rem; white-space: normal; }
  .t.t-sla th .info { display: none; }

  /* retrato do feedback */
  .t.retrato th, .t.retrato td { padding: 7px 6px; font-size: .82rem; }

  /* relatório na tela: KPIs em 2 colunas, tabelas roláveis */
  .rel-tela table.kp, .rel-tela table.kp tbody { display: block; }
  .rel-tela table.kp tr { display: grid; grid-template-columns: 1fr 1fr; }
  .rel-tela table.kp td { width: auto; border-bottom: 1px solid #e4e1d8; }
  .rel-tela table.tb { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* toque: alvos de pelo menos ~40px */
  .btn-icone { width: 40px; height: 40px; }
  .btn.mini { min-height: 36px; padding: 6px 12px; }
  a.tag, button.tag { padding: 6px 12px; }
  .abas a { padding: 9px 14px; }
  .seg span, .seg-ver a { padding: 8px 12px; }
  .check input[type=checkbox] { width: 20px; height: 20px; }
  .menu-acoes .menu a, .menu-acoes .menu button { padding: 12px; }
  .paginacao a, .paginacao span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }

  /* formulários e cabeçalhos */
  .topo { flex-direction: column; align-items: stretch; gap: 12px; }
  .topo > div:first-child { flex: none; }
  .topo .acoes { justify-content: flex-start; }
  .topo .acoes .btn { flex: 1 1 auto; }
  input, select, textarea { font-size: 16px; } /* evita o zoom automático do iPhone */
  .campo.s2 { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi b { font-size: 1.25rem; }
  .barra-filtros { flex-direction: column; align-items: stretch; }
  .barra-filtros .abas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .abas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .abas a { white-space: nowrap; flex: none; }
  .cab-dir { width: 100%; justify-content: space-between; }
  .bloco > header { flex-wrap: wrap; gap: 6px; }
  .resumo-contrato .acoes { flex-wrap: nowrap; }
  .drill-tab { max-height: 300px; }
  .g-contrato { padding: 10px 0; }
  .grupo-forn > summary { gap: 10px; padding: 12px; }
  .g-total b { font-size: .98rem; }
  .pilares { grid-template-columns: 1fr; }
  .acao-linha { grid-template-columns: 1fr 1fr; }
  .cad-linha, .cad-linha.nova { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}
.salvar-cel { display: none; }
@media (max-width: 760px) {
  .salvar-cel { display: flex; gap: 8px; position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 20; padding: 10px; margin: 0 0 var(--gap);
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 8px 24px -10px rgba(40, 30, 10, .35); }
  .salvar-cel .btn { flex: 1; }
}

/* plantão */
.p-plantao { background: #3b6fb6; }
.bloco-plantao { display: flex; align-items: center; gap: 12px; color: var(--text); margin-bottom: 0; }
.bloco-plantao:hover { text-decoration: none; box-shadow: var(--shadow); }
.bloco-plantao .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #e8eefc; color: #3b5aa8; flex: none; }
.bloco-plantao > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.bloco-plantao small { color: var(--muted); font-size: .76rem; } .bloco-plantao b { color: var(--ink); font-size: 1rem; }
.bloco-plantao .ir { margin-left: auto; color: var(--muted); }
.hero-plantao { grid-template-columns: 1fr; }
.plantao-agora { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.plantao-agora b { display: block; font-size: 1.5rem; color: #fff; } .plantao-agora span { color: #e9d7a6; font-size: .9rem; }
.plantao-linha { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.plantao-linha + .plantao-linha { border-top: 1px solid var(--line); }
.plantao-linha.atual { background: #f2f6ff; }
.plantao-linha .dt { width: 44px; height: 44px; border-radius: 13px; background: var(--frame); display: grid; place-content: center; text-align: center; flex: none; }
.plantao-linha .dt b { font-size: 1rem; line-height: 1; color: var(--ink); } .plantao-linha .dt span { font-size: .66rem; color: var(--muted); }
.pl-quem { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pl-quem b { color: var(--ink); }
.menu-form { min-width: 260px; } .menu-form .f { display: grid; gap: 6px; padding: 6px; } .menu-form .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-form .f .btn { justify-content: center; }
.escala-pessoas { display: grid; gap: 4px; }
.escala-pessoas .check { display: flex; padding: 6px 8px; border-radius: 10px; background: var(--frame); }
.escala-pessoas .check[data-ordem]:not([data-ordem=""])::after { content: attr(data-ordem); margin-left: auto; font-weight: 800; color: var(--gold-deep); }
/* orçamento */
.orc-cat { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.orc-cat[open] { border-color: #e9dcb6; }
.orc-cat > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1.5fr) 130px 130px 90px; gap: 14px; align-items: center; padding: 12px 14px; }
.orc-cat > summary::-webkit-details-marker { display: none; }
.oc-nome { display: flex; flex-direction: column; } .oc-nome b { color: var(--ink); } .oc-nome small { color: var(--muted); font-size: .74rem; }
.oc-barras { display: grid; gap: 3px; }
.oc-b { display: block; height: 7px; border-radius: 99px; min-width: 2px; }
.oc-b.orc { background: #e9dcb6; }
.oc-b.real { background: var(--ink); } .oc-b.real.f-perto { background: var(--warn); } .oc-b.real.f-longe { background: var(--bad); } .oc-b.real.f-sem { background: #b9b0a0; }
.oc-num { display: flex; flex-direction: column; text-align: right; } .oc-num small { color: var(--muted); font-size: .7rem; } .oc-num b { white-space: nowrap; }
.oc-desvio { text-align: right; }
.oc-corpo { border-top: 1px solid var(--line); padding: 12px 14px; }
.oc-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.oc-mes { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 12px; background: var(--frame); }
.oc-mes > span { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.oc-mes.atual { background: var(--wash); } .oc-mes.futuro { opacity: .85; }
.oc-mes input { padding: 6px 8px; text-align: right; }
.oc-mes small { font-size: .7rem; }
@media (max-width: 900px) {
  .orc-cat > summary { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .oc-nome { grid-column: 1; grid-row: 1; } .oc-desvio { grid-column: 2; grid-row: 1; }
  .oc-barras { grid-column: 1 / -1; grid-row: 2; }
  .oc-num:nth-of-type(3) { grid-column: 1; grid-row: 3; text-align: left; } .oc-num:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  .oc-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* busca única (Ctrl+K) */
.barra-topo .busca .atalho { font: inherit; font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--frame); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.cmd-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(27, 24, 18, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.cmd { width: min(640px, 100%); background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); overflow: hidden; display: flex; flex-direction: column; max-height: 75vh; }
.cmd-campo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmd-campo input { border: 0; box-shadow: none; padding: 8px 0; font-size: 1.05rem; flex: 1; }
.cmd-campo input:focus { box-shadow: none; }
.cmd-fechar { border: 1px solid var(--line); background: var(--frame); border-radius: 8px; font: inherit; font-size: .72rem; font-weight: 700; color: var(--muted); padding: 4px 8px; cursor: pointer; }
.cmd-lista { overflow-y: auto; padding: 6px; }
.cmd-grupo { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 10px 4px; }
.cmd-item { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--text); }
.cmd-item:hover, .cmd-item.ativo { background: var(--wash); text-decoration: none; }
.cmd-item b { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cmd-item small { display: block; color: var(--muted); font-size: .76rem; }
.cmd-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--frame); flex: none; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: var(--gold-deep); }
.cmd-vazio { color: var(--muted); padding: 18px 12px; margin: 0; font-size: .9rem; } .cmd-vazio span { display: block; font-size: .76rem; margin-top: 6px; }
body.cmd-aberto { overflow: hidden; }
@media (max-width: 760px) {
  .barra-topo .busca .atalho { display: none; }
  .cmd-fundo { padding: 0; align-items: stretch; }
  .cmd { max-height: none; height: 100%; border-radius: 0; }
  .cmd-item { padding: 12px 10px; }
}

/* ---------- login: senha, instalar e celular ---------- */
.senha-campo { position: relative; }
.senha-campo input { padding-right: 48px; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.ver-senha:hover, .ver-senha.ativo { color: var(--gold-deep); background: var(--wash); }
.login-form .f { display: grid; gap: 14px; }
.login-form .lembrar { display: flex; font-size: .9rem; color: var(--text); }
.btn-entrar { justify-content: center; min-height: 48px; font-size: 1rem; }
.btn-entrar.carregando { opacity: .75; cursor: progress; }
.btn-instalar { justify-content: center; }
.login-rodape { display: none; }
@media (max-width: 760px) {
  body.pagina-login { background: #15120d; }
  .pagina-login .login-wrap { padding: 0; place-items: stretch; min-height: 100dvh; }
  .pagina-login .login-cartao { border-radius: 0; box-shadow: none; min-height: 100dvh; grid-template-rows: auto 1fr; background: transparent; animation: none; }
  .pagina-login .login-arte { min-height: 0; padding: calc(44px + env(safe-area-inset-top)) 24px 72px; gap: 18px; justify-content: flex-start; }
  .pagina-login .login-arte .logo img { width: 132px; }
  .pagina-login .login-arte p { font-size: .95rem; font-weight: 500; max-width: none; opacity: .9; }
  .pagina-login .login-form { background: #fff; border-radius: 28px 28px 0 0; margin-top: -28px; position: relative; z-index: 2; align-items: flex-start;
    padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); flex-direction: column; justify-content: space-between; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .6); }
  .pagina-login .login-form form { max-width: none; }
  .pagina-login .login-form h1 { font-size: 1.6rem; }
  .pagina-login input[type=email], .pagina-login input[type=password], .pagina-login input[type=text] { min-height: 52px; font-size: 16px; border-radius: 14px; }
  .pagina-login .btn-entrar { min-height: 54px; border-radius: 14px; font-size: 1.05rem; }
  .pagina-login .lembrar input { width: 22px; height: 22px; }
  .login-rodape { display: block; width: 100%; text-align: center; font-size: .78rem; margin: 20px 0 0; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .pagina-login .login-arte p { display: none; }
  .pagina-login .login-arte { padding-bottom: 44px; }
}
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }

/* celular: busca sai do topo (fica no painel "Mais") */
@media (max-width: 760px) {
  .barra-topo .busca { display: none; }
  .barra-topo .direita { margin-left: auto; }
  .folha-grade button[data-busca-folha] { border: 0; background: none; font: inherit; cursor: pointer; color: inherit; }
}