/* ============================================================================
   style.css — Engrena. Layout "sidebar navy + cards" (referência: portal
   acadêmico enviado pelo usuário em 2026-08, aprovado para adoção). Mesmo
   padrão de tema (dark/light via [data-theme], alternância manual salva em
   localStorage). A sidebar fica sempre em navy escuro nos dois temas — só o
   fundo/superfícies do conteúdo mudam entre dark e light.
   ============================================================================ */

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

:root {
  --engrena-bg: #0d1520;
  --engrena-surface: #141d2b;
  --engrena-surface-alt: #1b2636;
  --engrena-border: #263346;
  --engrena-primary: #1e88e5;
  --engrena-primary-dark: #0b3a6e;
  --engrena-accent: #17b897;
  --engrena-accent-dark: #0e6650;
  --engrena-grey: #8b9cad;
  --text-primary: #e7edf5;
  --text-muted: #8fa0b5;
  --danger: #e5484d;
  --warning: #e5a13d;

  /* A sidebar não muda entre os temas — fica sempre navy escuro. */
  --sidebar-bg: #0b2c4d;
  --sidebar-bg-alt: #0a2540;
  --sidebar-text: #cfdcea;
  --sidebar-text-dim: #7d93ac;
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --sidebar-hover: rgba(255, 255, 255, 0.07);

  --radius: 0.7rem;
  --radius-sm: 0.5rem;
  --shadow-card: 0 1px 2px rgba(8, 14, 22, 0.4);
}

:root[data-theme="light"] {
  --engrena-bg: #f5f7fa;
  --engrena-surface: #ffffff;
  --engrena-surface-alt: #eef2f6;
  --engrena-border: #dce3ea;
  --engrena-primary: #1668b0;
  --engrena-primary-dark: #0b3a6e;
  --engrena-accent: #0c6e57;
  --engrena-accent-dark: #094a3a;
  --engrena-grey: #56677a;
  --text-primary: #16212e;
  --text-muted: #5b6b7d;
  --danger: #c22e35;
  --warning: #a3670a;
  --shadow-card: 0 1px 2px rgba(16, 30, 45, 0.06);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--engrena-bg);
  color: var(--text-primary);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Marca d'água hexagonal global — ::before em vez de background direto no
   body porque a imagem em si é um PNG opaco claro (sem canal alfa); é a
   opacity do pseudo-elemento que faz a mistura com --engrena-bg por baixo e
   dá o efeito de textura bem leve, tanto no tema escuro quanto no claro.
   position:fixed = não rola com a página; z-index:-1 = fica atrás de TODO
   o conteúdo (cards, tabelas, inputs, sidebar, topbar já têm fundo sólido
   próprio, então o texto nunca fica por cima da textura "crua"). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../img/bg-hexagonal.png');
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
}
/* No tema claro a imagem (já bem clara) fica quase invisível contra o
   --engrena-bg claro no mesmo opacity do tema escuro — precisa de mais
   opacity pra render minimamente perceptível. */
:root[data-theme="light"] body::before {
  opacity: 0.12;
}

:focus-visible { outline: 2px solid var(--engrena-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--engrena-bg); }
::-webkit-scrollbar-thumb { background: var(--engrena-surface-alt); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--engrena-border); }

a { color: inherit; }

/* ---------------------------------------------------------------------- */
/* Componentes genéricos                                                   */
/* ---------------------------------------------------------------------- */
.card {
  background-color: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  background-color: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 140px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--engrena-primary);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.16);
}

button {
  border-radius: var(--radius-sm);
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  transition: filter 0.15s, opacity 0.15s, border-color 0.15s, background-color 0.15s;
  cursor: pointer;
  border: 1px solid var(--engrena-primary);
  background-color: var(--engrena-primary);
  color: #ffffff;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary, button.delete-btn {
  background-color: var(--engrena-surface);
  color: var(--text-primary);
  border: 1px solid var(--engrena-border);
}
button.secondary:hover { border-color: var(--engrena-primary); color: var(--engrena-primary); filter: none; }
button.delete-btn { color: var(--danger); }

/* Ações de linha de tabela (Editar/Excluir) — botões-ícone (lápis/lixeira),
   alinhados à extremidade direita da célula. */
