/* Sound Lab — folha de estilo única do sistema novo.
   Visual "Tally + tijolos": fundo branco, tinta quase-preta, sem raio, sem
   sombra, hairline. Três fontes: Space Grotesk (títulos), Inter (corpo),
   JetBrains Mono (números e rótulos). Cores com significado fixo — nunca usar
   vermelho/laranja/verde fora do sentido definido abaixo. */

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

:root {
  --sl-papel: #FFFFFF;
  --sl-tinta: #161619;
  --sl-hairline: #E4E4E7;
  --sl-hairline-forte: #C9C9CE;
  --sl-lavado: #F6F6F7;
  --sl-mute: #6B6B72;

  /* Cores com significado fixo — não usar como decoração. */
  --sl-vermelho: #B3261E; /* atraso, ação destrutiva */
  --sl-laranja: #C2661A;  /* atenção — bypass, projeto parado */
  --sl-verde: #1B7A45;    /* confirmado — parâmetros definidos, estágio concluído */

  --sl-fonte-titulo: 'Space Grotesk', sans-serif;
  --sl-fonte-corpo: 'Inter', system-ui, sans-serif;
  --sl-fonte-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--sl-papel);
  color: var(--sl-tinta);
  font-family: var(--sl-fonte-corpo);
  min-height: 100vh;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--sl-fonte-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* ---------- Container (largura máxima) ---------- */

/* Largura máxima do conteúdo em telas grandes — mesmo valor dos protótipos
   aprovados (sl-03-acervo/sl-06/sl-07, .wrap/.nav-inner: 1080px). Usada tanto
   no conteúdo de cada página quanto no miolo da barra de topo (.sl-topo-inner
   abaixo), pra "Sound Lab" alinhar com o título da página logo abaixo. Só
   controla largura/margem/padding horizontal — nunca padding vertical, pra
   poder combinar com a classe de espaçamento vertical de cada elemento
   (.sl-main, .sl-topo-inner) sem uma sobrescrever a outra (padding
   shorthand mexe nos 4 lados de uma vez; aqui é sempre padding-left/right). */
.sl-container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Tela cheia — usa a largura toda de propósito (catálogo aberto: tabela de
   onze ou mais colunas com rolagem horizontal; qualquer tela futura marcada
   explicitamente "tela cheia"). Existe como classe própria pra nunca
   precisar de exceção por página no CSS — ver catalogo.php. */
.sl-tela-cheia {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Topo / menu ---------- */

/* .sl-topo é só a faixa full-bleed (fundo + hairline atravessando a tela
   inteira); .sl-topo-inner é que leva o flex e a largura máxima — mesma
   separação faixa/miolo dos protótipos (.nav/.nav-inner). */
.sl-topo {
  border-bottom: 1px solid var(--sl-hairline);
}

.sl-topo-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.sl-marca {
  font-family: var(--sl-fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  margin-right: 8px;
}

.sl-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.sl-menu-item {
  font-family: var(--sl-fonte-corpo);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: var(--sl-mute);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.sl-menu-item:hover { color: var(--sl-tinta); }

.sl-menu-item.on {
  color: var(--sl-tinta);
  border-bottom-color: var(--sl-tinta);
}

.sl-topo-direita {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Usuários mora aqui à direita (assunto de sistema, não de trabalho) — mesmo
   .sl-menu-item de sempre (herda fonte, hover, sublinhado de página ativa),
   só apagado em repouso pra ficar no mesmo peso visual do ícone da lixeira
   ao lado. .sl-menu-item.sl-menu-apagado.on tem mais classe que
   .sl-menu-item.on sozinho, então o indicador de página atual sempre vence
   o apagamento, não importa a ordem no arquivo. */
.sl-menu-item.sl-menu-apagado { opacity: .6; }
.sl-menu-item.sl-menu-apagado:hover,
.sl-menu-item.sl-menu-apagado.on { opacity: 1; }

.sl-lixeira-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-mute);
  text-decoration: none;
  padding: 4px;
}

.sl-lixeira-icone:hover, .sl-lixeira-icone.on { color: var(--sl-tinta); }

.sl-usuario-atual { color: var(--sl-mute); }

.sl-sair {
  font-family: var(--sl-fonte-mono);
  font-size: 12px;
  color: var(--sl-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--sl-hairline);
  padding-bottom: 2px;
}

.sl-sair:hover { color: var(--sl-tinta); }

/* Celular: os 6 itens de menu + marca + ícones da direita não cabem numa
   linha só (achado testando o bloco Acervo em largura de celular — o topo
   inteiro empurrava a página pra ~715px de largura, forçando rolagem
   horizontal em TODA tela do sistema). Marca e ícones ficam na linha de
   cima, o menu vira uma segunda linha com rolagem horizontal própria — a
   página em si nunca mais precisa rolar de lado. */
@media (max-width: 780px) {
  .sl-topo-inner { flex-wrap: wrap; row-gap: 10px; }
  .sl-marca { order: 1; margin-right: auto; }
  .sl-topo-direita { order: 2; }
  .sl-menu {
    order: 3;
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sl-container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Conteúdo ---------- */

.sl-main {
  padding-top: 40px;
  padding-bottom: 40px;
}

.sl-titulo {
  font-size: clamp(24px, 4vw, 32px);
}

/* ---------- Rótulo mono ---------- */

.sl-rotulo {
  font-family: var(--sl-fonte-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-mute);
}

/* ---------- Botões ---------- */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sl-tinta);
  color: var(--sl-papel);
  border: none;
  border-radius: 0;
  font-family: var(--sl-fonte-titulo);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
}

.sl-btn:hover { opacity: .88; }
.sl-btn:focus-visible { outline: 3px solid var(--sl-tinta); outline-offset: 3px; }
.sl-btn:disabled { opacity: .4; cursor: not-allowed; }

.sl-btn-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sl-tinta);
  border: 1px solid var(--sl-tinta);
  border-radius: 0;
  font-family: var(--sl-fonte-titulo);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 27px;
  cursor: pointer;
  text-decoration: none;
}

.sl-btn-fantasma:hover { background: var(--sl-tinta); color: var(--sl-papel); }
.sl-btn-fantasma:focus-visible { outline: 3px solid var(--sl-tinta); outline-offset: 3px; }

.sl-btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--sl-mute);
  border: 1px solid var(--sl-hairline);
  border-radius: 0;
  font-family: var(--sl-fonte-mono);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
}

.sl-btn-mini:hover { color: var(--sl-tinta); border-color: var(--sl-tinta); }

/* .sl-btn tinha :disabled; .sl-btn-mini não — botão desabilitado ficava
   idêntico ao clicável, inclusive acendendo no hover. */
.sl-btn-mini:disabled { opacity: .4; cursor: not-allowed; }

.sl-btn-mini:disabled:hover { color: var(--sl-mute); border-color: var(--sl-hairline); }

/* Variantes de significado — .sl-btn, .sl-btn-fantasma e .sl-btn-mini (esta
   última achada sem regra própria neste bloco: usada em vários botões de
   recusar/excluir do sandbox — ex. data-sb-recusar, btnOrcRevisaoRecusar —
   que ficavam sem cor nenhuma de "destrutivo", contra a regra fixa deste
   sistema). */
.sl-btn.destrutivo, .sl-btn-fantasma.destrutivo { background: var(--sl-vermelho); color: var(--sl-papel); border-color: var(--sl-vermelho); }
.sl-btn-fantasma.destrutivo { background: transparent; color: var(--sl-vermelho); }
.sl-btn-fantasma.destrutivo:hover { background: var(--sl-vermelho); color: var(--sl-papel); }
.sl-btn-mini.destrutivo { color: var(--sl-vermelho); border-color: var(--sl-vermelho); }
.sl-btn-mini.destrutivo:hover { background: var(--sl-vermelho); color: var(--sl-papel); }

/* ---------- Sanfona (accordion) ---------- */

.sl-sanfona { border-top: 1px solid var(--sl-hairline); }

.sl-sanfona-item { border-bottom: 1px solid var(--sl-hairline); }

.sl-sanfona-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--sl-fonte-titulo);
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  padding: 18px 4px;
  cursor: pointer;
  color: var(--sl-tinta);
}

.sl-sanfona-corpo {
  padding: 0 4px 18px;
  color: var(--sl-mute);
  font-size: 14px;
}

.sl-sanfona-corpo[hidden] { display: none; }

/* ---------- Tabela ---------- */

.sl-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sl-tabela th {
  font-family: var(--sl-fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-mute);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sl-tinta);
}

.sl-tabela td {
  padding: 12px;
  border-bottom: 1px solid var(--sl-hairline);
}

