:root {
  --bg-base: #0f1729;
  --bg-superficie: #1a2540;
  --bg-elevado: #223054;
  --bg-input: #2a3a62;
  --linha: #2e3d68;
  --linha-forte: #3d5089;
  --texto: #e8ecf3;
  --texto-medio: #9ba8c4;
  --texto-fraco: #6b7a9a;
  --acento: #c8d4e8;
  --acento-claro: #ffffff;
  --acento-escuro: #8a9ab8;
  --verde: #4ade80;
  --vermelho: #ef4444;
  --amarelo: #fbbf24;
  --azul: #60a5fa;
  --roxo: #a78bfa;
  --sombra: 0 4px 24px rgba(0, 0, 0, 0.5);
  --raio: 4px;

  --fonte-display: 'Manrope', sans-serif;
  --fonte-mono: 'JetBrains Mono', monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--texto);
  font-family: var(--fonte-display);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-image:
    radial-gradient(circle at 20% 0%, rgba(200, 212, 232, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(200, 212, 232, 0.03) 0%, transparent 40%);
}

.oculta { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select {
  font-family: inherit;
  font-size: 16px; /* >=16px evita zoom no iOS */
  background: var(--bg-input);
  border: 1px solid var(--linha);
  color: var(--texto);
  padding: 10px 12px;
  border-radius: var(--raio);
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ba8c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.campo-largo {
  grid-column: 1 / -1;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--bg-elevado);
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
label > span {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-medio);
  font-weight: 500;
}

/* ============ TELA DE LOGIN ============ */
.tela-login {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  background-image:
    linear-gradient(rgba(200, 212, 232, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 212, 232, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 16px;
}
.login-card {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  position: relative;
}
.login-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--acento);
}
.login-marca {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.login-logo {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--acento);
  letter-spacing: 0.04em;
  padding: 8px 14px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.login-marca h1 { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
.login-marca p {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-medio);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
/* "Brackets" estilo identidade visual */
.bracket {
  font-family: var(--fonte-mono);
  color: var(--acento);
  font-weight: 400;
}
#form-login { display: flex; flex-direction: column; gap: 14px; }
#form-login button {
  background: var(--acento);
  color: var(--bg-base);
  padding: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13px;
  border-radius: var(--raio);
  margin-top: 8px;
  transition: background 0.15s;
  min-height: 48px;
}
#form-login button:hover { background: var(--acento-claro); }

.erro { color: var(--vermelho); font-size: 12px; font-family: var(--fonte-mono); }
.ok { color: var(--verde); font-size: 12px; font-family: var(--fonte-mono); }

/* ============ APP ============ */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topo {
  background: var(--bg-superficie);
  border-bottom: 1px solid var(--linha);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}
.topo-marca { display: flex; align-items: center; gap: 12px; }
.topo .logo {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--acento);
  letter-spacing: 0.04em;
  padding: 6px 11px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.topo h1 { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; line-height: 1; }
.topo p {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-medio);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.topo-busca {
  position: relative;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.topo-busca input {
  background: var(--bg-input);
  border: 1px solid var(--linha);
  padding: 9px 36px 9px 36px;
  font-size: 14px;
  border-radius: 999px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239c9ca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><path d='m21 21-4.35-4.35'></path></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.topo-busca input:focus {
  border-color: var(--acento);
}
.btn-limpar-busca {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--linha);
  color: var(--texto);
  font-size: 18px;
  display: grid;
  place-items: center;
}
.btn-limpar-busca:hover { background: var(--linha-forte); }

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primario {
  background: var(--acento);
  color: var(--bg-base);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: var(--raio);
  transition: background 0.15s;
  min-height: 40px;
}
.btn-primario:hover { background: var(--acento-claro); }

.btn-secundario {
  background: var(--bg-input);
  color: var(--texto);
  border: 1px solid var(--linha);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: var(--raio);
  transition: all 0.15s;
  min-height: 40px;
}
.btn-secundario:hover { background: var(--bg-elevado); border-color: var(--linha-forte); }

.btn-perigo {
  background: transparent;
  color: var(--vermelho);
  border: 1px solid var(--vermelho);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: var(--raio);
  transition: all 0.15s;
  min-height: 40px;
}
.btn-perigo:hover { background: var(--vermelho); color: white; }

.btn-icone {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
  border-radius: var(--raio);
  color: var(--texto-medio);
  transition: all 0.15s;
}
.btn-icone:hover { background: var(--bg-input); color: var(--texto); }

.usuario-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--linha);
}
#nome-usuario { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-medio); }

.rotulo-sm { display: none; }

/* ============ KANBAN ============ */
.kanban {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
}

.coluna {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.coluna-cabecalho {
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.coluna-cabecalho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coluna-cabecalho .titulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.coluna-cabecalho .contagem {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-medio);
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: 999px;
}
.coluna-total {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--acento-claro);
  letter-spacing: 0.02em;
}

.coluna[data-status="agendamento"] { border-top: 2px solid var(--roxo); }
.coluna[data-status="diagnostico"] { border-top: 2px solid var(--azul); }
.coluna[data-status="cotacao"] { border-top: 2px solid var(--amarelo); }
.coluna[data-status="problema"] { border-top: 2px solid var(--vermelho); }
.coluna[data-status="finalizado"] { border-top: 2px solid #22d3ee; }

/* Coluna de alerta: orçamento com falha que precisa de correção imediata */
.coluna[data-status="problema"] {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.45);
}
.coluna[data-status="problema"] .coluna-cabecalho {
  background: rgba(239, 68, 68, 0.12);
  border-bottom-color: rgba(239, 68, 68, 0.35);
}
.coluna[data-status="problema"] .coluna-cabecalho .titulo {
  color: var(--vermelho);
}
.coluna[data-status="aguardando"] { border-top: 2px solid #fb923c; }
.coluna[data-status="aprovado"] { border-top: 2px solid var(--verde); }
.coluna[data-status="servico_finalizado"] { border-top: 2px solid var(--roxo); }
.coluna[data-status="recusado"] { border-top: 2px solid var(--vermelho); }
.coluna[data-status="encerrado"] { border-top: 2px solid var(--texto-fraco); }

/* Coluna de sucesso: orçamento aprovado */
.coluna[data-status="aprovado"] {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.45);
}
.coluna[data-status="aprovado"] .coluna-cabecalho {
  background: rgba(74, 222, 128, 0.12);
  border-bottom-color: rgba(74, 222, 128, 0.35);
}
.coluna[data-status="aprovado"] .coluna-cabecalho .titulo {
  color: var(--verde);
}

.coluna-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coluna-corpo.sobre { background: rgba(200, 212, 232, 0.05); }

/* ============ CARD ============ */
.card {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px;
  cursor: grab;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.card:hover {
  border-color: var(--linha-forte);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.card:active { cursor: grabbing; }
.card.arrastando { opacity: 0.4; }

.card-foto-mini {
  width: calc(100% + 24px);
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  margin: -12px -12px 10px;
  background: var(--bg-input);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--linha);
  flex-shrink: 0;
}
.card-numero {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--acento);
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.85;
}
.card-cliente { font-weight: 700; font-size: 14px; margin-bottom: 4px; line-height: 1.3; }
.card-veiculo { font-size: 12px; color: var(--texto-medio); margin-bottom: 10px; }
.card-perfil {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.perfil-velocidade {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.3);
}
.perfil-preco {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.card-bloqueio {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 4px;
  background: rgba(251, 146, 60, 0.15);
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.4);
}
.card-bloqueio.eu {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.4);
}

/* Card arquivado: aparência mais discreta */
.card.card-arquivado {
  opacity: 0.72;
  background: rgba(26, 37, 64, 0.5);
  cursor: pointer;
}
.card.card-arquivado:hover {
  opacity: 0.9;
  transform: none;
}
.card-arquivado-badge {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 4px;
  background: rgba(156, 163, 175, 0.15);
  color: #d1d5db;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Card de coluna que o grupo só visualiza (sem editar_coluna.<status>). */
.card.card-somente-leitura { cursor: pointer; }
.card-leitura-badge {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 4px;
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.card-pag-badge {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 4px;
  border: 1px solid transparent;
}
.card-pag-pago {
  background: rgba(74, 222, 128, 0.15);
  color: var(--verde);
  border-color: rgba(74, 222, 128, 0.35);
}
.card-pag-parcial {
  background: rgba(251, 191, 36, 0.15);
  color: var(--amarelo);
  border-color: rgba(251, 191, 36, 0.35);
}
.card-pag-pendente {
  background: rgba(239, 68, 68, 0.13);
  color: var(--vermelho);
  border-color: rgba(239, 68, 68, 0.32);
}

/* Coluna especial ARQUIVADOS */
.coluna-arquivados {
  border-top: 2px solid #6b7280 !important;
  background: rgba(75, 85, 99, 0.06);
}
.coluna-arquivados .titulo {
  color: #d1d5db;
}
.card-placa {
  font-family: var(--fonte-mono);
  font-size: 10px;
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--texto);
  margin-left: 6px;
  letter-spacing: 0.05em;
  display: inline-block;
}
.card-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}
.card-total { font-family: var(--fonte-mono); font-weight: 700; font-size: 13px; color: var(--texto); }
.card-data { font-family: var(--fonte-mono); font-size: 10px; color: var(--texto-fraco); }