td:has(.acoes-linha) {
  text-align: right;
}
.acoes-linha {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}
button.icon-btn, a.icon-btn, span.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
}
button.icon-btn svg, a.icon-btn svg { width: 16px; height: 16px; }
button.icon-btn:hover, a.icon-btn:hover { filter: none; background-color: var(--engrena-surface-alt); color: var(--text-primary); }
button.icon-btn.delete-btn {
  background-color: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
button.icon-btn.delete-btn:hover { background-color: var(--danger); color: #ffffff; }

/* Botões antigos de texto (Editar/Excluir) em telas que ainda não migraram
   pro padrão de ícone — mantém o visual compacto anterior. */
td button:not(.icon-btn) {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
}
td button.delete-btn:not(.icon-btn) {
  background-color: var(--danger);
  color: #ffffff;
  border: none;
}

/* Botão que se parece com texto normal, não com um botão — usado quando o
   próprio dado (ex.: o e-mail de acesso) é o gatilho pra editar. */
button.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}
button.link-btn:hover { color: var(--engrena-primary); filter: none; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background-color: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1rem;
  box-shadow: var(--shadow-card);
}
th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--engrena-border);
  padding: 0.7rem 0.9rem;
  background-color: var(--engrena-surface-alt);
  white-space: nowrap;
}
td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--engrena-border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background-color: var(--engrena-surface-alt); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-primary { background-color: rgba(229, 138, 46, 0.18); color: #f0aa5c; }
.badge-accent { background-color: rgba(47, 158, 119, 0.18); color: #5fd3a9; }
.badge-grey { background-color: rgba(152, 161, 168, 0.18); color: var(--engrena-grey); }
.badge-danger { background-color: rgba(229, 72, 77, 0.2); color: #ff8286; }
.badge-warning { background-color: rgba(229, 161, 61, 0.2); color: #f5bd6f; }
.status-clicavel { cursor: pointer; border: 1px dashed transparent; }
.status-clicavel:hover { border-color: currentColor; }

:root[data-theme="light"] .badge-primary { background-color: rgba(201, 112, 28, 0.12); color: #8a4e14; }
:root[data-theme="light"] .badge-accent { background-color: rgba(31, 122, 88, 0.12); color: #145940; }
:root[data-theme="light"] .badge-grey { background-color: rgba(91, 107, 122, 0.14); color: #45535f; }
:root[data-theme="light"] .badge-danger { background-color: rgba(217, 54, 62, 0.14); color: #b3272e; }
:root[data-theme="light"] .badge-warning { background-color: rgba(185, 116, 10, 0.14); color: #8a5806; }

form.inline-form {
  background: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
form.inline-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--text-muted);
  gap: 0.25rem;
}

/* Campos de filtro (busca/cliente/status) tinham min-width fixo inline
   (ex.: 220px) que passava da largura da tela no celular — trava cada
   campo em 100% da linha abaixo desse ponto, ignorando o min-width. */
@media (max-width: 680px) {
  form.inline-form { flex-direction: column; align-items: stretch; }
  form.inline-form label { width: 100%; }
  form.inline-form input,
  form.inline-form select {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }
}

.error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; }
.muted { color: var(--text-muted); font-size: 0.85rem; }

.btn-tema-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  color: var(--text-primary);
  font-size: 0.8rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-tema-toggle:hover { opacity: 1; filter: none; }

/* Quando o JS encaixa o botão de tema na topbar (ou na área do usuário do
   Painel), ele sai do posicionamento flutuante e vira só mais um controle
   na fileira — mesma posição/forma da amostra de layout aprovada. */
.btn-tema-toggle.btn-tema-toggle-embutido {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  opacity: 1;
  border-radius: var(--radius-sm);
  margin-left: 0;
  flex-shrink: 0;
}
.btn-tema-toggle.btn-tema-toggle-embutido:hover { opacity: 1; }

/* ---------------------------------------------------------------------- */
/* Telas centralizadas (login)                                            */
/* ---------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-card { width: 100%; max-width: 340px; padding: 2rem; }
/* Mesmo recorte usado em .logo-crop (cabeçalho/sidebar), só maior — a
   logo-engrena.png original inclui uma tagline embutida na imagem, então o
   ícone (engrenagem+E) precisa ficar isolado via overflow:hidden + offset
   negativo, não é um simples <img> solto. */
.login-card .logo {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 1rem;
  margin: 0 auto 0.9rem;
}
.login-card .logo img {
  display: block;
  width: 134px;
  height: 134px;
  max-width: none;
  object-fit: contain;
  position: relative;
  left: -35px;
  top: -24px;
}
.login-card h1 { text-align: center; margin: 0 0 0.25rem; font-size: 1.15rem; }
.login-card p.sub { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.5rem; }
.login-card form { display: flex; flex-direction: column; gap: 1rem; }
.login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.login-card input { width: 100%; }
.login-card button { margin-top: 0.4rem; }

/* ---------------------------------------------------------------------- */
/* Dashboard — seleção de módulo                                          */
/* ---------------------------------------------------------------------- */
.dashboard-header {
  border-bottom: 1px solid var(--engrena-border);
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.dashboard-header .brand { display: flex; align-items: center; gap: 0.75rem; }
.dashboard-header .brand .logo {
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--engrena-primary), var(--engrena-accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: #fff;
}
/* .header-icones (sino/chat) é o primeiro item "do lado direito" — o
   margin-left:auto nele empurra ele e tudo que vem depois (nome do
   usuário, Sair, tema) pro canto direito, com o gap do container
   cuidando do espaçamento pequeno entre eles. */
.dashboard-header .header-icones { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.dashboard-header .user-area { display: flex; align-items: center; gap: 0.9rem; }
.dashboard-header .user-info { text-align: right; }
.dashboard-header .user-info p { margin: 0; }
.dashboard-header .user-info .nome { font-size: 0.85rem; font-weight: 600; }
.dashboard-header .user-info .perfil { font-size: 0.7rem; color: var(--text-muted); }
.dashboard-header .quebra-cabecalho { display: none; }

/* No celular o cabeçalho inteiro (logo + sino + chat + nome/e-mail + Sair)
   não cabia numa linha só e forçava a página inteira a rolar na
   horizontal. Logo continua exatamente no lugar/tamanho de sempre; o
   nome do usuário sobe pra dividir a primeira linha com a logo (em vez
   de ficar sozinho numa linha própria, deixando um vão vazio no canto
   superior direito); sino, chat, Sair e o alternador de tema formam uma
   segunda linha, colados entre si. O <span class="quebra-cabecalho"> é
   invisível no desktop — aqui vira o ponto de quebra de linha explícito
   entre as duas fileiras (técnica padrão flex-basis:100%). O
   .btn-tema-toggle é o mesmo botão flutuante único usado em todas as
   páginas — aqui, na Home, o theme.js já o encaixa dentro de .user-area
   (fica com a classe .btn-tema-toggle-embutido); só posicionamos ele na
   fileira certa. */
@media (max-width: 680px) {
  .dashboard-header {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0.3rem;
    column-gap: 0.4rem;
    padding: 0.5rem 0.85rem;
  }
  .dashboard-header .brand { order: 1; }
  .dashboard-header .user-info {
    order: 2;
    margin-left: auto;
    line-height: 1.15;
  }
  .dashboard-header .user-info .nome {
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55vw;
  }
  .dashboard-header .user-info .perfil { font-size: 0.58rem; }
  .dashboard-header .quebra-cabecalho {
    display: block;
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  .dashboard-header .header-icones {
    order: 4;
    margin-left: auto;
  }
  .dashboard-header .user-area { order: 4; }
  .dashboard-header #notificacoes-btn,
  .dashboard-header #suporte-btn {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.75rem;
  }
  .dashboard-header #logout-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }
  .dashboard-header .btn-tema-toggle-embutido {
    width: 1.65rem;
    height: 1.65rem;
  }
}

.dashboard-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.dashboard-main .wrap { width: 100%; max-width: 900px; }
.dashboard-main h1 { text-align: center; font-size: 1.3rem; margin-bottom: 0.25rem; }
.dashboard-main .lead { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; }

/* Visão geral (dashboard) tem seções alinhadas à esquerda, diferente do
   título/lead centralizados de cima do grid de módulos. Bem mais larga que o
   .wrap padrão (900px) de propósito — o Painel de Módulos é a tela que mais
   se beneficia de aproveitar telas largas, ocupando o espaço disponível em
   vez de ficar espremido numa coluna central. Alinhado ao topo (não
   centralizado verticalmente) pelo mesmo motivo. */
.dashboard-main .wrap-dashboard { max-width: 1800px; text-align: left; }
.wrap-dashboard #visao-geral-bloco,
.wrap-dashboard #acoes-rapidas-bloco {
  margin-bottom: 1.75rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}
.kpi-card {
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}
.kpi-card:hover { border-color: var(--engrena-primary); transform: translateY(-2px); }
.kpi-card .kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.kpi-card .kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-card.kpi-alerta { border-color: var(--danger); }
.kpi-card.kpi-alerta .kpi-value { color: var(--danger); }

.acoes-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.acao-rapida {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--engrena-border);
  background: var(--engrena-surface);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.acao-rapida:hover { border-color: var(--engrena-primary); color: var(--engrena-primary); background: var(--engrena-surface-alt); }
.acao-rapida-icon { font-size: 1rem; }

/* ---------------------------------------------------------------------- */
/* Programação de Atividades — quadro de técnicos + fila de OS            */
/* ---------------------------------------------------------------------- */
.layout-programacao {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.25rem;
  align-items: start;
}

.fila-item {
  display: block;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius-sm);
  background: var(--engrena-surface);
  cursor: grab;
  transition: border-color 0.15s, background-color 0.15s;
}
.fila-item:hover { border-color: var(--engrena-primary); background: var(--engrena-surface-alt); }
.fila-item.selecionado { border-color: var(--engrena-primary); box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25); }
.fila-item:active { cursor: grabbing; }
.fila-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.25rem; }
.fila-item-link { display: inline-block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--engrena-primary); text-decoration: none; }
.fila-item-link:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .layout-programacao { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Grade de horários (planilha) — colunas de 30min, das 00:00 às 23:30    */
/* ---------------------------------------------------------------------- */
.grade-scroll { overflow-x: auto; }
table.tabela-grade {
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin-top: 0;
  font-size: 0.78rem;
  border-collapse: separate;
  border-spacing: 0;
}
table.tabela-grade th, table.tabela-grade td { padding: 0; border-bottom: 1px solid var(--engrena-border); border-right: 1px solid var(--engrena-border); }
table.tabela-grade .col-tecnico {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--engrena-surface);
  min-width: 148px;
  max-width: 148px;
  padding: 0.45rem 0.6rem !important;
  text-align: left;
  border-right: 2px solid var(--engrena-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
thead .col-tecnico { z-index: 6; background: var(--engrena-surface-alt); }
table.tabela-grade .col-slot {
  min-width: 26px;
  max-width: 26px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.5rem 0.1rem !important;
  background: var(--engrena-surface-alt);
  white-space: nowrap;
}
table.tabela-grade .col-slot-hora { border-left: 1px solid var(--engrena-border); }

tr.linha-equipe td {
  background: var(--engrena-surface-alt);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem !important;
  position: static;
}

.slot-vazio { height: 44px; cursor: pointer; transition: background-color 0.1s; }
.slot-vazio:hover { background: var(--engrena-surface-alt); }
.slot-dragover { background: rgba(30, 136, 229, 0.22) !important; }

.slot-bloco {
  height: 44px;
  cursor: pointer;
  padding: 0 0.35rem !important;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}
/* Estado real da alocação (ver estadoAlocacao em programacao-atividades.js):
   "pendente" (tom escuro/neutro, ninguém iniciou ainda) -> "em_execucao"
   (tom claro, preenchendo da esquerda pra direita conforme o tempo passa
   desde o clique real em Iniciar) -> "concluida" (tom de sucesso, sólido). */
.slot-bloco.bloco-pendente { background: rgba(30, 136, 229, 0.22); color: var(--engrena-primary); }
.slot-bloco.bloco-em_execucao { color: #ffffff; }
.slot-bloco.bloco-em_execucao .cell-num { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.slot-bloco.bloco-concluida { background: rgba(23, 184, 151, 0.2); color: var(--engrena-accent); }
.slot-bloco:hover { filter: brightness(1.15); }

/* Bloco de ausência (Atestado/Falta) — ocupa a linha inteira do técnico no
   dia (não tem horário/duração, é o dia todo), com cor própria pra não ser
   confundido com um bloco de OS/tarefa. */
.slot-bloco-ausencia {
  height: 44px;
  cursor: pointer;
  padding: 0 0.6rem !important;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  text-align: left;
}
.slot-bloco-ausencia.ausencia-atestado { background: rgba(229, 72, 77, 0.18); color: #ff8286; }
.slot-bloco-ausencia.ausencia-falta { background: rgba(229, 161, 61, 0.18); color: #f5bd6f; }
.slot-bloco-ausencia:hover { filter: brightness(1.15); }
:root[data-theme="light"] .slot-bloco-ausencia.ausencia-atestado { background: rgba(217, 54, 62, 0.14); color: #b3272e; }
:root[data-theme="light"] .slot-bloco-ausencia.ausencia-falta { background: rgba(185, 116, 10, 0.14); color: #8a5806; }

/* Bloco de tarefa avulsa (sem OS) — mesmas cores de estado do bloco de OS
   (pendente/concluída se aplicam normalmente), só que sem o ícone ▶ de
   execução, já que tarefa avulsa não tem mão de obra vinculada. */
.slot-bloco.bloco-tarefa-pendente { background: rgba(139, 92, 246, 0.22); color: #a78bfa; }
:root[data-theme="light"] .slot-bloco.bloco-tarefa-pendente { background: rgba(109, 40, 217, 0.14); color: #6d28d9; }

@media (max-width: 768px) {
  table.tabela-grade .col-tecnico { min-width: 118px; max-width: 118px; }
}

/* ---------------------------------------------------------------------- */
/* Painel de Módulos — uma seção por módulo (cabeçalho + KPIs/ações         */
/* específicas dele), em vez de um grid genérico de cards + bloco solto de */
/* "ações rápidas" misturando tudo. Módulo sem contrato pra empresa entra   */
/* esmaecido/não clicável (mas continua visível — funciona como vitrine do  */
/* que o sistema oferece).                                                 */
/* ---------------------------------------------------------------------- */
/* Colunas fixas (3 / 2 / 1 conforme a largura), não auto-fit — com um número
   sempre igual de módulos (6), colunas fixas dão cards com a mesma largura
   de verdade em vez do auto-fit reagir ao conteúdo de cada um. A altura de
   cada card é igualada pelo stretch padrão do grid (cada linha estica pro
   tamanho do maior item dela — ver .modulo-secao/.modulo-secao-corpo). */
.modulos-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
@media (max-width: 1180px) {
  .modulos-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .modulos-lista { grid-template-columns: 1fr; }
}

.modulo-secao {
  padding: 1.4rem 1.5rem;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modulo-secao:not(.inativo):hover { border-color: var(--engrena-primary); }

.modulo-secao-cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.modulo-secao-cabecalho .modulo-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--engrena-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.modulo-secao-texto { flex: 1; min-width: 0; }
.modulo-secao-titulo { font-weight: 600; font-size: 1rem; margin: 0; }
.modulo-secao-desc { font-size: 0.78rem; color: var(--text-muted); margin: 0.15rem 0 0; line-height: 1.4; }
.modulo-secao-entrar {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--engrena-primary);
  text-decoration: none;
  white-space: nowrap;
}
.modulo-secao-entrar:hover { text-decoration: underline; }

.modulo-secao-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* margin-top:auto empurra o corpo pro rodapé do card — com todos os cards
     da linha esticados pra mesma altura (stretch padrão do grid), isso evita
     que um card com menos KPIs/ações fique com o conteúdo "flutuando" perto
     do cabeçalho e um vazio estranho embaixo. */
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--engrena-border);
}
.modulo-secao-kpis { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.modulo-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.85rem;
  background: var(--engrena-surface-alt);
  border-radius: var(--radius-sm);
  min-width: 6.5rem;
  flex: 1 1 6.5rem;
  text-decoration: none;
  color: inherit;
}
.modulo-kpi:hover { background: var(--engrena-border); }
.modulo-kpi .valor { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.modulo-kpi.alerta .valor { color: var(--danger); }
.modulo-kpi .rotulo { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.modulo-secao-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Botões de ação rápida do Painel de Módulos — só o ícone fica visível; o
   nome aparece como uma caixinha de texto ao passar o mouse (só aqui, não
   nas barras "acoes-rapidas" de dentro de cada módulo, que continuam com o
   texto sempre visível). */
.modulo-secao-acoes .acao-rapida {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.modulo-secao-acoes .acao-rapida-icon { font-size: 1.2rem; }
.modulo-secao-acoes .acao-rapida::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: #16212e;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}
.modulo-secao-acoes .acao-rapida::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translate(-50%, 4px);
  border: 5px solid transparent;
  border-top-color: #16212e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}
.modulo-secao-acoes .acao-rapida:hover::after,
.modulo-secao-acoes .acao-rapida:hover::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.modulo-secao.inativo {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.modulo-secao.inativo .modulo-secao-cabecalho { cursor: default; }
.modulo-secao.inativo:hover { border-color: var(--engrena-border); }
.modulo-secao-bloqueado {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Shell interno de módulo — sidebar + topbar + conteúdo                   */
/* ---------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  position: relative;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.sidebar-header {
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-header .logo {
  width: 2.35rem; height: 2.35rem; border-radius: var(--radius-sm);
  background: var(--engrena-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: #fff; flex-shrink: 0;
}
.sidebar-header .titulos p { margin: 0; }
.sidebar-header .modulo-nome { font-size: 0.9rem; font-weight: 600; line-height: 1.2; color: #fff; }
.sidebar-header .empresa-nome { font-size: 0.7rem; color: var(--sidebar-text-dim); }

/* Logo oficial (logo-engrena.png) — clicável, volta pro Painel de Módulos.
   A imagem-fonte é um template de estoque 2048x2048 com "Brand Name" /
   "Tagline Here" escritos nela; o .logo-crop isola só o ícone da
   engrenagem+E (bounding box real do ícone medido via canvas: x:544-1502,
   y:376-1336 dentro da imagem original — daí o width/left/top abaixo). */
a.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
a.logo-link:hover { opacity: 0.75; }
.logo-crop {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.logo-crop img {
  display: block;
  width: 84px;
  height: 84px;
  max-width: none;
  object-fit: contain;
  position: relative;
  left: -22px;
  top: -15px;
}

.sidebar-back {
  display: block;
  padding: 0.7rem 1.1rem;
  font-size: 0.78rem;
  color: var(--sidebar-text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-back:hover { color: #fff; background: var(--sidebar-hover); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover { background-color: var(--sidebar-hover); color: #fff; }
.nav-link.active {
  background: var(--engrena-primary);
  color: #ffffff;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 1rem;
}
.sidebar-footer .usuario-nome { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.1rem; color: #fff; }
.sidebar-footer .usuario-email { font-size: 0.7rem; color: var(--sidebar-text-dim); margin: 0 0 0.7rem; word-break: break-all; }
.sidebar-footer button { width: 100%; }
.sidebar-footer button.secondary {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text);
  border-color: var(--sidebar-border);
}
.sidebar-footer button.secondary:hover { color: #fff; border-color: var(--sidebar-text-dim); }

.sidebar-backdrop { display: none; }

.content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 56px;
  border-bottom: 1px solid var(--engrena-border);
  background-color: var(--engrena-surface);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
}

.sidebar-hamburger {
  display: none;
  width: 2.2rem;
  height: 2.2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--engrena-border);
  background: var(--engrena-surface);
  color: var(--text-primary);
  padding: 0;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Responsivo — sidebar vira gaveta abaixo de 768px                       */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sidebar-hamburger { display: flex; }
  .sidebar {
    position: fixed;
    left: -248px;
    top: 0;
    height: 100dvh;
    transition: left 0.2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  .app-shell.sidebar-aberta .sidebar { left: 0; }
  .app-shell.sidebar-aberta .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 39;
  }
  .page-content { padding: 1rem !important; }
  .topbar { padding: 0 1rem; }
  .form-row { flex-wrap: wrap; }
  .modal-backdrop { padding: 1.25rem 0.6rem; align-items: center; }
}
.topbar h2 { margin: 0; margin-right: auto; font-size: 1rem; font-weight: 600; }

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
}

table { table-layout: auto; }


/* ---------------------------------------------------------------------- */
/* Cards de status de módulo (visão geral dentro de Cadastros, se usado)   */
/* ---------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.status-card {
  background: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  border-radius: 0.75rem;
  padding: 1rem;
}
.status-card.ativo { border-left: 4px solid var(--engrena-accent); }
.status-card.inativo { border-left: 4px solid var(--danger); opacity: 0.7; }
.status-card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.status-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Modal                                                                   */
/* ---------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  overflow-y: auto;
  z-index: 100;
}
.modal-backdrop.hidden { display: none; }
.modal-box {
  width: 100%;
  max-width: 640px;
  padding: 1.5rem;
}
.modal-box .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-box .modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-box .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 0.2rem 0.5rem;
}
.modal-box form.inline-form { margin-top: 0; border: none; padding: 0; background: none; }

/* ---------------------------------------------------------------------- */
/* Grupo de checkboxes (filtros múltiplos)                                */
/* ---------------------------------------------------------------------- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}
.checkbox-group input[type="checkbox"],
.checkbox-group input[type="radio"] {
  width: auto;
  min-width: 0;
  accent-color: var(--engrena-primary);
}
.filtros-historico {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.filtros-historico .grupo { display: flex; flex-direction: column; gap: 0.4rem; }
.filtros-historico .grupo > span { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* Linha expansível da tabela de clientes */
tr.linha-expandida { background-color: var(--engrena-surface-alt); }
.expand-toggle {
  background: none;
  border: none;
  color: var(--engrena-primary);
  padding: 0;
  font-size: 0.85rem;
}
.painel-expandido td {
  background: var(--engrena-surface-alt);
  padding: 1rem;
}

/* ---------------------------------------------------------------------- */
/* Formulários de modal em linhas proporcionais (Fornecedor, Cliente,      */
/* Equipamento, NF de Entrada) — cada .form-row é uma linha com colunas de */
/* largura fixa por peso (flex-2/flex-1/flex-narrow), em vez de um        */
/* flex-wrap solto que deixava os campos com larguras desproporcionais.   */
/* ---------------------------------------------------------------------- */
.form-row {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.form-row > label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 0;
}
/* !important necessário: o seletor global de input (linha ~115) usa dois
   :not(), o que dá a ele mais especificidade que ".form-row > label input"
   — sem isso, campos em .flex-narrow (ex.: Nº, UF) ficam maiores que a
   coluna e sobrepõem o campo vizinho (mesmo bug identificado na Proposta). */
.form-row > label input,
.form-row > label select {
  width: 100%;
  min-width: 0 !important;
}
.form-row .flex-2 { flex: 2; }
.form-row .flex-1 { flex: 1; }
.form-row .flex-narrow { flex: 0 0 100px; }
.form-row .campo-obrigatorio::after {
  content: ' *';
  color: var(--danger);
}

.form-section-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-top: 1px solid var(--engrena-border);
  padding-top: 1rem;
  margin: 0.25rem 0 1rem;
}

/* ---------------------------------------------------------------------- */
/* Título/subtítulo de card — cabeçalho de um bloco de conteúdo dentro de   */
/* um .card (gráfico, tabela, painel) — NÃO tem a borda superior do        */
/* .form-section-titulo (que é pra separar seções de formulário), e não    */
/* usa <h3> puro (herda tamanho/peso padrão do navegador, destoa do resto   */
/* do app). Sempre par: título + subtítulo explicando o que o bloco mostra. */
/* ---------------------------------------------------------------------- */
.card-titulo {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.card-subtitulo {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

/* Padding padrão pra um .card usado como painel de conteúdo solto (sem     */
/* tabela/grade própria já cuidando do espaçamento interno).                */
.card-pad { padding: 1.1rem; }

/* Caixa de altura fixa pra um <canvas> de gráfico — Chart.js precisa de um
   contêiner com altura definida pra responsive:true funcionar direito. */
.chart-box { position: relative; width: 100%; height: 20rem; }

/* ---------------------------------------------------------------------- */
/* Formulário em grid (Equipes e Técnicos) — linhas com número de colunas  */
/* fixo, em vez do sistema de pesos flex do .form-row.                    */
/* ---------------------------------------------------------------------- */
.modal-box.modal-box-larga { max-width: 980px; }
.form-grid {
  display: grid;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  align-items: end;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--text-muted);
  gap: 0.25rem;
}
.form-grid label input, .form-grid label select { width: 100%; min-width: 0 !important; }
.form-grid button { height: 2.35rem; align-self: end; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr !important; }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.modal-footer button.secondary { min-width: 100px; }

/* Modal Nova OS: Cancelar / Abrir OS dividem a largura igualmente, em vez
   de ficarem só encostados à direita com tamanhos diferentes. */
#os-form .modal-footer button { flex: 1; }

.hidden { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Autocomplete (busca de equipamento/produto em Movimentações)            */
/* ---------------------------------------------------------------------- */
.autocomplete-resultados {
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--engrena-border);
  border-radius: 0.5rem;
  background: var(--engrena-surface-alt);
}
.autocomplete-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.autocomplete-item:hover { background: var(--engrena-border); }
.autocomplete-vazio { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-muted); }

.item-saida {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--engrena-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.item-saida .item-saida-info { flex: 1; min-width: 0; }
.item-saida .item-saida-info p { margin: 0; font-size: 0.8rem; }
.item-saida .item-saida-info .muted { font-size: 0.72rem; }
.item-saida input[type="number"] { width: 90px; min-width: 0; }

/* ---------------------------------------------------------------------- */
/* Recibo de saída (impressão)                                             */
/* ---------------------------------------------------------------------- */
.recibo-print {
  background: #ffffff;
  color: #101820;
  border-radius: 0.5rem;
  padding: 1.25rem;
  font-size: 0.85rem;
}
.recibo-print table { width: 100%; border-collapse: collapse; background: #fff; color: #101820; margin: 0.75rem 0; }
.recibo-print th, .recibo-print td { border-bottom: 1px solid #ccc; padding: 0.35rem 0.4rem; text-align: left; background: #fff; }
.recibo-print th { font-size: 0.7rem; text-transform: uppercase; color: #555; }
.recibo-print .recibo-titulo { font-weight: 700; margin: 0 0 0.75rem; }
.recibo-print .recibo-total { text-align: right; font-weight: 700; margin-top: 0.5rem; }
.recibo-print .recibo-assinaturas { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 3rem; }
.recibo-print .recibo-assinatura { flex: 1; min-width: 200px; border-top: 1px solid #101820; padding-top: 0.4rem; text-align: center; font-size: 0.75rem; }

/* ---------------------------------------------------------------------- */
/* Impressão da OS — cores e tamanhos fixos (não herda tema claro/escuro   */
/* da tela; página impressa é sempre clara), pensado pra caber bem numa    */
/* folha A4.                                                               */
/* ---------------------------------------------------------------------- */
.os-print {
  background: #ffffff;
  color: #16212e;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 8.5pt;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  min-height: 770pt;
}
.os-print-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #0b2c4d;
  color: #ffffff;
  padding: 8pt 12pt;
  border-radius: 4pt;
  margin-bottom: 8pt;
}
.os-print-marca { display: flex; align-items: center; gap: 7pt; }
.os-print-logo {
  width: 24pt;
  height: 24pt;
  border-radius: 4pt;
  background: #1e88e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 8pt;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.os-print-logo.os-print-logo-img { background: #ffffff; padding: 1.5pt; }
.os-print-logo img { width: 100%; height: 100%; object-fit: contain; }
.os-print-marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.os-print-marca-texto strong { font-size: 10pt; }
.os-print-marca-texto span { font-size: 7pt; color: #cfe0f0; }
.os-print-numero { text-align: right; }
.os-print-numero > span:first-child { display: block; font-size: 11.5pt; font-weight: 700; margin-bottom: 2pt; }
.os-print-status {
  display: inline-block;
  padding: 1.5pt 7pt;
  border-radius: 20pt;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #dbeafe;
  color: #1d4ed8;
}
.os-print-status.os-print-status-sucesso { background: #d1fae5; color: #047857; }
.os-print-status.os-print-status-perigo { background: #fee2e2; color: #b91c1c; }

.os-print-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5pt 12pt;
  padding: 6pt 10pt;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
  margin-bottom: 8pt;
}
.os-print-info-item { display: flex; flex-direction: column; gap: 1pt; min-width: 0; }
.os-print-label { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6b7d; }
.os-print-info-item > span:last-child { font-weight: 600; overflow-wrap: break-word; }

.os-print-secao { margin-bottom: 7pt; break-inside: avoid; page-break-inside: avoid; }
.os-print-secao-titulo {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #16212e;
  border-bottom: 1.5pt solid #0b2c4d;
  padding-bottom: 2pt;
  margin-bottom: 4pt;
}
.os-print-motivo {
  margin: 0;
  padding: 5pt 8pt;
  background: #f5f7fa;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
}

.os-print-imagens { display: flex; gap: 8pt; flex-wrap: wrap; }
.os-print-imagens img {
  width: 47%;
  max-height: 170pt;
  object-fit: cover;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
}

.os-print-tabela { width: 100%; border-collapse: collapse; }
.os-print-tabela th {
  text-align: left;
  font-size: 6.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: #0b2c4d;
  padding: 3pt 5pt;
}
.os-print-tabela th.num, .os-print-tabela td.num { text-align: right; }
.os-print-tabela td { font-size: 7.5pt; padding: 2.5pt 5pt; border-bottom: 0.75pt solid #e2e8f0; }
.os-print-tabela tbody tr:nth-child(even) { background: #f5f7fa; }
.os-print-tabela tfoot td {
  font-weight: 700;
  border-top: 1.5pt solid #0b2c4d;
  border-bottom: none;
  padding-top: 4pt;
}
.os-print-vazio { text-align: center; font-style: italic; color: #5b6b7d; padding: 6pt 5pt; }

.os-print-assinaturas { display: flex; gap: 24pt; margin-top: auto; padding-top: 16pt; break-inside: avoid; page-break-inside: avoid; }
.os-print-assinatura {
  flex: 1;
  border-top: 1pt solid #16212e;
  padding-top: 4pt;
  text-align: center;
  font-size: 7.5pt;
  color: #5b6b7d;
}
.os-print-rodape { margin-top: 8pt; padding-top: 4pt; border-top: 0.5pt solid #dce3ea; text-align: center; font-size: 6.5pt; color: #5b6b7d; }

/* ---------------------------------------------------------------------- */
/* Impressão da Proposta — mesmo padrão da impressão da OS: cores e        */
/* tamanhos fixos, independente do tema, pensado pra caber numa folha A4.  */
/* ---------------------------------------------------------------------- */
.proposta-print {
  background: #ffffff;
  color: #16212e;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 8.5pt;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  min-height: 770pt;
}
.proposta-print-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #0b2c4d;
  color: #ffffff;
  padding: 8pt 12pt;
  border-radius: 4pt;
  margin-bottom: 8pt;
}
.proposta-print-marca { display: flex; align-items: center; gap: 7pt; }
.proposta-print-logo {
  width: 24pt;
  height: 24pt;
  border-radius: 4pt;
  background: #1e88e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 8pt;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.proposta-print-logo.proposta-print-logo-img { background: #ffffff; padding: 1.5pt; }
.proposta-print-logo img { width: 100%; height: 100%; object-fit: contain; }
.proposta-print-marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.proposta-print-marca-texto strong { font-size: 10pt; }
.proposta-print-marca-texto span { font-size: 7pt; color: #cfe0f0; }
.proposta-print-numero { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2pt; }
.proposta-print-numero > span:first-child { font-size: 11.5pt; font-weight: 700; }
.proposta-print-status {
  display: inline-block;
  padding: 1.5pt 7pt;
  border-radius: 20pt;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #dbeafe;
  color: #1d4ed8;
}
.proposta-print-status.proposta-print-status-sucesso { background: #d1fae5; color: #047857; }
.proposta-print-status.proposta-print-status-perigo { background: #fee2e2; color: #b91c1c; }

.proposta-print-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5pt 12pt;
  padding: 6pt 10pt;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
  margin-bottom: 8pt;
}
.proposta-print-info-item { display: flex; flex-direction: column; gap: 1pt; min-width: 0; }
.proposta-print-label { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6b7d; }
.proposta-print-info-item > span:last-child { font-weight: 600; overflow-wrap: break-word; }

.proposta-print-secao { margin-bottom: 7pt; break-inside: avoid; page-break-inside: avoid; }
.proposta-print-secao-titulo {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #16212e;
  border-bottom: 1.5pt solid #0b2c4d;
  padding-bottom: 2pt;
  margin-bottom: 4pt;
}
.proposta-print-motivo {
  margin: 0;
  padding: 5pt 8pt;
  background: #f5f7fa;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
}

.proposta-print-tabela { width: 100%; border-collapse: collapse; }
.proposta-print-tabela th {
  text-align: left;
  font-size: 6.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: #0b2c4d;
  padding: 3pt 5pt;
}
.proposta-print-tabela th.num, .proposta-print-tabela td.num { text-align: right; }
.proposta-print-tabela td { font-size: 7.5pt; padding: 2.5pt 5pt; border-bottom: 0.75pt solid #e2e8f0; }
.proposta-print-tabela tbody tr:nth-child(even) { background: #f5f7fa; }
.proposta-print-tabela tfoot td {
  font-weight: 700;
  border-top: 1.5pt solid #0b2c4d;
  border-bottom: none;
  padding-top: 4pt;
}
.proposta-print-vazio { text-align: center; font-style: italic; color: #5b6b7d; padding: 6pt 5pt; }

.proposta-print-totais {
  display: flex;
  flex-direction: column;
  gap: 3pt;
  width: 220pt;
  margin-left: auto;
  margin-top: auto;
  break-inside: avoid;
  page-break-inside: avoid;
  padding: 6pt 9pt;
  border: 1pt solid #dce3ea;
  border-radius: 4pt;
}
.proposta-print-totais > div { display: flex; justify-content: space-between; gap: 10pt; }
.proposta-print-totais > div span:first-child { color: #5b6b7d; }
.proposta-print-total-final {
  border-top: 1.5pt solid #0b2c4d;
  margin-top: 3pt;
  padding-top: 4pt;
  font-size: 10pt;
  font-weight: 700;
}

.proposta-print-rodape { margin-top: 8pt; padding-top: 4pt; border-top: 0.5pt solid #dce3ea; text-align: center; font-size: 6.5pt; color: #5b6b7d; }

/* ---------------------------------------------------------------------- */
/* Impressão dos Relatórios de Pessoas (Absenteísmo, Horas Extras, Horas   */
/* Trabalhadas, Comissões) — mesmo padrão visual do os-print/proposta-     */
/* print (fundo sempre claro, pensado pra A4), mas mais compacto: pode ter */
/* várias seções empilhadas no mesmo documento, então densidade importa    */
/* mais aqui do que numa OS/Proposta única.                                */
/* ---------------------------------------------------------------------- */
.rh-print {
  background: #ffffff;
  color: #16212e;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 7pt;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  min-height: 770pt;
}
.rh-print-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #0b2c4d;
  color: #ffffff;
  padding: 5pt 9pt;
  border-radius: 3pt;
  margin-bottom: 5pt;
}
.rh-print-marca { display: flex; align-items: center; gap: 6pt; }
.rh-print-logo {
  width: 18pt;
  height: 18pt;
  border-radius: 3pt;
  background: #1e88e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 7pt;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.rh-print-logo.rh-print-logo-img { background: #ffffff; padding: 1pt; }
.rh-print-logo img { width: 100%; height: 100%; object-fit: contain; }
.rh-print-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.rh-print-marca-texto strong { font-size: 8.5pt; }
.rh-print-marca-texto span { font-size: 6pt; color: #cfe0f0; }
.rh-print-numero { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1pt; }
.rh-print-numero > span:first-child { font-size: 9pt; font-weight: 700; }
.rh-print-numero > span:last-child { font-size: 6pt; color: #cfe0f0; }

.rh-print-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2pt 10pt;
  padding: 3pt 8pt;
  border: 0.75pt solid #dce3ea;
  border-radius: 3pt;
  margin-bottom: 5pt;
}
.rh-print-info-item { display: flex; flex-direction: column; gap: 0.5pt; min-width: 0; }
.rh-print-label { font-size: 5.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6b7d; }
.rh-print-info-item > span:last-child { font-weight: 600; font-size: 7pt; overflow-wrap: break-word; }

.rh-print-secao { margin-bottom: 5pt; break-inside: avoid; page-break-inside: avoid; }
.rh-print-secao-titulo {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #16212e;
  border-bottom: 1.25pt solid #0b2c4d;
  padding-bottom: 1.5pt;
  margin-bottom: 2.5pt;
}
.rh-print-resumo {
  margin: 0 0 3pt;
  padding: 3pt 6pt;
  background: #f5f7fa;
  border: 0.75pt solid #dce3ea;
  border-radius: 3pt;
  display: flex;
  flex-wrap: wrap;
  gap: 2pt 12pt;
}
.rh-print-resumo-item { display: flex; flex-direction: column; gap: 0.5pt; }
.rh-print-resumo-item strong { font-size: 8pt; }
.rh-print-resumo-item span { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 0.03em; color: #5b6b7d; }

.rh-print-tabela { width: 100%; border-collapse: collapse; }
.rh-print-tabela th {
  text-align: left;
  font-size: 5.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #0b2c4d;
  padding: 1.5pt 4pt;
}
.rh-print-tabela th.num, .rh-print-tabela td.num { text-align: right; }
.rh-print-tabela td { font-size: 6.5pt; padding: 1.25pt 4pt; border-bottom: 0.5pt solid #e2e8f0; }
.rh-print-tabela tbody tr:nth-child(even) { background: #f5f7fa; }
.rh-print-tabela tfoot td { font-weight: 700; border-top: 1.25pt solid #0b2c4d; border-bottom: none; padding-top: 2.5pt; }
.rh-print-vazio { text-align: center; font-style: italic; color: #5b6b7d; padding: 3pt 4pt; }

.rh-print-rodape { margin-top: auto; padding-top: 2.5pt; border-top: 0.5pt solid #dce3ea; text-align: center; font-size: 5.5pt; color: #5b6b7d; }

/* ---------------------------------------------------------------------- */
/* Impressão dos Relatórios Financeiros (Visão Geral, Inadimplência,       */
/* Fornecedores a Pagar, Ranking de Clientes, Custos com Pessoal) — mesmo  */
/* padrão compacto do rh-print (várias seções empilhadas no mesmo          */
/* documento, densidade importa mais que numa OS/Proposta única).          */
/* ---------------------------------------------------------------------- */
.fin-print {
  background: #ffffff;
  color: #16212e;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 7pt;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  min-height: 770pt;
}
.fin-print-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #0b2c4d;
  color: #ffffff;
  padding: 5pt 9pt;
  border-radius: 3pt;
  margin-bottom: 5pt;
}
.fin-print-marca { display: flex; align-items: center; gap: 6pt; }
.fin-print-logo {
  width: 18pt;
  height: 18pt;
  border-radius: 3pt;
  background: #1e88e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 7pt;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.fin-print-logo.fin-print-logo-img { background: #ffffff; padding: 1pt; }
.fin-print-logo img { width: 100%; height: 100%; object-fit: contain; }
.fin-print-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.fin-print-marca-texto strong { font-size: 8.5pt; }
.fin-print-marca-texto span { font-size: 6pt; color: #cfe0f0; }
.fin-print-numero { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1pt; }
.fin-print-numero > span:first-child { font-size: 9pt; font-weight: 700; }
.fin-print-numero > span:last-child { font-size: 6pt; color: #cfe0f0; }

.fin-print-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2pt 10pt;
  padding: 3pt 8pt;
  border: 0.75pt solid #dce3ea;
  border-radius: 3pt;
  margin-bottom: 5pt;
}
.fin-print-info-item { display: flex; flex-direction: column; gap: 0.5pt; min-width: 0; }
.fin-print-label { font-size: 5.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6b7d; }
.fin-print-info-item > span:last-child { font-weight: 600; font-size: 7pt; overflow-wrap: break-word; }

.fin-print-secao { margin-bottom: 5pt; break-inside: avoid; page-break-inside: avoid; }
.fin-print-secao-titulo {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #16212e;
  border-bottom: 1.25pt solid #0b2c4d;
  padding-bottom: 1.5pt;
  margin-bottom: 2.5pt;
}
.fin-print-resumo {
  margin: 0 0 3pt;
  padding: 3pt 6pt;
  background: #f5f7fa;
  border: 0.75pt solid #dce3ea;
  border-radius: 3pt;
  display: flex;
  flex-wrap: wrap;
  gap: 2pt 12pt;
}
.fin-print-resumo-item { display: flex; flex-direction: column; gap: 0.5pt; }
.fin-print-resumo-item strong { font-size: 8pt; }
.fin-print-resumo-item strong.fin-print-negativo { color: #b91c1c; }
.fin-print-resumo-item strong.fin-print-positivo { color: #047857; }
.fin-print-resumo-item span { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 0.03em; color: #5b6b7d; }

.fin-print-tabela { width: 100%; border-collapse: collapse; }
.fin-print-tabela th {
  text-align: left;
  font-size: 5.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #0b2c4d;
  padding: 1.5pt 4pt;
}
.fin-print-tabela th.num, .fin-print-tabela td.num { text-align: right; }
.fin-print-tabela td { font-size: 6.5pt; padding: 1.25pt 4pt; border-bottom: 0.5pt solid #e2e8f0; }
.fin-print-tabela tbody tr:nth-child(even) { background: #f5f7fa; }
.fin-print-tabela td.fin-print-atraso-alto { color: #b91c1c; font-weight: 700; }
.fin-print-vazio { text-align: center; font-style: italic; color: #5b6b7d; padding: 3pt 4pt; }

.fin-print-rodape { margin-top: auto; padding-top: 2.5pt; border-top: 0.5pt solid #dce3ea; text-align: center; font-size: 5.5pt; color: #5b6b7d; }

/* Usado na impressão/PDF em lote (várias OS/Propostas/NFs de uma vez) —
   força cada registro a começar numa página nova, exceto o primeiro. */
.quebra-pagina-antes { break-before: page; page-break-before: always; }

/* ---------------------------------------------------------------------- */
/* Evidências fotográficas da OS — grade de miniaturas + área de           */
/* arrastar-e-soltar (que também funciona como botão pra abrir a           */
/* câmera/galeria no celular, via <input type="file" accept="image/*">).   */
/* ---------------------------------------------------------------------- */
.os-imagens-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.os-imagens-grid:empty { margin-bottom: 0; }
.os-imagem-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--engrena-border);
  background: var(--engrena-surface);
}
.os-imagem-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.os-imagem-remover {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 24, 30, 0.62);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.os-imagem-remover:hover { background: var(--danger); }
.os-imagem-thumb-carregando img { opacity: 0.45; }
.os-imagem-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin: -0.8rem 0 0 -0.8rem;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: os-imagem-girar 0.7s linear infinite;
}
@keyframes os-imagem-girar {
  to { transform: rotate(360deg); }
}
.os-imagens-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed var(--engrena-border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.os-imagens-dropzone:hover,
.os-imagens-dropzone.dragover {
  border-color: var(--engrena-primary);
  background: rgba(30, 136, 229, 0.08);
}
.os-imagens-dropzone-icone { font-size: 1.5rem; }
.os-imagens-dropzone.hidden { display: none; }

/* Dois botões explícitos (câmera / galeria) em vez de deixar o navegador
   escolher o que oferecer — em vários Android/iOS, um <input type=file>
   sozinho (mesmo via <label>) às vezes só abre a galeria, sem opção de
   câmera. capture="environment" no input força a câmera diretamente. */
.os-imagens-botoes {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.25rem;
}
label.os-imagens-botao {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.9rem 0.6rem;
  border: 1.5px solid var(--engrena-border);
  border-radius: var(--radius-sm);
  background-color: var(--engrena-surface);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
label.os-imagens-botao .os-imagens-botao-icone { font-size: 1.4rem; }
label.os-imagens-botao:hover,
label.os-imagens-botao:active {
  border-color: var(--engrena-primary);
  color: var(--engrena-primary);
  background: rgba(30, 136, 229, 0.08);
}

@media print {
  @page { margin: 12mm; }
  /* body::before não é pego pelo "body *" abaixo (pseudo-elemento não é
     descendente) — sem isso a marca d'água vazaria pro PDF/impressão de
     OS, Proposta e Nota Fiscal. */
  body::before { display: none; }
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .no-print { display: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Portal do Cliente — acompanhamento executivo de OS                     */
/* ---------------------------------------------------------------------- */
.portal-hero {
  background: linear-gradient(135deg, var(--engrena-primary), var(--engrena-accent));
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.portal-hero-info { min-width: 0; }
.portal-hero-numero { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.3rem; letter-spacing: 0.01em; }
.portal-hero-sub { font-size: 0.9rem; margin: 0; opacity: 0.92; }
.portal-hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.portal-hero-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}
.portal-hero-badge.portal-hero-badge-alerta { background: rgba(0, 0, 0, 0.3); }

.portal-stepper { display: flex; align-items: flex-start; margin: 0 0 1.75rem; padding: 0.25rem 0.5rem 0; }
.portal-stepper.portal-stepper-cancelado { opacity: 0.55; filter: grayscale(0.5); }
.portal-etapa { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; min-width: 0; }
.portal-etapa-linha { position: absolute; top: 1.15rem; left: 50%; right: -50%; height: 3px; background: var(--engrena-border); z-index: 0; }
.portal-etapa:last-child .portal-etapa-linha { display: none; }
.portal-etapa-dot {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--engrena-border);
  background: var(--engrena-surface);
  color: var(--text-muted);
  z-index: 1;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.portal-etapa-label { margin-top: 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); max-width: 130px; }
.portal-etapa-data { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem; }
.portal-etapa.concluida .portal-etapa-dot { background: var(--engrena-accent); border-color: var(--engrena-accent); color: #fff; }
.portal-etapa.concluida .portal-etapa-linha { background: var(--engrena-accent); }
.portal-etapa.concluida .portal-etapa-label { color: var(--text-primary); }
.portal-etapa.ativa .portal-etapa-dot { background: var(--engrena-primary); border-color: var(--engrena-primary); color: #fff; transform: scale(1.14); }
.portal-etapa.ativa .portal-etapa-label { color: var(--text-primary); }
.portal-etapa.pausada .portal-etapa-dot { background: var(--warning); border-color: var(--warning); color: #fff; }
.portal-etapa-nota-pausada { font-size: 0.65rem; font-weight: 700; color: var(--warning); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.03em; }

.portal-secao { margin-bottom: 1.5rem; }
.portal-secao-titulo { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.85rem; }
.portal-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
.portal-info-item { background: var(--engrena-surface-alt); border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.portal-info-item .portal-info-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.portal-info-item .portal-info-valor { font-size: 1rem; font-weight: 600; }

.portal-lista-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.5rem; }
.portal-lista-card {
  cursor: pointer;
  padding: 1.5rem 1.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.portal-lista-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(8, 14, 22, 0.22); border-color: var(--engrena-primary); }
:root[data-theme="light"] .portal-lista-card:hover { box-shadow: 0 10px 28px rgba(16, 30, 45, 0.12); }

.portal-card-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.25rem; }
.portal-card-numero { font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: 0.01em; }
.portal-card-equipamento { font-size: 0.85rem; color: var(--text-muted); margin: 0.3rem 0 0; }
.portal-card-cabecalho .badge { font-size: 0.75rem; padding: 0.3rem 0.75rem; flex-shrink: 0; }

.portal-card-motivo {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--engrena-border);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portal-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--engrena-border);
}
.portal-card-stat { display: flex; flex-direction: column; gap: 0.3rem; min-width: 90px; }
.portal-card-stat-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.portal-card-stat-valor { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.portal-card-stat .badge { align-self: flex-start; font-size: 0.62rem; margin-top: 0.1rem; }

/* Variante compacta do stepper executivo (mesmo componente do pop-up),
   usada dentro dos cards da lista — dots e textos menores pra caber ao
   lado das outras informações do card sem dominar o espaço. */
.portal-stepper.portal-stepper-compacto { margin: 1.1rem 0 0.4rem; }
.portal-stepper-compacto .portal-etapa-dot { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
.portal-stepper-compacto .portal-etapa-linha { top: 0.92rem; }
.portal-stepper-compacto .portal-etapa-label { font-size: 0.66rem; margin-top: 0.4rem; }
.portal-stepper-compacto .portal-etapa-data { font-size: 0.6rem; }
.portal-stepper-compacto .portal-etapa.ativa .portal-etapa-dot { transform: scale(1.1); }

/* Cabeçalho do portal — marca da prestadora à esquerda, título centralizado,
   ações à direita. Sobrepõe o flex padrão do .topbar (que empurra tudo pra
   direita via "h2 { margin-right: auto }") com um grid de 3 colunas. */
.portal-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.portal-topbar-marca { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.portal-topbar-logo {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--engrena-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--engrena-primary);
  overflow: hidden;
  flex-shrink: 0;
}
.portal-topbar-logo img { width: 100%; height: 100%; object-fit: contain; }
.portal-topbar-empresa-nome { margin: 0; margin-right: 0; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-topbar-empresa-cnpj { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--text-muted); }
.portal-topbar-titulo { margin: 0; margin-right: 0; font-size: 1.05rem; text-align: center; white-space: nowrap; }
.portal-topbar-acoes { justify-self: end; }
@media (max-width: 720px) {
  .portal-topbar { grid-template-columns: auto 1fr auto; }
  .portal-topbar-titulo { display: none; }
}

/* Nota de "última atualização" no rodapé do card da OS — canto inferior
   direito, discreta, só aparece quando já existe algum evento registrado. */
.portal-card-atualizacao {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--engrena-border);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.4;
}
.portal-card-atualizacao strong { color: var(--text-primary); font-weight: 600; }

/* Relatório de Análise de Causa Raiz (5W2H/Ishikawa) no portal do cliente —
   apresentação "gestor de qualidade": cabeçalho com método/data, problema em
   destaque, os 6 campos do 5W2H em grid, plano de ação destacado. Ciclos
   antigos (se houver mais de uma análise na OS) ficam recolhidos num
   <details>, só o mais recente vem aberto. */
.portal-causa-raiz-intro {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: -0.35rem 0 1rem;
}
.portal-causa-raiz-card {
  background: var(--engrena-surface-alt);
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}
.portal-causa-raiz-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.portal-causa-raiz-metodo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--engrena-primary);
  background: rgba(229, 138, 46, 0.14);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
:root[data-theme="light"] .portal-causa-raiz-metodo { background: rgba(201, 112, 28, 0.12); }
.portal-causa-raiz-data { font-size: 0.72rem; color: var(--text-muted); }
.portal-causa-raiz-bloco { margin-bottom: 1.1rem; }
.portal-causa-raiz-bloco:last-child { margin-bottom: 0; }
.portal-causa-raiz-bloco-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.portal-causa-raiz-problema {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--engrena-surface);
  border-left: 3px solid var(--engrena-danger, #e5484d);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.portal-causa-raiz-5w2h {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.portal-causa-raiz-5w2h-item { background: var(--engrena-surface); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; }
.portal-causa-raiz-5w2h-item .rotulo { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 0.25rem; }
.portal-causa-raiz-5w2h-item .valor { font-size: 0.85rem; line-height: 1.4; }
.portal-causa-raiz-plano {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--engrena-surface);
  border-left: 3px solid var(--engrena-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
details.portal-causa-raiz-historico { margin-top: 0.5rem; }
details.portal-causa-raiz-historico > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.4rem 0;
}
details.portal-causa-raiz-historico[open] > summary { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------------- */
/* Marca d'água (rodapé) — nome do desenvolvedor + versão, em toda tela.   */
/* Fixa, discreta (baixa opacidade), não intercepta cliques.               */
/* ---------------------------------------------------------------------- */
.marca-dagua-rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.45;
  padding: 0.2rem 0.5rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--engrena-bg, transparent) 40%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Botão "Painel de Administração" — só visível pro desenvolvedor, no      */
/* canto inferior do Painel de Módulos. Fica acima da marca d'água pra     */
/* não sobrepor.                                                          */
/* ---------------------------------------------------------------------- */
.btn-admin-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.75rem;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--engrena-surface);
  border: 1px solid var(--engrena-border);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(8, 14, 22, 0.25);
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn-admin-flutuante:hover { opacity: 1; transform: translateY(-2px); }
:root[data-theme="light"] .btn-admin-flutuante { box-shadow: 0 6px 18px rgba(16, 30, 45, 0.14); }

/* ---------------------------------------------------------------------- */
/* Ícone de mensagem (Suporte) — canto superior direito do Painel de       */
/* Módulos, junto dos outros controles do usuário.                        */
/* ---------------------------------------------------------------------- */
.btn-suporte-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--engrena-surface-alt);
  border: 1px solid var(--engrena-border);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-suporte-icon:hover { border-color: var(--engrena-primary); }
.btn-suporte-icon .badge-nao-lida {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--engrena-primary, #e5484d);
  border: 2px solid var(--engrena-surface);
}

/* ---------------------------------------------------------------------- */
/* Suporte — modal com formulário + histórico de mensagens/respostas.      */
/* Usado tanto no Painel de Módulos (staff) quanto no Painel de            */
/* Administração (thread por empresa).                                    */
/* ---------------------------------------------------------------------- */
.suporte-mensagem-card {
  background: var(--engrena-surface-alt);
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
}
.suporte-mensagem-cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.suporte-mensagem-texto { font-size: 0.88rem; line-height: 1.5; margin: 0; }
.suporte-resposta {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--engrena-surface);
  border-left: 3px solid var(--engrena-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.suporte-resposta-cabecalho { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--engrena-accent); margin-bottom: 0.3rem; }
.suporte-resposta-texto { font-size: 0.85rem; line-height: 1.5; margin: 0; }
.suporte-sem-resposta { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-top: 0.6rem; }
.suporte-responder-form { margin-top: 0.6rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.suporte-responder-form textarea { flex: 1; }

/* ---------------------------------------------------------------------- */
/* Painel de Administração — abas (Empresas / Dashboard)                  */
/* ---------------------------------------------------------------------- */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--engrena-border);
  margin-bottom: 1.25rem;
}
.admin-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.2rem;
  margin-bottom: -1px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-tab-btn:hover { color: var(--text-primary); }
.admin-tab-btn.active { color: var(--engrena-primary); border-bottom-color: var(--engrena-primary); }

/* ---------------------------------------------------------------------- */
/* Card "Banco de Dados" — barra de uso/livre do plano Supabase.          */
/* ---------------------------------------------------------------------- */
.banco-dados-card { padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.banco-dados-barra {
  width: 100%;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--engrena-surface-alt);
  overflow: hidden;
  border: 1px solid var(--engrena-border);
}
.banco-dados-barra-preenchida {
  height: 100%;
  width: 0%;
  background: var(--engrena-primary);
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}
.banco-dados-barra-preenchida.banco-dados-alerta { background: var(--danger); }
.banco-dados-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.banco-dados-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; margin-right: 0.4rem; vertical-align: middle; }
.banco-dados-dot-usado { background: var(--engrena-primary); }

/* ---------------------------------------------------------------------- */
/* Tabela responsiva — abaixo de 680px, cada <tr> vira um card empilhado   */
/* em vez de manter colunas com scroll horizontal apertado. Opt-in via     */
/* classe (não é o padrão de toda tabela do sistema) — usar nas telas de   */
/* campo (Ordens de Serviço, OS Detalhe, Portal do Cliente). Cada <td>     */
/* precisa de um atributo data-label="Nome da coluna" (gerado no JS que    */
/* monta a linha) pra virar o rótulo mostrado acima do valor.              */
/* ---------------------------------------------------------------------- */
@media (max-width: 680px) {
  .tabela-responsiva { border: none; box-shadow: none; background: transparent; margin-top: 0.75rem; }
  .tabela-responsiva thead { display: none; }
  .tabela-responsiva, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td { display: block; width: 100%; }
  .tabela-responsiva tr {
    background: var(--engrena-surface);
    border: 1px solid var(--engrena-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
  }
  .tabela-responsiva tbody tr:hover { background: var(--engrena-surface); }
  .tabela-responsiva td {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--engrena-border);
    word-break: break-word;
  }
  .tabela-responsiva tr td:last-child { border-bottom: none; }
  .tabela-responsiva td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }
  .tabela-responsiva td .acoes-linha { flex-wrap: wrap; }
}
.banco-dados-dot-livre { background: var(--engrena-surface-alt); border: 1px solid var(--engrena-border); }

/* ---------------------------------------------------------------------- */
/* Apontamento de Horas — botões grandes de tipo + cards de lançamento,    */
/* pensados pra toque no celular (tela usada em campo).                   */
/* ---------------------------------------------------------------------- */
.tipo-registro-grupo { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tipo-registro-btn {
  flex: 1;
  min-width: 130px;
  padding: 0.9rem 0.75rem;
  border: 1px solid var(--engrena-border);
  border-radius: var(--radius);
  background: var(--engrena-surface);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.tipo-registro-btn:hover { border-color: var(--engrena-primary); }
.tipo-registro-btn.ativo { border-color: var(--engrena-primary); background: rgba(30, 136, 229, 0.14); color: var(--engrena-primary); }

.apontamento-card {
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.apontamento-card-topo { display: flex; align-items: center; gap: 0.75rem; }
.apontamento-card-data { font-size: 0.85rem; color: var(--text-muted); }
.apontamento-card-detalhes { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; margin-left: auto; }
.apontamento-card .delete-apontamento-btn { flex-shrink: 0; }