.sl-tabela tbody tr:hover { background: #FAFAFA; }

/* ---------- Modal ---------- */

.sl-modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(22, 22, 25, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.sl-modal-fundo[hidden] { display: none; }

.sl-modal {
  background: var(--sl-papel);
  border: 1px solid var(--sl-tinta);
  border-radius: 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
}

.sl-modal.sl-largo { max-width: 760px; }

/* Modal de trabalho aberto de DENTRO de um .sl-modal-cheio (tela cheia) já
   aberto — picker de catálogo, item manual/avulso, parâmetros de
   precificação, confirmação de recusa da Proposta. Usado só por Lista
   técnica, Orçamento e Proposta — por isso pode ser redefinido aqui sem
   checar outro lugar.
   Vive HOJE aninhado dentro do .sl-modal-cheio-lado de trabalho (o direito
   em Lista técnica/Orçamento; o único na Proposta, que não tem coluna de
   referência) — position:absolute cobre só aquele lado (a esquerda —
   briefing/lista técnica de referência, onde existe — continua visível),
   ancorado por .sl-modal-cheio-lado{position:relative}. Só volta a cobrir a
   tela inteira (position:fixed) quando o lado direito está EXPANDIDO
   (.sl-orc-expandido) ou em largura de celular, onde a divisão já não existe
   de verdade (painéis empilhados, cada um baixo demais pro modal caber). */
.sl-modal-fundo.sl-sobre-cheio { position: absolute; inset: 0; z-index: 250; }

#modalOrcamento.sl-orc-expandido .sl-modal-fundo.sl-sobre-cheio { position: fixed; }

@media (max-width: 900px) {
  .sl-modal-fundo.sl-sobre-cheio { position: fixed; }
}

.sl-modal h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

/* Cabeçalho do modal, quando tem botão de fechar (todo modal precisa ter) —
   substitui a margem do h2 solto acima por uma margem no próprio cabeçalho,
   pra caber ao lado do ×. */
.sl-modal-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.sl-modal-cab h2 { margin-bottom: 0; }

.sl-fechar {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--sl-tinta);
  cursor: pointer;
  padding: 2px 6px;
  flex: none;
}

.sl-fechar:hover { opacity: .6; }

/* ---------- Campo de formulário ---------- */

.sl-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

.sl-campo[hidden] { display: none; }

.sl-campo label {
  font-family: var(--sl-fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-mute);
}

.sl-campo input,
.sl-campo select,
.sl-campo textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--sl-hairline);
  border-radius: 0;
  background: var(--sl-papel);
  color: var(--sl-tinta);
  outline: none;
}

.sl-campo input:focus,
.sl-campo select:focus,
.sl-campo textarea:focus { border-color: var(--sl-tinta); }

.sl-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Empilha em largura de celular — mesmo breakpoint global já usado pro
   topo (ver .sl-topo-inner acima). Precisa vir DEPOIS da regra base aqui
   (mesma especificidade — um seletor de classe só — então quem vem depois
   no arquivo vence a cascata, media query batendo ou não); colocada perto
   do @media do topo por engano na primeira tentativa, nunca aplicava de
   verdade porque a regra base, mais abaixo no arquivo, sempre vencia por
   ordem de fonte. Conserta toda tela que usa a classe de uma vez só (achado
   isolando o estouro de /sl/usuarios.php — "Dados da empresa" sozinha já
   passava de 500px de conteúdo num viewport de 390px). */
@media (max-width: 780px) {
  .sl-dupla { grid-template-columns: 1fr; }
}

.sl-campo input[readonly],
.sl-campo textarea[readonly] { background: var(--sl-lavado); color: var(--sl-mute); }

/* ==================== Bloco Acervo ==================== */

/* ---------- Abas ---------- */

.sl-abas { display: flex; gap: 0; border-bottom: 1px solid var(--sl-hairline); margin-bottom: 4px; }

.sl-abas button {
  font-family: var(--sl-fonte-titulo);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
  background: none;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  color: var(--sl-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.sl-abas button[aria-pressed="true"] { color: var(--sl-tinta); border-bottom-color: var(--sl-tinta); }

.sl-aba-painel[hidden] { display: none; }

/* ---------- Cabeçalho de lista (busca/filtro/ação) ---------- */

.sl-lista-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
}

.sl-lista-titulo { font-size: 22px; }

.sl-ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sl-busca-campo {
  font-family: var(--sl-fonte-corpo);
  font-size: 14px;
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  padding: 9px 11px;
  width: 220px;
  outline: none;
}

.sl-busca-campo:focus { border-color: var(--sl-tinta); }

.sl-filtro {
  font-family: var(--sl-fonte-mono);
  font-size: 11px;
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  color: var(--sl-mute);
  padding: 9px 10px;
}

/* ---------- Sanfona de fornecedor/marca ---------- */

.sl-item { border: 1px solid var(--sl-hairline); margin-bottom: 10px; background: var(--sl-lavado); }

.sl-item-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; }

.sl-item-nome { font-family: var(--sl-fonte-titulo); font-weight: 500; font-size: 19px; letter-spacing: -.01em; flex: 1; text-align: center; }

.sl-item-busca { width: 150px; font-family: var(--sl-fonte-corpo); font-size: 13px; border: 1px solid var(--sl-hairline-forte); background: var(--sl-papel); padding: 7px 9px; }

.sl-chev { font-family: var(--sl-fonte-mono); font-size: 15px; color: var(--sl-mute); transition: transform .15s; width: 20px; text-align: center; flex: none; }

.sl-item.on .sl-chev { transform: rotate(180deg); }

.sl-item-corpo { display: none; padding: 0 20px 22px; background: var(--sl-papel); }

.sl-item.on .sl-item-corpo { display: block; padding-top: 20px; }

.sl-ic-del-fornecedor { display: none; }

.sl-item.on .sl-ic-del-fornecedor { display: inline-block; }

/* ---------- Fornecedor expandido ---------- */

.sl-forn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.sl-col-btn { display: flex; flex-direction: column; }

.sl-btn-largo {
  width: 100%;
  font-family: var(--sl-fonte-corpo);
  font-size: 15px;
  font-weight: 500;
  background: var(--sl-tinta);
  border: 1px solid var(--sl-tinta);
  color: var(--sl-papel);
  padding: 13px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-bottom: 10px;
}

.sl-btn-largo:hover { opacity: .88; }

.sl-btn-largo span {
  font-family: var(--sl-fonte-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}

.sl-marcas { margin-top: 20px; font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--sl-mute); line-height: 1.8; }

.sl-marcas b { color: var(--sl-tinta); font-weight: 500; }

.sl-linha-dado { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; margin-bottom: 9px; }

.sl-linha-dado label {
  font-family: var(--sl-fonte-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sl-mute);
  text-align: right;
}

.sl-linha-dado input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  padding: 9px 10px;
}

.sl-linha-dado input[readonly] { background: var(--sl-lavado); color: var(--sl-mute); border-color: var(--sl-hairline); }

.sl-contatos { margin-top: 18px; }

.sl-contato { display: grid; grid-template-columns: 1fr 1fr 1fr 24px; gap: 8px; margin-bottom: 8px; align-items: center; }

.sl-contato input { font: inherit; font-size: 13px; border: 1px solid var(--sl-hairline-forte); background: var(--sl-papel); padding: 8px 9px; width: 100%; }

.sl-contato input[readonly] { background: var(--sl-lavado); color: var(--sl-mute); border-color: var(--sl-hairline); }

.sl-contato input.zap { font-family: var(--sl-fonte-mono); font-size: 12px; }

.sl-ic { background: none; border: none; cursor: pointer; color: var(--sl-mute); font-size: 15px; padding: 2px 4px; }

.sl-ic:hover { color: var(--sl-vermelho); }

.sl-mais {
  font-family: var(--sl-fonte-mono);
  font-size: 15px;
  background: none;
  border: 1px dashed var(--sl-hairline-forte);
  color: var(--sl-mute);
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 6px 0;
  margin-top: 4px;
}

.sl-mais:hover { color: var(--sl-tinta); border-color: var(--sl-tinta); }

.sl-mais[hidden] { display: none; }

.sl-obs-caixa { border: 1px solid var(--sl-hairline-forte); background: var(--sl-papel); padding: 11px 12px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; }

.sl-obs-meta { font-family: var(--sl-fonte-mono); font-size: 10px; color: var(--sl-mute); margin-top: 6px; }

.sl-pe-item { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Armadilha do sistema (ver instruções): [hidden] perde de uma classe com
   display próprio, porque as duas empatam em especificidade e a de autor vem
   depois da UA no cascade. .sl-pe-item nunca tinha essa defesa — era o
   rodapé do passo a passo (lista técnica e orçamento) que ficava PRESO
   visível mesmo com hidden=true, sobrevivendo entre telas do picker e
   permitindo reenviar dados do último item incluído. */
.sl-pe-item[hidden] { display: none; }

/* ---------- Fichas técnicas (linhas tipo tabela) ---------- */

.sl-ft-cab {
  display: grid;
  grid-template-columns: 1.1fr 2fr 96px 1.2fr 118px 96px 116px 26px;
  gap: 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--sl-hairline);
}

.sl-ft-cab span { font-family: var(--sl-fonte-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); }

.sl-ft-cab span.dir { text-align: right; }

.sl-ft-lin {
  display: grid;
  grid-template-columns: 1.1fr 2fr 96px 1.2fr 118px 96px 116px 26px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--sl-hairline);
  font-size: 13.5px;
}

.sl-trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sl-ft-lin .sl-modelo { font-weight: 500; }

.sl-ft-lin .sl-cod { font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-mute); }

.sl-ft-lin .sl-preco { font-family: var(--sl-fonte-mono); font-size: 13px; text-align: right; }

