@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --paper: #EAF4FB;
  --card: #ffffff;
  --ink: #172033;
  --muted: #687386;
  --line: #E4EAF1;
  --sidebar: #087FC1;
  --sidebar-escuro: #075A8A;
  --sidebar-ink: #f7f3eb;
  --copper: #b85c2a;
  --ok: #007eca;
  --warn: #8d6412;
  --bad: #b85c2a;
  --info: #245e78;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button, input, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card, .card, .editor, .lista-usuarios, .kpi {
  background: var(--card);
  border: 1px solid #E4EAF1;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.kpi, .painel-graficos > .card, .painel-tabela {
  transition: transform 0.16s ease;
}

.kpi:hover, .painel-graficos > .card:hover, .painel-tabela:hover {
  transform: translateY(-1px);
}

.login-card {
  width: min(440px, 100%);
  padding: 32px;
}

.marca {
  margin: 0;
  letter-spacing: -0.03em;
  font-size: 1.65rem;
  color: var(--copper);
  font-weight: 750;
}

.sidebar .marca {
  color: #fff;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -0.02em; }

h1 { font-size: 1.8rem; margin: 8px 0; }

.lead, .muted, .nota { color: var(--muted); }

label { display: block; margin-top: 14px; font-size: 0.92rem; }

input, select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

button[type="submit"], .primario, #entrar, #salvar {
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--copper);
  color: white;
  padding: 11px 18px;
}

.secundario, #sair, .nav-ativo {
  border-radius: 999px;
}

#sair, .secundario {
  border: 1px solid var(--line);
  background: transparent;
  padding: 8px 14px;
}

.erro { color: var(--bad); }

.ok { color: var(--ok); }

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
  font-family: 'Inter', sans-serif;
  background: var(--paper);
}

.sidebar {
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-escuro) 100%);
  color: var(--sidebar-ink);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.sidebar nav { display: grid; gap: 6px; }

.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 10px 12px;
}

.sidebar nav button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar nav button[aria-current="page"] { background: #5eb8e6; color: #fff; }

.sidebar nav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sidebar-rodape { margin-top: auto; }

.sidebar-rodape p { margin: 0 0 4px; color: #fff; }

.sidebar-rodape .muted { color: rgba(255, 255, 255, 0.78); }

.sidebar #sair {
  margin-top: 12px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.14);
}

main { padding: 28px; min-width: 0; }

.cabecalho { margin-bottom: 18px; }

.cabecalho-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.periodo { display: flex; align-items: center; gap: 8px; color: var(--muted); }

.periodo input { width: auto; margin: 0; background: #fff; }

.cabecalho h2 { margin: 0 0 6px; }

.cabecalho-linha h2 { font-size: 30px; color: var(--ink); }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.card { padding: 16px; }

.card span, .kpi-rotulo { display: block; color: var(--muted); font-size: 0.86rem; }

.card strong, .kpi-valor {
  display: block;
  margin-top: 8px;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.restrito { color: var(--muted); font-size: 1.05rem; font-style: italic; font-weight: 500; }

.colunas { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 12px; margin-top: 12px; }

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.barra { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center; margin: 8px 0; font-size: 0.92rem; }

.trilho { height: 8px; background: #efe7da; border-radius: 99px; }

.preenchimento { height: 8px; background: var(--sidebar); border-radius: 99px; }

table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }

th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }

th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
  background: #efe7da;
}

.status.status-CONVERTIDA, .status.status-APROVADA { color: var(--ok); }
.status.status-PERDIDA, .status.status-EXPIRADA, .status.status-CANCELADA { color: var(--bad); }
.status-EM_NEGOCIACAO, .status-EM_ANALISE, .status-RECEBIDA { color: var(--info); }

.ferramentas { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

.ferramentas input, .ferramentas select { width: auto; min-width: 180px; margin: 0; }

.usuarios-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }

.lista-usuarios { padding: 8px; }

.lista-usuarios button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px;
}

.lista-usuarios button[aria-current="true"] { background: #f6efe4; }

.editor { padding: 20px; }

.checks { display: grid; gap: 8px; margin-top: 12px; }

.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.check input { width: auto; margin: 2px 0 0; }

.check small { display: block; color: var(--muted); }

.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.acoes button { margin-top: 0; }

a.abrir-excel { margin-left: 8px; }

.link-linha {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--sidebar);
  font-weight: 700;
  text-align: left;
}

