/* Paleta do escaneamento: petróleo e ciano da marca, gengiva para o que pede atenção. */
:root {
  --petroleo: #003e46;
  --petroleo-medio: #0b5560;
  --scan: #12b5c9;
  --scan-tinta: #0b7285;
  --scan-claro: #dff4f7;
  --porcelana: #edf2f1;
  --esmalte: #ffffff;
  --gengiva: #c2476a;
  --gengiva-clara: #fbecf0;
  --grafite: #18282c;
  --nevoa: #566a6f;
  --linha: #d3dfde;

  --titulo: "Poppins", "Segoe UI", sans-serif;
  --corpo: "Instrument Sans", "Segoe UI", sans-serif;
  --dado: "DM Mono", Consolas, monospace;

  --raio: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  background: var(--porcelana);
  color: var(--grafite);
  font: 400 15px/1.5 var(--corpo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, select, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--scan-tinta); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

/* ---------- trilho ---------- */
.trilho {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--petroleo); padding: 10px 0;
}
/* Mostra só o símbolo, recortado do logo oficial de marca.png. */
.trilho-marca { width: 40px; height: 48px; margin: 4px 0 16px; background: url(marca.png) -124px -124px / 312px 312px no-repeat; }
.trilho-item {
  width: 64px; padding: 10px 0 8px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #b7d3d6; text-decoration: none; font-size: 11.5px; font-weight: 500;
}
.trilho-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trilho-item:hover { color: #fff; }
.trilho-item[aria-current="page"] { background: var(--petroleo-medio); color: #fff; }
.trilho :focus-visible { outline-color: #fff; }

/* ---------- moldura ---------- */
.palco { min-width: 0; }
.faixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 9px 36px; background: var(--scan-claro); font-size: 13.5px;
}
.faixa-texto { flex: 1 1 320px; }
.faixa-quem { display: inline-flex; align-items: center; gap: 8px; color: var(--nevoa); }
.faixa-quem select { background: var(--esmalte); border: 1px solid var(--linha); border-radius: 6px; padding: 3px 6px; color: var(--grafite); }
.link { background: none; border: 0; padding: 0; color: var(--scan-tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

#tela { padding: 30px 36px 64px; }
.titulo { font: 500 clamp(23px, 2.3vw, 30px)/1.2 var(--titulo); letter-spacing: -.012em; color: var(--petroleo); }
.sub { color: var(--nevoa); margin-top: 5px; }
.topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.busca { background: var(--esmalte); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px; width: min(280px, 100%); }
.secao { font: 600 13px/1.3 var(--corpo); color: var(--nevoa); margin: 34px 0 10px; }

/* ---------- botões ---------- */
.btn { border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-prim { background: var(--petroleo); color: #fff; }
.btn-prim:hover { background: var(--petroleo-medio); }
.btn-sec { background: var(--esmalte); border-color: var(--linha); color: var(--petroleo); }
.btn-sec:hover { border-color: var(--scan-tinta); }
.btn-perigo { background: var(--esmalte); border-color: var(--linha); color: var(--gengiva); }
.btn-perigo:hover { border-color: var(--gengiva); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- a cota: a régua de etapas, desenhada como cota de planta ---------- */
.cota { position: relative; padding: 16px 12px 0 0; border-top: 1.5px solid var(--petroleo); }
.cota::before, .cota-fim::after {
  content: ""; position: absolute; top: -8.5px; width: 1.5px; height: 16px;
  background: var(--petroleo); transform: rotate(45deg);
}
.cota::before { left: 0; }
.cota-fim { border-top-color: transparent; }
.cota-taxa {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 0 8px; background: var(--porcelana);
  font: 500 12.5px/18px var(--dado); color: var(--scan-tinta); white-space: nowrap;
}
.cota-taxa.pior { color: var(--gengiva); }
.cota-nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--petroleo); }
.cota-qtd { display: block; font: 500 13px/1.4 var(--dado); color: var(--nevoa); }

.regua { display: grid; grid-template-columns: repeat(6, minmax(112px, 1fr)); min-width: 680px; padding-top: 14px; }
.regua .cota-qtd { font: 500 clamp(30px, 3.6vw, 46px)/1.1 var(--titulo); color: var(--petroleo); letter-spacing: -.02em; margin-top: 4px; }
.rolagem { overflow-x: auto; padding-bottom: 6px; }
.regua-nota { margin-top: 16px; color: var(--nevoa); }
.regua-nota strong { color: var(--gengiva); font-weight: 600; }

/* régua pequena, dentro de cartões e da ficha */
.mini { display: flex; }
.mini li { position: relative; flex: 1 1 0; min-width: 0; height: 12px; border-top: 1.5px solid var(--linha); }
.mini li::before { content: ""; position: absolute; left: 0; top: -5.5px; width: 1.5px; height: 10px; background: var(--linha); transform: rotate(45deg); }
.mini li:last-child { flex: 0 0 2px; border-top-color: transparent; }
.mini li.feito { border-top-color: var(--scan-tinta); }
.mini li.feito::before, .mini li.ponta::before { background: var(--scan-tinta); }
.mini li.ponta { border-top-color: var(--linha); }
.mini li.ponta:last-child { border-top-color: transparent; }

.mini-rotulada { padding: 12px 22px 12px; background: var(--esmalte); border-bottom: 1px solid var(--linha); }
.mini-rotulada li { height: 40px; }
.mini-rotulada li:last-child { flex: 1 1 0; }
.mini-et { display: block; padding-top: 7px; font-size: 12px; font-weight: 500; color: var(--nevoa); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.mini-rotulada .feito .mini-et, .mini-rotulada .ponta .mini-et { color: var(--petroleo); }
.mini-rotulada .ponta .mini-et { font-weight: 600; }
.mini-dt { display: block; font: 400 11px/1.3 var(--dado); color: var(--nevoa); }

/* ---------- hoje: a fila ---------- */
.fila { display: grid; gap: 10px; max-width: 1040px; }
.pass {
  display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) auto; gap: 8px 26px; align-items: start;
  background: var(--esmalte); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
}
.pass-urgencia { background: var(--gengiva-clara); border-color: #eec4d0; }
.pass-motivo { font-size: 13px; font-weight: 600; color: var(--scan-tinta); }
.pass-urgencia .pass-motivo { color: var(--gengiva); }
.pass-nome { font: 500 18px/1.3 var(--titulo); margin-top: 1px; }
.pass-nome button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--petroleo); font: inherit; text-align: left; }
.pass-nome button:hover { text-decoration: underline; text-underline-offset: 3px; }
.pass-espera { margin-top: 3px; font: 400 12.5px/1.4 var(--dado); color: var(--nevoa); }
.pass-espera.tarde { color: var(--gengiva); }
.pass-mini { margin-top: 12px; }
.dados { display: grid; gap: 5px; }
.dados > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.dados dt { color: var(--nevoa); font-size: 13.5px; }
.dados dd { font-size: 14.5px; }
.pass-vazio { color: var(--nevoa); font-size: 14px; }
.pass-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }

.vazio { background: var(--esmalte); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 22px; max-width: 1040px; color: var(--nevoa); }

.com-ia { max-width: 1040px; background: var(--esmalte); border: 1px solid var(--linha); border-radius: var(--raio); }
.com-ia li + li { border-top: 1px solid var(--linha); }
.com-ia button {
  width: 100%; display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  text-align: left; background: none; border: 0; padding: 10px 16px; cursor: pointer;
}
.com-ia button:hover { background: var(--porcelana); }
.ia-nome { font-weight: 600; color: var(--petroleo); }
.ia-texto { color: var(--nevoa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-hora { font: 400 12.5px/1.4 var(--dado); color: var(--nevoa); }

/* ---------- funil ---------- */
.quadro-rolagem { overflow-x: auto; padding: 14px 0 8px; margin-right: -36px; }
.quadro { display: grid; grid-template-columns: repeat(7, minmax(212px, 1fr)); min-width: 1520px; padding-right: 36px; }
.col { min-width: 0; }
.col-perdido { padding-left: 22px; }
.col-perdido .cota { border-top-color: var(--linha); }
.col-perdido .cota::before { background: var(--linha); }
.col-corpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 14px 0; min-height: 260px; border-radius: 8px; }
.col.alvo .col-corpo { background: var(--scan-claro); outline: 1.5px dashed var(--scan-tinta); outline-offset: -2px; padding-left: 8px; }
.col-vazia { color: var(--nevoa); font-size: 13px; }

.cartao {
  display: block; width: 100%; text-align: left; background: var(--esmalte);
  border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.cartao:hover { border-color: var(--scan-tinta); }
.cartao[draggable="true"] { cursor: grab; }
.cartao-cima { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cartao-nome { font-weight: 600; color: var(--petroleo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 13.5px; line-height: 1.35; }
.cartao-pe { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--nevoa); }
.quem-conduz { font-weight: 600; }
.quem-conduz.ia { color: var(--scan-tinta); }
.quem-conduz.espera { color: var(--gengiva); }

.temp { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.temp::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: currentColor; }
.temp-quente { color: var(--gengiva); }
.temp-morno { color: var(--scan-tinta); }
.temp-frio { color: var(--nevoa); }

/* ---------- números ---------- */
.periodo { display: inline-flex; background: var(--esmalte); border: 1px solid var(--linha); border-radius: 8px; padding: 3px; }
.periodo button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--nevoa); }
.periodo button[aria-pressed="true"] { background: var(--petroleo); color: #fff; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 14px; margin-top: 30px; }
.bloco { background: var(--esmalte); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; min-width: 0; }
.bloco h2 { font: 500 16px/1.3 var(--titulo); color: var(--petroleo); margin-bottom: 10px; }
.bloco-nota { margin-top: 12px; font-size: 13px; color: var(--nevoa); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--nevoa); padding: 4px 0 6px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { text-align: right; padding: 6px 0 6px 12px; border-bottom: 1px solid var(--porcelana); font-family: var(--dado); font-size: 13px; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; padding-left: 0; font-family: var(--corpo); font-size: 14px; white-space: normal; }
.tabela th:first-child { font-size: 12.5px; }
.tabela tr:last-child td { border-bottom: 0; }
.barras { display: grid; gap: 9px; }
.barra-rot { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.barra-rot span:last-child { font: 400 13px/1.5 var(--dado); color: var(--nevoa); }
.barra { height: 5px; background: var(--porcelana); border-radius: 3px; margin-top: 3px; }
.barra i { display: block; height: 100%; background: var(--scan-tinta); border-radius: 3px; }

/* ---------- ficha ---------- */
.ficha {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(1060px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  background: var(--porcelana); color: var(--grafite); overflow: hidden;
}
.ficha[open] { display: flex; flex-direction: column; animation: entra .2s cubic-bezier(.2, .8, .2, 1); }
.ficha::backdrop { background: rgba(0, 45, 52, .42); }
@keyframes entra { from { transform: translateX(32px); opacity: .4; } to { transform: none; opacity: 1; } }

.f-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 22px 10px; background: var(--esmalte); }
.f-topo h2 { font: 500 22px/1.2 var(--titulo); color: var(--petroleo); }
.f-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 3px; font-size: 13.5px; color: var(--nevoa); }
.f-linha a { font-family: var(--dado); color: var(--scan-tinta); }
.btn-x { width: 34px; height: 34px; flex: none; background: none; border: 1px solid var(--linha); border-radius: 8px; font-size: 19px; line-height: 1; cursor: pointer; color: var(--petroleo); }
.btn-x:hover { border-color: var(--scan-tinta); }

.f-abas { display: none; background: var(--esmalte); border-bottom: 1px solid var(--linha); }
.f-abas button { flex: 1; padding: 10px; background: none; border: 0; border-bottom: 2px solid transparent; font-weight: 600; color: var(--nevoa); cursor: pointer; }
.f-abas button[aria-selected="true"] { color: var(--petroleo); border-bottom-color: var(--petroleo); }

.f-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 368px; }
.f-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.dia { align-self: center; font: 400 12px/1.4 var(--dado); color: var(--nevoa); margin: 6px 0; }
.msg { max-width: 76%; padding: 8px 12px; border-radius: 10px; }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.msg-pe { display: block; margin-top: 2px; font-size: 11.5px; color: var(--nevoa); }
.msg-user { align-self: flex-start; background: var(--esmalte); border: 1px solid var(--linha); }
.msg-assistant { align-self: flex-end; background: var(--scan-claro); }
.msg-equipe { align-self: flex-end; background: var(--petroleo); color: #fff; }
.msg-equipe .msg-pe { color: #b7d3d6; }

.comp { padding: 12px 22px 16px; background: var(--esmalte); border-top: 1px solid var(--linha); }
.comp textarea { width: 100%; min-height: 66px; max-height: 180px; resize: vertical; border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; background: var(--esmalte); }
.comp-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--nevoa); }
.comp-aviso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; }

.f-dados { overflow-y: auto; background: var(--esmalte); border-left: 1px solid var(--linha); }
.f-bloco { padding: 15px 20px; border-bottom: 1px solid var(--linha); }
.f-bloco:last-child { border-bottom: 0; }
.f-bloco h3 { font: 600 13px/1.3 var(--corpo); color: var(--nevoa); margin-bottom: 9px; }
.f-apurou { background: var(--scan-claro); }
.f-apurou h3 { color: var(--scan-tinta); }
.f-apurou .dados dt { color: #41666d; }
.sugestao { margin-top: 11px; padding: 10px 12px; background: var(--esmalte); border-radius: 8px; font-size: 14px; }
.sugestao-rot { display: block; font-size: 12.5px; font-weight: 600; color: var(--scan-tinta); margin-bottom: 3px; }
.sugestao .btn { margin-top: 8px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.campo { display: grid; gap: 3px; font-size: 13px; color: var(--nevoa); min-width: 0; }
.campo input, .campo select { padding: 7px 9px; border: 1px solid var(--linha); border-radius: 7px; background: var(--esmalte); color: var(--grafite); width: 100%; min-width: 0; font-size: 14px; }
.campos { display: grid; gap: 8px; margin-top: 10px; }
.campos-2 { grid-template-columns: 150px minmax(0, 1fr); }
.subform { margin-top: 10px; padding: 12px; border: 1px solid var(--linha); border-radius: 8px; display: grid; gap: 9px; }
.hist li { font-size: 13.5px; padding: 5px 0; border-top: 1px solid var(--porcelana); }
.hist li:first-child { border-top: 0; padding-top: 0; }
.hist-pe { display: block; font: 400 11.5px/1.4 var(--dado); color: var(--nevoa); }
.nada { font-size: 13.5px; color: var(--nevoa); }

/* ---------- login ---------- */
.sem-login { grid-template-columns: minmax(0, 1fr); background: var(--petroleo); padding-bottom: 0; }
.sem-login .trilho, .sem-login .faixa { display: none; }
.sem-login #tela { padding: 0; }
.entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: center; gap: 24px; padding: 32px; }
.entrar-marca { width: min(100%, 460px); aspect-ratio: 1 / .5; background: url(marca.png) center / 100% auto no-repeat; }
.entrar-form { width: min(100%, 360px); display: grid; gap: 13px; background: var(--esmalte); border-radius: var(--raio); padding: 28px; }
.entrar-erro { background: var(--gengiva-clara); color: var(--gengiva); border-radius: 7px; padding: 8px 11px; font-size: 14px; font-weight: 500; }
.faixa-banco { background: transparent; justify-content: flex-end; padding-top: 12px; padding-bottom: 0; }
.faixa-banco p { color: var(--petroleo); }
@media (max-width: 720px) {
  .entrar { grid-template-columns: minmax(0, 1fr); align-content: center; padding: 20px 16px; gap: 8px; }
  .entrar-marca { width: 260px; }
}

/* ---------- aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 50;
  background: var(--petroleo); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; max-width: calc(100vw - 32px);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso.erro { background: var(--gengiva); }

/* ---------- telas estreitas ---------- */
@media (max-width: 860px) {
  body { grid-template-columns: minmax(0, 1fr); padding-bottom: 62px; }
  .trilho { position: fixed; inset: auto 0 0 0; height: 62px; flex-direction: row; justify-content: space-around; padding: 0 8px; z-index: 20; }
  .trilho-marca { display: none; }
  .trilho-item { padding: 6px 0 4px; }
  .faixa, #tela { padding-left: 16px; padding-right: 16px; }
  #tela { padding-top: 22px; }
  .quadro-rolagem { margin-right: -16px; scroll-snap-type: x proximity; }
  .quadro { grid-template-columns: repeat(7, 78vw); min-width: 0; padding-right: 16px; }
  .col { scroll-snap-align: start; }
  .pass { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .pass-acoes { flex-direction: row; }
  .pass-acoes .btn { flex: 1; }
  .com-ia button { grid-template-columns: minmax(0, 1fr) auto; }
  .ia-texto { grid-column: 1 / -1; grid-row: 2; }
  .f-abas { display: flex; }
  .f-corpo { grid-template-columns: minmax(0, 1fr); }
  .f-corpo[data-aba="conversa"] .f-dados, .f-corpo[data-aba="ficha"] .f-conversa { display: none; }
  .f-dados { border-left: 0; }
  .f-topo, .mini-rotulada { padding-left: 16px; padding-right: 16px; }
  .msgs, .comp { padding-left: 16px; padding-right: 16px; }
  .msg { max-width: 88%; }
  /* No celular só a etapa atual leva nome: seis rótulos não cabem na largura. */
  .mini-rotulada li { height: 32px; }
  .mini-rotulada li:not(.ponta) .mini-et, .mini-rotulada .mini-dt { display: none; }
  .mini-rotulada .ponta .mini-et { overflow: visible; }
}

@media (max-width: 480px) {
  .dados > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dados dt { font-size: 12.5px; }
  .faixa-quem { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}