.sl-ft-lin .sl-forns { font-family: var(--sl-fonte-mono); font-size: 10.5px; color: var(--sl-mute); line-height: 1.5; }

.sl-ft-vazio { padding: 20px 0; color: var(--sl-mute); font-size: 14px; }

@media (max-width: 860px) {
  .sl-forn-grid { grid-template-columns: 1fr; gap: 22px; }
  .sl-ft-cab { display: none; }
  .sl-ft-lin { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sl-contato { grid-template-columns: 1fr; }
}

/* ---------- Listas dentro de modal (catálogos/documentos) ---------- */

.sl-lista-modal { border-top: 1px solid var(--sl-hairline); margin-top: 4px; }

.sl-linha-modal { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sl-hairline); }

.sl-linha-modal .sl-nome { flex: 1; font-size: 14px; font-weight: 500; }

.sl-linha-modal .sl-meta { font-family: var(--sl-fonte-mono); font-size: 10.5px; color: var(--sl-mute); }

/* Nome + meta + botões (ex.: "restaurar"/"excluir definitivamente" na
   lixeira, ou documento/material + "abrir"/"×" em outras telas) numa linha
   só sem wrap não cabe em largura de celular — os botões de texto mais
   longo (ex.: "excluir definitivamente") não têm como encolher. Permite
   quebrar pra uma segunda linha em vez de estourar a página; vem DEPOIS da
   regra base acima de propósito (mesma especificidade — ordem no arquivo
   decide, ver a mesma armadilha corrigida em .sl-dupla). Achado isolando
   /sl/lixeira.php com conteúdo de verdade em 390px. */
@media (max-width: 780px) {
  .sl-linha-modal { flex-wrap: wrap; }
}

/* Selo "pedido gerado" do despache (Finalização) — mesmo desenho do badge de
   histórico acima, cor verde (confirmado), independente de .sl-linha-modal
   porque vive dentro de um .sl-orc-card. */
.sl-badge-ok {
  display: inline-block;
  font-family: var(--sl-fonte-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-verde);
  border: 1px solid var(--sl-verde);
  padding: 2px 6px;
  margin-right: 8px;
}

.sl-linha-modal .sl-badge-historico {
  font-family: var(--sl-fonte-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-laranja);
  border: 1px solid var(--sl-laranja);
  padding: 2px 6px;
}

.sl-solta {
  border: 1px dashed var(--sl-hairline-forte);
  background: var(--sl-lavado);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  margin-top: 16px;
}

.sl-solta:hover { border-color: var(--sl-tinta); }

.sl-solta.sl-arrastando { border-color: var(--sl-tinta); background: #EFEFF1; }

.sl-solta-sub { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-mute); margin-top: 6px; }

/* ---------- Aviso (bloqueio/cautela) ---------- */

.sl-aviso-bloq { border-left: 2px solid var(--sl-vermelho); padding: 3px 0 3px 13px; font-size: 14px; line-height: 1.55; color: var(--sl-vermelho); }

.sl-aviso-caut { border-left: 2px solid var(--sl-laranja); padding: 3px 0 3px 13px; font-size: 14px; line-height: 1.55; color: var(--sl-laranja); }

/* Banner de erro global (sandbox.php e projeto.php) — captura qualquer
   falha de rede/servidor sem try/catch próprio via window.onunhandledrejection,
   pra nunca ficar só no console. Vermelho = ação que falhou, mesmo sentido
   fixo do resto do sistema. */
.sl-erro-global {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, calc(100vw - 32px));
  background: var(--sl-vermelho);
  color: var(--sl-papel);
  font-family: var(--sl-fonte-corpo);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--sl-vermelho);
}
.sl-erro-global-x { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--sl-papel); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* ==================== Catálogo aberto (tela cheia) ==================== */

.sl-cat-body { display: flex; flex-direction: column; height: 100vh; }

.sl-cat-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--sl-hairline);
  flex: none;
  flex-wrap: wrap;
}

.sl-cat-tit { font-size: 19px; }

.sl-cat-sub { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); margin-top: 4px; }

.sl-cat-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sl-cat-faixa {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: var(--sl-tinta);
  color: var(--sl-papel);
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex: none;
}

.sl-cat-body[data-modo="editar"] .sl-cat-faixa { display: flex; }

.sl-cat-faixa.sl-cautela { background: var(--sl-laranja); }

.sl-cat-area { flex: 1; min-height: 0; display: flex; }

.sl-cat-tabela-cx { flex: 1; min-width: 0; overflow: auto; position: relative; }

.sl-cat-tabela { border-collapse: separate; border-spacing: 0; min-width: 1300px; width: 100%; font-size: 13.5px; }

.sl-cat-tabela th {
  font-family: var(--sl-fonte-mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sl-mute);
  text-align: left;
  font-weight: 400;
  padding: 13px 11px 11px;
  border-bottom: 1px solid var(--sl-hairline);
  background: var(--sl-papel);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.sl-cat-tabela th.dir { text-align: right; }

.sl-cat-tabela th.sl-acao, .sl-cat-tabela td.sl-acao {
  position: sticky;
  right: 0;
  background: var(--sl-papel);
  border-left: 1px solid var(--sl-hairline);
  width: 200px;
  min-width: 200px;
  text-align: center;
  z-index: 3;
}

.sl-cat-tabela th.sl-acao { z-index: 4; }

.sl-cat-tabela td { padding: 11px; border-bottom: 1px solid var(--sl-hairline); vertical-align: middle; }

.sl-cat-tabela td.dir { text-align: right; }

.sl-cat-tabela tr.sl-linha { cursor: pointer; }

.sl-cat-tabela tr.sl-linha:hover td { background: var(--sl-lavado); }

.sl-cat-tabela tr.sl-linha[aria-selected="true"] td { background: #EEEEF0; }

.sl-cat-tabela td.sl-vazio { color: var(--sl-hairline-forte); }

.sl-cat-body[data-modo="editar"] tr.sl-linha[aria-selected="true"] td.sl-cel { padding: 4px 7px; }

.sl-cat-body[data-modo="editar"] tr.sl-linha[aria-selected="true"] td.sl-cel input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  padding: 6px 7px;
}

.sl-cat-body[data-modo="editar"] tr.sl-linha[aria-selected="true"] td.sl-cel input.sl-preenchida { background: var(--sl-lavado); color: var(--sl-mute); }

td.sl-cel input { display: none; }

.sl-cat-body[data-modo="editar"] tr.sl-linha[aria-selected="true"] td.sl-cel input { display: block; }

.sl-cat-body[data-modo="editar"] tr.sl-linha[aria-selected="true"] td.sl-cel .sl-txt { display: none; }

.sl-cat-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px;
  border-top: 1px solid var(--sl-hairline);
  flex: none;
  flex-wrap: wrap;
}

.sl-cat-pe-info { font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .07em; color: var(--sl-mute); }

@media (max-width: 820px) {
  .sl-cat-topo { padding: 12px 14px; }
  .sl-cat-tabela th.sl-acao, .sl-cat-tabela td.sl-acao { position: static; width: auto; min-width: 150px; }
  .sl-cat-pe { padding: 11px 14px; }
}

/* ==================== Bloco Clientes/Projetos/Timeline ==================== */

/* ---------- Duas colunas (cliente expandido) — alias de .sl-forn-grid ---------- */

.sl-duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

@media (max-width: 860px) {
  .sl-duas-colunas { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Lista de projetos ---------- */

.sl-secao { margin-top: 28px; }

.sl-secao-titulo { display: block; margin-bottom: 12px; }

.sl-proj {
  display: grid;
  grid-template-columns: 1.5fr 1fr 118px 1.3fr 104px 34px 30px;
  gap: 14px;
  align-items: center;
  background: var(--sl-lavado);
  border: 1px solid var(--sl-hairline);
  padding: 15px 18px;
  margin-bottom: 9px;
  cursor: pointer;
}

.sl-proj.sl-rejeitado, .sl-proj.sl-finalizado {
  grid-template-columns: 1.5fr 1fr 1fr 104px 34px 30px;
}

.sl-proj.sl-finalizado { grid-template-columns: 1.5fr 1fr 118px 1.3fr 104px 30px; }

.sl-proj:hover { border-color: var(--sl-hairline-forte); }

.sl-proj.sl-parado { border-left: 3px solid var(--sl-laranja); }

.sl-proj-nome, .sl-proj-cli, .sl-proj-agu, .sl-motivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sl-proj-cli { font-family: var(--sl-fonte-titulo); font-weight: 700; font-size: 15px; color: var(--sl-tinta); }

.sl-proj-nome { font-size: 14px; font-weight: 400; color: var(--sl-mute); }

.sl-proj-est { font-family: var(--sl-fonte-mono); font-size: 11px; color: var(--sl-mute); white-space: nowrap; }

.sl-proj-agu { font-size: 13.5px; color: var(--sl-mute); }

.sl-proj-agu-acao { color: var(--sl-tinta); }

.sl-proj-data { font-family: var(--sl-fonte-mono); font-size: 11px; color: var(--sl-hairline-forte); text-align: right; white-space: nowrap; }

.sl-motivo { font-size: 13.5px; color: var(--sl-mute); font-style: italic; }

.sl-aviso-parado {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  padding: 9px 18px;
  border-left: 3px solid var(--sl-laranja);
  background: #FDF6F0;
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--sl-laranja);
}

@media (max-width: 860px) {
  .sl-proj, .sl-proj.sl-rejeitado, .sl-proj.sl-finalizado { grid-template-columns: 1fr auto; gap: 8px; }
  .sl-proj-nome, .sl-proj-est, .sl-proj-agu, .sl-proj-data, .sl-motivo { grid-column: 1; }
}

/* ==================== Tela do projeto (tela cheia) ==================== */

.sl-proj-body { display: flex; flex-direction: column; height: 100vh; }

.sl-proj-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--sl-hairline);
  flex: none;
}