.lista-dia { margin: 4px 0 18px; }
.lista-dia h3 { margin: 0 0 8px; font-size: 18px; }
.composicao { color: var(--muted); }

.ficha { display: grid; gap: 2px; margin-bottom: 16px; }
.ficha p { margin: 0; }
.obs { white-space: pre-wrap; }

.alertas { margin: 0; padding-left: 18px; }
.alertas li { margin: 8px 0; }

.cabecalho .secundario { margin-bottom: 12px; }

.kpis, .kpis-topo, .kpis-meio, .kpis-base {
  display: grid;
  gap: 12px;
}

.kpis-topo, .kpis-base { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kpis-meio { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpis-meio, .kpis-base { margin-top: 12px; }

.kpi { padding: 16px; color: var(--ink); }

.kpi-esqueleto {
  display: grid;
  gap: 10px;
  min-height: 118px;
  pointer-events: none;
}

.osso {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #e7eef6 25%, #f8fbfe 37%, #e7eef6 63%);
  background-size: 400% 100%;
  animation: esqueleto 1.2s ease infinite;
}

.osso-icone { width: 36px; height: 36px; border-radius: 10px; }
.osso-titulo { width: 48%; height: 13px; }
.osso-valor { width: 64%; height: 26px; }
.osso-nota { width: 80%; height: 12px; }

@keyframes esqueleto {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.kpi-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.kpi-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }

.kpi-icone {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}

.kpi-icone svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-rotulo { color: var(--muted); font-size: 14px; }

.kpi strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.kpi .nota { margin: 6px 0 0; font-size: 13px; }

.spark { display: block; width: 100%; height: 36px; margin-top: 10px; color: var(--sidebar); }

.delta {
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.delta.alta { color: #0b6b4f; background: #e5f6ef; }
.delta.baixa { color: var(--copper); background: #f8ebe3; }
.delta.neutro { color: var(--muted); background: #f2f4f7; }

.painel-graficos {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 12px;
  margin-top: 12px;
}

.painel-tabela { margin-top: 12px; }

.tabela-rolagem { overflow-x: auto; }

.tabela-rolagem table { min-width: 760px; }

.card .badge-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e7f3fa;
  color: var(--sidebar);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.card .pilula-dias {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

.card .dias-curto { color: #c23b62; background: #fde8ef; }
.card .dias-medio { color: #9a6700; background: #fff4d6; }

.grafico-topo, .tabela-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.grafico-topo h3, .tabela-topo h3 { margin: 0; }

.legenda-grafico { display: flex; gap: 14px; color: var(--muted); font-size: 0.82rem; }

.legenda-grafico i, .legenda-rosca i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  margin-right: 6px;
}

.barras-svg {
  width: 100%;
  height: 220px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.barras-y {
  position: relative;
  height: 188px;
  min-width: 64px;
}

.barras-svg .barras-y span {
  position: absolute;
  right: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

.barras-svg .barras-y span:nth-child(1) { top: 0; }
.barras-svg .barras-y span:nth-child(2) { top: 33.333%; }
.barras-svg .barras-y span:nth-child(3) { top: 66.666%; }
.barras-svg .barras-y span:nth-child(4) { top: 100%; }

.barras-plot { position: relative; min-width: 0; height: 220px; }

.barras-linhas {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 188px;
  pointer-events: none;
}

.barras-svg .barras-linhas span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(23, 32, 51, 0.08);
}

.barras-svg .barras-linhas span:nth-child(1) { top: 0; }
.barras-svg .barras-linhas span:nth-child(2) { top: 33.333%; }
.barras-svg .barras-linhas span:nth-child(3) { top: 66.666%; }
.barras-svg .barras-linhas span:nth-child(4) { top: 100%; }

.barras-meses {
  position: relative;
  z-index: 1;
  display: flex;
  height: 220px;
}

.barras-mes {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.barras-par {
  height: 188px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.barra {
  display: block;
  width: 14px;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
}

.barra-cotado { background: #087FC1; }
.barra-convertido { background: #1F9D55; }

.barras-svg .barras-mes > span {
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.balao {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 3;
  min-width: 196px;
  padding: 10px 12px;
  border: 1px solid #E4EAF1;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.barras-mes:first-child .balao { left: 0; transform: none; }
.barras-mes:last-child .balao { left: auto; right: 0; transform: none; }

.barras-mes:hover .balao { opacity: 1; }

.balao strong { display: block; margin-bottom: 6px; font-size: 13px; }

.balao p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.balao b { margin-left: auto; color: var(--ink); font-weight: 650; }

.balao i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #087FC1;
  flex: none;
}

.balao i.conv { background: #1F9D55; }

.rosca-layout { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; }

.rosca { width: 160px; height: 160px; }

.rosca-centro {
  font-size: 1.35rem;
  font-weight: 750;
  fill: var(--ink);
}

.rosca-rotulo { font-size: 0.7rem; fill: var(--muted); }

.legenda-rosca { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; }

.legenda-rosca li { display: flex; align-items: center; gap: 6px; }

.legenda-rosca strong { margin-left: auto; }

.link-texto {
  border: 0;
  background: transparent;
  color: var(--sidebar);
  font-weight: 700;
  padding: 0;
}

.icone-acao {
  border: 0;
  background: #eef6fc;
  color: var(--sidebar);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.icone-acao svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1100px) {
  .kpis-topo, .kpis-meio, .kpis-base, .painel-graficos, .rosca-layout { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .app, .colunas, .usuarios-layout, .kpis-topo, .kpis-meio, .kpis-base, .painel-graficos, .cabecalho-linha, .rosca-layout { grid-template-columns: 1fr; }
  .sidebar { gap: 12px; position: static; height: auto; }
  .sidebar nav { grid-template-columns: 1fr; }
  .sidebar-rodape { margin-top: 0; }
}

.detalhe {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  background: transparent;
}

.detalhe-topo, .detalhe-titulo, .detalhe-voltar, .detalhe-local, .detalhe-excel, .detalhe-secao, .detalhe-kpi, .detalhe-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detalhe-topo { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }

.detalhe-voltar {
  border: 0;
  background: transparent;
  padding: 0;
  color: #687386;
  font-weight: 600;
}

.detalhe-titulo { flex-wrap: wrap; margin-top: 8px; }
.detalhe-titulo h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.detalhe-cliente { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.detalhe-local { margin: 4px 0 0; color: #687386; }

.detalhe-excel {
  border-radius: 999px;
  padding: 10px 16px;
  background: #087FC1;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background 180ms ease;
}
.detalhe-excel:hover { background: #075A8A; }

.detalhe .status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.detalhe .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.detalhe .status-RECEBIDA, .detalhe .status-EM_ANALISE { background: #EAF6FC; color: #087FC1; }
.detalhe .status-EM_NEGOCIACAO { background: #FFF4D6; color: #D99100; }
.detalhe .status-CONVERTIDA { background: #E8F8F0; color: #159B62; }
.detalhe .status-PERDIDA, .detalhe .status-CANCELADA { background: #FDECEC; color: #D64545; }
.detalhe .status-APROVADA { background: #F0EAFE; color: #7546D8; }
.detalhe .status-EXPIRADA { background: #FDEDF3; color: #C74372; }

.detalhe-card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 650; }
.detalhe-card h4 { margin: 18px 0 8px; font-size: 14px; }
.detalhe-kpis, .detalhe-par, .detalhe-partes { display: grid; gap: 12px; }
.detalhe-kpis { grid-template-columns: repeat(3, 1fr); }
.detalhe-par, .detalhe-partes { grid-template-columns: 1fr 1fr; }
.detalhe-partes { margin-bottom: 12px; }
.detalhe-parte {
  border: 1px solid #E4EAF1;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
}
.detalhe-parte--convertido { border-color: #B7E4C7; background: #F3FBF6; }
.detalhe-parte--perdido { border-color: #F3C7C7; background: #FDF6F6; }
.detalhe-parte-rotulo { display: block; color: #687386; font-size: 13px; font-weight: 650; }
.detalhe-parte strong { display: block; margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.detalhe-parte p { margin: 2px 0 0; color: #687386; font-size: 13px; }
.detalhe-parte-grupos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.detalhe-parte-grupos li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 13px; }
.detalhe-parte-grupos b { color: #087FC1; }
.detalhe-parte--perdido .detalhe-parte-grupos b { color: #B42318; }
.detalhe-itens-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.detalhe-itens-resumo-conv { margin: 0; color: #687386; font-size: 13px; font-weight: 600; }
.detalhe-itens-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.detalhe-itens-filtros [role="group"] { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-conv {
  border: 1px solid #D0D5DD;
  background: #fff;
  color: #344054;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.filtro-conv.ativo { border-color: #087FC1; background: #E8F4FB; color: #087FC1; }
.selo-conv {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.selo-conv--ok { background: #E8F8EF; color: #159B62; }
.selo-conv--nao { background: #F2F4F7; color: #667085; }

.detalhe-grupo { font-weight: 650; }
.detalhe-kpi {
  border: 1px solid #E4EAF1;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  transition: background 180ms ease;
}
.detalhe-kpi:hover, .detalhe-card:hover { background: #F8FAFC; }
.detalhe-kpi { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.detalhe-kpi .detalhe-icone { grid-row: span 2; color: #087FC1; }
.detalhe-kpi strong { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.detalhe-kpi span { color: #687386; font-size: 13px; }
.detalhe-kpi span { grid-column: 2; }
.detalhe-codigo { margin: 0; color: #687386; font-size: 13px; }
.detalhe-nome { margin: 2px 0; font-weight: 600; }
.detalhe-rotulo { margin: 14px 0 0; color: #687386; font-size: 12px; font-weight: 600; }
.detalhe-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.detalhe-grade div { margin: 0; }
.detalhe-grade dt { color: #687386; font-size: 12px; }
.detalhe-grade dd { margin: 2px 0 0; font-weight: 600; }
.detalhe-observacao-texto { margin: 0 0 12px; white-space: pre-wrap; }
.detalhe-observacao-campo { display: block; color: #687386; font-size: 13px; }
#detalhe-observacao textarea {
  width: 100%;
  min-height: 120px;
  margin-top: 6px;
  resize: vertical;
}
.detalhe-observacao-acoes { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.detalhe-observacao-acoes .primario,
.detalhe-observacao-acoes .secundario { margin-top: 0; }

.detalhe-tempo { display: flex; list-style: none; margin: 0; padding: 0; }
.detalhe-tempo li { flex: 1; position: relative; padding-top: 18px; }
.detalhe-tempo li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #087FC1;
}
.detalhe-tempo li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 12px;
  right: 0;
  height: 2px;
  background: #087FC1;
}
.detalhe-tempo li:last-child::before { display: none; }
.detalhe-tempo .atual span { box-shadow: 0 0 0 6px rgba(8, 127, 193, 0.16); }
.detalhe-tempo .feito span, .detalhe-tempo .feito::before { background: #159B62; }
.detalhe-tempo .futuro span, .detalhe-tempo .futuro::before { background: #E4EAF1; }
.detalhe-tempo b, .detalhe-tempo small { display: block; }
.detalhe-tempo b { margin-top: 4px; font-size: 14px; }
.detalhe-tempo small { color: #687386; font-size: 12px; }

.detalhe-secao { justify-content: space-between; margin-bottom: 12px; }
.detalhe-secao h3, .detalhe-secao p { margin: 0; }
.detalhe-secao p { color: #687386; font-size: 13px; }
.lista-tabela tbody tr:has(+ tr.lista-resumo) td { border-bottom-color: transparent; padding-bottom: 2px; }
.lista-tabela tbody tr.lista-resumo td {
  padding-top: 0;
  padding-bottom: 14px;
  color: #687386;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 2px solid #D5DCE6;
}
.lista-tabela tbody tr.lista-resumo:hover { background: transparent; }
.lista-tabela tbody tr.lista-resumo.prazo-amarelo:hover,
.lista-tabela tbody tr.lista-resumo.prazo-vermelho:hover,
.lista-tabela tbody tr.lista-resumo.prazo-salmao:hover {
  background: color-mix(in srgb, var(--prazo-cor) 28%, #fff);
}
.lista-resumo-linha { display: block; }
.detalhe-itens-acoes { margin: 12px 0 0; }
.detalhe-itens-acoes .secundario:disabled { opacity: 0.6; cursor: wait; }
.detalhe-rolagem { overflow-x: auto; }
.detalhe-tabela th, .detalhe-tabela td { border-bottom: 1px solid #E4EAF1; }
.detalhe-tabela tbody tr:hover { background: #F8FAFC; }
.detalhe-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.detalhe-codigo-item { color: #687386; font-size: 13px; }
.detalhe-desc { font-weight: 500; }
.ver-obs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: #EAF6FC;
  color: #075A8A;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}
.detalhe-obs td { white-space: pre-wrap; color: #172033; background: #F8FAFC; }
.detalhe-total { display: flex; flex-direction: column; align-items: flex-end; margin: 16px 0 0; }
.detalhe-total span { color: #687386; font-size: 13px; }
.detalhe-total strong { font-size: 28px; font-weight: 700; }
.detalhe-vazio, .detalhe-erro { text-align: center; color: #687386; padding: 28px 12px; }
.detalhe-vazio .detalhe-icone, .detalhe-icone { width: 18px; height: 18px; flex: none; }
.detalhe-vazio .detalhe-icone { width: 28px; height: 28px; color: #087FC1; }

.sk { border-radius: 16px; background: linear-gradient(90deg, #E4EAF1 25%, #F5F8FC 50%, #E4EAF1 75%); background-size: 200% 100%; animation: sk 1.1s ease infinite; }
.sk-linha { height: 16px; width: 120px; }
.sk-titulo { height: 36px; width: min(420px, 70%); }
.sk-card { height: 120px; }
.sk-tabela { height: 220px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 900px) {
  .detalhe-kpis { grid-template-columns: 1fr 1fr; }
  .detalhe-partes { grid-template-columns: 1fr; }
  .detalhe-par { grid-template-columns: 1fr; }
  .detalhe-tempo { flex-direction: column; gap: 16px; }
  .detalhe-tempo li { padding: 0 0 0 22px; }
  .detalhe-tempo li span { top: 2px; }
  .detalhe-tempo li::before { top: 14px; left: 5px; right: auto; width: 2px; height: calc(100% + 8px); }
}

.lista-cotacoes {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  background: transparent;
}
.lista-topo h2 { margin: 0; font-size: 30px; font-weight: 700; }
.lista-topo p { margin: 6px 0 0; color: #687386; }
.lista-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lista-kpi { position: relative; padding: 16px 18px; background: #fff; }
.lista-kpi span, .lista-kpi small { display: block; color: #687386; font-size: 13px; }
.lista-kpi strong { display: block; margin: 6px 0 2px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.kpi-ajuda { margin-top: 8px; }
.kpi-ajuda summary {
  cursor: pointer;
  color: #075A8A;
  font-size: 13px;
  list-style: none;
}
.kpi-ajuda summary::-webkit-details-marker { display: none; }
.kpi-ajuda p {
  margin: 8px 0 0;
  color: #687386;
  font-size: 13px;
  line-height: 1.45;
}
.lista-hoje h3, .lista-tabela-topo { display: flex; align-items: center; gap: 8px; }
.lista-hoje h3 { margin: 0 0 10px; font-size: 16px; }
.lista-hoje.alerta { background: #FFF8EE; border-color: #F3D7A1; }
.lista-hoje.prazo-amarelo,
.lista-hoje.prazo-vermelho,
.lista-hoje.prazo-salmao,
.lista-kpi.prazo-amarelo,
.lista-kpi.prazo-vermelho,
.lista-kpi.prazo-salmao {
  background: color-mix(in srgb, var(--prazo-cor) 14%, #fff);
  border-color: color-mix(in srgb, var(--prazo-cor) 46%, #fff);
  box-shadow: inset 4px 0 0 var(--prazo-cor);
}
.lista-hoje-vazio { margin: 0; color: #687386; }
.lista-hoje-alerta { margin: 0 0 10px; color: #8d6412; font-weight: 600; }
.falhas-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.falhas-topo .secundario { margin-top: 0; flex: none; }
.falhas-resultado {
  margin: 0 0 12px;
  color: #687386;
  font-size: 14px;
}
.lista-hoje.prazo-amarelo .lista-hoje-alerta,
.lista-hoje.prazo-vermelho .lista-hoje-alerta,
.lista-hoje.prazo-salmao .lista-hoje-alerta {
  color: color-mix(in srgb, var(--prazo-cor) 78%, #172033);
}
.lista-painel { padding: 16px 18px 8px; }
.lista-ferramentas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lista-ferramentas-topo { margin: 0; }
.lista-ferramentas label { margin-top: 0; }
.lista-busca,
.lista-ferramentas > select,
.lista-abertura {
  height: 44px;
  margin: 0;
  border: 1px solid #E4EAF1;
  border-radius: 10px;
  background: #fff;
}
.lista-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  padding: 0 12px;
  color: #687386;
}
.lista-busca input {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lista-ferramentas select {
  width: auto;
  min-width: 180px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  padding: 0 12px;
}
.lista-abertura {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  color: #687386;
  white-space: nowrap;
}
.lista-abertura select,
.lista-abertura input[type="date"] {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.lista-tabela-topo { justify-content: space-between; margin: 16px 0 8px; }
.lista-tabela-topo h3, .lista-tabela-topo p { margin: 0; }
.lista-tabela-topo p { color: #687386; font-size: 13px; }
.lista-exibir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista-exibir .lista-busca { flex: 1; min-width: 220px; }
.lista-exibir #pesquisar-lista {
  height: 44px;
  margin: 0;
  padding: 0 14px;
  flex: none;
}
.lista-tamanho {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding-left: 12px;
  border: 1px solid #E4EAF1;
  border-radius: 10px;
  background: #fff;
  color: #687386;
  white-space: nowrap;
}
.lista-tamanho select {
  width: auto;
  min-width: 72px;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1;
}
#lista-paginas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 12px 0 8px;
}
#lista-paginas button {
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #E4EAF1;
  border-radius: 10px;
  background: #fff;
  color: #172033;
  font-size: 14px;
  line-height: 1;
}
#lista-paginas button:disabled { opacity: 0.45; cursor: default; }
#lista-paginas span { color: #687386; font-size: 14px; line-height: 1; white-space: nowrap; }
.lista-rolagem { overflow-x: auto; }
.lista-tabela { font-size: 13px; }
.lista-tabela th {
  background: #F8FAFC;
  color: #687386;
  font-size: 11px;
  font-weight: 600;
}
.lista-tabela tr.lista-filtros th {
  padding: 6px;
  font-weight: 400;
  background: #fff;
  vertical-align: middle;
}
.lista-tabela tr.lista-filtros input {
  width: 100%;
  min-width: 88px;
  height: 32px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
}
.lista-tabela th, .lista-tabela td { border-bottom: 1px solid #E4EAF1; padding: 10px 6px; }
.lista-tabela tbody tr { transition: background-color 150ms ease; }
.lista-tabela tbody tr:hover { background: #F8FAFC; }
.lista-tabela tbody tr.prazo-amarelo,
.lista-tabela tbody tr.prazo-vermelho,
.lista-tabela tbody tr.prazo-salmao,
.detalhe-topo.prazo-amarelo,
.detalhe-topo.prazo-vermelho,
.detalhe-topo.prazo-salmao {
  background: color-mix(in srgb, var(--prazo-cor) 18%, #fff);
}
.lista-tabela tbody tr.prazo-amarelo:hover,
.lista-tabela tbody tr.prazo-vermelho:hover,
.lista-tabela tbody tr.prazo-salmao:hover {
  background: color-mix(in srgb, var(--prazo-cor) 28%, #fff);
}
.detalhe-topo.prazo-amarelo,
.detalhe-topo.prazo-vermelho,
.detalhe-topo.prazo-salmao { border-radius: 16px; padding: 12px 14px; }
.config-prazo, .enviar-cotacao { max-width: 760px; }
.enviar-cotacao { display: grid; gap: 16px; }
.enviar-resultado { display: grid; gap: 8px; margin: 0; }
.enviar-resultado p { margin: 0; }
.enviar-resultado .secundario { justify-self: start; }
.enviar-item { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--linha, #e6e6e6); }
.enviar-item strong { font-weight: 600; }
.enviar-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.excluir-cotacao { border: 1px solid #e7c4c4; background: transparent; color: #9d2c2c; border-radius: 999px; padding: 6px 12px; }
.excluir-cotacao:disabled { opacity: 0.6; }
.lista-acao { width: 1%; text-align: right; white-space: nowrap; }
.detalhe-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.config-card { display: grid; gap: 16px; }
.config-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.config-linha label { flex: 1; min-width: 220px; margin: 0; }
.config-linha input[type="number"] { width: 96px; margin: 0; }
.config-linha input[type="color"] { width: 48px; height: 40px; padding: 2px; margin: 0; }
.config-prazo .ok { color: #159B62; margin: 0; }
.config-reps { display: grid; gap: 10px; }
.config-rep { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(180px, 260px); gap: 10px; align-items: center; }
.config-rep strong { font-weight: 600; }
.config-rep input { margin: 0; }
.lista-id { display: block; margin-top: 2px; color: #687386; font-size: 11px; font-weight: 500; line-height: 1.2; }
.lista-codigo { display: inline-flex; align-items: center; gap: 6px; }
.lista-obs {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid #E4EAF1;
  border-radius: 50%;
  background: #fff;
  color: #075A8A;
  cursor: help;
}
.lista-obs svg { width: 12px; height: 12px; }
.lista-obs:hover,
.lista-obs:focus,
.lista-obs:focus-visible { z-index: 30; outline: none; }
.lista-obs-tip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: max-content;
  max-width: 280px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #E4EAF1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.12);
  color: #172033;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  text-align: left;
}
.lista-obs:hover .lista-obs-tip,
.lista-obs:focus .lista-obs-tip,
.lista-obs:focus-visible .lista-obs-tip { display: block; }
.lista-cotacoes .link-linha { color: #087FC1; font-weight: 600; }
.lista-cotacoes .link-linha:hover { text-decoration: underline; }
.lista-cliente { font-weight: 500; color: #172033; }
.lista-tabela .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.taxa-conv {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--taxa-cor) 18%, #fff);
  color: color-mix(in srgb, var(--taxa-cor) 82%, #172033);
  font-weight: 700;
}
.lista-data { display: grid; }
.lista-data small { color: #687386; font-size: 12px; }
.falta { display: inline-block; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.falta-neutro { background: #F3F5F8; color: #687386; }
.falta-aviso { background: #FFF4D6; color: #D99100; }
.falta-urgente { background: #FDECEC; color: #D64545; }
.lista-cotacoes .status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.lista-cotacoes .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lista-cotacoes .status.status-RECEBIDA { background: #EAF6FC; color: #087FC1; }
.lista-cotacoes .status.status-EM_NEGOCIACAO { background: #FFF4D6; color: #D99100; }
.lista-cotacoes .status.status-CONVERTIDA { background: #E8F8F0; color: #159B62; }
.lista-cotacoes .status.status-PERDIDA { background: #FDECEC; color: #D64545; }
.lista-cotacoes .status.status-APROVADA { background: #F0EAFE; color: #7546D8; }
.lista-cotacoes .status.status-CANCELADA { background: #FFF1E8; color: #E26A16; }
.lista-cotacoes .status.status-EM_ANALISE { background: #F3F5F8; color: #687386; }
.lista-cotacoes .status.status-EXPIRADA { background: #FDEDF3; color: #C74372; }
.lista-vazia { text-align: center; color: #687386; padding: 36px 16px; }
.lista-vazia h3, .lista-vazia h2 { color: #172033; }
.lista-vazia button {
  margin-top: 8px;
  border: 1px solid #E4EAF1;
  border-radius: 999px;
  background: #fff;
  color: #075A8A;
  padding: 8px 14px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .lista-kpis { grid-template-columns: 1fr 1fr; }
  .lista-ferramentas, .lista-busca { width: 100%; }
}

.tela-clientes {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  background: transparent;
}
.tela-clientes .lista-kpis { grid-template-columns: repeat(3, 1fr); }
.clientes-fonte { font-size: 22px; }
.clientes-tabela .cliente-externo { color: #98A2B3; }
.clientes-tabela .cliente-codigo { font-weight: 600; color: #172033; }
.clientes-tabela .cliente-nome {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.clientes-tabela .cliente-cidade { color: #687386; }
.clientes-tabela .cliente-doc { color: #687386; font-size: 13px; }
.cliente-uf {
  display: inline-block;
  background: #EAF6FC;
  color: #075A8A;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 600;
}
.clientes-mais { margin: 12px 0 8px; }
.clientes-mais button, .tela-clientes .lista-vazia button {
  border: 1px solid #E4EAF1;
  border-radius: 999px;
  background: #fff;
  color: #075A8A;
  padding: 8px 14px;
  font-weight: 600;
}
.clientes-skeleton { display: grid; gap: 10px; padding: 8px 0 16px; }
.clientes-skeleton .sk-linha { width: 100%; height: 18px; }
.lista-busca:focus-within { border-color: #087FC1; box-shadow: 0 0 0 3px rgba(8, 127, 193, 0.12); }
@media (max-width: 900px) {
  .tela-clientes .lista-kpis { grid-template-columns: 1fr; }
}