.card-mover-mobile {
  display: none;
  margin-top: 8px;
}

.coluna-vazia {
  display: grid;
  place-items: center;
  height: 60px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-fraco);
  letter-spacing: 0.1em;
}

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-conteudo {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra);
}
.modal-grande { max-width: 800px; }
.modal-conteudo-pequeno { max-width: 460px; }

.ajuda-campo {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-medio);
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-base);
  border-radius: var(--raio);
  border-left: 2px solid var(--linha-forte);
}
.ajuda-campo b { color: var(--acento); }
#form-config fieldset { margin-bottom: 16px; }
/* Form de dados da oficina / impressora: labels diretos, espaçados uniformemente. */
#form-oficina,
#form-impressora { display: flex; flex-direction: column; gap: 14px; }
#form-config .btn-primario,
#form-oficina .btn-primario { width: 100%; margin-top: 4px; }

.modal-cabecalho {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-cabecalho h2 { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; }
.btn-fechar {
  font-size: 24px;
  color: var(--texto-medio);
  width: 36px; height: 36px;
  border-radius: var(--raio);
  display: grid;
  place-items: center;
}
.btn-fechar:hover { background: var(--bg-input); color: var(--texto); }

.modal-corpo { padding: 20px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; flex: 1; -webkit-overflow-scrolling: touch; }

.modal-rodape {
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rodape-espaco { flex: 1; min-width: 0; }

/* ============ BANNER DE BLOQUEIO ============ */
.aviso-bloqueio {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-left: 3px solid #fb923c;
  color: var(--texto);
  padding: 12px 14px;
  border-radius: var(--raio);
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.4;
}
.aviso-bloqueio .icone { font-size: 18px; flex-shrink: 0; }
.aviso-bloqueio .texto { flex: 1; }
.aviso-bloqueio strong { color: #fb923c; }
.btn-forcar-liberacao {
  flex-shrink: 0;
  background: transparent;
  color: #fb923c;
  border: 1px solid #fb923c;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--fonte-mono);
  border-radius: var(--raio);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-forcar-liberacao:hover {
  background: #fb923c;
  color: var(--bg-base);
}

/* Variante do banner pra orçamento arquivado (azul-cinza, mais neutro que o laranja do bloqueio) */
.aviso-bloqueio.aviso-arquivado {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.4);
  border-left-color: #94a3b8;
}
.aviso-bloqueio.aviso-arquivado strong { color: #cbd5e1; }
.btn-desarquivar {
  flex-shrink: 0;
  background: var(--acento);
  color: var(--bg-base);
  border: none;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--fonte-mono);
  border-radius: var(--raio);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-desarquivar:hover {
  background: white;
}

/* Modo leitura: deixa inputs com aparência "off" */
.modal.modo-leitura input,
.modal.modo-leitura textarea,
.modal.modo-leitura select {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--bg-superficie);
}
.modal.modo-leitura .btn-add-item,
.modal.modo-leitura .btn-remover,
.modal.modo-leitura .btn-adicionar-foto,
.modal.modo-leitura .btn-remover-foto,
.modal.modo-leitura .btn-sugerir {
  display: none !important;
}
.modal.modo-leitura .item-linha {
  pointer-events: none;
}

fieldset { border: none; margin-bottom: 22px; }
legend {
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--acento);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
  width: 100%;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============ GALERIA DE FOTOS ============ */
.galeria-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.galeria-fotos:empty { display: none; }
.foto-item {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-input);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--linha);
}
.foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-item .btn-remover-foto {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.foto-item:hover .btn-remover-foto { opacity: 1; }
.foto-item .btn-remover-foto:hover { background: var(--vermelho); }

/* ===== Aviso do perfil do cliente ===== */
.aviso-perfil {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio);
}
.aviso-perfil-icone {
  color: var(--azul);
  font-size: 15px;
  line-height: 1.4;
  flex-shrink: 0;
}
.aviso-perfil p {
  font-size: 12px;
  color: var(--texto-medio);
  line-height: 1.5;
}
.aviso-perfil strong { color: var(--texto); }
.aviso-perfil b { color: var(--azul); }

/* Aviso de cliente/veículo já cadastrado (autopreenchido) */
.aviso-cliente {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 4px;
  padding: 9px 12px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
}
.aviso-cliente .aviso-perfil-icone { color: var(--verde); }
.aviso-cliente p { font-size: 12px; color: var(--texto-medio); line-height: 1.5; }
.aviso-cliente.oculta { display: none; }

/* Aviso de pagamento encerrado (verde) — orçamento segue editável */
.aviso-pago {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.35);
  border-left-color: var(--verde);
}
.aviso-pago .aviso-perfil-icone { color: var(--verde); }
.aviso-pago b { color: var(--verde); }
.link-reabrir {
  background: none;
  border: none;
  color: var(--azul);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}
.link-reabrir:hover { color: var(--acento-claro); }

/* Botões de encerramento lado a lado */
.enc-data-encerramento { margin: 14px 0; }
.enc-data-encerramento label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 240px;
}
.enc-data-encerramento label > span {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--texto-medio);
  text-transform: uppercase;
}
.enc-data-encerramento input[type="date"]:disabled { opacity: 0.6; }

.enc-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* Tamanho idêntico e à prova de navegador: mesma base flex + min-width e uma
   ALTURA FIXA igual nos dois. Não dependemos de align-items:stretch porque o
   Firefox não estica elementos <button> como itens flex — sem altura fixa, o
   botão com borda ("ENCERRAR ADIANTAMENTO") fica mais alto que o outro.
   Padding vertical zerado: a altura é quem controla o tamanho (box-sizing:border-box). */
.enc-acoes .btn-secundario,
.enc-acoes .btn-primario {
  flex: 1 1 220px;
  min-width: 220px;
  height: 44px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Fotos obrigatórias (slots categorizados) ===== */
.fotos-secao-titulo {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 4px 0 8px;
}
.fotos-secao-titulo small { text-transform: none; letter-spacing: 0; }

.aviso-fotos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--raio);
  font-size: 12px;
  color: var(--vermelho);
}
.aviso-fotos strong { color: var(--acento-claro); }

.fotos-obrigatorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.foto-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio);
  overflow: hidden;
}
.foto-slot.preenchido {
  background: var(--bg-input);
  border: 1px solid var(--linha);
  cursor: pointer;
}
.foto-slot.preenchido img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-slot .btn-remover-foto {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.foto-slot.preenchido:hover .btn-remover-foto { opacity: 1; }
.foto-slot .btn-remover-foto:hover { background: var(--vermelho); }
.foto-slot .foto-slot-rotulo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.foto-slot.vazio {
  border: 1px dashed var(--linha-forte);
  background: rgba(239, 68, 68, 0.05);
}
.foto-slot-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  gap: 3px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.foto-slot-add:hover {
  background: rgba(200, 212, 232, 0.04);
  border-radius: var(--raio);
}
.foto-slot.vazio:hover { border-color: var(--acento); }
.foto-slot-camera { font-size: 22px; }
.foto-slot-add .foto-slot-rotulo {
  position: static;
  padding: 0;
  background: none;
  color: var(--texto);
  font-size: 11px;
  font-weight: 600;
}
.foto-slot-add small {
  font-size: 9px;
  color: var(--texto-fraco);
  line-height: 1.25;
}

.btn-adicionar-foto,
.btn-anexar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--bg-elevado);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: all 0.15s;
  gap: 4px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--texto-medio);
}
.btn-adicionar-foto:hover,
.btn-anexar:hover {
  border-color: var(--acento);
  color: var(--acento-claro);
  background: rgba(200, 212, 232, 0.04);
}
.btn-adicionar-foto small,
.btn-anexar small {
  font-size: 10px;
  color: var(--texto-fraco);
}
.icone-camera { font-size: 24px; }
.status-upload {
  margin-top: 8px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--texto-medio);
  min-height: 16px;
}

/* ============ NOTAS DE COMPRA (PDF) ============ */
.lista-notas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.notas-vazio {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--texto-fraco);
  padding: 4px 0;
}
.nota-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
}
.nota-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0; /* deixa o nome truncar em vez de esticar a linha */
  color: var(--texto);
  text-decoration: none;
}
.nota-link:hover .nota-nome {
  color: var(--acento-claro);
  text-decoration: underline;
}
.nota-icone { font-size: 18px; line-height: 1; }
.nota-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nota-nome {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nota-meta {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-fraco);
}
.btn-remover-nota {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--texto-medio);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-remover-nota:hover {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}
/* As notas são a ÚNICA parte do orçamento que continua editável no modo leitura
   (inclusive em orçamento encerrado) — por isso .btn-anexar existe separada de
   .btn-adicionar-foto, que a regra de modo-leitura esconde. Quem manda aqui é a
   permissão pecas.custos, aplicada em aplicarPermissoesUI/aplicarModoEdicao. */

