@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* prumo.css — base visual comum a todas as telas.
   Antes cada página redefinia cores, tipografia e botões por conta própria, e
   o cabeçalho tinha altura fixa: no celular o título transbordava por cima da
   navegação e a página ganhava rolagem horizontal. */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --dark:        #102d33;
  --dark-2:      #0b2025;
  --cyan:        #078897;
  --cyan-escuro: #056d7a;
  /* usada como fundo de botão/badge com texto branco (4.6:1) */
  --cyan-solido: #06727e;
  --verde-solido: #217a57;
  --cyan-claro:  #78d2d8;

  --bg:          #f5f7f6;
  --superficie:  #ffffff;
  --superficie-2:#fafbfc;
  --borda:       #dce4e2;
  --borda-forte: #bacbc8;

  --txt:         #162d32;
  --txt-med:     #637579;
  --txt-claro:   rgba(255,255,255,.72);

  --verde:       #27ae60;
  --verde-bg:    #d5f5e3;
  --verde-txt:   #1e8449;
  --amarelo:     #f39c12;
  --amarelo-bg:  #fef5e7;
  --amarelo-txt: #b9770e;
  --vermelho:    #e74c3c;
  --vermelho-bg: #fadbd8;
  --vermelho-txt:#c0392b;
  --roxo:        #8e44ad;

  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;

  --sombra-1: 0 1px 2px rgba(16,45,51,.05);
  --sombra-2: 0 2px 8px rgba(16,45,51,.06);
  --sombra-3: 0 8px 24px rgba(16,45,51,.10);

  --fonte:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header-altura: 64px;
}

/* ── Cabeçalho ────────────────────────────────────────────── */
/* min-height em vez de height: o conteúdo pode crescer sem invadir o que vem
   abaixo. flex-wrap deixa a barra quebrar em vez de estourar a largura. */
.p-header {
  background: var(--dark);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: var(--header-altura);
  border-bottom: 1px solid rgba(120,210,216,.3);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
}

.p-marca {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #fff;
  background: var(--cyan);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Marca enviada pela Altus: o fundo branco preserva os traços pretos do
   desenho e mantém o selo legível sobre o cabeçalho escuro. */
.p-marca-logo {
  background: #fff;
  padding: 4px 7px;
  line-height: 0;
}
.p-marca-logo img {
  display: block;
  width: 62px;
  height: 34px;
  object-fit: contain;
}

.p-header-titulo { flex: 1 1 220px; min-width: 0; }
.p-header-titulo h1 {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  /* Título longo vira reticências em vez de empurrar o resto da barra */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-header-titulo p {
  font-size: 11px;
  color: var(--txt-claro);
  margin: 2px 0 0;
  text-transform: uppercase;
  letter-spacing: .4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Painel de ações — fechado por padrão, em qualquer largura.
   Antes ficava tudo aberto na barra. Com a navegação injetada de volta são até
   sete itens, e `flex-wrap` não deixava a largura estourar: em vez disso a
   barra quebrava em duas fileiras espremidas, com "Admin" prensado entre dois
   botões e "Sair" colado na borda. Sete botões não cabem numa barra em largura
   nenhuma — o que fica visível é o contexto (a obra), e a navegação é um menu.
   Absoluto de propósito: no fluxo, abrir empurraria a página inteira. */
.p-header-acoes {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  min-width: 240px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 12px;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  max-height: 75vh;
  overflow-y: auto;
  z-index: 101;
}
.p-header-acoes.aberto { display: flex; }
.p-header-acoes .p-btn { padding: 9px 12px; font-size: 12px; min-height: 34px; width: 100%; justify-content: center; }
.p-header-acoes .p-header-usuario { text-align: center; }

.p-header-usuario {
  font-size: 12px;
  color: var(--txt-claro);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Botão do menu (só no celular) ────────────────────────── */
/* Injetado pelo auth.js em toda tela que tem cabeçalho do sistema. Em tela
   larga fica escondido e a barra de ações continua exatamente como era. */
.p-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  order: 2;
  margin-left: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-sm);
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}
.p-menu-toggle:hover { background: rgba(255,255,255,.2); }
.p-menu-toggle:focus-visible { outline: 2px solid var(--cyan-claro); outline-offset: 2px; }

/* ── Botões ───────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: none;
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .1s, opacity .15s;
  /* alvo de toque confortável no celular */
  min-height: 38px;
}
.p-btn:active { transform: translateY(1px); }
.p-btn:disabled, .p-btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }

.p-btn-primario   { background: var(--dark);   color: #fff; box-shadow: var(--sombra-1); }
.p-btn-primario:hover:not(:disabled) { background: var(--cyan-solido); }
.p-btn-destaque   { background: var(--cyan-solido); color: #fff; box-shadow: 0 2px 8px rgba(21,129,143,.3); }
.p-btn-destaque:hover:not(:disabled) { background: #0f6275; }
.p-btn-sucesso    { background: var(--verde-solido); color: #fff; }
.p-btn-perigo     { background: var(--vermelho); color: #fff; }
.p-btn-neutro     { background: #94a3b8;       color: #fff; }
.p-btn-fantasma {
  background: transparent;
  color: var(--txt-claro);
  border: 1.5px solid rgba(255,255,255,.28);
}
.p-btn-fantasma:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }

/* ── Navegação em abas ────────────────────────────────────── */
/* Rola na horizontal só dentro da própria barra — a página não rola junto. */
.p-abas {
  display: flex;
  gap: 2px;
  background: var(--dark-2);
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: var(--header-altura);
  z-index: 99;
}

/* Com muitas abas (o painel tem 11), o celular não mostra a barra de scroll por
   padrão — sem uma pista, nada indica que dá para arrastar e ver o resto.
   A pista é o degradê na borda, mas ele só faz sentido quando REALMENTE sobra
   conteúdo: fixo no CSS, ele aparecia também numa barra de três abas que cabe
   inteira, virando uma mancha escura sem significado. Quem liga e desliga a
   classe é o ui.js, que sabe medir. */
.p-abas.tem-mais {
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
}
/* No PC a barra NÃO rola: ela quebra.
   Com 11 abas ela precisa de 1774px. Num notebook de 1280px só sete apareciam,
   e as outras quatro — Diário RDO, Antes vs Depois, Relatórios e Ouvidoria —
   ficavam invisíveis, alcançáveis só por quem adivinhasse que dá para arrastar
   a barra de lado. Com mouse, quase ninguém faz isso. Aqui sobra altura e falta
   largura, então quebrar em duas fileiras mostra tudo. No celular é o inverso:
   duas fileiras comeriam a tela, e arrastar de lado é gesto natural no toque. */
@media (min-width: 721px) {
  .p-abas { flex-wrap: wrap; overflow-x: visible; }
}

.p-abas::-webkit-scrollbar { height: 3px; }
.p-abas::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

.p-aba {
  flex: 0 0 auto;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--txt-claro);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-weight: 600;
  letter-spacing: .55px;
  transition: color .15s, border-color .15s;
}
.p-aba:hover { color: #fff; }
.p-aba.ativa { color: var(--cyan-claro); border-bottom-color: var(--cyan); }

/* ── Seletor de obra ──────────────────────────────────────── */
.p-obra {
  padding: 8px 30px 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12) no-repeat right 10px center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color: #fff;
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 600;
  max-width: 260px;
  cursor: pointer;
  appearance: none;
  text-overflow: ellipsis;
}
.p-obra option { color: var(--txt); background: #fff; }
.p-obra:disabled { cursor: default; opacity: .85; }

/* ── Cartão de autenticação ───────────────────────────────── */
/* Login, recuperar senha, redefinir e trocar senha são a MESMA peça: um cartão
   centrado, com identidade institucional e corpo de formulário. Cada uma das
   quatro telas trazia a sua cópia dessa folha, e as cópias divergiram. Aqui a
   peça é uma só.
   `.msg` e `.btn-submit` ficam escopados no cartão de propósito: os nomes são
   genéricos demais para o CSS global, mas o JS das telas escreve
   `className = 'msg ' + tipo` e renomeá-los quebraria as quatro. */
.p-auth {
  /* A fonte estava sendo aplicada pelo `body{font-family}` que cada tela
     repetia. Com as cópias removidas, ninguém mais a aplicava e as quatro
     caíam na serifada padrão do navegador. */
  font-family: var(--fonte);
  color: var(--txt);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background:
    linear-gradient(90deg, rgba(7,136,151,.08) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, rgba(7,136,151,.06) 1px, transparent 1px) 0 0 / 48px 48px,
    #eef2f1;
}
.p-auth-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(16,45,51,.12);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}
.p-auth-topo {
  background: var(--dark);
  padding: 26px 32px 24px;
  text-align: left;
  border-bottom: 3px solid var(--cyan);
}
.p-auth-selo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(120,210,216,.45);
  color: #fff;
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
}
.p-auth-selo::after {
  content: 'FISCALIZAÇÃO';
  color: var(--cyan-claro);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .9px;
}
.p-auth-topo h1 {
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 25px; font-weight: 600; letter-spacing: -.35px; line-height: 1.15;
  margin: 0;
}
.p-auth-topo p {
  color: var(--txt-claro);
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .35px;
  margin: 7px 0 0;
  text-transform: uppercase;
}
.p-auth-corpo { padding: 26px 32px 30px; }

.p-campo { margin-bottom: 16px; }
.p-campo label {
  display: block;
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--txt-med);
  margin-bottom: 5px;
}
.p-campo input, .p-campo select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--borda-forte);
  border-radius: 4px;
  font-family: var(--fonte);
  font-size: 15px;
  color: var(--txt);
  background: var(--superficie-2);
  transition: border-color .15s, box-shadow .15s;
}
.p-campo input:focus, .p-campo select:focus {
  border-color: var(--cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(32,176,208,.18);
}

.p-auth-nota {
  font-size: 12px; line-height: 1.6;
  color: var(--txt-med);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: #f4f7f6;
  border-left: 3px solid var(--cyan);
  border-radius: 0;
}
.p-auth-voltar {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--txt-med);
  text-decoration: none;
}
.p-auth-voltar:hover { color: var(--dark); text-decoration: underline; }

.p-auth-card .btn-submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-size: 13px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.p-auth-card .btn-submit:hover:not(:disabled) { background: var(--cyan-solido); }
.p-auth-card .btn-submit:disabled { background: #94a3b8; cursor: not-allowed; }

.p-auth-card .msg {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  display: none;
}
.p-auth-card .msg.erro { display: block; background: var(--vermelho-bg); color: var(--vermelho-txt); }
.p-auth-card .msg.ok   { display: block; background: var(--verde-bg);    color: var(--verde-txt); }

/* Status da fila offline: discreto no campo, mas sempre acessível para o
   fiscal saber se um registro já chegou ao servidor. */
.p-sync-status {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: min(300px, calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 5px;
  background: #fff;
  color: var(--txt-med);
  box-shadow: var(--sombra-2);
  font-family: 'IBM Plex Sans Condensed', var(--fonte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25px;
  cursor: pointer;
}
.p-sync-status::before { content: ''; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--verde); }
.p-sync-status.offline::before { background:var(--amarelo); }

/* ── Estados (vazio, carregando, erro) ────────────────────── */
.p-estado {
  padding: 40px 24px;
  text-align: center;
  color: var(--txt-med);
}
.p-estado-icone { font-size: 34px; line-height: 1; margin-bottom: 10px; opacity: .75; }
.p-estado-titulo { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 5px; }
.p-estado-texto  { font-size: 13px; max-width: 420px; margin: 0 auto 14px; line-height: 1.5; }

/* Barra de carregamento discreta, no lugar do texto "Carregando..." */
.p-carregando { padding: 28px; text-align: center; color: var(--txt-med); font-size: 13px; font-weight: 600; }
.p-carregando::before {
  content: '';
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 12px;
  border: 3px solid var(--borda);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: p-girar .8s linear infinite;
}
@keyframes p-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .p-carregando::before { animation-duration: 3s; }
  .p-btn { transition: none; }
}

/* ── Mensagens inline ─────────────────────────────────────── */
.p-msg { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.p-msg-erro    { color: var(--vermelho-txt); }
.p-msg-ok      { color: var(--verde-txt); }
.p-msg-aviso   { color: var(--amarelo-txt); }

.p-alerta {
  padding: 11px 15px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid;
}
.p-alerta-erro  { background: var(--vermelho-bg); color: var(--vermelho-txt); border-color: #f5b7b1; }
.p-alerta-ok    { background: var(--verde-bg);    color: var(--verde-txt);    border-color: #a9dfbf; }
.p-alerta-aviso { background: var(--amarelo-bg);  color: var(--amarelo-txt);  border-color: #f0c27f; }

/* ── Acessibilidade ───────────────────────────────────────── */
/* Foco sempre visível — vários controles herdavam outline:none. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}
.p-header :where(a, button, select):focus-visible { outline-color: var(--cyan-claro); }

.p-oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Celular ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --header-altura: auto; }

  /* Antes: marca, badge, título e ações cada um puxando para um lado, com a
     barra quebrando em QUATRO linhas de botões soltos — e ainda faltava espaço,
     porque com os links injetados são até oito itens. Agora o cabeçalho é uma
     linha só (marca + título + botão do menu) e as ações viram um painel.
     `relative` ancora esse painel; sticky aqui já não valia. */
  .p-header { padding: 10px 14px; gap: 8px; position: relative; }

  /* Em 390px a barra tem três coisas disputando: marca, título e o seletor de
     obra. Prioridade pelo que serve para trabalhar — o seletor é controle, o
     título é contexto, a marca é enfeite (o app é PWA e já tem ícone próprio
     na tela inicial). Sem isto, o cabeçalho virava três fileiras. */
  .p-marca { display: none; }
  .p-header-titulo { flex: 1 1 80px; min-width: 0; order: 0; }
  .p-header-titulo h1 { font-size: 16px; }
  .p-header-titulo p  { display: none; }
  .p-obra { flex: 1 1 140px; width: auto; max-width: none; min-width: 0; }

  /* No celular o painel ocupa a largura toda em vez de flutuar num canto. */
  .p-header-acoes {
    left: 0;
    right: 0;
    min-width: 0;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid var(--cyan);
    padding: 12px 14px 16px;
  }
  .p-header-acoes .p-btn { padding: 11px 14px; font-size: 13px; }
  .p-header-usuario { max-width: none; }

  .p-abas { position: static; padding: 0 8px; }
  .p-btn { padding: 10px 14px; }
}