/* =====================================================================
   Campo — folha de estilo única do módulo
   Layout: barra lateral fixa no desktop, gaveta no celular.
   ===================================================================== */
:root {
  --azul: #1d4ed8; --azul-claro: #eff6ff; --azul-escuro: #1e3a8a;
  --texto: #0f172a; --texto2: #64748b; --texto3: #94a3b8;
  --borda: #e2e8f0; --fundo: #f1f5f9; --branco: #fff;
  --menu-fundo: #0f1e3d; --menu-texto: #cbd5e1;
  --verde: #16a34a; --verde-claro: #dcfce7;
  --vermelho: #dc2626; --vermelho-claro: #fee2e2;
  --laranja: #ea580c; --laranja-claro: #ffedd5;
  --roxo: #7c3aed; --roxo-claro: #ede9fe;
  --cinza-claro: #e2e8f0;
  --raio: 10px; --sombra: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.1);
  --lateral: 226px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
a { color: inherit; text-decoration: none; }

/* ── Barra lateral ─────────────────────────────────────────────────── */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral);
  background: var(--menu-fundo); color: var(--menu-texto);
  display: flex; flex-direction: column; padding: 16px 12px; z-index: 40;
  overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.marca { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: #fff; font-weight: 700; font-size: 17px; }
.marca-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--azul); font-size: 16px; overflow: hidden; flex: none; }
.marca-icone img { width: 100%; height: 100%; object-fit: contain; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: #cbd5e1; transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.ativo { background: var(--azul); color: #fff; }
.nav-icone { width: 18px; text-align: center; opacity: .9; }
.lateral-rodape { flex: none; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; margin-top: 10px; }
.rodape-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--menu-texto); }
.rodape-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.rodape-item.ativo { background: var(--azul); color: #fff; }
.perfil { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 8px; }
.perfil:hover { background: rgba(255,255,255,.08); }
.perfil:hover .perfil-txt strong { text-decoration: underline; }
.perfil-txt { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.perfil-txt strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-txt span { color: #94a3b8; font-size: 11.5px; }
.voltar { display: block; width: 100%; text-align: left; padding: 7px 8px; font-size: 12.5px;
  color: #94a3b8; border: 0; border-radius: 7px; background: none; font-family: inherit; cursor: pointer; }
.voltar:hover { background: rgba(255,255,255,.07); color: #fff; }
.fundo-menu { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 35; }

/* ── Área principal ────────────────────────────────────────────────── */
.principal { margin-left: var(--lateral); min-height: 100%; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda); padding: 12px 20px;
}
.topo h1 { flex: 1; font-size: 17px; }
.conteudo { padding: 20px; flex: 1; max-width: 1400px; width: 100%; }
.so-mobile { display: none !important; }

/* ── Botões ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--branco);
  color: var(--texto); transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-verde    { background: var(--verde); color: #fff; }
.btn-perigo   { background: var(--vermelho); color: #fff; }
.btn-plano    { background: var(--branco); border-color: var(--borda); color: var(--texto2); }
.btn-plano:hover { background: #f8fafc; color: var(--texto); }
.btn-pequeno  { padding: 5px 10px; font-size: 12.5px; }
.btn-largo    { width: 100%; padding: 12px; font-size: 15px; }
.icone {
  flex-shrink: 0;
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--branco); cursor: pointer; font-size: 15px; color: var(--texto2);
}
.icone:hover { background: #f8fafc; color: var(--texto); }

/* ── Cartões e grades ──────────────────────────────────────────────── */
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-corpo { padding: 16px; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.cartao-topo h3 { font-size: 14px; }
.grade { display: grid; gap: 14px; }
.grade-kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pilha { display: flex; flex-direction: column; gap: 14px; }
.linha-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.espaco { flex: 1; }

.kpi { padding: 15px 16px; }
.kpi .kpi-rot { color: var(--texto2); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .kpi-num { font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.kpi .kpi-obs { font-size: 11.5px; color: var(--texto3); margin-top: 2px; }
.kpi-azul .kpi-num { color: var(--azul); }
.kpi-verde .kpi-num { color: var(--verde); }
.kpi-vermelho .kpi-num { color: var(--vermelho); }
.kpi-laranja .kpi-num { color: var(--laranja); }

/* ── Etiquetas ─────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tag-cinza    { background: var(--cinza-claro);    color: #475569; }
.tag-azul     { background: var(--azul-claro);     color: var(--azul); }
.tag-verde    { background: var(--verde-claro);    color: #166534; }
.tag-vermelho { background: var(--vermelho-claro); color: #991b1b; }
.tag-laranja  { background: var(--laranja-claro);  color: #9a3412; }
.tag-roxo     { background: var(--roxo-claro);     color: #5b21b6; }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }

/* ── Tabelas ───────────────────────────────────────────────────────── */
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabela th { text-align: left; color: var(--texto2); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.tabela td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
table.tabela tbody tr:hover { background: #f8fafc; }
table.tabela tr.clicavel { cursor: pointer; }
td.num, th.num { text-align: right; }

/* ── Formulários ───────────────────────────────────────────────────── */
.form-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-largo { grid-column: 1 / -1; }
.rotulo { font-size: 12px; font-weight: 600; color: var(--texto2); }
.dica { font-size: 11.5px; color: var(--texto3); }
.entrada {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--branco); color: var(--texto);
}
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
textarea.entrada { min-height: 78px; resize: vertical; }
.acoes-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros .entrada { width: auto; min-width: 140px; }
.busca { flex: 1; min-width: 200px !important; }

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto; }
.modal { background: var(--branco); border-radius: 12px; width: 100%; box-shadow: 0 18px 40px rgba(15,23,42,.25);
  animation: sobe .16s ease-out; margin: auto 0; }
@keyframes sobe { from { transform: translateY(8px); opacity: 0; } }
.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--borda); }
.modal-corpo { padding: 18px; }
body.modal-aberto { overflow: hidden; }
.modal-topo { gap: 12px; }
.modal-topo h3 { min-width: 0; overflow-wrap: anywhere; }

/* ── Avisos ────────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #0f172a; color: #fff; padding: 11px 15px; border-radius: 9px; font-size: 13px;
  box-shadow: 0 8px 20px rgba(15,23,42,.28); max-width: 340px; animation: sobe .16s ease-out; }
.toast-erro { background: var(--vermelho); }
.toast-ok   { background: var(--verde); }
.toast.saindo { opacity: 0; transition: opacity .3s; }

.vazio { text-align: center; padding: 44px 20px; color: var(--texto2); }
.vazio-icone { font-size: 26px; color: var(--texto3); margin-bottom: 6px; }
.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--texto2); }
.spinner { width: 17px; height: 17px; border: 2px solid var(--borda); border-top-color: var(--azul);
  border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.erro-tela { text-align: center; padding: 40px; }
.erro-tela h3 { margin-bottom: 6px; }
.texto-secundario { color: var(--texto2); }
.texto-pequeno { font-size: 12px; color: var(--texto2); }

/* ── Tarefas ───────────────────────────────────────────────────────── */
.tarefa-cartao { background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--azul);
  border-radius: var(--raio); padding: 13px 15px; cursor: pointer; box-shadow: var(--sombra); transition: transform .1s; }
.tarefa-cartao:hover { transform: translateY(-1px); }
.tarefa-cartao.st-concluida { border-left-color: var(--verde); }
.tarefa-cartao.st-cancelada { border-left-color: var(--texto3); opacity: .75; }
.tarefa-cartao.st-execucao  { border-left-color: var(--azul); }
.tarefa-cartao.st-deslocamento { border-left-color: var(--roxo); }
.tarefa-cartao.atrasada { border-left-color: var(--vermelho); }
.tarefa-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.tarefa-codigo { font-size: 11.5px; font-weight: 700; color: var(--texto3); }
.tarefa-titulo { font-weight: 600; font-size: 14px; }
.tarefa-linha { display: flex; align-items: center; gap: 6px; color: var(--texto2); font-size: 12.5px; margin-top: 3px; }

/* Agenda */
.agenda-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.agenda-coluna { background: #f8fafc; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; min-height: 120px; }
.agenda-coluna h4 { font-size: 12.5px; display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.agenda-coluna .contagem { margin-left: auto; font-size: 11px; color: var(--texto2); font-weight: 500; }
.agenda-lista { display: flex; flex-direction: column; gap: 8px; }
.agenda-dia-rot { font-size: 12px; font-weight: 700; color: var(--texto2); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }

/* Detalhe da tarefa */
.detalhe-secao { margin-top: 20px; }
.detalhe-secao > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2);
  border-bottom: 1px solid var(--borda); padding-bottom: 5px; margin-bottom: 10px; }
.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; }
.info-item .info-rot { font-size: 11.5px; color: var(--texto2); }
.info-item .info-val { font-weight: 600; font-size: 13.5px; }
.linha-tempo { display: flex; flex-direction: column; gap: 9px; }
.evento { display: flex; gap: 9px; font-size: 12.5px; }
.evento .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); margin-top: 5px; flex: none; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.miniatura { position: relative; }
.miniatura img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); cursor: pointer; }
.miniatura .remover { position: absolute; top: 3px; right: 3px; background: rgba(15,23,42,.75); color: #fff;
  border: 0; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 12px; }