/* Chip da nota na tabela de detalhe da economia. */
.mec-td-nota { text-align: center; white-space: nowrap; }
.nota-chip {
  display: inline-block;
  padding: 2px 5px;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--raio);
}
.nota-chip:hover { background: var(--linha-forte); }
.nota-chip-vazio { color: var(--texto-fraco); }

/* Visualizador de foto em tela cheia */
.visualizador-foto {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.visualizador-foto img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.btn-fechar-visualizador {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 24px;
  display: grid;
  place-items: center;
}

/* ============ ITENS (peças e mão de obra) ============ */
.lista-itens { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.item-linha {
  background: var(--bg-elevado);
  padding: 10px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  display: grid;
  gap: 8px;
}

/* Mão de obra: container vira grid com .item-mo-grid + remover */
.item-linha.item-mao-obra {
  grid-template-columns: 1fr;
  align-items: center;
}
.item-linha.item-mao-obra .item-rotulos {
  display: grid;
  grid-template-columns: 1fr 150px 130px 36px;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
  text-transform: uppercase;
  padding: 0 2px 4px;
}
.item-linha.item-mao-obra .item-mo-grid {
  display: grid;
  grid-template-columns: 1fr 150px 130px 36px;
  gap: 8px;
  align-items: center;
}

/* Campo de horas com botões +/- */
.campo-horas-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.campo-horas-wrap .campo-horas {
  width: 100%;
  text-align: center;
}
.btn-horas {
  flex-shrink: 0;
  width: 28px;
  height: 34px;
  border: 1px solid var(--linha);
  background: var(--bg-input);
  color: var(--acento);
  border-radius: var(--raio);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.btn-horas:hover {
  background: var(--acento);
  color: var(--bg-base);
  border-color: var(--acento);
}
.campo-mo-valor {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--acento);
  text-align: right;
  font-weight: 700;
}
.item-mo-info {
  padding: 4px 2px 0;
}
.mo-hint {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--texto-fraco);
}
.mo-sem-config {
  color: #fb923c;
}

/* Valor do item já com o desconto do orçamento rateado — é o que vai sair no
   PDF e no cupom. Fica embaixo da linha, discreto, porque o número que se EDITA
   continua sendo o preço de tabela no campo de venda. Só aparece quando há
   desconto (o JS tira a classe .oculta). */
.item-desconto-info {
  padding: 4px 2px 0;
  border-top: 1px dashed var(--linha);
  margin-top: 4px;
}
.item-desconto {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--acento);
}

/* Peça: container só com .item-peca-grid (rótulos vêm em cima) */
.item-linha.item-peca {
  grid-template-columns: 1fr;
}
.item-peca .item-peca-grid {
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px 110px 36px;
  gap: 8px;
  align-items: center;
}
.item-peca .item-rotulos {
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px 110px 36px;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
  text-transform: uppercase;
  padding: 0 2px;
}

/* Linha extra: código da peça + distribuidora */
.item-peca .item-peca-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.item-peca .item-peca-extra input {
  font-size: 12px;
  padding: 7px 10px;
  background: var(--bg-input);
  color: var(--texto-medio);
}
.item-peca .item-peca-extra input:focus {
  color: var(--texto);
}

/* Rodapé do card da peça: mecânico à esquerda, chip "cliente forneceu" à direita. */
.item-rodape {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.item-rodape .item-mecanico {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Chip "cliente forneceu a peça". O checkbox nativo fica oculto (mas focável) e
   o estado é dado pelo próprio chip: vazio/apagado = não, preenchido com ✓ = sim.
   flex-direction e as regras de fonte são explícitas de propósito — sem elas o
   `label { flex-direction: column }` e o `label > span` globais empilhavam o chip
   e deixavam o texto em maiúsculas monoespaçadas. */
.campo-cliente-forneceu-wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 12px 7px 9px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--bg-input);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.campo-cliente-forneceu-wrap:hover { border-color: var(--acento); }
.campo-cliente-forneceu-wrap:focus-within { border-color: var(--acento); }
/* Checkbox nativo escondido sem perder o foco por teclado. */
.campo-cliente-forneceu-wrap .campo-cliente-forneceu {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.campo-cliente-forneceu-wrap > .cf-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--bg-superficie);
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
}
.campo-cliente-forneceu-wrap > .cf-box::after { content: '✓'; }
.campo-cliente-forneceu-wrap > .cf-txt {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-medio);
}
/* Marcado: chip preenchido, texto escuro e ✓ visível. */
.item-peca.cliente-forneceu .campo-cliente-forneceu-wrap {
  background: var(--acento-claro);
  border-color: var(--acento-claro);
}
.item-peca.cliente-forneceu .campo-cliente-forneceu-wrap > .cf-box {
  background: transparent;
  border-color: var(--bg-superficie);
  color: var(--bg-superficie);
}
.item-peca.cliente-forneceu .campo-cliente-forneceu-wrap > .cf-txt {
  color: var(--bg-superficie);
}

/* Peça fornecida pelo cliente: sem custo/preço — some com os campos de valor
   e código/distribuidora, fica só descrição + qtd + selo no lugar do subtotal.
   O card inteiro ganha um leve destaque para reforçar visualmente o estado. */
.item-peca.cliente-forneceu {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--linha-forte);
}
.item-peca.cliente-forneceu .item-peca-extra {
  display: none;
}
.item-peca.cliente-forneceu .item-peca-grid,
.item-peca.cliente-forneceu .item-rotulos {
  grid-template-columns: 1fr 70px 1fr 36px;
}
.item-peca.cliente-forneceu .campo-valor-compra,
.item-peca.cliente-forneceu .campo-valor-venda-wrap,
.item-peca.cliente-forneceu .campo-valor-venda,
.item-peca.cliente-forneceu .rot-compra,
.item-peca.cliente-forneceu .rot-venda {
  display: none;
}
.item-peca.cliente-forneceu .subtotal {
  color: var(--acento-claro);
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Seletor de mecânico responsável por item (peça ou serviço) */
.item-mecanico {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.item-mecanico-rot {
  flex-shrink: 0;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
  text-transform: uppercase;
}
.item-mecanico .campo-mecanico {
  flex: 1;
  max-width: 280px;
  width: auto;
  padding: 7px 10px;
  padding-right: 32px;
  font-size: 13px;
  background-color: var(--bg-input);
  color: var(--texto-medio);
}
.item-mecanico .campo-mecanico:focus {
  color: var(--texto);
}

.item-linha input {
  padding: 8px 10px;
  font-size: 14px;
}
.item-linha .subtotal {
  font-family: var(--fonte-mono);
  font-size: 13px;
  text-align: right;
  padding: 0 8px;
  font-weight: 600;
  color: var(--acento-claro);
}
.item-linha .btn-remover {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  color: var(--texto-fraco);
  border-radius: var(--raio);
}
.item-linha .btn-remover:hover { background: var(--vermelho); color: white; }

.btn-sugerir {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-base);
  color: var(--acento);
  border: 1px solid var(--linha-forte);
  font-size: 9px;
  font-family: var(--fonte-mono);
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.btn-sugerir:hover {
  background: var(--acento);
  color: var(--bg-base);
  border-color: var(--acento);
}
.campo-valor-venda-wrap { position: relative; }
.campo-valor-venda-wrap.tem-sugestao .btn-sugerir { opacity: 1; }

.btn-add-item {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--linha-forte);
  color: var(--texto-medio);
  font-size: 12px;
  font-family: var(--fonte-mono);
  letter-spacing: 0.05em;
  border-radius: var(--raio);
  transition: all 0.15s;
  min-height: 44px;
}
.btn-add-item:hover { border-color: var(--acento); color: var(--acento); }

.totais-rodape {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px;
}
/* O card do TOTAL é o único .totais-rodape solto no formulário (os outros vivem
   dentro de um fieldset, que já espaça). Sem esta margem ele encosta na legenda
   do bloco seguinte — todo fieldset só tem margin-bottom, ninguém tem margin-top. */
#form-orcamento > .totais-rodape { margin-bottom: 22px; }
.total-linha {
  display: flex;
  justify-content: space-between;
  font-family: var(--fonte-mono);
  font-size: 13px;
  padding: 4px 0;
}
.total-linha span { color: var(--texto-medio); }
.total-linha strong { color: var(--texto); }
.total-margem strong { color: var(--verde); }
.total-desconto strong { color: #f87171; }
.desconto-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
}
.total-final {
  border-top: 1px solid var(--linha);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 16px;
}
.total-final span { color: var(--texto); font-weight: 700; letter-spacing: 0.05em; }
.total-final strong { color: var(--acento-claro); font-size: 18px; }

/* ABAS */
.abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 22px;
  overflow-x: auto;
}
.aba {
  padding: 10px 14px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--texto-medio);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--acento); border-bottom-color: var(--acento); }

.aba-conteudo form,
#form-funcionario,
#form-grupo,
#form-cliente,
#form-prejuizo,
#form-despesa,
#form-veiculo { display: flex; flex-direction: column; gap: 14px; }