.sl-proj-tit { font-size: 21px; }

.sl-proj-tit-linha { display: flex; align-items: baseline; gap: 12px; }
.sl-proj-tit-linha[hidden] { display: none; }

.sl-proj-editar {
  font-family: var(--sl-fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--sl-mute);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity .15s;
}

.sl-proj-topo:hover .sl-proj-editar,
.sl-proj-editar:focus-visible { opacity: 1; }

.sl-proj-tit-edicao { margin-top: 4px; }

.sl-proj-tit-input {
  display: block;
  width: 100%;
  max-width: 480px;
  border: none;
  border-bottom: 1px solid var(--sl-tinta);
  background: none;
  color: inherit;
  padding: 0 0 3px;
}

.sl-proj-tit-input:focus { outline: none; }

.sl-proj-tit-acoes { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.sl-proj-tit-acoes .sl-btn { padding: 9px 20px; font-size: 13px; }

.sl-proj-sub { font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); margin-top: 6px; }

/* abas mobile — mesma abordagem do protótipo aprovado: visibilidade das TRÊS
   colunas comandada por um atributo (data-aba) no body, nunca por [hidden]
   nem por classe concorrente no mesmo elemento — uma abordagem só. */
.sl-proj-abas { display: none; border-bottom: 1px solid var(--sl-hairline); flex: none; }

.sl-proj-abas button {
  flex: 1;
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 13px 6px;
  cursor: pointer;
  color: var(--sl-mute);
  border-bottom: 2px solid transparent;
}

.sl-proj-abas button[aria-pressed="true"] { color: var(--sl-tinta); border-bottom-color: var(--sl-tinta); }

.sl-proj-split { display: grid; grid-template-columns: 300px 1fr 320px; flex: 1; min-height: 0; }

.sl-proj-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

.sl-proj-col-esq { border-right: 1px solid var(--sl-hairline); padding: 20px; gap: 8px; }

.sl-proj-col-meio { padding: 20px 24px 40px; background: var(--sl-lavado); gap: 16px; }

.sl-proj-col-dir { border-left: 1px solid var(--sl-hairline); padding: 20px; }

/* ---------- Timeline ---------- */

.sl-etapa {
  width: 100%;
  text-align: left;
  background: var(--sl-papel);
  border: 1px solid var(--sl-hairline);
  padding: 13px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sl-fonte-corpo);
}

.sl-etapa:hover { border-color: var(--sl-hairline-forte); }

.sl-etapa[aria-pressed="true"] { background: var(--sl-tinta); border-color: var(--sl-tinta); color: var(--sl-papel); }

.sl-etapa-num {
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--sl-hairline-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-mute);
}

.sl-etapa[aria-pressed="true"] .sl-etapa-num { border-color: rgba(255, 255, 255, .4); color: var(--sl-papel); }

.sl-etapa-nome { flex: 1; font-size: 14.5px; font-weight: 500; min-width: 0; }

.sl-etapa-sit { font-family: var(--sl-fonte-mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--sl-mute); white-space: nowrap; }

.sl-etapa[aria-pressed="true"] .sl-etapa-sit { color: rgba(255, 255, 255, .65); }

.sl-etapa[data-sit="pendente"] .sl-etapa-nome, .sl-etapa[data-sit="pendente"] .sl-etapa-num { color: var(--sl-mute); }

.sl-etapa[data-sit="concluido"] .sl-etapa-sit { color: var(--sl-verde); }

.sl-etapa[data-sit="bypassado"] .sl-etapa-sit { color: var(--sl-laranja); }

.sl-seta-baixo { text-align: center; font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-hairline-forte); padding: 5px 0; }

/* ---------- Ficha do estágio ---------- */

.sl-ficha { background: var(--sl-papel); border: 1px solid var(--sl-hairline); padding: 22px; }

.sl-ficha-tit { font-size: 18px; text-align: center; margin-bottom: 20px; }

.sl-btn-acao {
  width: 100%;
  font-family: var(--sl-fonte-corpo);
  font-size: 15px;
  font-weight: 500;
  background: var(--sl-tinta);
  border: 1px solid var(--sl-tinta);
  color: var(--sl-papel);
  padding: 14px 20px;
  cursor: pointer;
}

.sl-btn-acao:hover { opacity: .88; }

.sl-btn-acao + .sl-btn-acao { margin-top: 10px; }

.sl-acao-fim { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sl-hairline); }

.sl-acao-linha { display: grid; grid-template-columns: 1fr 130px 130px; gap: 10px; margin-top: 11px; }

.sl-acao-linha input, .sl-acao-linha select {
  font: inherit;
  font-size: 13.5px;
  color: var(--sl-tinta);
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  padding: 10px 11px;
  width: 100%;
}

.sl-acao-linha input[type="date"] { font-family: var(--sl-fonte-mono); font-size: 12px; }

.sl-acao-linha input:focus, .sl-acao-linha select:focus { border-color: var(--sl-tinta); }

.sl-switches { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sl-hairline); display: flex; flex-direction: column; gap: 12px; }

.sl-sw-linha { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.sl-sw-rot { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--sl-mute); }

.sl-sw { position: relative; width: 44px; height: 24px; flex: none; }

.sl-sw input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: relative; z-index: 2; }

.sl-sw i { position: absolute; inset: 0; background: var(--sl-hairline-forte); transition: background .15s; pointer-events: none; }

.sl-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--sl-papel); transition: transform .15s; }

.sl-sw input:checked + i { background: var(--sl-tinta); }

.sl-sw input:checked + i::after { transform: translateX(20px); }

.sl-sw input:disabled { cursor: not-allowed; }

.sl-perenes { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

.sl-btn-perene {
  width: 100%;
  font-family: var(--sl-fonte-corpo);
  font-size: 14.5px;
  font-weight: 500;
  background: var(--sl-papel);
  border: 1px solid var(--sl-tinta);
  color: var(--sl-tinta);
  padding: 13px 20px;
  cursor: pointer;
}

.sl-btn-perene:hover { background: var(--sl-tinta); color: var(--sl-papel); }

/* ---------- Atualizações do projeto ---------- */

.sl-atu-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

.sl-btn-linha {
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  background: none;
  border: none;
  color: var(--sl-tinta);
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid var(--sl-tinta);
}

.sl-atu { border: 1px solid var(--sl-hairline); background: var(--sl-papel); padding: 14px 34px 14px 15px; margin-bottom: 10px; position: relative; }

.sl-atu.sl-superada { opacity: .6; }

.sl-atu-txt { font-size: 14px; line-height: 1.55; }

.sl-atu-pe { font-family: var(--sl-fonte-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); margin-top: 10px; }

.sl-atu-x { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--sl-mute); font-size: 14px; cursor: pointer; padding: 2px 4px; }

.sl-atu-x:hover { color: var(--sl-vermelho); }

/* ---------- Modal de confirmação de ação (switches) ---------- */

.sl-modal-acao { font-size: 21px; letter-spacing: -.015em; line-height: 1.3; }

.sl-modal-meta { font-family: var(--sl-fonte-mono); font-size: 11px; letter-spacing: .08em; color: var(--sl-mute); margin-top: 12px; }

@media (max-width: 1080px) {
  .sl-proj-abas { display: flex; }
  .sl-proj-split { grid-template-columns: 1fr; }
  .sl-proj-col { display: none; }
  .sl-proj-col-esq, .sl-proj-col-dir { border: none; }
  .sl-proj-body[data-aba="etapas"] .sl-proj-col-esq { display: flex; }
  .sl-proj-body[data-aba="ficha"] .sl-proj-col-meio { display: flex; }
  .sl-proj-body[data-aba="atu"] .sl-proj-col-dir { display: flex; }
  .sl-acao-linha { grid-template-columns: 1fr; }
}

/* ==================== Bloco Briefing raw + Depuração ==================== */
/* Modal de TELA CHEIA (Passo 4/5) — categoria própria de modal, diferente do
   .sl-modal-fundo/.sl-modal centralizado usado no resto do sistema. Mesma
   regra do catálogo aberto/tela do projeto: cobre a viewport inteira, com
   topo + botão × fixos e uma área de rolagem própria por coluna. */

.sl-modal-cheio {
  position: fixed;
  inset: 0;
  background: var(--sl-papel);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.sl-modal-cheio[hidden] { display: none; }

.sl-modal-cheio-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--sl-hairline);
  flex: none;
}

.sl-modal-cheio-tit { font-size: 20px; }

.sl-modal-cheio-sub { font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); margin-top: 5px; }

.sl-modal-cheio-split { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }

/* Lista técnica: briefing (esq.) é só referência de leitura, montagem (dir.)
   tem tabela de nove colunas — por isso 1/3 x 2/3 em vez do 50/50 padrão. */
#modalLista .sl-modal-cheio-split { grid-template-columns: 1fr 2fr; }

/* Modificador reutilizável do split — mesmo padrão "referência estreita à
   esquerda (1/3), trabalho à direita (2/3)" acima, mas como classe em vez de
   override por id, para qualquer tela dividida futura que sirva do mesmo
   jeito (ver Orçamento logo abaixo). Precisa da própria linha dentro do
   media query — .sl-split-1-3 tem mais especificidade que a regra genérica
   de empilhar em 1 coluna (duas classes contra uma), então sem isso ela
   venceria e o mobile nunca empilharia. */
.sl-modal-cheio-split.sl-split-1-3 { grid-template-columns: 1fr 2fr; }

/* Telas cheias de uma coluna só (Proposta — sem referência de lista técnica
   ao lado, diferente de Orçamento/Lista técnica) — reaproveita a mesma
   estrutura .sl-modal-cheio-split/.sl-modal-cheio-lado/.sl-modal-cheio-col
   (scroll, padding) só com uma coluna. */
.sl-modal-cheio-split.sl-split-unico { grid-template-columns: 1fr; }

.sl-modal-cheio-lado { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sl-hairline); }

.sl-modal-cheio-lado:last-child { border-right: none; }

.sl-modal-cheio-lado.sl-lavado { background: var(--sl-lavado); }

.sl-modal-cheio-lado-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 24px; border-bottom: 1px solid var(--sl-hairline); flex: none; }

.sl-modal-cheio-col { padding: 20px 24px 40px; overflow-y: auto; flex: 1; min-height: 0; }

.sl-modal-cheio-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--sl-hairline); flex: none; background: var(--sl-papel); }

.sl-modal-cheio-rodape-esq { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .sl-modal-cheio-split { grid-template-columns: 1fr; }
  #modalLista .sl-modal-cheio-split { grid-template-columns: 1fr; }
  .sl-modal-cheio-split.sl-split-1-3 { grid-template-columns: 1fr; }
  .sl-modal-cheio-lado { border-right: none; border-bottom: 1px solid var(--sl-hairline); max-height: 46vh; }
}

/* ---------- Captura (esquerda, raw) ---------- */

.sl-captura-bloco { margin-bottom: 26px; }

.sl-captura-bloco > .sl-rotulo { display: block; margin-bottom: 10px; }

.sl-gravar-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sl-gravando { display: flex; align-items: center; gap: 9px; }
.sl-gravando[hidden] { display: none; }

.sl-ponto-gravando {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sl-vermelho);
  animation: sl-piscar 1.1s ease-in-out infinite;
  flex: none;
}

@keyframes sl-piscar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .sl-ponto-gravando { animation: none; }
}

.sl-cronometro { font-family: var(--sl-fonte-mono); font-size: 15px; min-width: 46px; }

/* ---------- Capturado (direita, raw) ---------- */

.sl-registro { border: 1px solid var(--sl-hairline); background: var(--sl-papel); padding: 14px 34px 14px 15px; margin-bottom: 12px; position: relative; }

.sl-registro-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.sl-registro-selo {
  font-family: var(--sl-fonte-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--sl-hairline-forte);
  color: var(--sl-mute);
}

.sl-registro-meta { font-family: var(--sl-fonte-mono); font-size: 10px; color: var(--sl-mute); }

.sl-registro-x { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--sl-mute); font-size: 15px; cursor: pointer; padding: 2px 4px; }

.sl-registro-x:hover { color: var(--sl-vermelho); }

.sl-registro-texto { font-size: 14px; line-height: 1.55; cursor: text; white-space: pre-wrap; }

.sl-registro-texto[contenteditable="true"] { outline: 2px solid var(--sl-tinta); outline-offset: 4px; background: var(--sl-lavado); }

.sl-registro-audio { display: flex; align-items: center; gap: 10px; }

.sl-registro-audio audio { height: 32px; flex: 1; min-width: 0; }

.sl-play {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--sl-tinta);
  background: var(--sl-papel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-play:hover { background: var(--sl-tinta); }
.sl-play:hover svg path { fill: var(--sl-papel); }

.sl-transcricao { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sl-tinta); }

.sl-transcricao.sl-processando { color: var(--sl-mute); font-style: italic; }

.sl-transcricao-erro { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--sl-vermelho); }

.sl-registro-imagem img { max-width: 100%; display: block; margin-top: 4px; }

.sl-registro-doc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sl-registro-doc-nome { font-size: 14px; font-weight: 500; }

.sl-registro-doc-tam { font-family: var(--sl-fonte-mono); font-size: 11px; color: var(--sl-mute); }

/* ---------- Depurado ---------- */

.sl-depurado-partida { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 60px 24px; text-align: center; }

.sl-depurado-partida-txt { font-size: 15px; color: var(--sl-mute); max-width: 340px; line-height: 1.6; }

.sl-depurado-progresso { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 60px 24px; }

.sl-barrinha { width: 170px; height: 2px; background: var(--sl-hairline); overflow: hidden; position: relative; }

.sl-barrinha i { position: absolute; inset: 0; background: var(--sl-tinta); transform: translateX(-100%); animation: sl-corre 1.4s infinite; }

@keyframes sl-corre { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .sl-barrinha i { animation: none; transform: translateX(0); }
}

.sl-depurado-conteudo { font-size: 14.5px; line-height: 1.65; background: var(--sl-papel); border: 1px solid var(--sl-hairline); padding: 22px 24px; }

.sl-depurado-conteudo[contenteditable="true"] { outline: 2px solid var(--sl-tinta); outline-offset: 4px; }

.sl-depurado-conteudo h2 { font-size: 16px; margin-top: 18px; margin-bottom: 8px; }

.sl-depurado-conteudo h2:first-child { margin-top: 0; }

.sl-depurado-conteudo p { margin-top: 10px; }

.sl-depurado-conteudo ul { margin-top: 10px; padding-left: 20px; }

.sl-depurado-conteudo li { margin-top: 5px; }

.sl-briefing-img { max-width: 100%; display: block; margin: 14px 0; border: 1px solid var(--sl-hairline); }

.sl-pedidos-caixa { margin-top: 22px; border-top: 1px solid var(--sl-hairline); padding-top: 18px; }

.sl-pedidos-historico { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.sl-pedido-item { font-size: 13px; border-left: 2px solid var(--sl-hairline-forte); padding: 4px 0 4px 12px; color: var(--sl-mute); }

.sl-pedido-item b {
  display: block;
  font-family: var(--sl-fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sl-mute);
  font-weight: 400;
  margin-bottom: 3px;
}

.sl-pedidos-linha { display: flex; gap: 10px; }

.sl-pedidos-linha input {
  flex: 1;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--sl-hairline-forte);
  background: var(--sl-papel);
  padding: 11px 12px;
}

.sl-pedidos-linha input:focus { outline: 2px solid var(--sl-tinta); outline-offset: -2px; }

/* ==================== Bloco Lista técnica ==================== */
/* Vive dentro do mesmo .sl-modal-cheio (topo/split/rodape) já usado por
   Briefing raw e Depuração — aqui só o miolo do lado direito (as listas em
   paralelo, os ambientes, a tabela) e os modais auxiliares (picker do
   catálogo + passo a passo, item manual) são novos. */

.sl-lt-listas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--sl-hairline); flex: none; }

.sl-lt-v {
  font-family: var(--sl-fonte-mono);
  font-size: 11px;
  background: var(--sl-papel);
  border: 1px solid var(--sl-hairline-forte);
  padding: 9px 15px;
  cursor: pointer;
  color: var(--sl-mute);
}

.sl-lt-v[aria-pressed="true"] { background: var(--sl-tinta); border-color: var(--sl-tinta); color: var(--sl-papel); }

.sl-lt-v.add { border-style: dashed; }

.sl-lt-painel { padding: 22px 24px 40px; }

/* Versionamento da lista técnica — abas (mono maiúsculo, mesma pílula
   .sl-lt-v de cima) só aparecem com 2+ versões; "Nova versão" fica sempre
   à direita (é o único jeito de sair da v1). */
.sl-lt-versoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.sl-lt-versoes-abas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sl-lt-versao-atual-tag { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-mute); }

.sl-lt-versao-anterior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--sl-lavado);
  border-left: 3px solid var(--sl-tinta);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--sl-mute);
}

.sl-lt-painel-consulta { opacity: .6; }

.sl-lt-amb { margin-bottom: 34px; border-top: 1px solid var(--sl-tinta); padding-top: 14px; }

.sl-lt-amb-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.sl-lt-amb-nome { font-family: var(--sl-fonte-titulo); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }

.sl-lt-amb-meta { font-family: var(--sl-fonte-mono); font-size: 10.5px; color: var(--sl-mute); }

.sl-lt-tabela { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }

.sl-lt-tabela th {
  font-family: var(--sl-fonte-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sl-mute);
  text-align: left;
  font-weight: 400;
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--sl-hairline);
  white-space: nowrap;
}

.sl-lt-tabela th.dir, .sl-lt-tabela td.dir { text-align: right; }

