/* ============================================================
   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/. */
@font-face {
  font-family: 'Cinzel'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/cinzel-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Cinzel'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/cinzel-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('/static/fonts/jost-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/jost-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/static/fonts/jost-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/jost-600.ttf') format('truetype');
}

/* ---- 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;
}

* { 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 { width: 100%; padding: 15px; 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; }

.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; }

/* ============================================================
   COMPONENTES (catalogados no padrao_visual_lsacodex.md §10).
   Adicionados conforme cada padrão é consolidado num projeto e
   promovido ao toolkit. Reutilizáveis por todos os apps LSA Codex.
   ============================================================ */

/* ---- ABAS (navegação entre telas irmãs OU troca de conteúdo na mesma tela) ----
   Mesma aparência nos dois usos: barra horizontal, ativa com texto verde +
   borda inferior dourada. Quando as duas coexistem, usar classes distintas. */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 22px; }
.aba { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--cinza); padding: 12px 20px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.aba:hover { color: var(--verde); }
.aba.on { color: var(--verde); border-bottom-color: var(--dourado); }
.painel-aba { display: none; }
.painel-aba.on { display: block; }

/* ---- TOGGLE (liga/desliga leve e reversível) ----
   Só para alternância leve com gravação automática. Ação pesada usa confirmação. */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .slider { width: 42px; height: 24px; background: #cdd6d1; border-radius: 13px; position: relative; transition: background 0.18s; }
.toggle .slider::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle input:checked + .slider { background: var(--verde-3); }
.toggle input:checked + .slider::after { left: 21px; }
.toggle input:disabled + .slider { opacity: 0.5; }

/* ---- DRAG HANDLE (reordenação por arrastar) ----
   Punho à esquerda do item; cursor grab. Itens fixos escondem o punho. */
.punho { color: #aab4af; cursor: grab; flex-shrink: 0; display: flex; padding: 4px; touch-action: none; }
.punho:active { cursor: grabbing; }
.punho svg { width: 18px; height: 18px; fill: currentColor; }
.punho.travado { visibility: hidden; }
.arrastando { opacity: 0.4; }
.drop-alvo { box-shadow: inset 0 2px 0 var(--verde-3); }

/* ---- LISTA RICA (item com título + subdados) ---- */
.lista-rica { background: #fff; border-radius: 14px; box-shadow: 0 2px 16px rgba(26,47,38,0.06); border: 1px solid var(--borda); overflow: hidden; }
.lista-rica .item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--borda); }
.lista-rica .item:last-child { border-bottom: none; }

/* ---- NAVEGAÇÃO MESTRE-DETALHE (menu lateral) ----
   Para selecionar entre N objetos distintos e editar um por vez (NÃO facetas de
   um objeto — isso são abas). Lista à esquerda, detalhe à direita; empilha no mobile.
   Item ativo: fundo verde-claro + barra dourada à esquerda. (padrao_visual §10) */
.md { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
.ml { background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.ml-tit { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cinza); padding: 13px 16px 7px; }
.ml-item { display: block; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--borda); padding: 13px 16px; cursor: pointer; font-family: inherit; }
.ml-item:hover { background: #f7faf8; }
.ml-item.on { background: #eef4f0; border-left: 3px solid var(--dourado); }
.ml-item .n { font-size: 14px; font-weight: 600; color: var(--verde); }
.ml-item .s { font-size: 11.5px; color: var(--cinza); margin-top: 2px; }
.det { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 20px 22px; }
@media (max-width: 720px) { .md { grid-template-columns: 1fr; } }

/* ---- FEEDBACK DE ESCRITA (confirmação específica e visível) ----
   Casado com a forma de salvar (padrao_visual §10):
   - AJAX (fica na tela): .fb inline transitório (.on para exibir; some após ~3s).
   - Recarga (troca de tela): .banner-feedback na tela de destino + realce do item. */
.fb { font-size: 13px; opacity: 0; transition: opacity 0.25s; }
.fb.on { opacity: 1; }
.fb.ok { color: #1f6b4d; }
.fb.erro { color: #9a3434; }
.banner-feedback { border-radius: 9px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.banner-feedback.ok { background: #eef6f1; border: 1px solid #bfe0cf; color: #1f6b4d; }
.banner-feedback.erro { background: #fbeaea; border: 1px solid #e8c4c4; color: #9a3434; }
/* realce do item recém-afetado numa lista (esmaece em ~3s) */
@keyframes realce-esmaece { from { background: #e3f3ea; } to { background: transparent; } }
.realce { animation: realce-esmaece 3s ease-out forwards; }

/* ---- CARTÃO DE CONFIRMAÇÃO DE AÇÃO (desfecho de uma criação) ----
   Overlay com selo verde, título, mensagem e próximos passos. Distinto do
   feedback de escrita acima: este é o desfecho de uma CRIAÇÃO que conclui um
   fluxo; o banner/realce é para um SALVAR que mantém o fluxo. (padrao_visual §10) */
.confirma-overlay { position: fixed; inset: 0; background: rgba(26,47,38,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.confirma-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 48px rgba(26,47,38,0.25); padding: 36px 32px; max-width: 440px; width: 100%; text-align: center; }
.confirma-selo { width: 64px; height: 64px; border-radius: 50%; background: #e3f3ea; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.confirma-selo svg { width: 32px; height: 32px; stroke: var(--verde-3); fill: none; stroke-width: 2.5; }
.confirma-card h2 { font-family: 'Cinzel', serif; font-size: 20px; color: var(--verde); margin-bottom: 10px; }
.confirma-card p { font-size: 14px; color: var(--cinza); line-height: 1.55; margin-bottom: 22px; }
.confirma-acoes { display: flex; flex-direction: column; gap: 10px; }