/* Os fieldsets do prejuízo (ordem de serviço, nota fiscal) já entram no gap da
   coluna acima: a margem própria do fieldset somaria a ela e abriria um buraco
   maior que o espaço entre os outros campos. */
#form-prejuizo fieldset,
#form-despesa fieldset { margin-bottom: 0; }

.tabela-usuarios { width: 100%; border-collapse: collapse; }
.tabela-usuarios tr { border-bottom: 1px solid var(--linha); }
.tabela-usuarios td { padding: 12px 8px; font-size: 13px; }
.tabela-usuarios td:first-child { font-weight: 600; }
.tabela-usuarios td.usr { font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-medio); }
.tabela-usuarios td.acoes { text-align: right; }
.tabela-usuarios .btn-icone-mini {
  color: var(--texto-fraco);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--fonte-mono);
  letter-spacing: 0.05em;
  border-radius: var(--raio);
  min-height: 32px;
}
.tabela-usuarios .btn-icone-mini:hover { color: var(--vermelho); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); }

/* ===================================================== */
/* ============ RESPONSIVO TABLET ============ */
/* ===================================================== */
@media (max-width: 1024px) {
  .topo {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .topo-marca {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
  }
  .topo-acoes {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }
  .topo-busca {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }
  .kanban {
    grid-template-columns: none;
    grid-auto-columns: 260px;
  }
}

/* ===================================================== */
/* ============ RESPONSIVO MOBILE ============ */
/* ===================================================== */
@media (max-width: 640px) {
  .topo {
    padding: 10px 12px;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .topo-marca { grid-row: 1; grid-column: 1; }
  .topo-acoes {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
    gap: 6px;
  }
  .topo-busca {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .topo h1 { font-size: 12px; letter-spacing: 0.04em; }
  .topo .logo {
    font-size: 13px;
    padding: 6px 9px;
  }
  .topo p { font-size: 9px; }
  .topo-marca { gap: 10px; min-width: 0; }
  .topo-titulos { min-width: 0; overflow: hidden; }
  .topo h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rotulo-md { display: none; }
  .rotulo-sm { display: inline; font-size: 18px; }
  #btn-menu,
  .btn-primario.btn-novo {
    padding: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
  }
  .usuario-info {
    padding-left: 8px;
    margin-left: 0;
  }
  #nome-usuario { display: none; }

  /* Kanban vira coluna única vertical com swipe horizontal */
  .kanban {
    grid-template-columns: 88vw;
    grid-auto-flow: column;
    grid-auto-columns: 88vw;
    gap: 10px;
    padding: 10px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
  }
  .coluna {
    scroll-snap-align: start;
    height: 100%;
    min-height: 0;
  }
  .coluna-corpo {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card { cursor: pointer; }
  .card-mover-mobile {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--linha);
  }
  .card-mover-mobile select {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--texto);
    font-family: var(--fonte-mono);
  }

  /* Modal full-screen no mobile */
  .modal { padding: 0; }
  .modal-conteudo {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .modal-cabecalho { padding: 14px 16px; }
  .modal-corpo { padding: 16px; }
  .modal-rodape { padding: 10px 16px; }
  .modal-rodape button {
    flex: 1;
    min-height: 44px;
  }
  /* PDF e WhatsApp ficam compactos; o MAIS também, senão o menu de três ações
     ocuparia a mesma largura que SALVAR. Os itens DENTRO do menu não entram
     nessa regra (não são filhos diretos do rodapé). */
  .modal-rodape .btn-perigo,
  .modal-rodape #btn-pdf-orc,
  .modal-rodape #btn-zap-orc,
  .modal-rodape .menu-wrap,
  .modal-rodape #btn-mais-orc {
    flex: 0 1 auto;
  }
  /* O menu abre para cima e pode ficar mais largo que o botão em telas pequenas:
     ancora à esquerda e limita à largura do modal. */
  .menu-dropdown.menu-acima { min-width: 200px; max-width: calc(100vw - 48px); }

  fieldset { margin-bottom: 18px; }
  .grid-2 { grid-template-columns: 1fr; gap: 10px; }

  /* Itens em mobile: cards verticais empilhados */
  .item-linha.item-mao-obra {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    position: relative;
  }
  .item-linha.item-mao-obra .item-rotulos {
    display: grid;
    grid-template-columns: 1fr 70px 110px;
    gap: 8px;
    font-family: var(--fonte-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--texto-fraco);
    text-transform: uppercase;
    padding: 0 2px;
  }
  .item-linha.item-mao-obra .item-mo-grid {
    display: grid;
    grid-template-columns: 1fr 70px 110px;
    gap: 8px;
  }
  .item-linha.item-mao-obra .subtotal {
    text-align: right;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: var(--raio);
  }
  .item-linha.item-mao-obra .btn-remover {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px; height: 32px;
    background: var(--bg-input);
  }

  .item-linha.item-peca {
    grid-template-columns: 1fr;
    padding: 12px;
    position: relative;
  }
  .item-linha.item-peca .item-peca-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .item-linha.item-peca .item-rotulos {
    display: none;
  }
  .item-linha.item-peca .campo-descricao { grid-column: 1 / -1; }
  .item-linha.item-peca .campo-quantidade { grid-column: 1 / -1; }
  .item-linha.item-peca .campo-valor-compra { grid-column: 1; }
  .item-linha.item-peca .campo-valor-venda-wrap { grid-column: 2; }
  .item-linha.item-peca .subtotal {
    grid-column: 1 / -1;
    text-align: right;
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: var(--raio);
  }
  .item-linha.item-peca .btn-remover {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px; height: 32px;
    background: var(--bg-input);
  }

  /* Galeria com colunas menores */
  .galeria-fotos {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .foto-item .btn-remover-foto {
    opacity: 1;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.8);
  }

  /* Total maior pra ler no mobile */
  .total-final { font-size: 18px; }
  .total-final strong { font-size: 22px; }
}

/* Telas muito pequenas */
@media (max-width: 380px) {
  .galeria-fotos { grid-template-columns: repeat(2, 1fr); }
  .modal-rodape { gap: 6px; }
  .modal-rodape button { font-size: 11px; padding: 8px 10px; }
}

/* ===== Atividades (log de auditoria, admin) ===== */
/* Filtros do log de atividades — mesma linguagem dos filtros de relatório. */
.ativ-filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 4px;
}
.ativ-filtros label { display: flex; flex-direction: column; gap: 4px; }
.ativ-filtros label span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-fraco); font-family: var(--fonte-mono);
}
.ativ-filtros select,
.ativ-filtros input {
  background: var(--bg-input); border: 1px solid var(--linha);
  color: var(--texto); border-radius: var(--raio); padding: 7px 10px;
  font-family: var(--fonte-mono); font-size: 13px; color-scheme: dark;
}
/* O seletor de usuário/ação pode ter nomes longos: não deixa esticar a linha. */
.ativ-filtros select { max-width: 220px; }
.ativ-filtros .ativ-limpar { padding: 7px 12px; font-size: 12px; }
.ativ-rodape { display: flex; justify-content: center; padding: 12px 0 4px; }

.lista-atividades {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 8px;
}
.atividade-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--linha);
}
.atividade-item:last-child { border-bottom: none; }
.atividade-icone {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.4;
}
.atividade-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.atividade-texto {
  font-size: 13px;
  color: var(--texto-medio);
  line-height: 1.45;
}
.atividade-texto strong { color: var(--texto); font-weight: 600; }
.atividade-tempo {
  flex: 0 0 auto;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.atividade-vazia {
  padding: 24px 8px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
}
@media (max-width: 560px) {
  .atividade-corpo { flex-direction: column; gap: 2px; }
}

/* =============== GRUPOS E PERMISSÕES =============== */
.lista-grupos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.grupo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.grupo-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grupo-item-titulo { display: flex; align-items: center; gap: 8px; }
.grupo-item-info small { color: var(--texto-medio); font-size: 12px; }
.grupo-item-meta { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-fraco) !important; }
.grupo-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.grupo-tag-admin {
  font-family: var(--fonte-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bg-base);
  background: var(--acento);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Checkboxes de permissão por categoria */
.grupo-permissoes { display: flex; flex-direction: column; gap: 14px; }
.perm-categoria h4 {
  font-family: var(--fonte-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--acento);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 4px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto);
}
.perm-item input[type="checkbox"] {
  /* Restaura a aparência nativa do checkbox: a regra global usa appearance:none,
     width:100% e padding, o que apagava o "check" e quebrava o clique visual. */
  -webkit-appearance: checkbox;
  appearance: checkbox;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--acento);
}

/* Coluna de grupo na tabela de usuários */
.select-grupo-usuario {
  font-family: var(--fonte-mono);
  font-size: 12px;
  padding: 4px 6px;
  background: var(--bg-input);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
}
.grupo-badge { font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-medio); }