.sl-lt-tabela th.num, .sl-lt-tabela td.num { text-align: center; }

.sl-lt-tabela td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--sl-hairline); vertical-align: middle; }

.sl-lt-trunca { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sl-lt-tabela .sl-cod { font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-mute); }

.sl-lt-tabela .sl-n { font-family: var(--sl-fonte-mono); font-size: 13px; }

.sl-lt-tabela tr.sl-lt-sub td { border-bottom: none; border-top: 2px solid var(--sl-tinta); padding-top: 13px; font-family: var(--sl-fonte-mono); font-size: 13.5px; font-weight: 500; }

.sl-lt-pe { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }

.sl-lt-imgs { margin-top: 18px; }

.sl-lt-imgs-lista { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }

.sl-lt-thumb { width: 100px; border: 1px solid var(--sl-hairline-forte); background: var(--sl-lavado); }

.sl-lt-thumb img { width: 100%; height: 64px; object-fit: cover; display: block; cursor: pointer; }

.sl-lt-thumb-nome { font-family: var(--sl-fonte-mono); font-size: 8px; color: var(--sl-mute); padding: 5px 6px; border-top: 1px solid var(--sl-hairline); word-break: break-all; line-height: 1.35; display: flex; justify-content: space-between; gap: 4px; align-items: center; }

.sl-lt-thumb-x { background: none; border: none; cursor: pointer; color: var(--sl-mute); font-size: 11px; padding: 0 2px; flex: none; }

.sl-lt-thumb-x:hover { color: var(--sl-vermelho); }

.sl-lt-add-thumb {
  width: 100px;
  height: 92px;
  border: 1px dashed var(--sl-hairline-forte);
  background: var(--sl-papel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sl-fonte-mono);
  font-size: 10px;
  color: var(--sl-mute);
}

.sl-lt-add-thumb:hover { border-color: var(--sl-tinta); color: var(--sl-tinta); }

.sl-lt-total-geral { border-top: 2px solid var(--sl-tinta); margin-top: 8px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }

.sl-lt-total-geral span { font-family: var(--sl-fonte-titulo); font-weight: 600; font-size: 17px; }

.sl-lt-total-geral b { font-family: var(--sl-fonte-mono); font-size: 21px; font-weight: 500; }

/* Rodapé "Enviar para orçamento" (vínculo lista→orçamento) */
.sl-lt-envio { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.sl-lt-envio-aviso { font-size: 13.5px; color: var(--sl-mute); }

.sl-lt-envio-feito { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }

.sl-lt-envio-acoes { display: flex; align-items: center; gap: 18px; }

.sl-lt-envio-lista { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--sl-mute); }

.sl-lt-envio-lista li { margin-bottom: 4px; }

/* ---------- Picker (fornecedor → catálogo → linha) e passo a passo ---------- */

.sl-lt-pick-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.sl-lt-pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--sl-hairline);
  padding: 12px 14px;
  background: var(--sl-papel);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.sl-lt-pick-item:hover { border-color: var(--sl-tinta); }

.sl-lt-pick-nome { font-size: 14.5px; font-weight: 500; }

.sl-lt-pick-meta { font-family: var(--sl-fonte-mono); font-size: 11px; color: var(--sl-mute); }

.sl-lt-passo-split { display: grid; grid-template-columns: 1fr 250px; }

.sl-lt-passo-corpo { padding: 30px 26px; min-height: 250px; display: flex; flex-direction: column; justify-content: center; }

.sl-lt-passo-chips { border-left: 1px solid var(--sl-hairline); background: var(--sl-lavado); padding: 18px; }

.sl-lt-chip {
  display: block;
  background: var(--sl-papel);
  border: 1px solid var(--sl-hairline-forte);
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
  width: 100%;
  margin-top: 7px;
}

.sl-lt-chip:first-child { margin-top: 12px; }

.sl-lt-chip:hover { border-color: var(--sl-tinta); }

.sl-lt-chip b { display: block; font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--sl-mute); font-weight: 400; margin-bottom: 3px; }

.sl-lt-passo-num { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-mute); }

.sl-lt-passo-perg { font-family: var(--sl-fonte-titulo); font-weight: 600; font-size: 23px; letter-spacing: -.015em; line-height: 1.3; margin-top: 12px; }

.sl-lt-passo-campo { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sl-lt-passo-campo input {
  width: 140px;
  font-family: var(--sl-fonte-mono);
  font-size: 20px;
  text-align: center;
  border: 1px solid var(--sl-hairline-forte);
  padding: 12px;
}

.sl-lt-passo-campo input:focus { outline: 2px solid var(--sl-tinta); outline-offset: -2px; }

.sl-lt-passo-campo.sl-lt-preco input { width: 180px; font-size: 17px; text-align: right; }

.sl-lt-un { font-family: var(--sl-fonte-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); }

.sl-lt-passo-nota { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--sl-mute); }

.sl-lt-passo-nota b { color: var(--sl-tinta); font-weight: 500; }

.sl-lt-produto-cx { border: 1px solid var(--sl-hairline); padding: 12px 14px; margin-bottom: 20px; }

.sl-lt-produto-nome { font-size: 15px; font-weight: 500; }

.sl-lt-produto-meta { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .08em; color: var(--sl-mute); margin-top: 5px; }

@media (max-width: 640px) {
  .sl-lt-passo-split { grid-template-columns: 1fr; }
  .sl-lt-passo-chips { border-left: none; border-top: 1px solid var(--sl-hairline); }
}

/* ==================== Bloco Orçamento (estrutura) ==================== */
/* Mesmo .sl-modal-cheio de sempre — lista técnica (referência, só leitura)
   1/3 à esquerda, orçamento 2/3 à direita, cada lado com rolagem própria
   (herda .sl-modal-cheio-lado/.sl-modal-cheio-col, nada novo ali). A
   proporção em si é .sl-split-1-3 (ver .sl-modal-cheio-split acima), a
   classe aplicada no HTML deste modal — não um override por id daqui. O
   picker "por fornecedor" reaproveita as classes sl-lt-pick-* e sl-lt-passo-*
   e sl-lt-chip da Lista técnica ao pé da letra — são genéricas, não
   específicas daquele bloco.

   Achado real deste bloco: a versão anterior deste comentário citava dois
   nomes de classe terminados em asterisco separados só por uma barra, sem
   espaço entre eles — essa combinação de caracteres é como um comentário
   CSS termina, então o comentário fechava sozinho ali no meio da frase.
   Tudo que vinha depois (inclusive a regra #modalOrcamento
   .sl-modal-cheio-split que fixava a proporção) virava código CSS de
   verdade em vez de comentário, ficava sem sentido pro navegador e era
   descartado inteiro — por isso a proporção nunca pegava, mesmo com a
   regra escrita certinha logo ali embaixo. Nunca escrever asterisco seguido
   de barra dentro de um comentário CSS, mesmo em nomes soltos — separar
   com "e" ou por espaço, como acima. */

#modalOrcamento.sl-orc-expandido .sl-modal-cheio-lado:first-child { display: none; }
#modalOrcamento.sl-orc-expandido .sl-modal-cheio-split { grid-template-columns: 1fr; }

.sl-orc-bloco { margin-bottom: 34px; }

/* As "três" (fornecedor) ou "um" (Fontes diversas) controles do cabeçalho do
   bloco esticam pra mesma altura via align-items:stretch — nunca escadinha,
   qualquer que seja o conteúdo de cada botão. */
.sl-orc-bloco-cab { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; min-height: 58px; }

.sl-orc-bloco-nome {
  font-family: var(--sl-fonte-titulo);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  min-width: 110px;
  display: flex;
  align-items: center;
}

/* Resumo verde sobre fundo tinta — parâmetros já definidos; clicar reabre
   pra editar. Mesmo botão, sem parâmetros ainda, usa .sl-btn-mini direto
   (nenhuma classe nova precisa pra esse estado). */
.sl-orc-params-resumo {
  background: var(--sl-tinta);
  color: var(--sl-verde);
  border: 1px solid var(--sl-tinta);
  cursor: pointer;
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  line-height: 1.6;
  padding: 10px 14px;
  text-align: left;
  min-width: 220px;
}

.sl-orc-params-resumo:hover { background: #000; }

.sl-orc-bloco-cab .sl-btn-mini { min-width: 220px; }

.sl-orc-seta { background: none; border: none; font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-mute); cursor: pointer; padding: 2px 6px; }

.sl-orc-seta:hover { color: var(--sl-tinta); }

.sl-orc-chips-tr td { background: var(--sl-lavado); border-bottom: 1px solid var(--sl-hairline); padding: 0 0 14px; }

.sl-orc-chips-cx { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 0 0 28px; }

/* Chip de referência do catálogo — só leitura nesta tela (a precificação, no
   bloco seguinte, é quem vai clicar neles pra preencher preço); por isso
   <span>, nunca <button>, pra não prometer interação que ainda não existe. */
.sl-orc-chip {
  display: inline-block;
  background: var(--sl-papel);
  border: 1px solid var(--sl-hairline-forte);
  padding: 7px 10px;
  font-family: var(--sl-fonte-mono);
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
}

.sl-orc-chip b { display: block; font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--sl-mute); font-weight: 400; margin-bottom: 2px; }

