/* Orçamentos de concorrentes (#concorrentes-orcamentos). Tudo sob .oc; tokens da pele do portal (claro e escuro). */
.oc {
  --oc-ink: var(--ink, #102d24);
  --oc-mut: var(--muted, #5b7268);
  --oc-fundo: var(--panel, #fff);
  --oc-linha: var(--line, #e3ebe6);
  --oc-linha-forte: var(--line-strong, #c9d6cf);
  --oc-acento: var(--brand, #0a9492);
  --oc-raio: 12px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  color: var(--oc-ink);
}
.oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc button, .oc input { font-family: inherit; }
.oc button:focus-visible, .oc input:focus-visible, .oc tr[tabindex]:focus-visible, .oc a:focus-visible { outline: 2px solid var(--oc-acento); outline-offset: 2px; }

/* ------------------------------------------------------------ barra: números e filtros */
.oc-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.oc-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.oc-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; min-width: 132px; border: 1px solid var(--oc-linha); border-radius: var(--oc-raio); background: var(--oc-fundo); }
.oc-kpi span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oc-mut); }
.oc-kpi b { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oc-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oc-dd { width: 190px; }
.oc-busca { position: relative; width: 320px; max-width: 100%; }
.oc-busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--oc-mut); pointer-events: none; }
.oc-busca input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--oc-linha-forte); border-radius: 10px; background: var(--oc-fundo); color: var(--oc-ink); font-size: 13px; }
.oc-busca input::-webkit-search-cancel-button { cursor: pointer; }

/* ------------------------------------------------------------ miolo: lista + painel do remetente */
.oc-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
/* lado a lado só a partir de 1600 px: em 1366 o portal ainda tem o menu lateral e não cabem as duas tabelas */
.oc-corpo.tem-painel { grid-template-columns: minmax(0, 1fr) minmax(480px, 42%); }
.oc-lista, .oc-painel { min-width: 0; background: var(--oc-fundo); border: 1px solid var(--oc-linha); border-radius: var(--oc-raio); }
/* um scroll só: o miolo da tabela e o do painel rolam; a barra de cima fica parada */
.oc-lista { overflow: auto; max-height: calc(100vh - 232px); }
.oc-painel { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 232px); }
.oc-painel[hidden] { display: none; }
.oc-painel-cab { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--oc-linha); }
.oc-painel-tit { min-width: 0; }
.oc-painel-tit h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-painel-corpo { overflow: auto; min-height: 0; }
.oc-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--oc-linha); }

/* ------------------------------------------------------------ tabelas */
.oc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-tbl th, .oc-tbl td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--oc-linha); }
.oc-tbl th { position: sticky; top: 0; z-index: 1; background: var(--oc-fundo); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oc-mut); white-space: nowrap; }
.oc-tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-tbl .dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-tbl tbody tr:last-child td { border-bottom: 0; }
.oc-tbl tr[data-tel], .oc-tbl tr.oc-orc { cursor: pointer; }
.oc-tbl tr[data-tel]:hover, .oc-tbl tr.oc-orc:hover { background: color-mix(in srgb, var(--oc-acento) 7%, transparent); }
.oc-tbl tr[data-tel][aria-selected="true"] { background: color-mix(in srgb, var(--oc-acento) 13%, transparent); box-shadow: inset 3px 0 0 var(--oc-acento); }
.oc-tbl--det th, .oc-tbl--det td { padding: 9px 10px; font-size: 12.5px; }
.oc-tbl--det th { top: 0; }
.oc-tbl .oc-arq { white-space: nowrap; }
.oc-tbl .oc-arq .oc-lnk { display: inline-flex; align-items: center; gap: 4px; }
.oc-tbl .oc-arq .oc-lnk svg { width: 13px; height: 13px; }
.oc-seta { display: inline-flex; vertical-align: middle; margin-left: 10px; color: var(--oc-mut); transition: transform .15s; }
.oc-seta svg { width: 14px; height: 14px; }
.oc-orc[aria-expanded="true"] .oc-seta { transform: rotate(180deg); }
.oc-nome { font-weight: 700; }
.oc-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--oc-mut); }
.oc-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.oc-lnk { color: var(--oc-acento); font-weight: 700; text-decoration: none; }
.oc-lnk:hover { text-decoration: underline; }

/* itens de um orçamento (linha expandida) */
.oc-det > td { padding: 0 !important; background: color-mix(in srgb, var(--oc-ink) 3%, transparent); }
.oc-itens { padding: 8px 12px 12px; overflow-x: auto; }
.oc-tbl--mini { min-width: 420px; }
.oc-tbl--mini th, .oc-tbl--mini td { padding: 6px 8px; font-size: 12px; }
.oc-tbl--mini th { position: static; }
.oc-itens-aviso { margin: 0; padding: 10px 12px; }
.oc-erro { color: var(--red, #c0392b); }
.oc-obs { margin: 8px 0 0; font-size: 12px; color: var(--oc-mut); white-space: pre-line; }

/* ------------------------------------------------------------ botões e estados */
.oc-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--oc-linha-forte); border-radius: 10px; background: var(--oc-fundo); color: var(--oc-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.oc-btn:hover { border-color: var(--oc-acento); color: var(--oc-acento); }
.oc-btn svg { width: 14px; height: 14px; }
.oc-btn--xs { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 8px; }
.oc-btn[aria-pressed="true"] { border-color: var(--oc-acento); color: var(--oc-acento); }
.oc-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--oc-mut); cursor: pointer; }
.oc-x:hover { background: color-mix(in srgb, var(--oc-ink) 6%, transparent); color: var(--oc-ink); }
.oc-x svg { width: 16px; height: 16px; }
.oc-vazio { margin: 0; padding: 28px 20px; font-size: 13px; color: var(--oc-mut); text-align: center; }

/* ------------------------------------------------------------ larguras menores: o painel vai para baixo da lista */
@media (max-width: 1599px) {
  .oc-corpo.tem-painel { grid-template-columns: minmax(0, 1fr); }
  .oc-painel { position: static; max-height: none; }
  .oc-lista { max-height: 60vh; }
}
@media (max-width: 760px) {
  .oc-busca, .oc-dd { width: 100%; }
  .oc-kpi { min-width: 0; flex: 1 1 0; }
}