/* =============== PEÇA SEM PERMISSÃO DE CUSTOS (layout reduzido) =============== */
/* 5 colunas: descrição, qtd, venda(só leitura), subtotal, remover */
.item-peca .item-peca-grid.sem-custos,
.item-peca .item-rotulos.rotulos-sem-custos {
  grid-template-columns: 1fr 70px 110px 110px 36px;
}
/* Preço de venda só leitura: aparência de campo travado */
.item-peca-grid.sem-custos .campo-valor-venda[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--bg-superficie);
  color: var(--texto-medio);
}
.item-peca-grid.sem-custos .campo-valor-venda[readonly]:focus {
  border-color: var(--linha);
  background: var(--bg-superficie);
}

@media (max-width: 640px) {
  /* No mobile a linha vira 2 colunas; o preço de venda ocupa a largura toda */
  .item-linha.item-peca .item-peca-grid.sem-custos .campo-valor-venda {
    grid-column: 1 / -1;
  }
}

/* =============== MENU SUSPENSO (barra superior) =============== */
.menu-wrap { position: relative; }
.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s;
}
.menu-item:hover { background: var(--bg-elevado); }
.menu-item .menu-icone {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}
/* Menu do rodapé do orçamento: abre para CIMA, porque o rodapé já está no pé
   do modal — para baixo o menu sairia da tela. */
.menu-dropdown.menu-acima {
  top: auto;
  bottom: calc(100% + 6px);
  right: auto;
  left: 0;
}
.menu-secao {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.menu-sep {
  height: 1px;
  background: var(--linha);
  margin: 5px 6px;
}
/* Excluir fica vermelho e separado do resto: é a única ação daqui que não tem
   volta, e não pode ser clicada por engano no lugar de "Histórico". */
.menu-item-perigo { color: var(--vermelho, #e5484d); }
.menu-item-perigo:hover { background: rgba(229, 72, 77, 0.12); }

/* =============== FUNCIONÁRIOS =============== */
.lista-funcionarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.func-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.func-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.func-item-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.func-item-info small { color: var(--texto-medio); font-size: 12px; }
.func-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.lista-vazia {
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* Cadastros (Clientes / Veículos) */
.func-item-acoes .btn-icone-mini {
  color: var(--texto-fraco);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--fonte-mono);
  letter-spacing: 0.05em;
  border-radius: var(--raio);
  min-height: 32px;
}
.func-item-acoes .btn-icone-mini:hover { color: var(--acento); }

/* Prejuízos (lista, filtros e formulário) */
/* Mesma linguagem dos filtros do log de atividades e dos relatórios: rótulo
   pequeno em maiúsculas sobre o campo, campos em mono e alinhados pela base. */
.prej-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.prej-filtros label { display: flex; flex-direction: column; gap: 4px; }
.prej-filtros label span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-fraco); font-family: var(--fonte-mono);
}
.prej-filtros input,
.prej-filtros select {
  background-color: var(--bg-input); border: 1px solid var(--linha);
  color: var(--texto); border-radius: var(--raio); padding: 7px 10px;
  font-family: var(--fonte-mono); font-size: 13px;
  /* Sem isto o seletor de data/mês desenha o ícone nativo claro sobre o fundo
     escuro do tema. */
  color-scheme: dark;
}
/* A seta do select vem como background-image na regra global (`select`), à
   direita: o padding reserva o espaço dela, senão o nome do mecânico corre por
   baixo do ícone. O max-width impede que um nome completo estique a linha
   inteira e empurre os outros filtros para baixo. */
.prej-filtros select {
  padding-right: 30px;
  background-position: right 9px center;
  max-width: 220px;
}
.prej-filtro-busca { flex: 1 1 180px; min-width: 140px; }
.prej-filtro-busca input { width: 100%; }
.prej-filtros .rel-btn-mini { padding: 7px 12px; font-size: 12px; min-height: 33px; }

.prej-resumo {
  background: var(--bg-elevado);
  border: 1px solid var(--serie-prejuizo);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.prej-resumo-rotulo { font-size: 12px; color: var(--texto-medio); }
.prej-resumo-valor {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--serie-prejuizo);
}
.prej-resumo-detalhe { font-size: 12px; color: var(--texto-fraco); font-family: var(--fonte-mono); }

.lista-prejuizos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.prej-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.prej-item-icone { font-size: 20px; flex-shrink: 0; }
.prej-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.prej-item-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prej-item-info small { color: var(--texto-medio); font-size: 12px; }
.prej-item-obs { color: var(--texto-fraco) !important; font-style: italic; }
.prej-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.prej-item-valor {
  font-family: var(--fonte-mono);
  font-weight: 700;
  color: var(--serie-prejuizo);
  white-space: nowrap;
}
.prej-item-anexos { display: flex; gap: 4px; }
.prej-anexo { text-decoration: none; font-size: 15px; opacity: 0.75; }
.prej-anexo:hover { opacity: 1; }

/* Vínculo com a ordem de serviço, no formulário do prejuízo e no da saída de
   caixa. É o mesmo widget — chip do escolhido, busca, lista de resultados —
   então os dois usam as mesmas regras em vez de duplicá-las. */
.prej-os-tag,
.desp-os-tag {
  font-family: var(--fonte-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  color: var(--texto-medio);
  white-space: nowrap;
}
.prej-os-escolhida,
.desp-os-escolhida {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
}
.prej-os-rotulo,
.desp-os-rotulo { flex: 1; min-width: 0; font-size: 13px; color: var(--texto-medio); }
#prej-os-busca,
#desp-os-busca { width: 100%; }
.prej-os-resultados,
.desp-os-resultados { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.prej-os-resultados:empty,
.desp-os-resultados:empty { margin-top: 0; }
.prej-os-item,
.desp-os-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--bg-elevado);
  font-size: 13px;
}
.prej-os-item:hover,
.desp-os-item:hover { border-color: var(--acento); }
.prej-os-item span,
.desp-os-item span { color: var(--texto-medio); min-width: 0; }
/* O número da OS não quebra: é o identificador da linha, e "#2026-" numa linha
   com "0671" na outra deixa de ser lido como um número só. */
.prej-os-item > b,
.desp-os-item > b { white-space: nowrap; }
.prej-os-vazio,
.desp-os-vazio {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--texto-fraco);
  padding: 8px 4px;
}

/* No celular a linha do prejuízo empilha: o valor sobe para junto do título e as
   ações ganham a largura toda, senão tudo fica espremido em três colunas. */
@media (max-width: 640px) {
  .prej-item { flex-wrap: wrap; }
  .prej-item-info { flex: 1 1 100%; order: 2; }
  .prej-item-lado { order: 1; margin-left: auto; }
  .prej-item-icone { order: 0; }
  .prej-item .func-item-acoes { order: 3; flex: 1 1 100%; justify-content: flex-end; }
}

