/* Mockups do portal3 · CDP construção civil · Grupo Aço Cearense
   Pele copiada do portal3 no ar (public/css/base.css do repo portal-accs-3):
   sidebar clara por seções, topbar com busca, faixa navy com grafismo do K,
   títulos condensados em caixa alta, cartões com fio colorido. */

@font-face { font-family: Herokid; src: url(fontes/herokid-semibold.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --navy: #223564; --navy-2: #2E4784; --navy-3: #16233F;
  --azul: #6EAFD5; --azul-2: #4496BB; --azul-fraco: #E3EEF7;
  --turq: #55C0B3; --lima: #94C120; --coral: #FF5C60;
  --m1: #6EAFD5; --m2: #55C0B3; --m3: #4E7BD4;
  --bg: #F4F7FB; --bg2: #FFFFFF; --bg3: #EEF3F9; --bg4: #E2EAF3;
  --border: #DCE5F0; --border2: #C9D7E7;
  --text: #16233F; --text2: #4A5B7A; --text3: #53637F; --text4: #8494AD;
  --ok: #0E7A47; --alerta: #9A6B00; --ruim: #B8323D;
  --sans: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Barlow Condensed', Manrope, sans-serif;
  --sidebar: 252px; --chave: 54px;
  --sombra: 0 1px 2px rgba(22,35,63,.05), 0 8px 24px rgba(22,35,63,.07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 500 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: var(--navy-2); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 2px; border-radius: 6px; }

/* ── chave A | B | C (fora do portal, é a moldura da proposta) ───────────── */
.chave { position: sticky; top: 0; z-index: 80; height: var(--chave); background: var(--navy-3); color: #dce7f4;
  display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.chave .rot { font: 800 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8fb2d6; white-space: nowrap; }
.chave .rot b { color: #fff; font-weight: 800; }
.chave nav { display: flex; gap: 6px; margin: 0 auto; background: rgba(255,255,255,.06); padding: 4px; border-radius: 12px; }
.chave nav a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px;
  color: #cfdcea; text-decoration: none; font: 700 13px var(--sans); white-space: nowrap; }
.chave nav a .l { font: 700 18px var(--titulo); width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; }
.chave nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.chave nav a.on { background: var(--azul); color: var(--navy-3); }
.chave nav a.on .l { background: var(--navy-3); color: var(--azul); }
.chave .assina { display: flex; align-items: center; gap: 8px; color: #8fb2d6; font-size: 11px; text-decoration: none; white-space: nowrap; min-height: 40px; }
.chave .assina img { height: 20px; width: auto; }
.chave .ficticio { font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #FFD27A;
  border: 1px solid rgba(255,210,122,.45); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* faixa que diz o que a proposta defende */
.defende { background: linear-gradient(90deg, #1B2B52, var(--navy)); color: #fff; padding: 12px 22px;
  display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden;
  padding-left: max(22px, env(safe-area-inset-left)); }
.defende::after { content: ''; position: absolute; right: -40px; top: -30px; width: 240px; height: 130px; border-radius: 0 40px 0 40px;
  transform: skewX(-24deg); background: linear-gradient(135deg, rgba(110,175,213,.28), rgba(110,175,213,0)); pointer-events: none; }
.defende .letra { font: 700 40px/1 var(--titulo); color: var(--azul); }
.defende h2 { font: 700 21px/1.1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; }
.defende p { font-size: 13px; color: #c8d8ea; max-width: 92ch; }
.defende .quem { margin-left: auto; text-align: right; font-size: 11.5px; color: #c8d8ea; white-space: nowrap; position: relative; z-index: 1; }
.defende .quem b { display: block; color: #fff; font-size: 13px; }

/* ── casca do portal3 ────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--chave)); }
#sb { position: sticky; top: var(--chave); align-self: start; height: calc(100vh - var(--chave)); overflow-y: auto;
  background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; scrollbar-width: thin; }
#sb > * { flex-shrink: 0; }
.sb-topo { padding: 18px 18px 12px; }
.sb-topo img { height: 22px; width: auto; }
.sb-casa { margin: 4px 0 0; background: var(--navy); color: #fff; padding: 14px 18px; position: relative; overflow: hidden; }
.sb-casa::after { content: ''; position: absolute; right: -30px; top: -20px; width: 110px; height: 90px; border-radius: 0 26px 0 26px;
  transform: skewX(-24deg); background: rgba(110,175,213,.22); }
.sb-casa b { font: 700 22px/1 var(--titulo); letter-spacing: .05em; display: block; }
.sb-casa span { font: 800 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--azul); }
.sb-nav { padding: 6px 10px 22px; flex: 1; }
.sb-sec { font: 800 10px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--text3); padding: 16px 10px 6px; }
.sb-it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 9px; min-height: 40px; color: var(--text); text-decoration: none; }
.sb-it .ic { width: 20px; height: 20px; flex: 0 0 20px; color: var(--text2); }
.sb-it .tx { min-width: 0; flex: 1; }
.sb-it .tx b { display: block; font: 700 13px/1.25 var(--sans); }
.sb-it .tx small { display: block; font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-it:hover { background: var(--bg3); }
.sb-it.on { background: var(--azul-fraco); box-shadow: inset 3px 0 0 var(--navy); }
.sb-it.on .ic { color: var(--navy); }
.sb-it.hoje { opacity: .62; }
.tag { font: 800 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border2); color: var(--text2); white-space: nowrap; }
.tag.novo { color: #0B5E8A; background: #E1F1FB; border-color: #A9D2EC; }
.tag.hot { color: #9C2A31; background: #FDE8E9; border-color: #F3B6BA; }
.tag.futuro { color: #3A4E9C; background: #E8ECFB; border-color: #BCC6F0; }
.sb-pe { padding: 14px 18px 18px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); }

.corpo { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: var(--chave); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 26px;
  background: rgba(244,247,251,.9); backdrop-filter: saturate(1.5) blur(10px); border-bottom: 1px solid var(--border); }
.topbar .menu { display: none; }
.topbar .trilha { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .trilha b { color: var(--text); font-weight: 700; }
.busca { display: flex; align-items: center; gap: 8px; flex: 0 1 360px; margin-left: 12px; background: #fff; border: 1px solid var(--border2);
  border-radius: 10px; padding: 0 12px; min-height: 40px; color: var(--text3); font-size: 13px; }
.busca kbd { margin-left: auto; font: 700 10px var(--sans); background: var(--bg3); border-radius: 5px; padding: 2px 6px; color: var(--text2); }
.topbar .dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.quem-sou { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); white-space: nowrap; }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--sans);
  background: var(--navy); color: #fff; flex: 0 0 30px; }
.btn { border: 1px solid var(--border2); background: #fff; color: var(--navy); font: 700 13px var(--sans);
  padding: 0 16px; border-radius: 999px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.btn:hover { border-color: var(--navy); background: var(--azul-fraco); }
.btn.forte { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.forte:hover { background: var(--navy-2); }
.btn.peq { min-height: 40px; padding: 0 13px; font-size: 12.5px; }

.palco { padding: 22px 26px 60px; }
.tela { display: none; }
.tela.on { display: block; animation: entra .25s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* faixa navy do topo da tela (igual ao Início/Meu dia do portal3) */
.faixa { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: 14px; padding: 18px 22px;
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.faixa::before { content: ''; position: absolute; right: -60px; top: -40px; width: 340px; height: 220px; border-radius: 0 56px 0 56px;
  transform: skewX(-24deg); background: linear-gradient(135deg, rgba(110,175,213,.32), rgba(110,175,213,0)); }
.faixa.foto::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 46%; background: var(--img) center 40%/cover;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: .3; mix-blend-mode: luminosity; }
.faixa > * { position: relative; z-index: 1; }
.faixa .onde { font: 800 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--azul); }
.faixa h1 { font: 700 32px/1.05 var(--titulo); letter-spacing: .03em; text-transform: uppercase; margin: 3px 0 4px; }
.faixa p { color: #c8d8ea; font-size: 13px; max-width: 70ch; }
.faixa .dir { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.faixa .btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.faixa .btn:hover { background: rgba(255,255,255,.16); }
.faixa .btn.forte { background: var(--azul); color: var(--navy-3); border-color: var(--azul); }

/* carimbo de fonte, período e hora (lei 5) */
.carimbo { font-size: 10.5px; color: var(--text3); margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.carimbo i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--bg3); }
.carimbo i.fic { background: #FFF4DB; color: #7A4F00; font-weight: 700; }

/* cartões */
.card { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; box-shadow: var(--sombra); min-width: 0; }
.card.fio { border-top: 3px solid var(--c, var(--navy)); }
.card h3 { font: 700 18px/1.15 var(--titulo); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.card .sub { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.rot { font: 800 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.num { font: 700 38px/1 var(--titulo); color: var(--text); font-variant-numeric: tabular-nums; }
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.lado { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }

/* chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border2); background: #fff; color: var(--text2); border-radius: 999px; padding: 0 13px;
  font: 700 12px var(--sans); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .bola { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* pílulas de jornada, motor e tipo */
.pil { display: inline-flex; align-items: center; gap: 5px; font: 800 10px var(--sans); letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pil.rel { background: #E8ECFB; color: #33478F; }
.pil.sol { background: #E1F1FB; color: #0B5E8A; }
.pil.con { background: #E3F5EC; color: #0E6A40; }
.pil.m1 { background: #E1F1FB; color: #0B5E8A; }
.pil.m2 { background: #DFF4F1; color: #106B60; }
.pil.m3 { background: #E8ECFB; color: #33478F; }
.pil.tipo { background: var(--bg3); color: var(--text2); }
.pil.tipo::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }

/* duas notas: industrial e comercial */
.notas { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center; font-size: 11px; color: var(--text2); min-width: 150px; }
.notas .b { height: 6px; background: var(--bg4); border-radius: 4px; overflow: hidden; }
.notas .b i { display: block; height: 100%; border-radius: 4px; background: var(--c); transition: width .8s ease; }
.notas .v { font: 800 11px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }

/* ── A: fila do dia ──────────────────────────────────────────────────────── */
.capac { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.capac .barra { flex: 1 1 260px; }
.trilho { height: 14px; background: var(--bg4); border-radius: 8px; display: flex; overflow: hidden; }
.trilho i { display: block; height: 100%; transition: width .6s ease; }
.leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text2); margin-top: 7px; }
.leg span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.fatias { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 14px 0 16px; }
.fatia { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; }
.fatia.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.fatia .rot { color: var(--text2); }
.fatia .lin { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.fatia .num { font-size: 32px; }
.fatia .meta { font-size: 11.5px; color: var(--text2); }
.fatia .bolinhas { display: flex; gap: 4px; margin-top: 8px; }
.fatia .bolinhas i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--c); }
.fatia .bolinhas i.f { background: var(--c); }

.fila { display: flex; flex-direction: column; gap: 9px; }
.item { display: grid; grid-template-columns: 34px minmax(0,1fr) 170px auto; gap: 14px; align-items: center; background: #fff;
  border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; transition: opacity .3s, background .3s; }
.item .ord { font: 700 24px/1 var(--titulo); color: var(--text3); text-align: center; }
.item .nm { font: 800 14px/1.3 var(--sans); color: var(--text); cursor: pointer; background: none; border: 0; text-align: left; padding: 0; }
.item .nm:hover { text-decoration: underline; }
.item .mt { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 5px; align-items: center; }
.item .mt .cid { font-size: 11.5px; color: var(--text3); }
.item .porque { font-size: 12.5px; color: var(--text2); }
.item .porque b { color: var(--text); }
.item .acoes { display: flex; gap: 6px; }
.item.feito { opacity: .5; background: var(--bg3); }
.item.feito .nm { text-decoration: line-through; }
.ok-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border2); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--text3); }
.ok-btn:hover { border-color: var(--ok); color: var(--ok); }
.item.feito .ok-btn { background: var(--ok); border-color: var(--ok); color: #fff; }

.semana { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.semana .d { text-align: center; font-size: 10.5px; color: var(--text3); }
.semana .d .pz { height: 64px; border-radius: 8px; background: var(--bg3); display: flex; flex-direction: column-reverse; overflow: hidden; margin-bottom: 4px; }
.semana .d .pz i { display: block; background: var(--navy); }
.semana .d.hoje .pz i { background: var(--azul-2); }
.semana .d b { display: block; font: 700 15px var(--titulo); color: var(--text); }
.boi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.boi i { height: 26px; border-radius: 5px; background: var(--bg4); }
.boi i.f { background: var(--navy); }
.boi i.h { background: var(--azul); }
.regra { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text2); }
.regra li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.regra li b { color: var(--text); }
.regra .n { font: 700 16px/1.2 var(--titulo); color: var(--azul-2); }

/* ── leads quentes ───────────────────────────────────────────────────────── */
.ponte { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.ponte .no { flex: 1 0 150px; background: var(--bg3); border-radius: 11px; padding: 11px 13px; position: relative; }
.ponte .no b { display: block; font: 700 15px/1.15 var(--titulo); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.ponte .no small { font-size: 11.5px; color: var(--text2); }
.ponte .no.cod { background: var(--navy); }
.ponte .no.cod b { color: var(--azul); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.ponte .no.cod small { color: #c8d8ea; }
.ponte .seta { flex: 0 0 34px; display: grid; place-items: center; color: var(--azul-2); }
.ponte .seta svg { width: 26px; }
.ponte .seta path { stroke-dasharray: 6 5; animation: fluxo 1.2s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -22; } }
.leads { display: flex; flex-direction: column; gap: 8px; }
.lead { display: grid; grid-template-columns: 64px minmax(0,1fr) 150px 150px auto; gap: 14px; align-items: center; background: #fff;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.lead.chegou { animation: chega 1.2s ease; border-color: var(--azul-2); }
@keyframes chega { 0% { background: #DDEFFB; transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; transform: none; } 100% { background: #fff; } }
.lead .tempo { text-align: center; }
.lead .tempo b { display: block; font: 700 22px/1 var(--titulo); }
.lead .tempo small { font-size: 10px; color: var(--text3); }
.lead .tempo.quente b { color: var(--ruim); }
.lead .nm { font: 800 14px/1.3 var(--sans); }
.lead .cid { font-size: 11.5px; color: var(--text3); }
.lead .k { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.lead .vv { font-size: 12.5px; font-weight: 700; }
.estado { font: 800 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.estado.novo { background: #FDE8E9; color: #9C2A31; }
.estado.em { background: #FFF4DB; color: #7A4F00; }
.estado.q { background: #E3F5EC; color: #0E6A40; }
.estado.d { background: var(--bg3); color: var(--text3); }

/* ── B: radar por jornada ────────────────────────────────────────────────── */
.eixo { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 8px; position: relative; }
.seta-eixo { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text2); margin: 4px 0 14px; }
.seta-eixo .linha { flex: 1; height: 2px; background: linear-gradient(90deg, var(--navy), var(--azul), var(--turq)); position: relative; }
.seta-eixo .linha::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--turq); }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(270px,1fr)); gap: 14px; align-items: start; }
.col { background: var(--bg3); border-radius: 14px; padding: 10px; min-width: 0; }
.col-cab { background: #fff; border-radius: 11px; padding: 12px 13px; border-top: 4px solid var(--c); margin-bottom: 10px; }
.col-cab h3 { font: 700 20px/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); display: flex; align-items: baseline; gap: 8px; }
.col-cab h3 small { font: 700 13px var(--sans); color: var(--text3); letter-spacing: 0; text-transform: none; }
.col-cab .dec { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--text2); }
.col-cab .dec svg { width: 18px; color: var(--c); flex: 0 0 18px; }
.col-cab .dec b { color: var(--text); }
.col-cab .tk { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.col-cab .tk span { font-size: 10.5px; background: var(--bg3); border-radius: 6px; padding: 2px 7px; color: var(--text2); }
.cartao { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(22,35,63,.05); transition: transform .15s, box-shadow .15s; text-align: left; width: 100%; display: block; }
.cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.cartao .t1 { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.cartao .nm { font: 800 13.5px/1.3 var(--sans); margin: 6px 0 2px; }
.cartao .cid { font-size: 11.5px; color: var(--text3); }
.cartao .sinal { font-size: 12px; color: var(--text2); margin: 7px 0 8px; padding-left: 9px; border-left: 2px solid var(--azul); }
.cartao .pe { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cartao .ton { font: 700 18px/1 var(--titulo); color: var(--navy); white-space: nowrap; }
.cartao .ton small { font: 600 10px var(--sans); color: var(--text3); }
.cartao.duas { box-shadow: inset 0 0 0 2px var(--turq); }
.selo-duas { font: 800 9.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #106B60; }
.vazio-col { font-size: 12px; color: var(--text3); padding: 14px; text-align: center; border: 1px dashed var(--border2); border-radius: 10px; }

.matriz-box { position: relative; }
.matriz-box svg { width: 100%; height: auto; display: block; }
.matriz-box .bol { cursor: pointer; transition: r .2s; }
.matriz-box .bol:hover { stroke: var(--navy-3); stroke-width: 2.5; }

/* ── C: cockpit ──────────────────────────────────────────────────────────── */
.mae { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.regua { position: relative; height: 54px; margin: 18px 0 4px; }
.regua .tr { position: absolute; left: 0; right: 0; top: 22px; height: 10px; background: var(--bg4); border-radius: 6px; }
.regua .alvo { position: absolute; top: 18px; height: 18px; background: rgba(85,192,179,.35); border: 2px solid var(--turq); border-radius: 6px; }
.regua .decl { position: absolute; top: 10px; height: 34px; border-left: 2px dashed var(--text3); }
.regua .decl span { position: absolute; top: -16px; left: -30px; width: 60px; text-align: center; font: 800 10px var(--sans); color: var(--text2); }
.regua .esc { position: absolute; top: 40px; font-size: 10px; color: var(--text3); transform: translateX(-50%); }
.sem-ref { display: inline-flex; align-items: center; gap: 6px; font: 800 11px var(--sans); color: #7A4F00; background: #FFF4DB;
  border: 1px solid #F1D79A; border-radius: 999px; padding: 4px 10px; margin-top: 8px; }
.grandeza { font: 700 30px/1 var(--titulo); color: var(--text4); margin-top: 6px; letter-spacing: .02em; }

.andou { width: 100%; border-collapse: separate; border-spacing: 4px; }
.andou th { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); text-align: center; padding: 2px; }
.andou th:first-child { text-align: left; }
.andou td { text-align: center; border-radius: 8px; font: 800 13px var(--sans); height: 42px; font-variant-numeric: tabular-nums; }
.andou td.vend { text-align: left; font: 700 13px var(--sans); background: none; white-space: nowrap; }
.andou td.vend .av { display: inline-grid; width: 26px; height: 26px; flex-basis: 26px; margin-right: 8px; font-size: 10px; vertical-align: middle; }
.andou td.tot { background: none; font: 700 20px var(--titulo); }
.h0 { background: #FBE3E4; color: #8E2830; }
.h1 { background: #FFF1D6; color: #6E4A00; }
.h2 { background: #DDF2E8; color: #0E6A40; }
.h3 { background: #0E7A47; color: #fff; }
.hp { background: repeating-linear-gradient(135deg, #EEF3F9, #EEF3F9 5px, #E2EAF3 5px, #E2EAF3 10px); color: var(--text2); }
.alerta-linha { font-size: 12px; color: var(--ruim); font-weight: 700; }

.barras { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.barras .l { display: grid; grid-template-columns: 130px 1fr 64px; gap: 10px; align-items: center; font-size: 12px; }
.barras .l .tr { height: 12px; background: var(--bg4); border-radius: 6px; position: relative; overflow: visible; }
.barras .l .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--c); transition: width .9s ease; }
.barras .l .tr .meta { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy-3); }
.barras .l .v { font: 800 12px var(--sans); text-align: right; font-variant-numeric: tabular-nums; }

.cad { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cad .r { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.cad .dt { background: var(--navy); color: #fff; border-radius: 9px; text-align: center; padding: 5px 0; }
.cad .dt b { display: block; font: 700 20px/1 var(--titulo); }
.cad .dt small { font: 800 9px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.cad .r p { font-size: 12.5px; color: var(--text2); }
.cad .r p b { color: var(--text); display: block; }

/* feed lateral de leads */
.feed { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; max-height: 470px; overflow: auto; }
.feed .f { display: grid; grid-template-columns: 44px 1fr; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 10px; background: var(--bg3); }
.feed .f.chegou { animation: chega 1.2s ease; }
.feed .f .tm { text-align: center; font: 700 16px/1 var(--titulo); }
.feed .f .tm small { display: block; font: 700 9px var(--sans); color: var(--text3); }
.feed .f b { font-size: 12.5px; display: block; line-height: 1.3; }
.feed .f span { font-size: 11px; color: var(--text2); }

/* ── Motor 3 e telas que seguem como hoje ────────────────────────────────── */
.diag svg { width: 100%; height: auto; display: block; }
.diag-rola { overflow-x: auto; }
.diag-rola svg { min-width: 760px; }

/* ── gaveta da obra ──────────────────────────────────────────────────────── */
.veu { position: fixed; inset: 0; background: rgba(22,35,63,.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.veu.on { opacity: 1; pointer-events: auto; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: #fff; z-index: 91; transform: translateX(100%);
  transition: transform .25s ease; overflow-y: auto; box-shadow: -20px 0 50px rgba(22,35,63,.2);
  padding-bottom: env(safe-area-inset-bottom); }
.gaveta.on { transform: none; }
.gav-topo { background: var(--navy); color: #fff; padding: 18px 20px 16px; position: relative; overflow: hidden; }
.gav-topo::after { content: ''; position: absolute; right: -40px; top: -20px; width: 200px; height: 140px; border-radius: 0 40px 0 40px;
  transform: skewX(-24deg); background: linear-gradient(135deg, rgba(110,175,213,.3), rgba(110,175,213,0)); }
.gav-topo > * { position: relative; z-index: 1; }
.gav-topo h2 { font: 700 26px/1.05 var(--titulo); letter-spacing: .03em; text-transform: uppercase; margin: 6px 0 2px; padding-right: 50px; }
.gav-topo p { color: #c8d8ea; font-size: 12.5px; }
.gav-fecha { position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 20px; }
.gav-corpo { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.jornada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.jornada .p { text-align: center; padding: 9px 4px; border-radius: 8px; background: var(--bg3); font-size: 11px; color: var(--text3); }
.jornada .p b { display: block; font: 700 14px var(--titulo); letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.jornada .p.on { background: var(--navy); color: #c8d8ea; }
.jornada .p.on b { color: #fff; }
.duas-notas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.anel { display: flex; gap: 12px; align-items: center; }
.anel svg { width: 74px; height: 74px; flex: 0 0 74px; }
.anel ul { list-style: none; font-size: 11px; color: var(--text2); }
.anel ul li::before { content: '· '; color: var(--azul-2); font-weight: 800; }
.linha-tempo { list-style: none; border-left: 2px solid var(--border2); margin-left: 6px; padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.linha-tempo li { position: relative; font-size: 12.5px; color: var(--text2); }
.linha-tempo li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--azul-2); }
.linha-tempo li b { color: var(--text); display: block; }

.rodape { padding: 18px 26px 26px; font-size: 11.5px; color: var(--text3); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); }
.rodape a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text2); text-decoration: none; }


/* ── funis, contatos e consumo ───────────────────────────────────────────── */
.funil { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.funil .et { display: grid; grid-template-columns: 150px 1fr 48px 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.funil .en { color: var(--text2); font-weight: 600; }
.funil .eb { height: 22px; background: var(--bg3); border-radius: 6px; overflow: hidden; display: flex; justify-content: center; }
.funil .eb i { display: block; height: 100%; border-radius: 6px; transition: width .8s ease; }
.funil b { font: 700 18px var(--titulo); text-align: right; font-variant-numeric: tabular-nums; }
.funil small { font: 800 11px var(--sans); color: var(--text3); text-align: right; }
.funil small.trava { color: var(--ruim); }
.trava-txt { font-size: 12px; color: var(--text2); margin-top: 10px; padding: 7px 10px; background: #FDF1F1; border-radius: 8px; }
.trava-txt b { color: var(--ruim); }
.form-funil { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.form-funil label { display: flex; flex-direction: column; gap: 4px; }
.form-funil input, .form-funil select { font: 600 14px var(--sans); color: var(--text); border: 1px solid var(--border2); border-radius: 9px; padding: 0 11px; min-height: 42px; background: #fff; }
.etapas-ed { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 6px 0 8px; }
.etapas-ed li { display: flex; align-items: center; gap: 9px; background: var(--bg3); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.etapas-ed .n { font: 700 15px var(--titulo); color: var(--azul-2); width: 16px; }
.lead.contato { grid-template-columns: 40px minmax(0,1fr) 170px 200px auto; }
.lead.contato .av { width: 40px; height: 40px; }
.lead.pedido { grid-template-columns: 64px minmax(0,1fr) 60px auto; }
@media (max-width: 1280px) { .lead.contato { grid-template-columns: 40px minmax(0,1fr) 170px auto; } }
@media (max-width: 760px) {
  .funil .et { grid-template-columns: 96px 1fr 40px 38px; gap: 6px; }
  .lead.contato { grid-template-columns: 40px minmax(0,1fr); }
  .lead.contato > :last-child { display: none; }
  .lead.pedido { grid-template-columns: 52px minmax(0,1fr) auto; }
  .lead.pedido .estado { grid-column: 2 / -1; justify-self: start; }
}

/* ── tablet e celular ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .lado { grid-template-columns: 1fr; }
  .mae { grid-template-columns: 1fr 1fr; }
  .mae > :first-child { grid-column: 1 / -1; }
  .lead { grid-template-columns: 56px minmax(0,1fr) 140px auto; }
  .lead .so-largo { display: none; }
}
@media (max-width: 1024px) {
  :root { --sidebar: 0px; }
  .app { grid-template-columns: 1fr; }
  #sb { position: fixed; left: 0; top: var(--chave); width: 280px; z-index: 70; transform: translateX(-105%); transition: transform .22s ease;
    box-shadow: none; }
  body.menu #sb { transform: none; box-shadow: 0 0 0 100vmax rgba(22,35,63,.45); }
  .topbar .menu { display: inline-flex; }
  .busca { display: none; }
  .palco { padding: 16px 16px 50px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .topbar { padding: 8px 16px; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .kanban { grid-template-columns: repeat(3, minmax(260px, 80vw)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .col { scroll-snap-align: start; }
  .chave .rot { display: none; }
  .defende .quem { display: none; }
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 760px) {
  .chave { gap: 8px; padding: 0 8px; }
  .chave nav { margin: 0; flex: 1; }
  .chave nav a { flex: 1; justify-content: center; padding: 0 6px; }
  .chave nav a .lg { display: none; }
  .chave .assina span, .chave .ficticio { display: none; }
  .defende { padding: 10px 16px; gap: 12px; }
  .defende .letra { font-size: 32px; }
  .defende h2 { font-size: 17px; }
  .defende p { font-size: 12px; }
  .faixa { padding: 16px; }
  .faixa h1 { font-size: 26px; }
  .faixa .dir { margin-left: 0; }
  .fatias { grid-template-columns: 1fr; }
  .item { grid-template-columns: 26px minmax(0,1fr) 44px; }
  .item .notas { grid-column: 2 / -1; grid-row: 2; }
  .item .acoes .btn { display: none; }
  .g2, .g3, .g4, .mae { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 52px minmax(0,1fr); }
  .lead .so-medio { display: none; }
  .lead > :last-child { grid-column: 2; justify-self: start; }
  .eixo { grid-template-columns: 1fr; }
  .topbar .quem-sou span { display: none; }
  .barras .l { grid-template-columns: 96px 1fr 54px; }
  .tabela-rola { overflow-x: auto; }
  .tabela-rola .andou { min-width: 520px; }
  .duas-notas { grid-template-columns: 1fr; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .chave, .topbar { position: static; }
  #sb { top: 0; height: 100vh; }
  .defende p { display: none; }
}

/* alvo de toque: no dedo e na medição (lei 10) */
@media (pointer: coarse), (max-width: 1024px) {
  .item .nm { display: block; min-height: 40px; padding: 9px 0; }
  .pil-btn { min-height: 40px; padding: 0 12px; }
  .form-funil input, .form-funil select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .chave, #sb, .topbar, .veu, .gaveta { display: none !important; }
  .app { display: block; }
}