.assinatura-area { border: 1px dashed var(--borda); border-radius: 9px; background: #fff; touch-action: none; width: 100%; height: 170px; }
.checklist-item { padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.checklist-item .pergunta { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.obrigatorio { color: var(--vermelho); }
.opcoes-sim-nao { display: flex; gap: 7px; }
.opcoes-sim-nao button { flex: 1; padding: 8px; border: 1px solid var(--borda); background: #fff; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto2); }
.opcoes-sim-nao button.marcado { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Mapa da equipe */
.mapa-caixa { height: 420px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }
.barra { height: 7px; border-radius: 4px; background: var(--cinza-claro); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--azul); }
.grafico-barras { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-top: 8px; }
.grafico-barras .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.grafico-barras .haste { width: 100%; background: var(--azul-claro); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.grafico-barras .haste > i { position: absolute; inset: auto 0 0 0; background: var(--azul); border-radius: 4px 4px 0 0; display: block; }
.grafico-barras .rot { font-size: 10px; color: var(--texto3); white-space: nowrap; }

/* ── Celular ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .fundo-menu { display: block; }
  .principal { margin-left: 0; }
  .so-mobile { display: grid !important; }
  .conteudo { padding: 14px; }
  .form-grade { grid-template-columns: 1fr; }
  .modal-back { padding: 0; align-items: flex-end; }
  .modal { border-radius: 14px 14px 0 0; max-height: 94vh; overflow-y: auto; margin: 0; }
  .agenda-grade { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  #sync-status { order: 3; flex-basis: 100%; padding-left: 52px; }
  .btn, .icone, .opcoes-sim-nao button { min-height: 44px; }
  .icone { min-width: 44px; }
  .entrada { min-height: 44px; font-size: 16px; }
  .modal { max-height: 94dvh; overscroll-behavior: contain; }
  .modal-topo { position: sticky; top: 0; z-index: 2; background: var(--branco); border-radius: 14px 14px 0 0; }
  .modal-corpo { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .acoes-modal { flex-wrap: wrap; }
  .tarefa-linha { flex-wrap: wrap; }
  .tarefa-titulo, .info-val { overflow-wrap: anywhere; }
}


/* ── Barra de etapas (rastreio da tarefa) ───────────────────────────── */
.etapas { position: relative; isolation: isolate; display: flex; gap: 0; overflow-x: auto; padding: 4px 0 2px; }
.etapa { position: relative; flex: 1 1 0; min-width: 92px; text-align: center; padding: 0 4px; }
.etapa-linha { position: absolute; z-index: 0; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--cinza-claro); }
.etapa .etapa-linha.conectada { background: var(--verde); }
.etapa-bola { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 5px;
  border-radius: 50%; background: var(--cinza-claro); color: var(--texto2); font-size: 14px; }
.etapa.feita .etapa-bola { background: var(--verde); color: #fff; }
.etapa.atual .etapa-bola { box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.etapa-rot { display: block; font-size: 11.5px; font-weight: 600; }
.etapa-hora { display: block; font-size: 10.5px; color: var(--texto3); }

/* ── Calendário ─────────────────────────────────────────────────────── */
.modal-resumo-os { border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; }
.modal-resumo-os .modal-topo { padding: 22px 24px; background: var(--azul-claro); border-bottom-color: #dbeafe; }
.modal-resumo-os .modal-topo h3 { color: var(--azul-escuro); font-size: 20px; line-height: 1.4; }
.modal-resumo-os .modal-topo .icone { color: var(--azul); background: var(--branco); border-color: #dbeafe; border-radius: 10px; }
.modal-resumo-os .modal-corpo { padding: 24px; }
.resumo-os { display: flex; flex-direction: column; gap: 24px; }
.resumo-os-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resumo-os-codigo { color: var(--texto2); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.resumo-os .tag { padding: 5px 10px; }
.resumo-os-agendamento { display: flex; align-items: center; gap: 12px; }
.resumo-os-calendario { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); font-size: 25px; }
.resumo-os-agendamento .info-rot { display: block; font-size: 12px; color: var(--texto2); margin-bottom: 4px; }
.resumo-os-agendamento strong { font-size: 15px; font-weight: 600; }
.acompanhamento-etapas { padding: 20px 12px; background: #f8fafc; border: 1px solid var(--borda); border-radius: 14px; }
.acompanhamento-etapas h4 { font-size: 13px; color: var(--texto2); margin: 0 8px 20px; }
.acompanhamento-etapas .etapas { padding: 5px 0 0; }
.acompanhamento-etapas .etapa { min-width: 0; }
.acompanhamento-etapas .etapa-bola { width: 34px; height: 34px; background: #e2e8f0; color: #64748b; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.acompanhamento-etapas .etapa.feita .etapa-bola { background: var(--azul); color: #fff; }
.acompanhamento-etapas .etapa.atual .etapa-bola { box-shadow: 0 0 0 4px #dbeafe; }
.acompanhamento-etapas .etapa-linha { top: 16px; height: 2px; }
.acompanhamento-etapas .etapa-linha.conectada { background: var(--azul); }
.acompanhamento-etapas .etapa-rot { font-size: 11px; line-height: 1.4; }
.acompanhamento-etapas .etapa-hora { color: var(--texto2); font-size: 10px; line-height: 1.5; margin-top: 3px; }
.resumo-os-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.resumo-os-dados .info-item { padding: 14px; border: 1px solid var(--borda); border-radius: 12px; }
.resumo-os-dados .info-rot { margin-bottom: 7px; }
.resumo-os-dados .info-val { font-weight: 500; overflow-wrap: anywhere; line-height: 1.5; }
.resumo-os-rodape { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--borda); }
.resumo-os-rodape p { margin: 0; max-width: 290px; color: var(--texto2); font-size: 12px; line-height: 1.6; }
.resumo-os-rodape .btn { min-height: 44px; gap: 16px; flex-shrink: 0; border-radius: 10px; }
@media (max-width: 540px) {
  .modal-resumo-os { overflow-y: auto; border-radius: 18px 18px 0 0; }
  .modal-resumo-os .modal-topo { padding: 18px; }
  .modal-resumo-os .modal-topo h3 { font-size: 18px; }
  .modal-resumo-os .modal-corpo { padding: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .resumo-os { gap: 20px; }
  .resumo-os-status .espaco { display: none; }
  .resumo-os-codigo { flex-basis: 100%; margin-bottom: 4px; }
  .acompanhamento-etapas .etapas { flex-direction: column; gap: 16px; }
  .acompanhamento-etapas .etapa { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; text-align: left; padding: 0 8px; }
  .acompanhamento-etapas .etapa-bola { grid-row: 1 / 3; margin: 0; }
  .acompanhamento-etapas .etapa-rot { font-size: 12px; }
  .acompanhamento-etapas .etapa-hora { font-size: 11px; margin-top: 1px; }
  .acompanhamento-etapas .etapa-linha { width: 2px; height: 16px; left: 24px; right: auto; top: -16px; }
  .resumo-os-dados { grid-template-columns: 1fr; gap: 8px; }
  .resumo-os-dados .info-item { padding: 12px 14px; }
  .resumo-os-rodape { flex-direction: column; align-items: stretch; gap: 12px; }
  .resumo-os-rodape p { max-width: none; }
}
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cabeca { font-size: 11px; font-weight: 700; color: var(--texto2); text-transform: uppercase;
  letter-spacing: .05em; text-align: center; padding: 4px 0; }
.cal-dia { background: var(--branco); border: 1px solid var(--borda); border-radius: 9px; min-height: 104px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-dia.fora { background: #f8fafc; opacity: .55; }
.cal-dia.hoje { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(29,78,216,.15); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--texto2); }
.cal-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 5px; border-radius: 6px;
  background: var(--azul-claro); color: var(--azul); cursor: pointer; text-align: left; border: 0; width: 100%;
  font-family: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-item:hover { filter: brightness(.96); }
.cal-item .ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cal-mais { font-size: 10.5px; color: var(--texto3); }

/* ── Construtor de formulário ───────────────────────────────────────── */
.bloco { background: var(--branco); border: 1px solid var(--borda); border-radius: 9px; padding: 11px; }
.bloco-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bloco-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--azul); background: var(--azul-claro); padding: 2px 8px; border-radius: 999px; }
.paleta { display: flex; flex-wrap: wrap; gap: 6px; }
.itens-linha { display: grid; grid-template-columns: 1fr 130px 34px; gap: 6px; margin-bottom: 6px; }
.matriz-perm td, .matriz-perm th { text-align: center; }
.matriz-perm td:first-child, .matriz-perm th:first-child { text-align: left; }


/* ── Pré-visualização A4 do formulário de orçamento ─────────────────── */
.a4-previa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.a4-aviso { font-size: 12.5px; padding: 8px 11px; border-radius: 8px; background: var(--cinza-claro); color: var(--texto2); }
.a4-aviso.ok { background: var(--verde-claro); color: #166534; }
.a4-aviso.estoura { background: var(--laranja-claro); color: #9a3412; }
.a4-palco { background: #e2e8f0; border-radius: 10px; padding: 10px; overflow: auto; max-height: 62vh; }
.a4-folha {
  width: 190mm; min-height: calc(277mm * var(--folhas, 1)); background: #fff; padding: 6mm; margin: 0 auto;
  box-shadow: 0 1px 6px rgba(15,23,42,.2); color: #0f172a; font-size: 9px;
  transform-origin: top center;   /* escala e margem são ajustadas pelo zoom, em quote-preview.js */
}
.a4-cabecalho td.logo { width: 26mm; text-align: center; vertical-align: middle; }
.a4-cabecalho td.logo img { max-width: 24mm; max-height: 14mm; }
.a4-cabecalho td.logo .sem-logo { height: 12mm; display: grid; place-items: center; color: var(--texto3); }
.a4-cabecalho td.nome { font-weight: 700; }
.a4-previa .icone { width: 28px; height: 28px; font-size: 14px; }
.a4-topo { text-align: center; border-bottom: 2px solid var(--azul); padding-bottom: 5px; margin-bottom: 6px; }
.a4-topo img { max-height: 34px; }
.a4-topo h1 { font-size: 13px; margin: 3px 0 0; }
.a4-topo .a4-sub { color: var(--texto2); font-size: 9px; }
.a4-faixa { background: var(--azul); color: #fff; font-weight: 700; text-align: center; padding: 3px; margin-top: 6px; }
.a4-conteudo { border: 1px solid #0f172a; border-top: 0; padding: 4px 6px; color: var(--texto3); }
.a4-instrucao { color: #dc2626; text-align: center; padding: 8px 6px; min-height: 10mm; }
table.a4-quadro { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.a4-quadro td { word-wrap: break-word; }
table.a4-quadro th, table.a4-quadro td { border: 1px solid #0f172a; padding: 3px 5px; text-align: left; }
table.a4-quadro th { background: #f1f5f9; }
table.a4-quadro td.rot { font-weight: 700; white-space: nowrap; }
table.a4-quadro td.num, table.a4-quadro th.num { text-align: right; }
.a4-fotos, .a4-fotos-eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  border: 1px solid #0f172a; border-top: 0; padding: 5px; }
.a4-fotos .vazia, .a4-fotos-eq .vazia { height: 18mm; display: grid; place-items: center;
  border: 1px dashed #94a3b8; border-radius: 3px; color: #94a3b8; }
.a4-fotos-eq figure { margin: 0; }
.a4-fotos-eq figcaption { text-align: center; font-weight: 600; margin-top: 2px; }
.a4-assinatura { border: 1px solid #0f172a; border-top: 0; padding: 5px; text-align: center; }
.a4-assinatura .linha { border-top: 1px solid #0f172a; max-width: 60mm; margin: 0 auto; padding-top: 3px; }
.construtor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .construtor { grid-template-columns: 1fr; } }
.offline-panel { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 20px; background:#eff6ff; border-bottom:1px solid #dbeafe; color:#1e3a8a; font-size:12px; }
.offline-panel span { flex:1; min-width:180px; }
/* Sacamoto GOO: leitura clara, navegação de missão e detalhes em ciano. */
:root{--ciano:#087e97;--raio:14px;--sombra:0 4px 22px rgba(18,38,70,.065)}
body{background:radial-gradient(ellipse at 95% 0,rgba(6,182,212,.065),transparent 45%),var(--fundo)}
.lateral{background-image:radial-gradient(ellipse at 0 0,rgba(6,182,212,.15),transparent 45%)}
.nav-section{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#93b9cb;padding:18px 11px 6px}
.nav-item.ativo{box-shadow:inset 3px 0 #67e8f9,0 3px 18px rgba(0,0,0,.12)}
.marca-icone{box-shadow:0 0 18px rgba(34,211,238,.23);border:1px solid rgba(103,232,249,.25)}
.topo{border-bottom:1px solid var(--borda);box-shadow:0 3px 16px rgba(15,23,42,.035);gap:12px}
button,a,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid #0e7490;outline-offset:3px}
.eyebrow{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--ciano);margin-bottom:10px}
.goo-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.goo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.goo-card{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.goo-card p{margin:0;line-height:1.65}.goo-card h2{font-size:24px}.goo-card h4{margin-top:14px}
.goo-hero{position:relative;overflow:hidden;border-radius:18px;padding:30px;background:linear-gradient(120deg,#102345,#152f50);color:#f8fafc;border:1px solid #294860;margin-bottom:20px;box-shadow:var(--sombra)}
.goo-stack>.goo-hero{margin-bottom:0}.goo-hero::after{content:'';position:absolute;right:-60px;top:-85px;width:230px;height:230px;border:1px solid rgba(103,232,249,.2);border-radius:50%;box-shadow:0 0 0 30px rgba(103,232,249,.025),0 0 0 65px rgba(103,232,249,.025);pointer-events:none}
.goo-hero .eyebrow{color:#a5f3fc}.goo-hero h2{font-size:clamp(23px,3vw,32px);max-width:750px}.goo-hero p{color:#cbdce9;line-height:1.7;max-width:760px;position:relative;z-index:1}
.goo-metrics{display:flex;flex-wrap:wrap;gap:34px;margin-top:24px}.goo-metric{display:flex;flex-direction:column;gap:7px}.goo-metric strong{font-size:30px;font-variant-numeric:tabular-nums}.goo-metric span{font-size:12px;color:#cbdce9}
.goo-badge{padding:10px 15px;border:1px solid #b8dce3;border-radius:30px;background:#eaf8fa;color:#075568;font-weight:600}
progress{accent-color:var(--azul);height:12px;width:100%;max-width:650px;border:0}
.goo-link-card{padding:14px;border:1px solid var(--borda);border-radius:12px;display:flex;flex-direction:column;gap:6px}.goo-link-card:hover{border-color:var(--ciano);background:#f4fbfc}
.goo-survey{padding:18px 0;border-top:1px solid var(--borda)}.goo-survey .entrada{font-size:12px}
.goo-journey{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.goo-step{background:white;border:1px solid var(--borda);border-radius:12px;text-align:left;padding:15px;color:var(--texto2);font-weight:700;cursor:pointer}.goo-step span{display:block;font-weight:500;font-size:12px;margin-top:10px;line-height:1.4}.goo-step.atual{background:var(--azul);color:white;border-color:var(--azul)}.goo-step.feita{background:#edf9f7;border-color:#b9ded6;color:#176856}.goo-demo-record{background:#f2f8fc;border:1px dashed #bdcfdf;padding:22px;border-radius:12px;line-height:1.7;margin:12px 0}
.hub{display:grid;grid-template-columns:310px minmax(0,1fr);border:1px solid var(--borda);border-radius:18px;background:var(--branco);overflow:hidden;height:calc(100dvh - 145px);min-height:600px;box-shadow:var(--sombra)}
.hub-sidebar{border-right:1px solid var(--borda);display:flex;flex-direction:column;min-height:0;background:#f8fafc}.hub-sidebar>.entrada{margin:8px 15px;width:calc(100% - 30px)}.hub-toolbar{padding:20px 15px 8px;display:flex;flex-wrap:wrap;gap:10px}.hub-toolbar h2{font-size:18px;width:100%}.hub-list{overflow-y:auto;flex:1;padding:8px}
.hub-room{width:100%;text-align:left;display:flex;flex-direction:column;gap:5px;position:relative;border:1px solid transparent;border-radius:12px;padding:14px;background:transparent;color:var(--texto);cursor:pointer;margin-bottom:5px;font:inherit}.hub-room:hover{background:#eef3f8}.hub-room.selecionada{background:#e9f3fc;border-color:#bcd7ed;box-shadow:inset 3px 0 var(--azul)}.hub-kind{font-size:10px;font-weight:700;color:#08758a;text-transform:uppercase;letter-spacing:.08em}.hub-preview{font-size:12px;color:var(--texto2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.hub-unread{font-size:11px;color:#fff;background:var(--azul);border-radius:20px;padding:3px 8px;width:fit-content}
.hub-thread{display:flex;flex-direction:column;min-width:0;min-height:0}.hub-thread-head{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--borda)}.hub-thread-head h2{font-size:20px;overflow-wrap:anywhere}.hub-context{display:flex;gap:12px;align-items:center;padding:8px 24px;font-size:12px;min-height:30px}.hub-context a{color:var(--azul)}
.hub-messages{flex:1;overflow:auto;padding:22px;background:linear-gradient(#f6f9fc,#f0f6fa);display:flex;flex-direction:column;gap:12px;min-height:180px;align-items:flex-start}.hub-message{background:white;border:1px solid var(--borda);padding:14px 17px;border-radius:14px 14px 14px 3px;max-width:88%;box-shadow:0 1px 3px rgba(0,0,0,.025);overflow-wrap:anywhere}.hub-message.minha{align-self:flex-end;background:#e8f2fc;border-color:#c9deef;border-radius:14px 14px 3px 14px}.hub-message strong{font-size:11px;color:#306181}.hub-message p{white-space:pre-wrap;margin:7px 0;line-height:1.6}.hub-message small{display:block;margin-top:8px;color:#526780;font-size:10px}.hub-message a{text-decoration:underline;color:var(--azul)}
.hub-compose{padding:16px 24px;border-top:1px solid var(--borda);background:white;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.hub-compose>label:first-child{grid-column:1/-1}.hub-compose .campo{margin-bottom:0}.hub-compose p{margin:6px 0;font-size:11px;max-width:600px}.hub-compose>.btn{align-self:end}.hub-compose input[type=file]{padding:7px;font-size:11px}.hub-channel{padding:18px 0;border-bottom:1px solid var(--borda)}.hub-qr{width:250px;max-width:100%;display:block;margin:15px auto}.hub-members{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.hub-members input{width:20px;height:20px}
.survey-page{display:grid;place-items:center;min-height:100dvh;padding:24px}.survey-box{max-width:680px;width:100%}.survey-box fieldset{border:0;padding:0;margin:12px 0 24px}.survey-box legend{font-weight:600;margin-bottom:15px}.survey-ratings{display:flex;gap:10px;flex-wrap:wrap}.survey-ratings label{padding:12px;background:#f0f6fa;border:1px solid var(--borda);border-radius:10px;cursor:pointer}.survey-ratings label:has(input:checked){background:#e4f4fb;border-color:var(--azul)}.survey-box form[hidden]{display:none}
@media(max-width:1050px){.hub{grid-template-columns:250px minmax(0,1fr)}.goo-journey{grid-template-columns:repeat(3,1fr)}.hub-compose{grid-template-columns:1fr}.hub-message{max-width:95%}}
@media(max-width:700px){.goo-hero{padding:23px}.goo-metrics{gap:24px}.goo-metric strong{font-size:25px}.goo-card{padding:18px}.goo-journey{grid-template-columns:repeat(2,1fr)}.hub{display:flex;flex-direction:column;height:auto;min-height:0}.hub-sidebar{border-right:0;border-bottom:1px solid var(--borda)}.hub-list{max-height:200px;flex:none;display:flex;overflow-x:auto}.hub-room{min-width:200px;width:200px;flex:none}.hub-thread{min-height:600px}.hub-messages{max-height:450px}.hub-thread-head,.hub-compose{padding:16px}.hub-context{padding:8px 16px}.topo #sync-status{display:none}.topo #btn-busca{margin-left:auto}.goo-hero::after{opacity:.5}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.nav{flex:1 0 auto;min-height:auto}.nav-group-items{display:flex;flex-direction:column;gap:2px}.nav-section{cursor:pointer;padding:13px 11px 7px}.nav-section:hover{color:#d8f6ff}.nav-group summary::marker{color:#67e8f9;font-size:9px}.nav-group[open] summary{color:#a8d7e5}button.goo-link-card{font:inherit;text-align:left;color:var(--texto);background:var(--branco);cursor:pointer}.topo h1{min-width:0;overflow-wrap:anywhere}

/* Shared corporate Lucide icon style. */
.goo-icon{display:inline-block;vertical-align:middle;flex-shrink:0}.nav-icone,.etapa-bola{display:inline-flex;align-items:center;justify-content:center}.topo button{align-items:center;gap:6px}.etapa-bola .goo-icon{width:18px;height:18px}

/* Browser cache settings, shared company card pattern. */
.cache-card{padding:20px;display:flex;flex-direction:column;gap:16px;max-width:760px;border-radius:16px}.cache-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--borda);padding-bottom:6px}.cache-heading h3{font-size:14px}.cache-mode{font-size:10px;font-weight:700;color:var(--texto3);background:var(--fundo);border-radius:12px;padding:3px 8px}.cache-card p{font-size:13px;line-height:1.6;color:var(--texto2);margin:0}.cache-card>.btn{align-self:flex-start}.cache-automatic{border-top:1px solid var(--borda);padding-top:16px;display:flex;flex-direction:column;gap:16px}.cache-automatic h4{font-size:13px;font-weight:500;margin:0}.cache-schedule{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.cache-schedule .campo{width:96px}.cache-card .cache-note{font-size:11px}.cache-feedback:empty{display:none}

/* Compact mobile calendar with day agenda. */
.cal-dia-seletor,.cal-dia-lista{display:none}
@media(max-width:700px){
.cal-toolbar{display:grid;grid-template-columns:40px minmax(0,1fr) 40px auto;gap:8px;margin-bottom:14px}.cal-toolbar>strong{min-width:0!important;font-size:15px;text-transform:capitalize}.cal-toolbar>.entrada{grid-column:1/3;width:100%;min-width:0}.cal-toolbar>.espaco{display:none}.cal-toolbar>.cal-nova{grid-column:3/5;justify-content:center;font-size:13px;min-height:42px}.cal-toolbar>.icone{width:40px;height:42px}.cal-hoje{height:42px}
.cal-mes{background:var(--branco);border:1px solid var(--borda);border-radius:16px;padding:12px}.cal-mes .cal-grade{gap:4px}.cal-mes .cal-cabeca{font-size:10px;padding:6px 0}.cal-mes .cal-dia{min-height:0;height:48px;padding:0;border:0;background:transparent;border-radius:10px;box-shadow:none;opacity:1;min-width:0}.cal-mes .cal-dia>.cal-num,.cal-mes .cal-item,.cal-mes .cal-mais{display:none}.cal-dia-seletor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;border:0;border-radius:10px;background:transparent;color:var(--texto);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.cal-dia.fora .cal-dia-seletor{color:var(--texto3);opacity:.5}.cal-dia.hoje .cal-dia-seletor{background:var(--azul-claro);color:var(--azul)}.cal-dia-seletor.selecionado{background:var(--azul)!important;color:#fff!important;opacity:1!important;box-shadow:0 3px 8px rgba(29,78,216,.2)}.cal-dia-seletor:focus-visible{outline:2px solid var(--azul);outline-offset:2px}.cal-marcadores{display:flex;gap:3px;align-items:center;height:5px}.cal-marcadores>span{width:4px;height:4px;border-radius:50%}.selecionado .cal-marcadores>span{background:white!important}.cal-marcadores>small{font-size:8px;line-height:1}
.cal-dia-lista{display:block;border-top:1px solid var(--borda);margin-top:12px;padding-top:16px}.cal-lista-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.cal-lista-topo h3{font-size:16px;margin:3px 0}.cal-lista-topo .texto-pequeno{text-transform:capitalize}.cal-dia-atendimento{display:flex;align-items:center;gap:10px;width:100%;padding:12px 8px;text-align:left;border:0;border-top:1px solid var(--borda);background:transparent;color:var(--texto);font:inherit;cursor:pointer}.cal-atendimento-hora{align-self:flex-start;font-size:13px;font-weight:700;color:var(--azul);padding-top:2px}.cal-atendimento-conteudo{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.cal-atendimento-conteudo strong{overflow-wrap:anywhere;font-size:14px}.cal-atendimento-conteudo .tag{align-self:flex-start}.cal-dia-vazio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 10px;color:var(--texto3);font-size:12px}.cal-dia-vazio strong{font-size:14px;color:var(--texto2)}
}