.sl-orc-acoes { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* Grupo de escolha única (parâmetros de precificação) */
.sl-orc-seg { display: flex; flex-wrap: wrap; gap: 10px; }

.sl-orc-op {
  background: var(--sl-papel);
  border: 1px solid var(--sl-hairline-forte);
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--sl-fonte-corpo);
  font-size: 14px;
  color: var(--sl-tinta);
}

.sl-orc-op:hover { border-color: var(--sl-tinta); }

.sl-orc-op[aria-pressed="true"] { background: var(--sl-tinta); border-color: var(--sl-tinta); color: var(--sl-papel); }

/* ==================== Bloco Orçamento (precificação) ==================== */

/* "Precificado" em verde — mesmo botão sólido de sempre (.sl-btn), só o
   texto muda de cor; sem isso ficaria idêntico ao estado "Precificar". */
.sl-orc-bloco-cab .sl-btn.sl-orc-precificado { color: var(--sl-verde); }

/* Resumo do bloco (Passo 5) — caixa de tinta sólida à direita, embaixo da
   tabela. Mesma paleta do resto do sistema (nunca as cores do protótipo
   cru) — fundo tinta, texto papel, valor de destaque em papel também (não
   verde: verde aqui é reservado a "confirmado", o resumo é só leitura). */
.sl-orc-resumo {
  margin-top: 14px;
  margin-left: auto;
  width: 300px;
  max-width: 100%;
  background: var(--sl-tinta);
  color: var(--sl-papel);
  padding: 14px 16px;
  font-family: var(--sl-fonte-mono);
  font-size: 11.5px;
  line-height: 1.9;
}

.sl-orc-resumo > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

.sl-orc-resumo b { font-weight: 500; }

.sl-orc-resumo input {
  width: 100px;
  background: var(--sl-papel);
  color: var(--sl-tinta);
  border: none;
  padding: 3px 7px;
  font-family: var(--sl-fonte-mono);
  font-size: 11px;
  text-align: right;
}

.sl-orc-resumo-vf { border-top: 1px solid rgba(255, 255, 255, .25); margin-top: 7px; padding-top: 7px; }

.sl-n-forte { font-size: 13.5px; font-weight: 500; }

/* ---------- Modal de precificação (Passo 4) ---------- */

.sl-orc-prec-lin { background: var(--sl-lavado); border-bottom: 1px solid var(--sl-hairline); padding: 13px 14px; }

.sl-orc-prec-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sl-orc-prec-nome { font-size: 14px; font-weight: 500; flex: 1; min-width: 150px; }

.sl-orc-prec-campos { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }

.sl-orc-prec-campo small { display: block; font-family: var(--sl-fonte-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); margin-bottom: 5px; }

.sl-orc-prec-campo input {
  width: 108px;
  font-family: var(--sl-fonte-mono);
  font-size: 13px;
  text-align: right;
  border: 1px solid var(--sl-hairline-forte);
  padding: 8px 10px;
  background: var(--sl-papel);
}

.sl-orc-prec-campo input[readonly] { background: var(--sl-hairline); color: var(--sl-mute); }

/* Campo "ativo" — clicar num chip preenche este. Borda mais grossa em vez
   de cor, pra continuar visível pra quem não distingue bem cor. */
.sl-orc-prec-campo input.sl-orc-ativo { border-color: var(--sl-tinta); border-width: 2px; }

.sl-orc-prec-lin .sl-orc-chips-cx { padding: 12px 0 0 34px; }

/* Chip clicável — mesma caixa de .sl-orc-chip (só leitura, tela do bloco),
   modificador aqui porque neste modal ele PREENCHE o campo ativo. */
.sl-orc-chip-click { cursor: pointer; }

.sl-orc-chip-click:hover { border-color: var(--sl-tinta); }

.sl-orc-prec-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 24px; padding: 0 4px 4px; }

.sl-orc-prec-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.sl-orc-prec-linha > span { font-family: var(--sl-fonte-titulo); font-weight: 600; font-size: 17px; min-width: 110px; }

.sl-orc-prec-linha input {
  width: 130px;
  font-family: var(--sl-fonte-mono);
  font-size: 13.5px;
  text-align: right;
  border: 1px solid var(--sl-hairline-forte);
  padding: 9px 11px;
}

.sl-orc-prec-linha input.sl-orc-prec-pct { width: 72px; }

.sl-orc-adicionais { margin-top: 8px; }

.sl-orc-adic { display: flex; align-items: center; gap: 10px; font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-mute); padding: 7px 0; border-bottom: 1px solid var(--sl-hairline); }

.sl-orc-adic b { font-weight: 400; flex: 1; }

/* Colunas do adicional: parâmetro (8% ou R$) e o valor que ele vale em
   reais, escrito em JS (orcPintaAdicionaisValores). Larguras fixas pra o
   total alinhar por baixo da coluna certa. */
.sl-orc-adic-par { min-width: 46px; text-align: right; }

.sl-orc-adic-vlr { min-width: 92px; text-align: right; color: var(--sl-tinta); }

.sl-orc-adic-total { display: flex; align-items: center; gap: 10px; font-family: var(--sl-fonte-mono); font-size: 12px; color: var(--sl-tinta); padding: 7px 0; }

.sl-orc-adic-total b { font-weight: 400; flex: 1; }

/* Ocupa o lugar do × das linhas de cima, pra o total não escorregar. */
.sl-orc-adic-total .sl-orc-adic-fim { width: 23px; }

/* Armadilha do sistema (ver .sl-pe-item acima): [hidden] perde de uma classe
   com display próprio. A linha de digitação alterna por hidden=true em JS —
   sem esta regra ela e o "+ outro adicional" apareceriam os dois ao mesmo
   tempo, e o botão "adicionar" voltaria a confirmar de dentro de uma linha
   que o usuário achava que era nova. */
.sl-orc-adic-nova { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.sl-orc-adic-nova[hidden] { display: none; }

.sl-orc-adic-nome { flex: 1; min-width: 140px; font-family: var(--sl-fonte-corpo); font-size: 13px; border: 1px solid var(--sl-hairline-forte); padding: 8px 10px; }

.sl-orc-adic-tipo { border: 1px solid var(--sl-hairline-forte); padding: 8px 6px; }

.sl-orc-adic-valor { width: 90px; font-family: var(--sl-fonte-mono); text-align: right; border: 1px solid var(--sl-hairline-forte); padding: 8px 10px; }

/* Abrir linha nova é link discreto, nunca botão sólido — quem confirma é o
   "adicionar" da linha. */
.sl-orc-adic-mais { display: inline-block; margin-top: 12px; text-transform: uppercase; }

.sl-orc-adic-mais[hidden] { display: none; }

/* Memória de cálculo do custo: base + adicionais, ao lado do campo Custo,
   que mostra só a base. Precisa vencer o `.sl-orc-prec-linha > span` do
   rótulo (que é titulo/600/17px e min-width 110) — por isso o seletor
   qualificado, e não a classe sozinha. */
.sl-orc-prec-linha > span.sl-orc-custo-memoria {
  font-family: var(--sl-fonte-mono);
  font-weight: 400;
  font-size: 11px;
  min-width: 0;
  color: var(--sl-mute);
}

/* ---------- Fontes diversas — preço direto na tabela, sem modal ---------- */

.sl-orc-inline-preco { width: 90px; font-family: var(--sl-fonte-mono); font-size: 12.5px; text-align: right; border: 1px solid var(--sl-hairline-forte); padding: 6px 8px; background: var(--sl-papel); }

@media (max-width: 640px) {
  .sl-orc-prec-rodape { grid-template-columns: 1fr; }
  .sl-orc-prec-campos { margin-left: 0; }
  .sl-orc-resumo { width: 100%; }
}

/* ==================== Bloco Orçamento (fechamento) ==================== */

.sl-orc-secao { margin-top: 38px; }

.sl-orc-serv-novo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.sl-orc-serv-novo input[type="text"]:not(.sl-orc-inline-preco) {
  font-family: var(--sl-fonte-corpo);
  font-size: 13.5px;
  border: 1px solid var(--sl-hairline-forte);
  padding: 9px 10px;
  flex: 2;
  min-width: 160px;
}

.sl-orc-serv-novo select { border: 1px solid var(--sl-hairline-forte); padding: 9px 8px; font-family: var(--sl-fonte-corpo); font-size: 13.5px; }

.sl-orc-serv-novo .sl-orc-inline-preco { width: 100px; }

.sl-orc-obs { border: 1px solid var(--sl-hairline); padding: 12px 14px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }

.sl-orc-obs textarea { flex: 1; border: none; resize: vertical; min-height: 44px; font-family: var(--sl-fonte-corpo); font-size: 13.5px; line-height: 1.55; color: var(--sl-tinta); background: transparent; }

.sl-orc-obs textarea:focus { outline: none; }

.sl-orc-totais { margin-top: 20px; border-top: 2px solid var(--sl-tinta); padding-top: 16px; }

.sl-tl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; }

.sl-tl span { font-size: 14px; color: var(--sl-mute); }

.sl-tl b { font-family: var(--sl-fonte-mono); font-size: 14.5px; font-weight: 500; }

.sl-tl-destaque span { font-family: var(--sl-fonte-titulo); font-weight: 600; font-size: 17px; color: var(--sl-tinta); }