.cadastro-busca { margin-bottom: 12px; }
.cadastro-busca input {
  width: 100%;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  padding: 10px 12px;
  font-size: 14px;
}
.lista-cadastro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.detalhe-cadastro { display: flex; flex-direction: column; gap: 4px; }
.detalhe-campos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.detalhe-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.detalhe-linha span { color: var(--texto-medio); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.detalhe-linha strong { text-align: right; word-break: break-word; }
.detalhe-orcs { display: flex; flex-direction: column; gap: 6px; }
.detalhe-orc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.detalhe-orc[onclick] { cursor: pointer; }
.detalhe-orc[onclick]:hover { border-color: var(--acento); }
.detalhe-orc small { color: var(--texto-medio); font-size: 12px; }

/* Consulta de placa: input + botão lado a lado */
.placa-consulta { display: flex; gap: 8px; align-items: stretch; }
.placa-consulta input { flex: 1; min-width: 0; }
.placa-consulta button { flex: 0 0 auto; white-space: nowrap; padding: 0 14px; }
.placa-consulta button:disabled { opacity: .6; cursor: default; }
.msg-consulta { font-size: 13px; margin: 2px 0 0; }
.msg-consulta.erro { color: var(--perigo, #c0392b); }
.msg-consulta.ok { color: var(--sucesso, #1e8449); }

/* Grade de descontos por forma de pagamento (configurações) */
.grid-descontos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.grid-descontos label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid-descontos label span { font-size: 14px; }
.grid-descontos input { width: 90px; flex: 0 0 auto; }
@media (max-width: 520px) { .grid-descontos { grid-template-columns: 1fr; } }

/* Seção de encerramento: campos e totais na mesma caixa, alinhados */
#fieldset-encerramento { margin-top: 22px; }
.enc-campos { margin-bottom: 12px; }
/* (Removida a regra antiga "#btn-encerrar-orc { width:100%; margin-top:12px }":
   era de um layout empilhado e desalinhava/redimensionava o botão dentro do
   flex .enc-acoes. O tamanho dos botões é controlado só por .enc-acoes.) */

/* Formas de pagamento (aceita mais de uma) */
.enc-formas-titulo {
  font-size: 13px;
  color: var(--texto-medio);
  margin-bottom: 8px;
}
.lista-formas { display: flex; flex-direction: column; gap: 8px; }
.linha-forma {
  display: grid;
  grid-template-columns: 1fr 110px 150px 34px;
  gap: 8px;
  align-items: center;
}
/* Sem isto, os filhos do grid têm min-width:auto e não encolhem: o <select>
   (coluna 1fr) estoura a largura em telas estreitas, gerando barra horizontal
   e "pulo" do modal ao passar o mouse. */
.linha-forma > * { min-width: 0; }
.linha-forma .forma-valor,
.linha-forma .forma-data { width: 100%; }
.btn-remover-forma {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--bg-elevado);
  color: var(--texto-medio);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.btn-remover-forma:hover { color: #f87171; border-color: #f87171; }
.btn-add-forma {
  margin: 10px 0 4px;
  padding: 6px 12px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  background: transparent;
  color: var(--acento-claro);
  font-size: 13px;
  cursor: pointer;
}
.btn-add-forma:hover { border-color: var(--acento-claro); }
/* Forma combinada no atendimento: não tem data de recebimento (quem a define é o
   financeiro), mas MANTÉM a grade de 4 colunas de .linha-forma. O financeiro vê os
   dois blocos empilhados, então o select e o × precisam cair na mesma vertical do
   encerramento; o valor só se estica sobre a coluna vazia da data em vez de abrir
   um buraco no meio da linha. */
.linha-combinado .forma-valor { grid-column: 2 / 4; }
/* Botão minimizar na legenda da forma combinada. Recolhido, o bloco mostra só
   o resumo e o botão USAR NO ENCERRAMENTO (o financeiro ainda aplica dali). */
.legend-recolhivel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.btn-recolher {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: transparent;
  color: var(--acento-claro);
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-recolher:hover { border-color: var(--acento-claro); }
.recolhido .comb-corpo { display: none !important; }
.recolhido .comb-resumo { display: block !important; }
.comb-resumo {
  margin: 0;
  font-size: 13px;
  color: var(--texto-medio);
}
.comb-autor {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--texto-medio);
  font-style: italic;
}
/* Mesma altura/base dos botões de .enc-acoes, para o bloco não parecer de outra
   tela — só sem esticar, porque é ação secundária e sozinha na linha. */
.comb-acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.comb-acoes .btn-secundario {
  min-width: 220px;
  height: 44px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Soma das formas em vermelho quando não bate com o total */
#linha-enc-soma.soma-erro strong { color: #f87171; }
#linha-comb-soma.soma-erro strong { color: #f87171; }
/* Valor pendente (quanto ainda falta pagar) em âmbar, para chamar atenção */
.total-pendente span,
.total-pendente strong { color: #f59e0b; }
.total-pendente strong { font-weight: 700; }
@media (max-width: 520px) {
  .linha-forma {
    grid-template-columns: 1fr 34px;
    grid-auto-flow: row;
  }
  .linha-forma .forma-select { grid-column: 1 / 2; }
  .linha-forma .btn-remover-forma { grid-column: 2 / 3; grid-row: 1; }
  .linha-forma .forma-valor,
  .linha-forma .forma-data { grid-column: 1 / 3; }
  /* No celular a grade vira 2 colunas (regra de .linha-forma acima) e o valor
     ocupa a linha inteira — anula o span da coluna da data. */
  .linha-combinado .forma-valor { grid-column: 1 / 3; }
  .comb-acoes .btn-secundario { width: 100%; min-width: 0; }
}

/* =============== RELATÓRIOS =============== */
/* Cores de série validadas (paleta categórica sobre a superfície #1a2540).
   Cada forma de pagamento tem cor fixa (identidade, não por ranking). */
.tela-relatorios {
  --serie-pix: #3987e5;
  --serie-dinheiro: #199e70;
  --serie-debito: #c98500;
  --serie-credito: #9085e9;
  --serie-outros: #d95926;
  --serie-barra: #3987e5;
  --serie-economia: #199e70;
  --serie-prejuizo: #d9414e;
  --serie-pecas: #3987e5;
  --serie-servico: #c98500;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--bg-superficie);
  border-bottom: 1px solid var(--linha);
}
.rel-topo-titulo { display: flex; align-items: center; gap: 16px; }
.rel-topo-titulo h1 { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
.rel-filtros { display: flex; gap: 16px; flex-wrap: wrap; }
.rel-filtros label { display: flex; flex-direction: column; gap: 4px; }
.rel-filtros label span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-fraco); font-family: var(--fonte-mono);
}
.rel-filtros input {
  background: var(--bg-input); border: 1px solid var(--linha);
  color: var(--texto); border-radius: var(--raio); padding: 7px 10px;
  font-family: var(--fonte-mono); font-size: 13px; color-scheme: dark;
}

.rel-corpo { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
.rel-vazio { color: var(--texto-medio); text-align: center; padding: 60px 20px; font-size: 14px; }

/* KPIs */
.rel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.rel-kpi {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.rel-kpi-rotulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-fraco); font-family: var(--fonte-mono); margin-bottom: 8px;
}
.rel-kpi-valor { font-size: 24px; font-weight: 800; color: var(--texto); font-family: var(--fonte-display); }
.rel-kpi-valor.pequeno { font-size: 20px; }

/* Cartões de gráfico */
/* Grid de tiles: cada relatório é um cartão de largura moderada; novos
   relatórios entram como mais cartões e preenchem as colunas automaticamente. */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.rel-cartao {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
}
/* Ocupa a linha inteira do grid — mais espaço horizontal para as colunas. */
.rel-cartao-largo { grid-column: 1 / -1; }
.rel-cartao-cabecalho { margin-bottom: 18px; }
.rel-cartao-cabecalho h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.03em; }
.rel-cartao-sub { font-size: 12px; color: var(--texto-medio); margin-top: 4px; }

/* Caixa de valor único (ticket médio) */
.rel-ticket-valor {
  font-size: 34px;
  font-weight: 800;
  color: var(--texto);
  font-family: var(--fonte-display);
  line-height: 1.1;
}
.rel-ticket-detalhe {
  font-size: 12px;
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  margin-top: 8px;
}

/* Cartão do saldo de consultas de placa */
.rel-placas-acoes { margin-top: 14px; }
.rel-btn-mini { font-size: 10px; padding: 4px 8px; }
/* Saldo baixo: o valor fica em destaque de alerta para lembrar de recarregar. */
.rel-ticket-valor.rel-alerta { color: var(--vermelho); }

/* Resumo da Economia da Auto Peças (dois tiles: economia total e bônus) */
/* Aviso do que ficou de fora da economia (falta de nota / de custo de compra).
   Tom âmbar, não vermelho: não é erro do sistema, é dado faltando que o próprio
   comprador consegue resolver. */
.rel-economia-aviso {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--raio);
  font-size: 12px;
  line-height: 1.5;
  color: var(--amarelo);
}
.rel-economia-aviso p + p { margin-top: 6px; }
.rel-economia-aviso b { color: var(--acento-claro); }
.rel-economia-aviso ul + p { margin-top: 10px; }

/* Lista do que precisa ser corrigido: um orçamento por linha, com o detalhe
   (valor perdido ou nome das peças) ao lado. */
.rel-aviso-lista {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rel-aviso-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--raio);
}
.rel-aviso-link,
.rel-aviso-num {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--acento-claro);
  white-space: nowrap;
}
.rel-aviso-link { cursor: pointer; text-decoration: underline; }
.rel-aviso-link:hover { color: var(--amarelo); }
.rel-aviso-detalhe {
  font-size: 11px;
  color: var(--texto-medio);
  min-width: 0;
  overflow-wrap: anywhere;
}

.rel-economia-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.rel-economia-tile {
  flex: 1 1 180px;
  background: var(--bg-elevado, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--linha, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px 16px;
}
.rel-economia-tile-bonus {
  border-color: var(--serie-economia);
}
.rel-economia-rotulo {
  font-size: 12px;
  color: var(--texto-medio);
  margin-bottom: 6px;
}
.rel-economia-valor {
  font-size: 28px;
  font-weight: 800;
  color: var(--texto);
  font-family: var(--fonte-display);
  line-height: 1.1;
}
.rel-economia-tile-bonus .rel-economia-valor { color: var(--serie-economia); }
.rel-economia-tile-prejuizo { border-color: var(--serie-prejuizo); }
.rel-economia-tile-prejuizo .rel-economia-valor { color: var(--serie-prejuizo); }

/* Gráfico de colunas (mecânicos) */
.rel-grafico { width: 100%; overflow-x: auto; }
.rel-barras { display: block; width: 100%; }
.rel-barra-grupo { cursor: pointer; }
.rel-barra-grupo:focus { outline: none; }
.rel-barra-rect { transition: opacity .12s; }
.rel-barra-grupo:hover .rel-barra-rect,
.rel-barra-grupo:focus .rel-barra-rect { opacity: .82; }
.rel-eixo-linha { stroke: var(--linha-forte); stroke-width: 1; }
.rel-grid-linha { stroke: var(--linha); stroke-width: 1; }
.rel-barra-valor {
  fill: var(--texto); font-size: 11px; font-family: var(--fonte-mono);
  font-weight: 700; text-anchor: middle;
}
.rel-barra-nome { fill: var(--texto-medio); font-size: 11px; text-anchor: middle; }
.rel-eixo-tick { fill: var(--texto-fraco); font-size: 10px; font-family: var(--fonte-mono); }

/* Pizza/rosca (formas de pagamento) */
.rel-pizza-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.rel-pizza-svg { flex: 0 0 auto; }
.rel-fatia { transition: opacity .12s; }
.rel-fatia:hover { opacity: .85; }
.rel-pizza-centro-valor { fill: var(--texto); font-size: 15px; font-weight: 800; text-anchor: middle; font-family: var(--fonte-display); }
.rel-pizza-centro-rotulo { fill: var(--texto-fraco); font-size: 9px; text-anchor: middle; font-family: var(--fonte-mono); letter-spacing: 0.06em; }
.rel-legenda { flex: 1 1 160px; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.rel-legenda-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rel-legenda-cor { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.rel-legenda-nome { color: var(--texto-medio); flex: 1; }
.rel-legenda-valor { color: var(--texto); font-weight: 700; font-family: var(--fonte-mono); font-size: 12px; }
.rel-legenda-pct { color: var(--texto-fraco); font-family: var(--fonte-mono); font-size: 11px; min-width: 42px; text-align: right; }

.rel-grafico-vazio { color: var(--texto-fraco); text-align: center; padding: 40px 20px; font-size: 13px; }

/* Detalhe da produção de um mecânico (modal com os veículos do mês) */
.mec-detalhe-tabela-wrap { overflow-x: auto; margin-top: 12px; }
.mec-detalhe-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.mec-detalhe-tabela th {
  text-align: left; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.mec-detalhe-tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.mec-detalhe-linha { cursor: pointer; transition: background .12s; }
.mec-detalhe-linha:hover { background: var(--bg-hover, rgba(127,127,127,.08)); }
.mec-td-num { font-family: var(--fonte-mono); color: var(--texto-medio); white-space: nowrap; }
.mec-td-veiculo { font-weight: 700; color: var(--texto); }
.mec-td-placa { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-fraco); margin-top: 2px; }
.mec-td-cliente { color: var(--texto-medio); }
.mec-td-data { color: var(--texto-medio); white-space: nowrap; }
.mec-td-valor { text-align: right; font-family: var(--fonte-mono); font-weight: 700; color: var(--texto); white-space: nowrap; }

@media (max-width: 640px) {
  .rel-topo { padding: 12px 16px; }
  .rel-corpo { padding: 16px; }
  .rel-kpi-valor { font-size: 20px; }
}

/* ===== Revisão de segurança (checklist do veículo) ===== */
/* Abre por cima do modal do orçamento (que fica em z-index 100). */
#modal-revisao { z-index: 110; }

.rev-topo {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rev-campo-km { flex: 0 0 160px; }
.rev-campo-km span, .rev-observacoes span {
  display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 700; margin-bottom: 6px;
}
.rev-campo-km input { width: 100%; }
.rev-progresso { flex: 1 1 220px; }
.rev-progresso-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#rev-progresso-texto { font-size: 12px; color: var(--texto-medio); font-family: var(--fonte-mono); }
.rev-btn-mini { font-size: 10px; padding: 4px 8px; }
.rev-barra { height: 5px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
.rev-barra i { display: block; height: 100%; width: 0; background: var(--verde); transition: width .18s; }

.rev-grupo { margin-bottom: 18px; }
.rev-grupo-titulo {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acento); font-weight: 800;
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--linha-forte);
}

.rev-item { padding: 8px 0 9px; border-bottom: 1px solid var(--linha); }
.rev-item.respondido { background: linear-gradient(90deg, rgba(74, 222, 128, 0.05), transparent 45%); }
.rev-item-linha { display: flex; align-items: center; gap: 12px; }
.rev-item-nome { flex: 1; font-size: 13px; color: var(--texto); min-width: 0; }
.rev-estados { display: flex; gap: 4px; flex: 0 0 auto; }
.rev-estado {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 8px; min-width: 44px; border-radius: var(--raio);
  border: 1px solid var(--linha-forte); color: var(--texto-fraco);
  background: var(--bg-elevado); transition: background .12s, color .12s, border-color .12s;
}
.rev-estado:hover:not(:disabled) { border-color: var(--cor-estado); color: var(--acento-claro); }
.rev-estado.ativo {
  background: var(--cor-estado); border-color: var(--cor-estado);
  color: #fff; box-shadow: 0 0 0 1px var(--cor-estado);
}

.rev-item-extra { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.rev-valor { position: relative; flex: 0 0 110px; }
.rev-valor input { width: 100%; padding-right: 34px; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.rev-unidade {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--texto-fraco); font-family: var(--fonte-mono); pointer-events: none;
}
.rev-obs { flex: 1; min-width: 0; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }

.rev-foto { flex: 0 0 40px; height: 40px; position: relative; }
.rev-foto-add {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; cursor: pointer; font-size: 17px;
  border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  background: var(--bg-elevado); transition: border-color .12s, background .12s;
}
.rev-foto-add:hover { border-color: var(--acento); background: var(--bg-input); }
.rev-foto.tem-foto img {
  width: 40px; height: 40px; object-fit: cover; border-radius: var(--raio);
  border: 1px solid var(--linha-forte); cursor: pointer; display: block;
}
.rev-foto-remover {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--vermelho); color: #fff;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.rev-foto.enviando { opacity: 0.45; pointer-events: none; }

.rev-observacoes { display: block; margin-top: 12px; }
.rev-observacoes textarea { width: 100%; resize: vertical; }
.rev-status { margin-top: 10px; font-size: 12px; color: var(--texto-medio); min-height: 16px; }
#modal-revisao.alterado .rev-status { color: var(--amarelo); }
#modal-revisao.modo-leitura .rev-estado.ativo { opacity: 0.85; }

/* No celular o nome do item ganha a linha inteira e os estados descem, para os
   botões de avaliação ficarem grandes o bastante para o dedo. */
@media (max-width: 640px) {
  .rev-item-linha { flex-direction: column; align-items: stretch; gap: 6px; }
  .rev-estados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .rev-estado { min-height: 34px; min-width: 0; }
  .rev-campo-km { flex: 1 1 120px; }
}

/* =============== FINANCEIRO (fluxo de caixa) =============== */
/* Página em tela cheia, mesma moldura dos relatórios (reaproveita .rel-topo) —
   e os filtros reaproveitam .prej-filtros, a mesma linguagem de filtro do log de
   atividades e dos prejuízos. O que é próprio daqui é só o miolo. */
.tela-financeiro {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fin-corpo { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }

/* Uma seção por função do financeiro, cada uma com o cabeçalho e os filtros
   dela. Entradas e saídas ficam LADO A LADO: o caixa é uma conta de dois lados,
   e compará-los exige vê-los na mesma altura. */
.fin-colunas { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 28px; }
.fin-secao { min-width: 0; }
/* Empilhado (tela estreita, ou uma seção só): a divisória é horizontal. */
.fin-colunas .fin-secao + .fin-secao { padding-top: 28px; border-top: 1px solid var(--linha); }

@media (min-width: 1100px) {
  .fin-colunas { grid-template-columns: 1fr 1fr; gap: 0 36px; }
  .fin-colunas .fin-secao + .fin-secao {
    padding-top: 0; border-top: none;
    border-left: 1px solid var(--linha); padding-left: 36px;
  }
  /* Lado a lado, as listas têm alturas muito diferentes (dezenas de entradas
     contra poucas saídas) e a coluna curta deixaria um vão enorme. Cada uma
     rola por dentro, então cabeçalho, filtros e totais das duas continuam
     visíveis ao mesmo tempo — que é o motivo de estarem lado a lado. */
  .fin-colunas .lista-financeiro {
    max-height: calc(100vh - 430px);
    min-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
  }
  /* Uma seção só (permissão parcial): ela ocupa a página inteira, sem divisória
     nem coluna vazia ao lado, e volta a rolar junto com a página. */
  .fin-colunas.unica { grid-template-columns: 1fr; }
  .fin-colunas.unica .fin-secao { max-width: 1100px; margin: 0 auto; }
  .fin-colunas.unica .fin-secao + .fin-secao { border-left: none; padding-left: 0; }
  .fin-colunas.unica .lista-financeiro { max-height: none; overflow-y: visible; padding-right: 0; }
}
.fin-secao-cabecalho { margin-bottom: 16px; }
.fin-secao-cabecalho h2 {
  font-size: 15px; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 6px;
}
.fin-secao-sub {
  font-size: 12.5px; color: var(--texto-medio); line-height: 1.55; max-width: 70ch;
}
.fin-alerta { color: var(--vermelho); }

/* Faixa de resultado do mês, no topo da página. NÃO obedece aos filtros das
   seções, de propósito: é o caixa do mês inteiro, não o do recorte que se está
   lendo. Os blocos somem individualmente para quem só enxerga um dos lados. */
.fin-resultado {
  max-width: 1600px;
  margin: 0 auto 24px;
  display: flex;
  gap: 12px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.fin-res-bloco { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fin-res-rotulo {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-fraco);
}
.fin-res-valor {
  font-family: var(--fonte-mono); font-size: 19px; font-weight: 700; white-space: nowrap;
}
.fin-res-bloco small { font-size: 11px; color: var(--texto-fraco); font-family: var(--fonte-mono); }
/* O operador alinha com o NÚMERO, não com o meio do bloco: o rótulo em cima
   deslocaria o sinal para cima do texto pequeno. */
.fin-res-op { align-self: flex-start; padding-top: 18px; font-size: 18px; color: var(--texto-fraco); }
#fin-res-entradas .fin-res-valor { color: var(--verde); }
#fin-res-saidas .fin-res-valor { color: var(--vermelho); }
.fin-res-total { border-left: 1px solid var(--linha); padding-left: 14px; }
.fin-resultado.unica { max-width: 1100px; }
.fin-res-total.positivo .fin-res-valor { color: var(--verde); }
.fin-res-total.negativo .fin-res-valor { color: var(--vermelho); }

.fin-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.fin-cartao {
  background: var(--bg-superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: 10px;
  padding: 14px 16px;
}
.fin-cartao-rotulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-fraco); font-family: var(--fonte-mono); margin-bottom: 6px;
}
.fin-cartao-valor {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  font-family: var(--fonte-mono);
  white-space: nowrap;
}
.fin-cartao-detalhe { font-size: 11px; color: var(--texto-fraco); font-family: var(--fonte-mono); }
.fin-cartao-verde { border-left-color: var(--verde); }
.fin-cartao-verde .fin-cartao-valor { color: var(--verde); }
.fin-cartao-amarelo { border-left-color: var(--amarelo); }
.fin-cartao-amarelo .fin-cartao-valor { color: var(--amarelo); }
.fin-cartao-vermelho { border-left-color: var(--vermelho); }
.fin-cartao-vermelho .fin-cartao-valor { color: var(--vermelho); }
/* Nada pendente: o cartão para de gritar, mas continua na tela para o zero ser
   uma informação (e não a ausência dela). */
.fin-cartao-apagado { border-left-color: var(--linha-forte); }
.fin-cartao-apagado .fin-cartao-valor { color: var(--texto-medio); }

/* Taxa por forma — fechado por padrão; o dia a dia é a lista de entradas. */
.fin-formas { margin-bottom: 14px; }
.fin-formas > summary {
  cursor: pointer;
  font-size: 11px;
  font-family: var(--fonte-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
  padding: 6px 0;
}
.fin-formas > summary:hover { color: var(--acento); }
.fin-formas-tabela {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.fin-formas-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: baseline;
  padding: 7px 12px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  border-bottom: 1px solid var(--linha);
}
.fin-formas-linha:last-child { border-bottom: none; }
.fin-formas-linha > span:not(.fin-formas-nome) { text-align: right; white-space: nowrap; }
.fin-formas-cabecalho {
  background: var(--bg-elevado);
  color: var(--texto-fraco);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fin-formas-nome { color: var(--texto); min-width: 0; }
.fin-formas-nome small { color: var(--texto-fraco); font-size: 10px; margin-left: 6px; }
.fin-taxa { color: var(--amarelo); }

/* Lista de entradas */
.lista-financeiro { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 10px 14px;
  transition: border-color .12s, background .12s;
}
.fin-item:hover { border-color: var(--linha-forte); background: var(--bg-input); }
/* Pendente = o valor em conta ainda não foi conferido. Vermelho na borda e no
   fundo, para a linha se destacar mesmo numa lista longa e rolada rápido. */
.fin-item.pendente {
  border-left-color: var(--vermelho);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.13), rgba(239, 68, 68, 0.03) 55%, transparent);
}
.fin-item.pendente:hover { background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.06) 55%, transparent); }

.fin-item-data {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--fonte-mono);
}
.fin-item-dia { font-size: 14px; font-weight: 700; color: var(--texto); }
.fin-item-data small { font-size: 10px; color: var(--texto-fraco); }

.fin-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fin-item-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-item-cliente { color: var(--texto-medio); font-size: 13px; }
.fin-item-info small { color: var(--texto-fraco); font-size: 12px; }

.fin-tag {
  font-family: var(--fonte-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--raio);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.fin-tag-adiantamento { color: var(--azul); }
.fin-tag-encerramento { color: var(--verde); }

.fin-item-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--fonte-mono);
}
.fin-item-valor { font-weight: 700; white-space: nowrap; }
.fin-item-valor small { color: var(--texto-fraco); font-weight: 400; font-size: 11px; }
.fin-item-real { font-size: 12px; color: var(--verde); white-space: nowrap; }
.fin-item-taxa { font-size: 11px; color: var(--amarelo); white-space: nowrap; }
.fin-item-sobra { color: var(--vermelho); }
.fin-item-exato { color: var(--texto-fraco); }
.fin-item-pendente {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--vermelho);
  text-align: right;
}

/* ----- Saídas (despesas variáveis) ----- */
/* A linha reaproveita .fin-item: mesma anatomia (data · identificação · valor) e
   mesmo gesto — clicar abre o lançamento. O que muda é a cor do valor, porque
   aqui o dinheiro sai. */
.fin-tag-saida { color: var(--vermelho); }
.fin-item-saida { color: var(--vermelho); }
/* Os comprovantes viram contagem, não links: <a> dentro de <button> é HTML
   inválido, e o arquivo em si abre no editor da saída. */
.fin-item-anexos-info { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; }

/* Quebra por categoria: a resposta para "para onde foi o dinheiro". A barra dá a
   proporção de relance — sem ela, comparar valores em coluna exige aritmética. */
.desp-cat-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(50px, 1fr) minmax(0, 96px) 50px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte-mono);
  font-size: 12px;
}
.desp-cat-linha:last-child { border-bottom: none; }
.desp-cat-nome { color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.desp-cat-nome small { color: var(--texto-fraco); font-size: 10px; margin-left: 6px; }
.desp-cat-barra { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.desp-cat-barra i { display: block; height: 100%; background: var(--vermelho); }
.desp-cat-valor { text-align: right; white-space: nowrap; }
.desp-cat-pct { text-align: right; color: var(--texto-fraco); }

/* Modal de conferência */
.fin-conf-cabecalho {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.fin-conf-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
/* O rótulo tem a largura do texto dele; o valor fica com o resto e quebra
   dentro do próprio bloco — nome de cliente comprido não empurra o rótulo. */
.fin-conf-linha span { flex: 0 0 auto; color: var(--texto-fraco); }
.fin-conf-linha b {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fonte-mono);
  text-align: right;
  overflow-wrap: anywhere;
}
.fin-conf-destaque {
  border-top: 1px solid var(--linha);
  margin-top: 5px;
  padding-top: 7px;
}
.fin-conf-destaque b { font-size: 16px; }

/* Mesma convenção dos outros formulários do sistema (#form-prejuizo e cia.):
   coluna com espaçamento único, em vez de margem solta em cada elemento. */
#form-recebimento { display: flex; flex-direction: column; gap: 14px; }
.fin-conf-campo { display: flex; flex-direction: column; gap: 6px; }
/* A ajuda já entra no gap da coluna; a margem própria dela somaria e abriria um
   buraco maior que o espaço entre os campos. */
#form-recebimento .ajuda-campo { margin-top: -4px; }

.fin-conf-previa {
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--texto-fraco);
  min-height: 17px; /* reserva a linha: o texto muda a cada dígito, o box não pula */
}
.fin-conf-previa-ok { color: var(--verde); }
.fin-conf-previa-taxa { color: var(--amarelo); }
.fin-conf-previa-erro { color: var(--vermelho); }

/* Os dois botões empilhados e da mesma largura. Soltos no form, o "salvar"
   ficava do tamanho do texto e o "desfazer" ocupava a linha inteira. */
.fin-conf-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.fin-conf-acoes .btn-primario,
.fin-conf-acoes .btn-secundario { width: 100%; }
/* Sem erro, a div de erro ainda consumiria um gap da coluna e deixaria um vão
   embaixo dos botões. */
#form-recebimento .erro:empty { display: none; }

/* No celular a entrada vira duas linhas: identificação em cima, valores embaixo,
   senão o valor lançado e o "em conta" brigam pela mesma largura. */
@media (max-width: 640px) {
  .fin-corpo { padding: 14px; }
  /* Três valores lado a lado não cabem: viram uma coluna e os operadores somem
     (a ordem já diz que é entrada, saída e o que sobrou). */
  .fin-resultado { flex-direction: column; gap: 10px; }
  .fin-res-op { display: none; }
  .fin-res-total { border-left: none; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 10px; }
  .desp-cat-linha { grid-template-columns: minmax(0, 1.3fr) minmax(0, 90px) 46px; font-size: 11px; padding: 7px 8px; }
  .desp-cat-barra { display: none; }
  .fin-item { flex-wrap: wrap; gap: 8px 10px; }
  .fin-item-info { flex: 1 1 calc(100% - 58px); }
  .fin-item-lado { flex: 1 1 100%; align-items: flex-start; }
  .fin-item-pendente { text-align: left; }
  .fin-formas-linha { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); font-size: 11px; padding: 7px 8px; }
}