[hidden] { display: none !important; }
/* Grafite e amarelo de sinalização (o das placas de NR-10). O amarelo aparece pouco: marca,
   item ativo, foco. Status têm cores próprias, separadas da marca. */
:root {
  --fundo: #F4F5F7; --branco: #FFFFFF; --grafite: #16181D; --grafite-2: #1F2229; --grafite-3: #2A2E37;
  --tinta: #1F2228; --suave: #6B7080; --linha: #E4E6EB; --sinal: #FFC400; --sinal-escuro: #7A5D00; --sinal-claro: #FFF4C7;
  --pedido: #4C8DF6; --orcamento: #9B6BE6; --fechado: #14A89A; --obra: #F2A33A; --atraso: #E5484D; --entregue: #2FB36F;
  --sombra: 0 1px 2px rgba(22, 24, 29, 0.06), 0 8px 20px -10px rgba(22, 24, 29, 0.18);
  --sombra-alta: 0 2px 6px rgba(22, 24, 29, 0.08), 0 18px 40px -14px rgba(22, 24, 29, 0.3);
  --f: "Geist", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --curva: cubic-bezier(0.3, 0.8, 0.25, 1);
  --lat: 248px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--tinta); font: 14px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }
[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }

/* ---------- casca ---------- */
.app { display: grid; grid-template-columns: var(--lat) minmax(0, 1fr); min-height: 100%; transition: grid-template-columns 0.28s var(--curva); }
.app.recolhida { --lat: 72px; }
.lateral {
  position: sticky; top: 0; height: 100vh; background: var(--grafite); color: #E8EAEE; display: flex; flex-direction: column;
  padding: 14px 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); gap: 14px; overflow: hidden; z-index: 20;
}
.lat-topo { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.selo { width: 34px; height: 34px; border-radius: 9px; background: var(--sinal); display: grid; place-items: center; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16); }
.selo.pequeno { width: 28px; height: 28px; border-radius: 8px; }
.lat-nome { min-width: 0; white-space: nowrap; transition: opacity 0.2s; }
.lat-nome b { display: block; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.lat-nome span { font-size: 11.5px; color: #8E94A2; }
.recolher { margin-left: auto; background: none; border: 0; color: #8E94A2; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.recolher:hover { background: var(--grafite-3); color: #fff; }
.app.recolhida .lat-nome, .app.recolhida .menu .rotulo, .app.recolhida .menu .cont { opacity: 0; pointer-events: none; }
.app.recolhida .recolher { margin-left: 0; position: absolute; left: 20px; top: 62px; }
.app.recolhida .lat-topo { flex-direction: column; align-items: start; }
.menu { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.app.recolhida .menu { margin-top: 44px; }
.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: #B9BEC9; border-radius: 9px;
  padding: 9px 12px; text-align: left; position: relative; transition: background 0.15s, color 0.15s;
}
.menu button:hover { background: var(--grafite-2); color: #fff; }
.menu button[aria-current="page"] { background: var(--grafite-3); color: #fff; }
.menu button[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sinal); }
.menu .rotulo { white-space: nowrap; transition: opacity 0.2s; }
.menu .cont { margin-left: auto; font: 500 11px var(--mono); background: var(--sinal); color: var(--grafite); border-radius: 10px; padding: 1px 7px; transition: opacity 0.2s; }
.menu .sep { height: 1px; background: var(--grafite-3); margin: 8px 4px; }
.lat-pe { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.eu { display: flex; gap: 10px; align-items: center; padding: 4px; }
.eu .av { border-color: var(--grafite); }
.assinatura { color: #8E94A2; font-size: 11.5px; text-decoration: none; padding: 0 6px; }
.assinatura b { display: inline; font-size: 11.5px; color: var(--sinal); font-weight: 600; }
.vela-menu { display: none; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 15; background: rgba(244, 245, 247, 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); padding-block: 10px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 12px;
}
.hamburguer { display: none; background: none; border: 0; width: 38px; height: 38px; border-radius: 9px; place-items: center; }
.busca { flex: 1; max-width: 440px; position: relative; display: flex; align-items: center; }
.busca svg { position: absolute; left: 11px; color: var(--suave); width: 16px; height: 16px; }
.busca input { width: 100%; background: var(--branco); border: 1px solid var(--linha); border-radius: 9px; padding: 8px 12px 8px 34px; transition: border-color 0.15s, box-shadow 0.15s; }
.busca input:focus { outline: none; border-color: var(--sinal); box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.25); }
.espaco { flex: 1; }
.demo-tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--sinal-escuro); background: var(--sinal-claro); border-radius: 20px; padding: 4px 10px; font-weight: 600; }
.demo-tag svg { width: 14px; height: 14px; }
.sino { position: relative; background: var(--branco); border: 1px solid var(--linha); width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; }
.ponto-sino { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--atraso); border: 2px solid var(--branco); }

.area { padding-block: 22px 96px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.entra { animation: entra 0.38s var(--curva) both; }
.cabeca { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.cabeca h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.cabeca p { margin: 3px 0 0; color: var(--suave); max-width: 70ch; }
.cabeca p b { color: var(--tinta); font-weight: 600; }
.btn { display: inline-flex; gap: 7px; align-items: center; border-radius: 9px; padding: 8px 14px; font-weight: 600; border: 1px solid var(--linha); background: var(--branco); transition: transform 0.12s, box-shadow 0.15s, background 0.15s; }
.btn:hover { box-shadow: var(--sombra); }
.btn:active { transform: scale(0.97); }
.btn.forte { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.btn.forte svg { color: var(--sinal); }
.btn.amarelo { background: var(--sinal); border-color: var(--sinal); color: var(--grafite); }
.btn svg { width: 16px; height: 16px; }

.troca { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: #E7E9EE; border-radius: 10px; padding: 3px; }
.troca button { position: relative; z-index: 1; background: none; border: 0; padding: 6px 14px; border-radius: 8px; font-weight: 600; color: var(--suave); display: flex; gap: 6px; align-items: center; justify-content: center; transition: color 0.2s; }
.troca button svg { width: 15px; height: 15px; }
.troca button[aria-pressed="true"] { color: var(--grafite); }
.troca .indicador { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--branco); border-radius: 8px; box-shadow: var(--sombra); transition: transform 0.3s var(--curva); }
.troca[data-vista="quadro"] .indicador { transform: translateX(100%); }

.av { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; border: 2px solid var(--branco); margin-left: -7px; flex: none; }
.av:first-child { margin-left: 0; }
.avs { display: inline-flex; }

/* ---------- visão geral ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--branco); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.kpi .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; }
.kpi .ic svg { width: 17px; height: 17px; }
.kpi b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: 13px; }
.kpi em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--entregue); }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.cartao-b { background: var(--branco); border-radius: 14px; padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cartao-b h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cartao-b h2 svg { color: var(--suave); width: 17px; height: 17px; }
.cartao-b h2 small { margin-left: auto; font-weight: 500; color: var(--suave); font-size: 12px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .barra-g { fill: var(--grafite); }
.grafico .barra-g.atual { fill: var(--sinal); }
.grafico text { font: 11px var(--f); fill: var(--suave); }
.grafico .val { font: 600 11px var(--mono); fill: var(--tinta); }
.grafico .grade-l { stroke: var(--linha); stroke-width: 1; }
.funil { display: flex; flex-direction: column; gap: 8px; }
.funil div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; }
.funil i { display: block; height: 22px; border-radius: 6px; background: var(--c); transform-origin: left; animation: cresce 0.7s var(--curva) both; }
.funil b { font-family: var(--mono); font-weight: 500; text-align: right; }
.ia { display: flex; flex-direction: column; gap: 10px; }
.ia-linha { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.ia-linha b { font-weight: 600; display: block; }
.ia-linha small { color: var(--suave); font-size: 12px; }
.anel { width: 52px; height: 52px; position: relative; display: grid; place-items: center; }
.anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anel span { font: 600 12px var(--mono); }
.nota-ia { font-size: 12px; color: var(--suave); background: #F7F8FA; border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; }
.nota-ia svg { width: 15px; height: 15px; color: var(--orcamento); }

/* ---------- tabela (estilo Monday) ---------- */
.grupo { display: flex; flex-direction: column; gap: 8px; }
.grupo h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: center; color: var(--cor); }
.grupo h2 small { font-weight: 500; color: var(--suave); font-size: 13px; }
.rolagem { overflow-x: auto; border-radius: 12px; box-shadow: var(--sombra); background: var(--branco); }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 880px; }
th, td { border-bottom: 1px solid var(--linha); padding: 0 12px; height: 46px; text-align: left; white-space: nowrap; }
td + td, th + th { border-left: 1px solid var(--linha); }
th { font-weight: 500; font-size: 12.5px; color: var(--suave); text-align: center; background: #FAFBFC; height: 38px; }
th:first-child { text-align: left; }
tbody tr td:first-child, thead th:first-child { box-shadow: inset 4px 0 0 var(--cor); padding-left: 16px; }
tr.item { cursor: pointer; transition: background 0.12s; animation: entra 0.35s var(--curva) both; }
tr.item:hover td { background: #F8F9FB; }
.nome b { font-weight: 600; }
.nome small { display: block; color: var(--suave); font-size: 12px; margin-top: -2px; }
td.status { padding: 0; position: relative; }
.pilha-status { width: 100%; height: 46px; border: 0; color: #fff; font-weight: 600; display: flex; gap: 6px; align-items: center; justify-content: center; background: var(--c); transition: filter 0.12s; }
.pilha-status svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.15s; }
.pilha-status:hover svg, .pilha-status:focus-visible svg { opacity: 0.9; }
.pilha-status:hover { filter: brightness(1.07); }
.menu-status { position: fixed; z-index: 70; width: 210px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; display: flex; flex-direction: column; gap: 1px; animation: pop 0.18s var(--curva) both; }
.menu-status small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); padding: 6px 10px 4px; }
.menu-status button { border: 0; border-radius: 8px; padding: 8px 10px; background: none; display: flex; gap: 10px; align-items: center; text-align: left; font-weight: 500; color: var(--tinta); transition: background 0.12s; }
.menu-status button:hover { background: #F3F4F6; }
.menu-status button i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }
.menu-status button svg { margin-left: auto; width: 16px; height: 16px; color: var(--entregue); }
.menu-status button[aria-current="true"] { font-weight: 700; }
.andamento { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.trilho { flex: 1; height: 7px; border-radius: 4px; background: #ECEEF2; overflow: hidden; }
.trilho i { display: block; height: 100%; background: var(--entregue); border-radius: 4px; transform-origin: left; animation: cresce 0.7s var(--curva) both; transition: width 0.4s var(--curva); }
.num { font-family: var(--mono); font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.direita { text-align: right; }
.atrasado { color: var(--atraso) !important; font-weight: 600; }
.soma td { height: 34px; background: #FAFBFC; border-bottom: 0; }
.soma td:first-child { box-shadow: none; }
.lista-celular { display: none; }

/* ---------- quadro (estilo Trello) ---------- */
.colunas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.coluna { background: #E9EBF0; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 160px; transition: background 0.2s, box-shadow 0.2s; scroll-snap-align: start; }
.coluna.alvo { background: var(--sinal-claro); box-shadow: inset 0 0 0 2px var(--sinal); }
.coluna h3 { margin: 0; padding: 4px 6px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.coluna h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.coluna h3 small { margin-left: auto; font-family: var(--mono); font-weight: 500; color: var(--suave); background: rgba(255, 255, 255, 0.7); border-radius: 8px; padding: 0 7px; }
.cartao { background: var(--branco); border-radius: 11px; box-shadow: var(--sombra); cursor: grab; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.16s var(--curva), box-shadow 0.16s; animation: entra 0.38s var(--curva) both; }
.cartao:hover { transform: translateY(-2px) rotate(-0.4deg); box-shadow: var(--sombra-alta); }
.cartao:active { cursor: grabbing; }
.cartao.arrastando { opacity: 0.35; transform: rotate(2deg); }
.cartao canvas { width: 100%; height: 78px; display: block; }
.miolo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.etiquetas { display: flex; gap: 5px; flex-wrap: wrap; }
.etq { height: 8px; width: 38px; border-radius: 4px; background: var(--c); }
.cartao b { font-weight: 600; line-height: 1.3; }
.cartao .cli { color: var(--suave); font-size: 12.5px; margin-top: -5px; }
.selos { display: flex; gap: 10px; align-items: center; color: var(--suave); font-size: 12px; flex-wrap: wrap; }
.selos span { display: inline-flex; gap: 4px; align-items: center; }
.selos svg { width: 14px; height: 14px; }
.selos .data-ok { background: #E6F6EE; color: #17633D; border-radius: 5px; padding: 1px 6px; }
.selos .data-atraso { background: #FDE7E8; color: #B42328; border-radius: 5px; padding: 1px 6px; }
.selos .avs { margin-left: auto; }
.add-cartao { border: 0; background: none; color: var(--suave); text-align: left; padding: 8px 8px; border-radius: 9px; display: flex; gap: 6px; align-items: center; font-weight: 500; }
.add-cartao:hover { background: rgba(255, 255, 255, 0.7); color: var(--tinta); }
.form-cartao { display: flex; flex-direction: column; gap: 8px; }
.form-cartao textarea { border: 0; border-radius: 10px; padding: 10px 12px; box-shadow: var(--sombra); resize: none; min-height: 64px; }
.form-cartao div { display: flex; gap: 6px; }

/* ---------- listas simples (pedidos, agenda, equipe, contratos) ---------- */
.lista { background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.linha-l { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linha); animation: entra 0.35s var(--curva) both; }
.linha-l:last-child { border-bottom: 0; }
.linha-l .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--c, #F0F1F4); color: var(--ci, var(--suave)); }
.linha-l b { font-weight: 600; display: block; }
.linha-l small { color: var(--suave); font-size: 12.5px; }
.linha-l .acoes { display: flex; gap: 8px; align-items: center; }
.pilula { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 10px; background: var(--c); color: var(--ct, #fff); white-space: nowrap; }
.dia-agenda { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); margin: 4px 0 -6px; }
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pessoa-c { background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 10px; animation: entra 0.35s var(--curva) both; }
.pessoa-c .quem { display: flex; gap: 10px; align-items: center; }
.pessoa-c .quem .av { width: 40px; height: 40px; font-size: 13px; }
.pessoa-c .quem small { display: block; color: var(--suave); font-size: 12px; }
.tarefa { display: flex; gap: 8px; align-items: center; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--linha); }
.tarefa svg { width: 15px; height: 15px; color: var(--suave); }
.tarefa span { flex: 1; min-width: 0; }

/* ---------- integrações e evolução ---------- */
.integra { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.int { background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.16s var(--curva), box-shadow 0.16s; animation: entra 0.35s var(--curva) both; }
.int:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.int .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; }
.int b { font-size: 15px; }
.int p { margin: 0; color: var(--suave); font-size: 13px; }
.int .tag { align-self: start; font-size: 11px; font-weight: 600; color: var(--sinal-escuro); background: var(--sinal-claro); border-radius: 10px; padding: 2px 8px; }
.evolui { background: var(--grafite); color: #E8EAEE; border-radius: 16px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px; align-items: start; }
.evolui h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.evolui p { margin: 0; color: #A9AEBA; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.passos li { background: var(--grafite-2); border: 1px solid var(--grafite-3); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.passos li span { font: 600 11px var(--mono); color: var(--sinal); }
.passos li b { color: #fff; }
.passos li small { color: #A9AEBA; font-size: 12.5px; }

/* ---------- painel da obra ---------- */
.vela { position: fixed; inset: 0; background: rgba(22, 24, 29, 0.34); z-index: 40; animation: aparece 0.2s both; }
.painel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(620px, 100%); background: var(--branco);
  box-shadow: -16px 0 50px rgba(22, 24, 29, 0.22); display: flex; flex-direction: column; animation: desliza 0.32s var(--curva) both;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.painel header { padding: 18px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.painel .l1 { display: flex; gap: 10px; align-items: start; }
.painel h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.fechar { border: 0; background: #F0F1F4; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--suave); flex: none; }
.fechar:hover { background: #E5E7EB; color: var(--tinta); }
.fatos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; align-items: center; color: var(--suave); }
.fatos b { color: var(--tinta); }
.abas { display: flex; gap: 22px; border-bottom: 1px solid var(--linha); padding: 8px 22px 0; overflow-x: auto; }
.abas button { background: none; border: 0; padding: 9px 0; color: var(--suave); font-weight: 500; border-bottom: 2px solid transparent; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.abas button svg { width: 15px; height: 15px; }
.abas button[aria-selected="true"] { color: var(--grafite); border-bottom-color: var(--sinal); font-weight: 600; }
.corpo { padding: 18px 22px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.corpo > * { animation: entra 0.3s var(--curva) both; }
.etapas { list-style: none; margin: 0; padding: 0; position: relative; }
.etapas li { position: relative; }
.etapas li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 38px; bottom: -8px; width: 2px; background: var(--linha); }
.etapas li.feita:not(:last-child)::after { background: var(--entregue); }
.etapas label { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.etapas label:hover { background: #F6F7F9; }
.etapas li.vez label { background: var(--sinal-claro); }
.etapas input { position: absolute; opacity: 0; pointer-events: none; }
.caixa { width: 22px; height: 22px; border-radius: 50%; position: relative; z-index: 1; background: var(--branco); border: 2px solid #CDD1D8; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--curva); }
.caixa svg { width: 14px; height: 14px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.25s var(--curva); }
.etapas input:checked + .caixa { background: var(--entregue); border-color: var(--entregue); }
.etapas input:checked + .caixa svg { opacity: 1; transform: scale(1); }
.etapas input:focus-visible + .caixa { outline: 2px solid var(--sinal); outline-offset: 2px; }
.etapas b { font-weight: 600; }
.etapas small { display: block; color: var(--suave); font-size: 12px; }
.etapas .feita b { color: var(--suave); font-weight: 500; }
.agora-etq { font-size: 11px; font-weight: 700; color: var(--sinal-escuro); background: var(--sinal-claro); border-radius: 5px; padding: 2px 8px; }
.faixa { margin: 0; padding: 11px 13px; border-radius: 10px; font-size: 13px; display: flex; gap: 9px; align-items: start; }
.faixa svg { width: 16px; height: 16px; margin-top: 1px; }
.faixa.ok { background: #E6F6EE; color: #17633D; }
.faixa.info { background: #EAF1FE; color: #1E4A93; }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.foto { margin: 0; }
.foto canvas { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; display: block; }
.foto figcaption { font-size: 12px; color: var(--suave); margin-top: 4px; }
.link { display: flex; gap: 8px; align-items: center; border: 1px solid var(--linha); border-radius: 10px; padding: 6px 6px 6px 12px; }
.link svg { width: 16px; height: 16px; color: var(--suave); }
.link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); color: var(--suave); }
.texto { margin: 0; color: var(--suave); }

/* ---------- celular ---------- */
.aparelho { position: relative; width: 300px; max-width: 100%; margin: 6px auto 0; }
.aparelho::before, .aparelho::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2A2D33; }
.aparelho::before { left: -3px; top: 120px; height: 56px; box-shadow: 0 -40px 0 0 #2A2D33; }
.aparelho::after { right: -3px; top: 150px; height: 80px; }
.moldura { background: #0F1013; border-radius: 48px; padding: 11px; box-shadow: 0 0 0 1.5px #3A3D44, 0 30px 60px -24px rgba(22, 24, 29, 0.55); }
.tela-cel { position: relative; background: #F4F5F7; border-radius: 38px; overflow: hidden; height: 600px; display: flex; flex-direction: column; }
.status-bar { position: absolute; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; z-index: 3; color: #fff; font: 600 13px var(--f); }
.status-bar span:last-child { display: flex; gap: 5px; align-items: center; }
.status-bar svg { width: 15px; height: 15px; }
.ilha { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #0F1013; z-index: 4; }
.home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; border-radius: 3px; background: #1F2229; opacity: 0.8; z-index: 3; }
.cel-topo { background: var(--grafite); color: #fff; padding: 54px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.cel-topo .marca { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; color: #C9CDD6; }
.cel-topo .selo { width: 24px; height: 24px; border-radius: 7px; }
.cel-topo h4 { margin: 2px 0 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.cel-topo small { color: #A6ABB7; font-size: 12px; }
.cel-topo .trilho { background: #2B2F37; }
.cel-topo .trilho i { background: var(--sinal); }
.cel-topo .num { color: #A6ABB7; }
.cel-corpo { padding: 14px 16px 26px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; flex: 1; }
.cel-agora { background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: var(--sombra); display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.cel-agora .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sinal-claro); color: var(--sinal-escuro); display: grid; place-items: center; }
.cel-agora small { display: block; font-size: 11.5px; color: var(--suave); }
.cel-agora b { font-size: 14.5px; }
.cel-etapas { margin: 0; padding: 0; list-style: none; }
.cel-etapas li { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; color: #9AA0AC; position: relative; }
.cel-etapas li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D6D9E0; flex: none; display: grid; place-items: center; background: #F4F5F7; }
.cel-etapas li.feita { color: var(--tinta); }
.cel-etapas li.feita i { background: var(--entregue); border-color: var(--entregue); }
.cel-etapas li.feita i::after { content: ""; width: 7px; height: 3.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.cel-etapas li.vez { color: var(--tinta); font-weight: 600; }
.cel-etapas li.vez i { border-color: var(--sinal); animation: pulsa 1.8s infinite; }
.cel-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cel-fotos canvas { width: 100%; aspect-ratio: 1; border-radius: 8px; display: block; }
.zap { background: #25D366; color: #fff; border: 0; border-radius: 12px; padding: 11px; font-weight: 700; display: flex; gap: 8px; align-items: center; justify-content: center; }
.notif { position: absolute; left: 10px; right: 10px; top: 48px; z-index: 5; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-radius: 18px; padding: 11px 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); font-size: 12px; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; animation: desce 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) both; }
.notif .selo { width: 30px; height: 30px; border-radius: 8px; }
.notif b { display: block; font-size: 12.5px; }
.notif small { color: var(--suave); font-size: 11px; align-self: start; }

/* ---------- modal do contrato ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(22, 24, 29, 0.45); display: grid; place-items: center; padding: 16px; animation: aparece 0.2s both; }
.modal { background: var(--branco); border-radius: 16px; width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--sombra-alta); animation: pop 0.28s var(--curva) both; overflow: hidden; }
.modal header { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.modal header b { flex: 1; font-size: 15px; }
.modal-corpo { overflow-y: auto; background: #E9EBEF; padding: 22px; }
.folha { background: #fff; max-width: 620px; margin: 0 auto; padding: 40px 44px; box-shadow: var(--sombra); font: 13px/1.6 Georgia, "Times New Roman", serif; color: #222; }
.folha .cab { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--grafite); padding-bottom: 10px; margin-bottom: 18px; font-family: var(--f); }
.folha .cab b { font-size: 15px; }
.folha h5 { font: 700 15px var(--f); text-align: left; margin: 0 0 14px; letter-spacing: 0.02em; }
.folha p { margin: 0 0 10px; }
.folha .campo { background: var(--sinal-claro); border-radius: 3px; padding: 0 3px; }
.folha table { min-width: 0; font-family: var(--f); font-size: 12.5px; margin: 6px 0 14px; }
.folha td, .folha th { height: 30px; border-left: 0 !important; box-shadow: none !important; padding: 0 6px; }
.assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; font-family: var(--f); font-size: 12px; text-align: center; }
.assinaturas div { border-top: 1px solid #333; padding-top: 6px; }
.modal footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--linha); flex-wrap: wrap; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--grafite); color: #fff; border-radius: 12px; padding: 10px 10px 10px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); max-width: calc(100% - 32px); animation: sobe 0.3s var(--curva) both; }
.toast svg { width: 17px; height: 17px; color: var(--sinal); }
.toast button { background: none; border: 0; color: var(--sinal); font-weight: 700; padding: 4px 8px; border-radius: 7px; }
.toast button:hover { background: var(--grafite-3); }

/* ---------- assistente ---------- */
.chat-bolha { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45; background: var(--grafite); color: #fff; border: 0; border-radius: 26px; padding: 12px 18px 12px 14px; display: flex; gap: 8px; align-items: center; font-weight: 600; box-shadow: 0 12px 30px rgba(22, 24, 29, 0.35); transition: transform 0.2s var(--curva); }
.chat-bolha svg { color: var(--sinal); }
.chat-bolha:hover { transform: translateY(-2px) scale(1.02); }
.chat-bolha::after { content: ""; position: absolute; top: 4px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--sinal); border: 2px solid var(--grafite); animation: pulsa 2s infinite; }
.chat { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: min(380px, calc(100% - 32px)); height: min(560px, calc(100% - 40px)); background: var(--branco); border-radius: 18px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; overflow: hidden; animation: pop 0.28s var(--curva) both; transform-origin: bottom right; }
.chat header { display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; background: var(--grafite); color: #fff; }
.chat header div { flex: 1; }
.chat header b { display: block; }
.chat header small { color: #A6ABB7; font-size: 12px; }
.chat header .fechar { background: var(--grafite-3); color: #fff; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #F7F8FA; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; animation: entra 0.25s var(--curva) both; }
.msg.bot { background: var(--branco); box-shadow: var(--sombra); border-bottom-left-radius: 4px; align-self: start; }
.msg.eu { background: var(--grafite); color: #fff; border-bottom-right-radius: 4px; align-self: end; }
.msg .ir { display: inline-flex; margin-top: 8px; gap: 6px; align-items: center; background: var(--sinal-claro); color: var(--sinal-escuro); border: 0; border-radius: 8px; padding: 5px 10px; font-weight: 600; font-size: 12.5px; }
.digitando { display: inline-flex; gap: 4px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: #B4B9C4; animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }
.chat-sug { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; background: var(--branco); }
.chat-sug button { border: 1px solid var(--linha); background: var(--branco); border-radius: 16px; padding: 5px 10px; font-size: 12.5px; transition: border-color 0.15s, background 0.15s; }
.chat-sug button:hover { border-color: var(--sinal); background: var(--sinal-claro); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--branco); }
.chat-form input { flex: 1; min-width: 0; border: 1px solid var(--linha); border-radius: 10px; padding: 9px 12px; }
.chat-form input:focus { outline: none; border-color: var(--sinal); }
.chat-form button { width: 40px; border: 0; border-radius: 10px; background: var(--grafite); color: var(--sinal); display: grid; place-items: center; }

/* ---------- animações ---------- */
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes desliza { from { transform: translateX(60px); opacity: 0; } }
@keyframes desce { from { transform: translateY(-140%); opacity: 0; } }
@keyframes sobe { from { transform: translate(-50%, 20px); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } }
@keyframes cresce { from { transform: scaleX(0); } }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(255, 196, 0, 0); } }
@keyframes pula { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* Menos movimento: param só os movimentos grandes; hover e transições curtas ficam. */
@media (prefers-reduced-motion: reduce) {
  .chat-bolha::after, .cel-etapas li.vez i { animation: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2, .evolui { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .app, .app.recolhida { grid-template-columns: minmax(0, 1fr); --lat: 0px; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; height: auto; transform: translateX(-105%); transition: transform 0.3s var(--curva); z-index: 35; }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto .vela-menu { display: block; position: fixed; inset: 0; background: rgba(22, 24, 29, 0.4); z-index: 34; animation: aparece 0.2s both; }
  .app.recolhida .lat-nome, .app.recolhida .menu .rotulo, .app.recolhida .menu .cont { opacity: 1; }
  .recolher { display: none; }
  .app.recolhida .menu { margin-top: 6px; }
  .app.recolhida .lat-topo { flex-direction: row; align-items: center; }
  .hamburguer { display: grid; }
  .barra { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .area { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .demo-tag { display: none; }
  .rolagem.tab-larga { display: none; }
  .lista-celular { display: block; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .chat-bolha span { display: none; }
  .chat-bolha { padding: 14px; }
  .folha { padding: 24px 20px; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .kpi b { font-size: 21px; }
  .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabeca h1 { font-size: 22px; }
  .linha-l { grid-template-columns: 36px minmax(0, 1fr); }
  .linha-l .acoes { grid-column: 2; }
  .funil div { grid-template-columns: 86px minmax(0, 1fr) 32px; }
  .assinaturas { grid-template-columns: 1fr; }
}

/* ---------- visão geral clicável ---------- */
.chips { display: inline-flex; gap: 4px; background: #E7E9EE; border-radius: 10px; padding: 3px; }
.chips button { border: 0; background: none; border-radius: 8px; padding: 6px 12px; font-weight: 600; color: var(--suave); transition: background 0.15s, color 0.15s; }
.chips button[aria-pressed="true"] { background: var(--branco); color: var(--grafite); box-shadow: var(--sombra); }
button.kpi { border: 0; text-align: left; position: relative; transition: transform 0.16s var(--curva), box-shadow 0.16s; }
button.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.kpi-ir { position: absolute; top: 14px; right: 14px; color: var(--suave); opacity: 0; transition: opacity 0.15s, transform 0.2s var(--curva); }
button.kpi:hover .kpi-ir { opacity: 1; transform: translate(2px, -2px); }
.grafico .barra-g { cursor: pointer; transition: opacity 0.15s; }
.grafico .barra-g:hover { opacity: 0.8; }
.grade-3d { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.destaque-3d .cena { height: 236px; border-radius: 12px; overflow: hidden; background: linear-gradient(#F1F3F6, #E4E7EC); touch-action: none; }
.legenda-3d { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.legenda-3d b { display: block; }
.legenda-3d small { color: var(--suave); font-size: 12px; }
.ia-linha { width: 100%; border: 0; background: none; text-align: left; border-radius: 10px; padding: 6px 8px; margin: 0 -8px; transition: background 0.12s; }
.ia-linha:hover { background: #F6F7F9; }
.funil button { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; border: 0; background: none; border-radius: 8px; padding: 3px 6px; margin: 0 -6px; text-align: left; transition: background 0.12s; }
.funil button:hover { background: #F6F7F9; }
.funil button i { display: block; height: 22px; border-radius: 6px; background: var(--c); transform-origin: left; animation: cresce 0.7s var(--curva) both; }
.funil button b { font-family: var(--mono); font-weight: 500; text-align: right; }
.det-linha { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.det-linha:hover { background: #F8F9FB; }

/* ---------- cartão estilo Trello ---------- */
.trello { background: #F4F5F7; border-radius: 14px; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--sombra-alta); animation: pop 0.26s var(--curva) both; }
.capa { position: relative; background: #E2E5EA; min-height: 54px; }
.capa canvas { width: 100%; height: 150px; display: block; }
.capa .fechar { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.92); }
.t-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; padding: 18px 22px 24px; }
.t-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.t-titulo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.t-titulo svg { margin-top: 5px; color: var(--suave); }
.t-titulo h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.t-titulo small { color: var(--suave); }
.t-titulo small b { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linha); }
.t-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; padding-left: 34px; }
.t-meta > div > span { display: block; font-size: 12px; font-weight: 600; color: var(--suave); margin-bottom: 5px; }
.t-meta > div > div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.t-mais { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #E4E6EB; display: grid; place-items: center; margin-left: 4px; }
.t-mais svg { width: 15px; height: 15px; }
.t-etq { background: var(--c); color: #fff; font-weight: 600; font-size: 12.5px; border-radius: 6px; padding: 5px 10px; }
.t-data { display: inline-flex; gap: 6px; align-items: center; background: #E4E6EB; border-radius: 6px; padding: 5px 10px; font-weight: 500; font-size: 13px; }
.t-data svg { width: 14px; height: 14px; }
.t-data.atraso { background: #FDE7E8; color: #B42328; }
.t-principal section { display: flex; flex-direction: column; gap: 10px; }
.t-principal h4 { margin: 0; font-size: 15px; font-weight: 700; display: flex; gap: 12px; align-items: center; }
.t-principal h4 svg { color: var(--suave); }
.t-principal h4 small { margin-left: auto; font: 500 12px var(--mono); color: var(--suave); }
.t-principal section > :not(h4) { margin-left: 34px; }
.t-trilho { height: 8px; }
.t-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.t-check label { display: flex; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.t-check label:hover { background: #E9EBEF; }
.t-check input { position: absolute; opacity: 0; pointer-events: none; }
.t-check input:checked + .caixa { background: var(--entregue); border-color: var(--entregue); }
.t-check input:checked + .caixa svg { opacity: 1; transform: scale(1); }
.t-check input:focus-visible + .caixa { outline: 2px solid var(--sinal); outline-offset: 2px; }
.riscado { text-decoration: line-through; color: var(--suave); }
.t-coment { display: flex; gap: 10px; align-items: center; }
.t-coment input { flex: 1; min-width: 0; border: 1px solid var(--linha); background: var(--branco); border-radius: 10px; padding: 9px 12px; box-shadow: var(--sombra); }
.t-coment input:focus { outline: none; border-color: var(--sinal); }
.t-atividade { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.t-atividade li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; animation: entra 0.3s var(--curva) both; }
.t-atividade .av, .t-coment .av { margin: 0; width: 30px; height: 30px; }
.t-atividade small { color: var(--suave); font-size: 12px; }
.t-atividade p { margin: 4px 0 0; background: var(--branco); border-radius: 10px; padding: 8px 12px; box-shadow: var(--sombra); }
.t-lado { display: flex; flex-direction: column; gap: 6px; }
.t-lado > span { font-size: 12px; font-weight: 600; color: var(--suave); margin: 6px 0 2px; }
.t-btn { display: flex; gap: 8px; align-items: center; border: 0; background: #E4E6EB; border-radius: 8px; padding: 8px 12px; font-weight: 500; text-align: left; transition: background 0.12s, transform 0.12s; }
.t-btn:hover { background: #D9DCE2; }
.t-btn:active { transform: scale(0.98); }
.t-btn svg { width: 16px; height: 16px; }

@media (max-width: 1250px) { .colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grade-3d { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
  .t-corpo { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .t-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-lado > span { grid-column: 1 / -1; }
  .t-meta, .t-principal section > :not(h4) { padding-left: 0; margin-left: 0; }
  .modal-fundo { padding: 0; }
  .trello { border-radius: 0; max-height: 100vh; height: 100%; }
  .cabeca .chips { width: 100%; }
  .chips button { flex: 1; }
}

/* hover mais visível */
tr.item td { transition: background 0.15s; }
tr.item:hover td { background: #FFF9E0; }
tr.item:hover td:first-child { box-shadow: inset 6px 0 0 var(--cor); }
.menu button { transition: background 0.15s, color 0.15s, padding-left 0.2s var(--curva); }
.menu button:hover { padding-left: 16px; }
.app.recolhida .menu button:hover { padding-left: 12px; }
.linha-l { transition: background 0.15s; }
.linha-l:hover { background: #F8F9FB; }
.btn:hover { transform: translateY(-1px); }
.btn.forte:hover { background: #000; }
.int .ic, .kpi .ic { transition: transform 0.25s var(--curva); }
.int:hover .ic, button.kpi:hover .ic { transform: scale(1.12) rotate(-6deg); }
.pessoa-c { transition: transform 0.16s var(--curva), box-shadow 0.16s; }
.pessoa-c:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.cartao-b { transition: box-shadow 0.2s; }
.cartao-b:hover { box-shadow: var(--sombra-alta); }

.add-linha td { height: 44px; background: var(--branco); }
.add-linha .add-cartao { padding: 6px 4px; }
.form-linha { display: flex; gap: 8px; align-items: center; }
.form-linha input { flex: 1; min-width: 0; border: 1px solid var(--sinal); border-radius: 8px; padding: 7px 10px; box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.2); }
.form-linha input:focus { outline: none; }
.form-linha .btn { padding: 6px 12px; }
.pilha-status svg { opacity: 0.7; }

/* ---------- agenda ---------- */
.sinc { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: #17633D; background: #E6F6EE; border-radius: 20px; padding: 5px 11px; font-weight: 600; white-space: nowrap; }
.sinc svg { width: 14px; height: 14px; }
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.semana { background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.sem-topo, .sem-grade { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); }
.sem-topo { border-bottom: 1px solid var(--linha); }
.sem-topo span { padding: 10px 10px 8px; display: flex; gap: 6px; align-items: baseline; }
.sem-topo small { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--suave); }
.sem-topo b { font-size: 20px; font-weight: 800; }
.sem-topo .hoje b { background: var(--sinal); border-radius: 8px; padding: 0 7px; }
.sem-grade { position: relative; height: calc(var(--alto) * var(--linhas)); }
.horas { display: grid; grid-template-rows: repeat(var(--linhas), var(--alto)); }
.horas span { font: 500 11px var(--mono); color: var(--suave); text-align: right; padding: 0 8px; transform: translateY(-7px); }
.horas span:first-child { visibility: hidden; }
.dia { position: relative; border-left: 1px solid var(--linha); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--alto) - 1px), var(--linha) calc(var(--alto) - 1px), var(--linha) var(--alto)); }
.dia.hoje { background-color: #FFFCEF; }
.evento {
  position: absolute; left: 4px; right: 4px; border: 0; border-left: 4px solid var(--c); border-radius: 8px; padding: 6px 8px;
  background: color-mix(in srgb, var(--c) 14%, white); text-align: left; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  transition: transform 0.15s var(--curva), box-shadow 0.15s; animation: entra 0.4s var(--curva) both;
}
.evento:hover { transform: translateY(-1px) scale(1.02); box-shadow: var(--sombra-alta); z-index: 2; }
.evento b { font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento small { font-size: 11.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-pe { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.ev-pe .av { width: 22px; height: 22px; font-size: 9px; }
.ev-pe em { margin-left: auto; color: #17633D; display: grid; place-items: center; }
.ev-pe em svg { width: 15px; height: 15px; }
.agora-linha { position: absolute; left: -1px; right: 0; height: 2px; background: var(--atraso); z-index: 3; }
.agora-linha::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--atraso); }
.ag-lado { display: flex; flex-direction: column; gap: 14px; }
.hoje-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; border: 0; background: none; text-align: left; padding: 8px; border-radius: 10px; border-left: 3px solid var(--c); transition: background 0.12s; }
.hoje-item:hover { background: #F6F7F9; }
.hoje-item .hh { font: 600 13px var(--mono); }
.hoje-item b, .lembrete b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoje-item small, .lembrete small { color: var(--suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hoje-item > span:last-child, .lembrete > span:last-child { min-width: 0; }
.lembrete { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: center; }
.pontinho { width: 10px; height: 10px; border-radius: 50%; background: var(--obra); }
.pontinho.confirmado { background: var(--entregue); }
.ag-lista { display: none; flex-direction: column; gap: 10px; }

/* ---------- sem quebra de linha à toa ---------- */
h1, h2, h3, h4 { text-wrap: pretty; }
.nome small, .cartao .cli, .linha-l small, .ia-linha small, .t-titulo small, .legenda-3d small, .fatos > span:first-child {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.linha-l > span:nth-child(2), .ia-linha > span:first-child, .nome { min-width: 0; }
.nome { max-width: 360px; }
.nome b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabeca p { text-wrap: pretty; }

@media (max-width: 1100px) { .agenda { grid-template-columns: minmax(0, 1fr); } .ag-lado { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .agenda { display: none; }
  .ag-lista { display: flex; }
  .sinc { order: 3; }
}

/* ---------- equipe em crachá de obra ---------- */
.crachas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.cracha {
  position: relative; border: 0; text-align: left; background: var(--branco); border-radius: 14px; padding: 0 0 14px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  transition: transform 0.25s var(--curva), box-shadow 0.25s; transform-origin: top center;
}
.cracha:hover { transform: rotate(-1.2deg) translateY(-3px); box-shadow: var(--sombra-alta); }
.furo { position: absolute; top: 9px; left: 50%; width: 38px; height: 8px; margin-left: -19px; border-radius: 6px; background: var(--fundo); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); z-index: 1; }
.cr-topo { background: var(--grafite); color: #fff; padding: 26px 14px 10px; display: flex; gap: 8px; align-items: center; border-bottom: 4px solid var(--sinal); }
.cr-topo b { font-size: 11px; letter-spacing: 0.14em; }
.cr-topo .selo { width: 22px; height: 22px; border-radius: 6px; }
.cr-meio { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 14px; }
.cr-foto { width: 74px; height: 88px; border-radius: 10px; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.cr-id { min-width: 0; display: flex; flex-direction: column; }
.cr-id b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-id small { color: var(--suave); font-size: 13px; }
.cr-id em { font: 500 11.5px var(--mono); font-style: normal; color: var(--suave); margin-top: 6px; }
.cr-nrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; }
.nr { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 7px; align-items: center; background: var(--fundo); border-radius: 9px; padding: 7px 9px; }
.nr i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--entregue); }
.nr b { font-size: 12.5px; }
.nr small { font-size: 11.5px; color: var(--suave); white-space: nowrap; }
.nr.vence i { background: var(--obra); }
.nr.vence small { color: #9A5B00; font-weight: 600; }
.nr.vencida i, .nr.sem i { background: var(--atraso); }
.nr.vencida small { color: var(--atraso); font-weight: 600; }
.cr-pe { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 0 14px; }
.cr-obra { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cr-obra > svg { width: 18px; height: 18px; color: var(--suave); }
.cr-obra small { display: block; font-size: 11.5px; color: var(--suave); }
.cr-obra b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-obra > span { min-width: 0; }
.qr { width: 52px; height: 52px; flex: none; color: var(--grafite); }
.cracha-novo { background: transparent; box-shadow: none; border: 2px dashed #CDD1D8; align-items: center; justify-content: center; min-height: 240px; color: var(--suave); padding: 14px; gap: 6px; }
.cracha-novo svg { width: 30px; height: 30px; }
.cracha-novo b { color: var(--tinta); }
.cracha-novo:hover { border-color: var(--sinal); background: var(--sinal-claro); transform: translateY(-3px); box-shadow: none; }
html[data-tema="escuro"] .qr { color: var(--tinta); }
html[data-tema="escuro"] .cracha-novo { border-color: #3A3F4A; }
html[data-tema="escuro"] .nr.vence small { color: #FFC266; }

/* ---------- formulários em janela ---------- */
.form-modal { width: min(560px, 100%); }
.form-corpo { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; overflow-y: auto; }
.form-corpo label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.form-corpo input, .form-corpo select { border: 1px solid var(--linha); border-radius: 9px; padding: 9px 11px; font-size: 14px; font-weight: 400; color: var(--tinta); background: var(--branco); }
.form-corpo input:focus, .form-corpo select:focus { outline: none; border-color: var(--sinal); box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.22); }
.form-corpo .largo, .form-corpo fieldset { grid-column: 1 / -1; }
.form-corpo fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.form-corpo legend { font-size: 12.5px; font-weight: 700; color: var(--tinta); padding: 0 4px; }
.faixa-nota { flex-direction: row !important; align-items: center; gap: 8px !important; }
.faixa-nota input { flex: 1; padding: 0; accent-color: var(--sinal); }
.faixa-nota output { font: 600 12px var(--mono); color: var(--tinta); min-width: 22px; text-align: right; }
.form-modal footer .espaco { flex: 1; }
.btn.perigo { color: var(--atraso); border-color: #F5C2C4; }
.btn.perigo:hover { background: #FDE7E8; }
.form-corpo p.texto { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.form-corpo p.texto svg { color: var(--sinal-escuro); }
@media (max-width: 520px) { .form-corpo, .form-corpo fieldset { grid-template-columns: minmax(0, 1fr); } }

/* ---------- botão e painel de acessibilidade ---------- */
.aces { position: relative; }
.aces-btn { display: inline-flex; gap: 7px; align-items: center; background: var(--branco); border: 1px solid var(--linha); border-radius: 9px; height: 38px; padding: 0 12px; font-weight: 600; }
.aces-btn svg { width: 17px; height: 17px; }
.aces-pop { position: absolute; right: 0; top: 46px; z-index: 60; width: 300px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 14px; display: flex; flex-direction: column; gap: 8px; animation: pop 0.2s var(--curva) both; }
.aces-pop > p { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: 0.06em; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--fundo); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 8px; padding: 7px 6px; font-weight: 600; color: var(--suave); display: flex; gap: 5px; align-items: center; justify-content: center; }
.seg button svg { width: 14px; height: 14px; }
.seg button[aria-pressed="true"] { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra); }
.aces-chave { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; cursor: pointer; }
.aces-chave b { display: block; font-size: 13.5px; }
.aces-chave small { color: var(--suave); font-size: 12px; }
.aces-chave input { position: absolute; opacity: 0; pointer-events: none; }
.aces-chave i { width: 40px; height: 22px; border-radius: 12px; background: #CDD1D8; position: relative; flex: none; transition: background 0.2s; }
.aces-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--curva); }
.aces-chave input:checked + i { background: var(--entregue); }
.aces-chave input:checked + i::after { transform: translateX(18px); }
.aces-chave input:focus-visible + i { outline: 2px solid var(--sinal); outline-offset: 2px; }
@media (max-width: 820px) { .aces-btn span { display: none; } .aces-btn { width: 38px; padding: 0; justify-content: center; } .aces-pop { position: fixed; left: 16px; right: 16px; width: auto; top: 64px; } }

/* ---------- tamanho do texto ---------- */
html[data-texto="grande"] body { zoom: 1.1; }
html[data-texto="maior"] body { zoom: 1.22; }

/* ---------- menos animação (escolha da pessoa) ---------- */
html[data-movimento="menos"] *, html[data-movimento="menos"] *::before, html[data-movimento="menos"] *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }

/* ---------- alto contraste ---------- */
html[data-contraste="1"] { --suave: #3E4350; --linha: #9AA0AC; }
html[data-contraste="1"][data-tema="escuro"] { --suave: #D3D7DF; --linha: #6B7280; }
html[data-contraste="1"] .kpi, html[data-contraste="1"] .cartao-b, html[data-contraste="1"] .cartao, html[data-contraste="1"] .lista, html[data-contraste="1"] .rolagem { box-shadow: 0 0 0 1.5px var(--linha); }

/* ---------- tema escuro ---------- */
html[data-tema="escuro"] {
  --fundo: #0F1115; --branco: #171A20; --tinta: #E8EAEE; --suave: #9AA0AC; --linha: #2A2E37;
  --sinal-claro: #3A3011; --sinal-escuro: #FFD452;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -14px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
html[data-tema="escuro"] .barra { background: rgba(15, 17, 21, 0.86); }
html[data-tema="escuro"] th, html[data-tema="escuro"] .soma td { background: #1C1F26; }
html[data-tema="escuro"] tr.item:hover td, html[data-tema="escuro"] .linha-l:hover, html[data-tema="escuro"] .det-linha:hover,
html[data-tema="escuro"] .ia-linha:hover, html[data-tema="escuro"] .funil button:hover, html[data-tema="escuro"] .hoje-item:hover,
html[data-tema="escuro"] .etapas label:hover, html[data-tema="escuro"] .menu-status button:hover { background: #22262E; }
html[data-tema="escuro"] tr.item:hover td { background: #2A2614; }
html[data-tema="escuro"] .coluna { background: #1C1F26; }
html[data-tema="escuro"] .coluna h3 small { background: #2A2E37; }
html[data-tema="escuro"] .add-cartao:hover { background: #2A2E37; }
html[data-tema="escuro"] .troca, html[data-tema="escuro"] .chips { background: #22262E; }
html[data-tema="escuro"] .trilho { background: #2A2E37; }
html[data-tema="escuro"] .fechar { background: #22262E; }
html[data-tema="escuro"] .trello, html[data-tema="escuro"] .modal-corpo, html[data-tema="escuro"] .chat-msgs { background: #13161B; }
html[data-tema="escuro"] .capa { background: #22262E; }
html[data-tema="escuro"] .t-btn, html[data-tema="escuro"] .t-mais, html[data-tema="escuro"] .t-data { background: #22262E; }
html[data-tema="escuro"] .t-btn:hover, html[data-tema="escuro"] .t-check label:hover { background: #2A2E37; }
html[data-tema="escuro"] .faixa.ok { background: #0F2A1D; color: #8FE3B5; }
html[data-tema="escuro"] .faixa.info { background: #13233F; color: #A9C7FF; }
html[data-tema="escuro"] .nota-ia { background: #1C1F26; }
html[data-tema="escuro"] .grafico .barra-g:not(.atual) { fill: #E8EAEE; }
html[data-tema="escuro"] .dia.hoje { background-color: #1D1A10; }
html[data-tema="escuro"] .evento { background: color-mix(in srgb, var(--c) 22%, #171A20); }
html[data-tema="escuro"] .sinc { background: #0F2A1D; color: #8FE3B5; }
html[data-tema="escuro"] .demo-tag { color: var(--sinal); }
html[data-tema="escuro"] .destaque-3d .cena { background: linear-gradient(#1C1F26, #121419); }
html[data-tema="escuro"] .caixa { background: #171A20; border-color: #4A505C; }
html[data-tema="escuro"] .aces-chave i { background: #3A3F4A; }
html[data-tema="escuro"] .btn.forte { background: var(--sinal); color: var(--grafite); border-color: var(--sinal); }
html[data-tema="escuro"] .btn.forte svg { color: var(--grafite); }
html[data-tema="escuro"] .chat-bolha { background: var(--sinal); color: var(--grafite); }
html[data-tema="escuro"] .chat-bolha svg { color: var(--grafite); }
html[data-tema="escuro"] .folha { background: #fff; }
html[data-tema="escuro"] .t-etq[style*="8E94A2"] { color: #fff; }

/* ---------- notificações ---------- */
.notifs { position: relative; }
.sino { transition: background 0.15s; }
.sino:hover { background: var(--fundo); }
.sino[aria-expanded="true"] { border-color: var(--sinal); }
.notif-pop { position: absolute; right: 0; top: 46px; z-index: 60; width: 380px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; animation: pop 0.2s var(--curva) both; }
.notif-pop header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.cont-n { font-size: 11.5px; font-weight: 700; background: var(--atraso); color: #fff; border-radius: 10px; padding: 1px 8px; }
.ler-todas { margin-left: auto; border: 0; background: none; color: var(--suave); font-size: 12.5px; font-weight: 600; border-radius: 7px; padding: 4px 6px; }
.ler-todas:hover:not(:disabled) { color: var(--tinta); background: var(--fundo); }
.ler-todas:disabled { opacity: 0.5; cursor: default; }
.notif-lista { max-height: 420px; overflow-y: auto; }
.notif-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; border: 0; background: none; padding: 11px 14px; border-bottom: 1px solid var(--linha); position: relative; transition: background 0.12s; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--fundo); }
.notif-item.nova { background: color-mix(in srgb, var(--sinal) 9%, var(--branco)); }
.notif-item.nova::after { content: ""; position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--pedido); }
.n-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: #fff; display: grid; place-items: center; }
.n-ic svg { width: 16px; height: 16px; }
.n-t { display: block; font-size: 13px; padding-right: 14px; }
.notif-item small { color: var(--suave); font-size: 12px; }
@media (max-width: 820px) { .notif-pop { position: fixed; left: 16px; right: 16px; width: auto; top: 64px; } }
html[data-tema="escuro"] .troca button[aria-pressed="true"], html[data-tema="escuro"] .chips button[aria-pressed="true"] { color: var(--tinta); }
html[data-tema="escuro"] .av[style*="#16181D"], html[data-tema="escuro"] .fifa-foto[style*="#16181D"] { background: #4A505C !important; }
html[data-tema="escuro"] .av { border-color: var(--branco); }

/* ---------- fluxo do contrato ---------- */
.doc-modal { width: min(820px, 100%); height: min(860px, calc(100vh - 32px)); }
.doc-modal.largo { width: min(1240px, 100%); }
.doc-modal header { flex-wrap: wrap; }
.doc-modal header > b { flex: 0 1 auto; margin-right: auto; }
.trilha-doc { list-style: none; margin: 0 8px 0 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.trilha-doc li { display: flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 600; color: var(--suave); padding: 4px 9px; border-radius: 20px; }
.trilha-doc li svg { width: 14px; height: 14px; }
.trilha-doc li.agora { background: var(--sinal-claro); color: var(--sinal-escuro); }
.trilha-doc li.feito { color: var(--entregue); }
.trilha-doc li + li::before { content: ""; width: 14px; height: 2px; background: var(--linha); margin-right: 4px; border-radius: 1px; }
.doc-modal .modal-corpo { flex: 1; min-height: 0; }
.editor-doc { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.lista-cl { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--linha); }
.dica { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--suave); }
.dica svg { width: 15px; height: 15px; }
.cl { border: 1px solid var(--linha); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--branco); transition: opacity 0.2s, border-color 0.15s; animation: entra 0.3s var(--curva) both; }
.cl:focus-within { border-color: var(--sinal); box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.18); }
.cl.desligada { opacity: 0.5; }
.cl-topo { display: flex; gap: 6px; align-items: center; }
.cl-titulo { flex: 1; min-width: 0; border: 0; font-weight: 700; font-size: 14px; background: none; padding: 4px 2px; border-radius: 6px; }
.cl-titulo:focus { outline: none; background: var(--fundo); }
.cl-btn { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--suave); display: grid; place-items: center; }
.cl-btn:hover:not(:disabled) { background: var(--fundo); color: var(--tinta); }
.cl-btn:disabled { opacity: 0.3; }
.cl-btn svg { width: 15px; height: 15px; }
.cl textarea { border: 1px solid var(--linha); border-radius: 9px; padding: 8px 10px; font: 13px/1.5 var(--f); resize: vertical; background: var(--branco); color: var(--tinta); }
.cl textarea:focus { outline: none; border-color: var(--sinal); }
.mini-chave { position: relative; cursor: pointer; }
.mini-chave input { position: absolute; opacity: 0; }
.mini-chave i { display: block; width: 34px; height: 20px; border-radius: 11px; background: #CDD1D8; position: relative; transition: background 0.2s; }
.mini-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--curva); }
.mini-chave input:checked + i { background: var(--entregue); }
.mini-chave input:checked + i::after { transform: translateX(14px); }
.mini-chave input:focus-visible + i { outline: 2px solid var(--sinal); outline-offset: 2px; }
.biblio { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; }
.biblio > span { width: 100%; display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.biblio > span svg { width: 15px; height: 15px; }
.chip-b { display: inline-flex; gap: 5px; align-items: center; border: 1px dashed #C4C9D2; background: var(--branco); border-radius: 18px; padding: 5px 11px; font-size: 12.5px; transition: border-color 0.15s, background 0.15s; }
.chip-b:hover { border-color: var(--sinal); background: var(--sinal-claro); }
.chip-b svg { width: 13px; height: 13px; }
.chip-b.nova { border-style: solid; }
.previa-doc { overflow-y: auto; background: #E9EBEF; padding: 20px; }
.previa-doc .folha, .mini-folha .folha { position: relative; }
.clausula { animation: aparece 0.25s both; }
.salvo { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--entregue); font-weight: 600; opacity: 0.55; }
.salvo svg { width: 14px; height: 14px; }
.salvo.pisca { animation: pisca 0.8s both; }
@keyframes pisca { 0% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0.55; transform: none; } }
.envio { flex: 1; }
.envio fieldset { grid-template-columns: 1fr 1fr; }
.envio input:disabled { background: var(--fundo); color: var(--suave); }
.acompanha { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.linha-ass { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.linha-ass li { display: flex; flex-direction: column; gap: 6px; position: relative; }
.linha-ass li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 38px; right: 6px; height: 2px; background: var(--linha); }
.linha-ass li.feito:not(:last-child)::after { background: var(--entregue); }
.bola { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); background: var(--fundo); color: var(--suave); border: 2px solid var(--linha); transition: background 0.3s, border-color 0.3s; }
.bola svg { width: 16px; height: 16px; }
.linha-ass li.feito .bola { background: var(--entregue); border-color: var(--entregue); color: #fff; animation: pop 0.35s var(--curva) both; }
.linha-ass li.agora .bola { border-color: var(--sinal); color: var(--tinta); animation: pulsa 1.6s infinite; }
.linha-ass b { font-size: 13px; }
.linha-ass small { display: block; color: var(--suave); font-size: 11.5px; }
.acompanha .faixa { align-items: center; }
.acompanha .faixa .btn { margin-left: auto; }
.mini-folha { background: #E9EBEF; border-radius: 12px; padding: 16px; }
.carimbo-doc { position: absolute; right: 28px; top: 8px; transform: rotate(-12deg); border: 3px solid #1F8A57; color: #1F8A57; font: 800 22px var(--f); letter-spacing: 0.16em; padding: 2px 12px; border-radius: 6px; opacity: 0.85; animation: carimba-doc 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes carimba-doc { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } }
.rubrica { display: block; font: italic 600 20px "Brush Script MT", "Segoe Script", cursive; color: #1E3A8A; margin-bottom: 2px; animation: aparece 0.6s both; }
.verifica { margin-top: 18px !important; font: 11px var(--mono); color: #666; text-align: center; }
html[data-tema="escuro"] .previa-doc, html[data-tema="escuro"] .mini-folha { background: #13161B; }
html[data-tema="escuro"] .chip-b { border-color: #3A3F4A; }
@media (max-width: 900px) {
  .editor-doc { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .lista-cl { border-right: 0; overflow: visible; }
  .previa-doc { overflow: visible; }
  .trilha-doc { order: 3; width: 100%; overflow-x: auto; }
  .trilha-doc li span { display: none; }
  .linha-ass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-ass li::after { display: none; }
  .doc-modal { height: 100vh; border-radius: 0; }
}