.sl-tl-destaque b { font-size: 20px; }

.sl-tl-vermelho b { color: var(--sl-vermelho); }

.sl-orc-aviso { font-family: var(--sl-fonte-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--sl-vermelho); text-align: right; margin-top: -3px; padding-bottom: 4px; }

.sl-orc-desconto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sl-lavado); border: 1px solid var(--sl-hairline); padding: 13px 16px; margin: 18px 0; }

.sl-orc-desconto input[type="text"] { width: 110px; font-family: var(--sl-fonte-mono); font-size: 13.5px; text-align: right; border: 1px solid var(--sl-hairline-forte); padding: 9px 11px; }

/* ==================== Bloco Vigência + Proposta ==================== */

/* Board "Orçamentos do projeto" — três áreas (rascunhos/vigente/final),
   cada orçamento é um cartão movível entre elas via os botões de ação do
   próprio cartão (eleger vigente / tirar da vigência / mover para final). */
.sl-orc-board { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 6px; }

.sl-orc-board-col { min-width: 0; }

.sl-orc-board-tit {
  font-family: var(--sl-fonte-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sl-mute);
  border-bottom: 1px solid var(--sl-hairline-forte);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.sl-orc-card { border: 1px solid var(--sl-hairline); padding: 14px 16px; margin-bottom: 12px; }

.sl-orc-card-tit { font-family: var(--sl-fonte-titulo); font-size: 15px; font-weight: 500; }

/* Data de criação: SEMPRE visível em todo cartão, em toda área — é a
   identidade de fallback do orçamento quando não tem título (regra central
   da vigência, ver sl_proposta_repo.php/sl_orcamento_repo.php). */
.sl-orc-card-data { font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--sl-mute); margin-top: 4px; }

.sl-orc-card-meta { font-size: 12.5px; color: var(--sl-mute); margin-top: 8px; }

.sl-orc-card-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 780px) {
  .sl-orc-board { grid-template-columns: 1fr; }
}

/* Barra de vigência dentro do modal de orçamento (tab-bar de orçamentos
   fica logo acima, .sl-lt-listas reaproveitada) — situação do orçamento
   carregado + ações de eleger/tirar/mover para final. */
.sl-orc-vigencia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--sl-hairline); flex: none; }

.sl-orc-sit {
  font-family: var(--sl-fonte-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--sl-hairline-forte);
}

.sl-orc-sit-vigente { color: var(--sl-verde); border-color: var(--sl-verde); }

.sl-orc-sit-final { color: var(--sl-papel); background: var(--sl-tinta); border-color: var(--sl-tinta); }

.sl-orc-vig-data { font-family: var(--sl-fonte-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--sl-mute); }

/* Tela da Proposta — três seções empilhadas numa coluna só. */
.sl-prop-secao { margin-bottom: 34px; }

.sl-prop-secao-cab { padding: 0 0 12px; border-bottom: none; }

.sl-prop-feedback {
  border-left: 2px solid var(--sl-laranja);
  padding: 8px 0 8px 13px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sl-tinta);
  margin-top: 8px;
  white-space: pre-wrap;
}

.sl-prop-resposta-acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }

.sl-prop-veredito { font-family: var(--sl-fonte-titulo); font-weight: 700; font-size: 17px; }

.sl-prop-veredito-datas { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-mute); margin-top: 6px; }

.sl-prop-recusa-lista { margin: 14px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.sl-prop-recusa-lista li { margin-bottom: 4px; }

/* ==================== Dashboard ==================== */

.sl-dash-secao { margin-top: 40px; }

.sl-dash-secao-topo { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; }

.sl-dash-secao-tit { font-family: var(--sl-fonte-titulo); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }

.sl-dash-lista { border-top: 1px solid var(--sl-hairline); }

.sl-dash-item { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--sl-hairline); }

.sl-dash-item.passivo { grid-template-columns: 1fr auto; }

/* Item de grid tem min-width:auto por padrão (respeita o conteúdo
   intrínseco) — sem isto, .sl-dash-proj (white-space:nowrap +
   text-overflow:ellipsis, ver abaixo) nunca trunca de verdade: a coluna
   1fr cresce pra caber o texto inteiro (nome do projeto + cliente), e é
   isso que estourava a PÁGINA em largura de celular, não só o card.
   Achado isolando /sl/dashboard.php em 390px. */
.sl-dash-item > div:first-child { min-width: 0; }

.sl-dash-onde { font-family: var(--sl-fonte-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-mute); display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.sl-dash-oque { font-family: var(--sl-fonte-titulo); font-weight: 700; font-size: 16.5px; letter-spacing: -.005em; margin-top: 6px; }

.sl-dash-item.passivo .sl-dash-oque { font-family: var(--sl-fonte-corpo); font-weight: 500; font-size: 14.5px; }

/* Espera — não é ação de ninguém, então mais discreta que .passivo: também
   a frase (não só o rótulo de quem) já nasce em cor secundária. */
.sl-dash-item.espera { grid-template-columns: 1fr; }
.sl-dash-item.espera .sl-dash-oque { font-family: var(--sl-fonte-corpo); font-weight: 500; font-size: 14.5px; color: var(--sl-mute); }
.sl-dash-dias { font-family: var(--sl-fonte-mono); letter-spacing: .04em; }

.sl-dash-proj { font-size: 13.5px; color: var(--sl-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sl-dash-quem { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .06em; color: var(--sl-mute); }

.sl-dash-prazo { font-family: var(--sl-fonte-mono); font-size: 10.5px; white-space: nowrap; border: 1px solid var(--sl-hairline-forte); padding: 5px 9px; color: var(--sl-mute); }

.sl-dash-prazo[data-atrasado="1"] { background: var(--sl-vermelho); color: var(--sl-papel); border-color: var(--sl-vermelho); }

.sl-dash-item:has(.sl-dash-prazo[data-atrasado="1"]) .sl-btn { background: var(--sl-vermelho); border-color: var(--sl-vermelho); }

/* Esteira */

.sl-esteira-scroll { overflow-x: auto; margin: 0 -24px; padding: 0 24px 8px; }
@media (max-width: 760px) { .sl-esteira-scroll { margin: 0 -16px; padding: 0 16px 8px; } }

.sl-esteira { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); border-top: 1px solid var(--sl-tinta); min-width: 960px; }

.sl-esteira-col { border-right: 1px solid var(--sl-hairline); padding-bottom: 12px; }
.sl-esteira-col:last-child { border-right: none; }

.sl-esteira-col-cab { padding: 12px 10px 14px; }

.sl-esteira-col-num { font-family: var(--sl-fonte-mono); font-size: 10px; color: var(--sl-mute); letter-spacing: .1em; }

.sl-esteira-col-nome { font-family: var(--sl-fonte-titulo); font-weight: 700; font-size: 12.5px; margin-top: 4px; line-height: 1.2; }

.sl-esteira-col-qtd { font-family: var(--sl-fonte-mono); font-size: 10.5px; color: var(--sl-mute); margin-top: 5px; }

.sl-tijolos { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }

.sl-tijolo { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 76px; text-align: left; cursor: pointer; background: var(--sl-lavado); border: 1px solid var(--sl-hairline); padding: 9px; font-family: var(--sl-fonte-corpo); }

.sl-tijolo:hover { border-color: var(--sl-tinta); }

.sl-tijolo-cliente { font-family: var(--sl-fonte-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--sl-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }

.sl-tijolo-nome { font-size: 12px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sl-tijolo-pe { font-family: var(--sl-fonte-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-mute); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Independentes — um tijolo atrasado E parado ao mesmo tempo mostra as
   duas marcas juntas (fundo vermelho + barra laranja), nunca uma escondendo
   a outra. */
.sl-tijolo[data-atrasado="1"] { background: var(--sl-vermelho); border-color: var(--sl-vermelho); color: var(--sl-papel); }
.sl-tijolo[data-atrasado="1"] .sl-tijolo-cliente { color: rgba(255, 255, 255, .68); }
.sl-tijolo[data-atrasado="1"] .sl-tijolo-pe { color: rgba(255, 255, 255, .68); }

.sl-tijolo[data-parado="1"] { border-left: 3px solid var(--sl-laranja); }

.sl-esteira-col-nada { padding: 0 10px; font-family: var(--sl-fonte-mono); font-size: 13px; color: var(--sl-hairline-forte); }

@media (max-width: 760px) {
  .sl-dash-item { grid-template-columns: 1fr; gap: 10px; }
  .sl-dash-item.passivo { grid-template-columns: 1fr; }
  .sl-dash-prazo { justify-self: start; }
}

/* ==================== Sandbox ==================== */

.sl-selo { font-family: var(--sl-fonte-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--sl-hairline-forte); padding: 3px 8px; color: var(--sl-mute); }

.sl-selo[data-status="enviado"] { border-color: var(--sl-laranja); color: var(--sl-laranja); }

.sl-selo[data-status="recusado"] { background: var(--sl-vermelho); border-color: var(--sl-vermelho); color: var(--sl-papel); }

.sl-selo[data-status="aprovado"] { background: var(--sl-verde); border-color: var(--sl-verde); color: var(--sl-papel); }

.sl-sb-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }