/* ============================================================
   PADRÃO VISUAL — Lopes & Salazar / LSA Codex
   Fonte da verdade de cores, tipografia e componentes.
   Fontes servidas localmente (sem dependência do Google em runtime).
   ============================================================ */

/* ---- FONTES LOCAIS ---- */
/* Cinzel: títulos e nome do sistema (display, clássica, combina com a logo).
   Jost: corpo de texto (limpa, geométrica). Arquivos em /static/fonts/. */
/* ---- PALETA ---- */
:root {
  --verde: #1a2f26;        /* cor principal: menu, fundos fortes, botão primário */
  --verde-2: #24412f;      /* hover do verde */
  --verde-3: #2f5640;      /* verde médio: links, acentos sutis */
  --dourado: #b28b58;      /* acento da marca: nome do sistema, destaques, dado principal */
  --dourado-claro: #c9a574;/* hover do dourado */
  --fundo: #eef2ef;        /* fundo das telas internas (verde bem claro) */
  --texto: #1a2f26;        /* texto principal */
  --cinza: #6b7d74;        /* texto secundário */
  --borda: #d4ddd6;        /* bordas e divisores */
  --branco: #ffffff;
  /* Vermelho de ERRO/DESTRUTIVO — tom terroso da casa, com bom contraste sobre fundo CLARO
     (telas, cartões, modais brancos). NÃO usar sobre fundos escuros/coloridos sem revisar
     contraste (parte 13). Para texto de erro use --vermelho; bordas/realce use --vermelho-b. */
  --vermelho: #9a3a2e;     /* texto de validação/erro (legível em fundo claro) */
  --vermelho-b: #c98a82;   /* borda/realce avermelhado mais suave */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Jost', sans-serif; background: var(--fundo); color: var(--texto); min-height: 100vh; }

/* ---- MENU SUPERIOR ---- */
header.menu-topo {
  background: var(--verde); padding: 0 32px; display: flex; align-items: center;
  justify-content: space-between; height: 68px; box-shadow: 0 2px 12px rgba(26,47,38,0.18);
}
.menu-esq { display: flex; align-items: center; gap: 32px; }
.menu-dir { display: flex; align-items: center; gap: 28px; }
.logo-sistema { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; color: var(--dourado); letter-spacing: 3px; text-decoration: none; }
.menu-topo nav { display: flex; gap: 6px; }
.menu-topo nav a { color: rgba(255,255,255,0.75); text-decoration: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; transition: all 0.18s; }
.menu-topo nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.menu-topo nav a.active { color: var(--dourado); background: rgba(178,139,88,0.14); }
.menu-topo nav a.sair { color: rgba(255,255,255,0.6); }
.menu-topo nav a.sair:hover { color: #e7b3a3; background: rgba(231,124,124,0.12); }
.logo-escritorio { height: 30px; }

/* ---- CONTÊINER E CARTÃO ---- */
.container { max-width: 900px; margin: 36px auto; padding: 0 24px; }
.card { background: #fff; border-radius: 14px; padding: 36px; box-shadow: 0 2px 16px rgba(26,47,38,0.06); border: 1px solid var(--borda); }
h2.titulo { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; color: var(--verde); letter-spacing: 1px; margin-bottom: 8px; }
.secao-titulo { font-size: 12px; font-weight: 600; color: var(--dourado); text-transform: uppercase; letter-spacing: 1px; margin: 26px 0 14px; }

/* ---- BOTÕES ----
   IMPORTANTE: todo <button> precisa de font-family: inherit, senão herda
   a fonte do sistema (Arial) em vez da fonte da página. */
.btn-primary { padding: 15px 28px; background: var(--verde); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: 0.5px; transition: background 0.18s; }
.btn-primary:hover { background: var(--verde-2); }
.btn-primary:disabled { background: #c3cfc8; cursor: not-allowed; }
/* Largura total é OPT-IN: aplique .btn-bloco a um botão que deva ocupar a linha inteira
   (ex.: botão único de formulário estreito). NUNCA embutir width:100% na classe de botão
   por padrão — isso já causou botões esticados em telas com botões lado a lado (parte 13). */
.btn-bloco { width: 100%; }

.btn-tool { display: inline-flex; align-items: center; gap: 6px; background: #f3f6f4; color: var(--verde); border: 1px solid var(--borda); padding: 9px 15px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.btn-tool:hover { background: #e7ede9; }
.btn-tool svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-excluir { background: #f3f6f4; color: #9a5a4e; border-color: var(--borda); }
.btn-excluir:hover { background: #f6eae8; color: #8a3a2e; }

.btn-mini { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: inherit; border: none; cursor: pointer; transition: all 0.15s; }
.btn-mini svg { width: 13px; height: 13px; fill: none; stroke-width: 2; }
.btn-ver { background: var(--verde); color: #fff; } .btn-ver svg { stroke: #fff; } .btn-ver:hover { background: var(--verde-2); }
.btn-baixar { background: #fff; color: var(--dourado); border: 1.5px solid var(--dourado); font-weight: 500; } .btn-baixar svg { stroke: var(--dourado); } .btn-baixar:hover { background: #faf6ef; }


/* === LSA-UI (parte 19) === */
/* Modal padrão da casa — agora GLOBAL (era duplicada por tela). */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(26,47,38,0.4); z-index:50; align-items:center; justify-content:center; padding:24px; }
.modal-bg.show { display:flex; }
.modal-cx { background:#fff; border-radius:14px; padding:26px 28px; max-width:480px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,0.2); max-height:88vh; overflow:auto; }
.modal-cx h3 { font-family:'Cinzel',serif; font-size:19px; font-weight:600; color:var(--verde); margin-bottom:8px; }
.modal-cx p { font-size:13.5px; color:var(--cinza); line-height:1.55; margin-bottom:18px; }
.modal-cx .lbl-m { display:block; font-size:13px; font-weight:600; color:var(--verde); margin-bottom:7px; }
.modal-cx select, .modal-cx input, .modal-cx textarea { width:100%; box-sizing:border-box; padding:11px 14px; border:1.5px solid var(--borda); border-radius:9px; font-size:14px; font-family:inherit; background:#fff; color:var(--texto); margin-bottom:18px; }
.modal-acoes { display:flex; gap:10px; align-items:center; }
.btn-cancelar-m { background:none; border:none; color:var(--cinza); font-family:inherit; font-size:14px; cursor:pointer; }
.btn-confirma-verde { background:var(--verde); color:#fff; border:none; border-radius:9px; padding:12px 22px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }
.btn-confirma-susp { background:#9a5a4e; color:#fff; border:none; border-radius:9px; padding:12px 22px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }

/* Controles de formulário na paleta da casa (radio/checkbox azuis nunca mais). */
input[type="radio"], input[type="checkbox"] { accent-color: var(--verde); }

/* Header responsivo (P10): no mobile o menu desce para a 2ª linha e rola na horizontal;
   a marca encolhe e nada colide. */
@media (max-width: 760px) {
  header.menu-topo { flex-wrap: wrap; height: auto; padding: 10px 14px; row-gap: 6px; }
  .menu-esq { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 12px; order: 1; }
  .menu-esq nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .menu-esq nav a { white-space: nowrap; padding: 7px 12px; font-size: 13px; }
  .menu-dir { order: 2; width: auto; margin-left: auto; gap: 14px; position: absolute; right: 14px; top: 10px; }
  header.menu-topo { position: relative; }
  .logo-escritorio { display: none; }
  .logo-sistema { font-size: 18px; letter-spacing: 2px; }
}

.stat-link { text-decoration: none; color: inherit; display: block; transition: transform .12s, box-shadow .12s; }
.stat-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,47,38,0.10); }

.pino.neutro { background: #cfd8d2 !important; box-shadow: none !important; }
.pino.falha { background: #c0564a !important; }

/* ── Item 7 (Leva 1, parte 21 — P-19-TABELA-MOBILE): tabelas largas no celular ──
   Envolver a <table> em .tabela-rolavel: em telas estreitas a tabela mantém a
   largura mínima legível e ganha rolagem horizontal suave, em vez de estourar
   o layout ou espremer as colunas até ficarem ilegíveis. */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabela-rolavel > table { width: 100%; min-width: 560px; }