/* FarejaDOU — identidade visual: cao farejador, verde escuro #14532d + branco */

:root {
  --verde-escuro: #14532d;
  --verde-claro: #f0fdf4;
  --verde-borda: #bbf7d0;
  --cinza-fundo: #f3f4f6;
  --cinza-texto: #374151;
  --cinza-borda: #e5e7eb;
}

* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--cinza-fundo); color:#1a1a1a; }
.container { max-width:880px; margin:0 auto; padding: 0 16px 40px; }

/* ------------------------------------------------------------------ nav */
nav { background:var(--verde-escuro); }
nav .container { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; max-width:880px; margin:0 auto; }
nav .marca { display:flex; align-items:center; gap:10px; text-decoration:none; }
nav .marca img { display:block; height:28px; width:28px; }
.logo-branco { filter: brightness(0) invert(1); }
nav .marca span { color:#fff; font-weight:bold; font-size:18px; }
nav .links { display:flex; align-items:center; }
nav a.link { color:#fff; text-decoration:none; font-size:14px; margin-left:18px; opacity:.92; }
nav a.link:hover { opacity:1; text-decoration:underline; }
nav form { display:inline; margin-left:18px; }
nav button.sair { background:none; border:none; color:#fff; font-size:14px; cursor:pointer; font-family:inherit; padding:0; opacity:.92; }
nav .avatar { width:26px; height:26px; border-radius:50%; margin-left:18px; display:block;
              object-fit:cover; border:1px solid rgba(255,255,255,.4); }
nav .nav-mobile-area { display:none; align-items:center; gap:12px; }
nav .nav-mobile-area .avatar { margin-left:0; }
nav .menu-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:0; }

@media (max-width:767px) {
  nav .container { flex-wrap:wrap; }
  nav .nav-mobile-area { display:flex; }
  nav .menu-toggle { display:block; }
  nav .avatar-desktop { display:none; }
  nav .links {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  nav .links.aberto { max-height:400px; }
  nav a.link { margin-left:0; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.15); }
  nav a.link:hover { background:rgba(255,255,255,.1); text-decoration:none; }
  nav form.link-form { margin-left:0; width:100%; }
  nav button.sair { width:100%; text-align:left; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.15); }
}

@media (min-width:768px) {
  nav .avatar-mobile { display:none; }
}

h1, h2 { color:var(--verde-escuro); }

/* ---------------------------------------------------------------- basico */
.card { background:#fff; border-radius:8px; padding:16px; margin:16px 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); border:1px solid var(--cinza-borda); }
.btn { display:inline-block; background:var(--verde-escuro); color:#fff; border:none; padding:10px 18px;
       border-radius:6px; font-size:14px; cursor:pointer; text-decoration:none; font-family:inherit; }
.btn:hover { opacity:.92; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:disabled:hover { opacity:.5; }
.btn-secundario { background:#fff; color:var(--verde-escuro); border:1px solid var(--verde-escuro); }
.btn-lg { padding:13px 22px; font-size:15px; font-weight:bold; }
.btn-perigo { background:#fff; color:#991b1b; border:1px solid #991b1b; }
.btn-perigo:hover { background:#fef2f2; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
              margin-top:22px; background:#fff; color:#1a1a1a; border:1px solid #d1d5db;
              padding:12px 18px; border-radius:6px; font-size:15px; font-weight:bold;
              text-decoration:none; font-family:inherit; box-sizing:border-box; }
.btn-google:hover { background:#f9fafb; }

input[type=text], input[type=email], input[type=password], textarea, select {
  width:100%; padding:9px 10px; border:1px solid #d1d5db; border-radius:6px;
  font-size:14px; font-family:inherit; margin-top:4px; background:#fff;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
textarea:focus, select:focus {
  outline:none; border-color:var(--verde-escuro); box-shadow:0 0 0 3px rgba(20,83,45,.12);
}
select[multiple] { padding:4px; }
label { font-size:13px; font-weight:bold; color:var(--cinza-texto); display:block; margin-top:14px; }
label.inline { font-weight:normal; display:inline-block; margin-right:16px; color:#1a1a1a; }
.ajuda { font-size:12px; font-weight:normal; color:#6b7280; display:block; margin-top:2px; }

.badge { display:inline-block; background:#d1fae5; color:#065f46; font-size:12px;
         border-radius:10px; padding:2px 10px; font-weight:bold; }
.badge-inativo { background:#f3f4f6; color:#888; }
.badge-link { text-decoration:none; }
.badge-link:hover { opacity:.85; }
.badge-tipo-NOMEACAO { background:#14532d; color:#fff; }
.badge-tipo-EXONERACAO { background:#991b1b; color:#fff; }
.badge-tipo-DESIGNACAO { background:#1e40af; color:#fff; }
.badge-tipo-DISPENSA { background:#92400e; color:#fff; }
.badge-tipo-GRATIFICACAO { background:#5b21b6; color:#fff; }
.badge-tipo-CESSAO { background:#4338ca; color:#fff; }
.badge-tipo-MOVIMENTACAO { background:#4338ca; color:#fff; }
.badge-tipo-APOSENTADORIA { background:#b45309; color:#fff; }
.badge-tipo-PENSAO { background:#b45309; color:#fff; }
.badge-tipo-padrao { background:#374151; color:#fff; }
.pill { display:inline-block; background:var(--verde-claro); border:1px solid var(--verde-borda); color:#065f46;
        font-size:12px; border-radius:12px; padding:2px 10px; margin:2px 4px 0 0; }
.erro { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 14px;
        border-radius:6px; font-size:14px; margin-bottom:14px; }
.aviso-dev { background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:9px 12px;
             border-radius:6px; font-size:12px; margin-bottom:14px; line-height:1.4; }
.aviso-boas-vindas { background:var(--verde-claro); border:1px solid var(--verde-borda); color:#065f46;
                     padding:12px 16px; border-radius:8px; font-size:14px; margin:16px 0; }

.banner-boas-vindas { display:flex; gap:18px; background:#f0fdf4; border:2px solid #14532d;
                      border-radius:12px; padding:22px 26px; margin:16px 0 22px; }
.banner-boas-vindas-icone { font-size:2.6rem; line-height:1; flex-shrink:0; }
.banner-boas-vindas-corpo h2 { margin:0 0 10px; font-size:1.2rem; color:#14532d; }
.banner-boas-vindas-corpo p { margin:0 0 10px; font-size:14px; color:#1a1a1a; line-height:1.5; }
.banner-boas-vindas-corpo button { margin-top:6px; }
@media (max-width:600px) { .banner-boas-vindas { flex-direction:column; gap:8px; padding:18px 20px; } }

/* ---------------------------------------------------------- auth (split) */
.auth-split { min-height:100vh; display:flex; }
.auth-lado { width:40%; background:var(--verde-escuro); color:#fff; display:flex; flex-direction:column;
             align-items:flex-start; justify-content:center; padding:48px 56px; }
.auth-lado img { width:96px; height:96px; }
.auth-lado h1 { color:#fff; font-size:1.9rem; margin:18px 0 4px; }
.auth-lado .slogan { font-size:1.05rem; color:#d1fae5; margin:0 0 26px; }
.auth-lado ul { list-style:none; padding:0; margin:0; }
.auth-lado li { font-size:14px; color:#ecfdf5; margin-bottom:12px; padding-left:26px; position:relative; line-height:1.4; }
.auth-lado li::before { content:"✓"; position:absolute; left:0; color:#86efac; font-weight:bold; }
.auth-form-lado { width:60%; background:#fff; display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-form-box { width:100%; max-width:360px; }
.auth-form-box h2 { margin-top:0; }
.auth-form-box p.rodape { text-align:center; font-size:13px; margin-top:16px; color:#555; }

@media (max-width:760px) {
  .auth-split { flex-direction:column; }
  .auth-lado, .auth-form-lado { width:100%; }
  .auth-lado { padding:36px 24px; align-items:center; text-align:center; }
  .auth-lado ul { text-align:left; }
  .auth-form-lado { padding:32px 20px 48px; }
}

/* -------------------------------------------------------------- painel */
.hero { margin:22px 0 6px; }
.hero h1 { font-size:1.5rem; margin:0 0 2px; }
.hero .data { color:#6b7280; font-size:14px; }
.hero .frase { margin-top:10px; font-size:15px; color:#1a1a1a; }

.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.metric-card { background:#fff; border:1px solid var(--cinza-borda); border-radius:8px; padding:16px; }
.metric-card .valor { font-size:1.7rem; font-weight:bold; color:var(--verde-escuro); }
.metric-card .rotulo { font-size:12px; color:#6b7280; margin-top:2px; }
@media (max-width:700px) { .metric-grid { grid-template-columns:repeat(2,1fr); } }

.alerta-card { background:#fff; border:1px solid var(--cinza-borda); border-left:4px solid var(--verde-escuro);
               border-radius:8px; padding:14px 16px; margin:12px 0; display:flex; justify-content:space-between;
               align-items:center; flex-wrap:wrap; gap:10px; }
.alerta-card .tipo-rotulo { font-size:12px; color:#888; margin-top:2px; }

/* Cor por tipo de ato — precisa vir DEPOIS de .card e .alerta-card no
   arquivo: ambos tem a mesma especificidade (uma classe) que .ato-borda-*,
   entao em caso de empate quem vem por ultimo no CSS e' quem vence a borda
   esquerda. Um alerta_card ja tem border-left proprio (verde por default);
   sem essa ordem, .ato-borda-X nunca apareceria nos cards do painel (so
   nos cards de historico.html, que usam .card, declarado bem antes deste
   bloco). */
.ato-borda-NOMEACAO { border-left:4px solid #14532d; }
.ato-borda-EXONERACAO { border-left:4px solid #991b1b; }
.ato-borda-DESIGNACAO { border-left:4px solid #1e40af; }
.ato-borda-DISPENSA { border-left:4px solid #92400e; }
.ato-borda-GRATIFICACAO { border-left:4px solid #5b21b6; }
.ato-borda-EXPRESSAO { border-left:4px solid #0f766e; }
.ato-borda-CESSAO { border-left:4px solid #4338ca; }
.ato-borda-MOVIMENTACAO { border-left:4px solid #4338ca; }
.ato-borda-APOSENTADORIA { border-left:4px solid #b45309; }
.ato-borda-PENSAO { border-left:4px solid #b45309; }

.rodape-discreto { text-align:center; color:#9ca3af; font-size:12px; margin-top:36px; }
.rodape-discreto a { color:#6b7280; }
.dica-card { background:#f9fafb; border:1px dashed #d1d5db; border-radius:8px;
             padding:14px 16px; margin:16px 0; font-size:13px; color:#4b5563; line-height:1.5; }

/* ------------------------------------------------------------- wizard */
.wizard-progresso { display:flex; gap:8px; margin-bottom:20px; }
.wizard-progresso .etapa { flex:1; height:4px; border-radius:2px; background:var(--cinza-borda); }
.wizard-progresso .etapa.ativa, .wizard-progresso .etapa.concluida { background:var(--verde-escuro); }

.tipo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; align-items:stretch; }
.tipo-card { background:#fff; border:2px solid var(--cinza-borda); border-radius:10px; padding:18px;
             cursor:pointer; text-align:left; display:block; position:relative;
             height:100%; box-sizing:border-box; }
.tipo-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.tipo-card:hover { border-color:#9ca3af; }
.tipo-card.selecionado { border-color:var(--verde-escuro); background:var(--verde-claro); }
.tipo-card .emoji { font-size:1.6rem; }
.tipo-card .titulo { font-weight:bold; margin-top:8px; color:#1a1a1a; }
.tipo-card .descricao { font-size:13px; color:#6b7280; margin-top:4px; line-height:1.4; }
@media (max-width:600px) { .tipo-grid { grid-template-columns:1fr; } }

.tooltip-info { position:absolute; top:10px; right:10px; cursor:help; }
.tooltip-icone { display:flex; align-items:center; justify-content:center; width:18px; height:18px;
                 border-radius:50%; background:#e5e7eb; color:#4b5563; font-size:11px; font-weight:bold; }
.tooltip-info:hover .tooltip-icone { background:#d1d5db; color:#1a1a1a; }
.tooltip-texto { visibility:hidden; opacity:0; position:absolute; top:24px; right:0; width:220px;
                 background:#1f2937; color:#fff; font-size:12px; font-weight:normal; line-height:1.5;
                 padding:10px 12px; border-radius:6px; z-index:30; transition:opacity .15s;
                 text-align:left; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.tooltip-info:hover .tooltip-texto { visibility:visible; opacity:1; }
@media (max-width:600px) { .tooltip-texto { width:180px; right:-10px; } }

/* Tooltip "?" ao lado de labels de campo (grupo 4, 2026-07-28) — mesmo
   padrao visual do .tooltip-info dos cards do wizard (fundo escuro,
   texto branco, aparece so no hover), mas posicionado inline ao lado do
   texto do label em vez de fixo no canto de um card. */
.tooltip-campo { position:relative; display:inline-block; cursor:help; margin-left:4px; vertical-align:middle; }
.tooltip-campo-icone { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
                       border-radius:50%; background:#e5e7eb; color:#4b5563; font-size:10px; font-weight:bold; }
.tooltip-campo:hover .tooltip-campo-icone { background:#d1d5db; color:#1a1a1a; }
.tooltip-campo-texto { visibility:hidden; opacity:0; position:absolute; top:22px; left:0; width:280px;
                       max-width:280px; background:#1a1a1a; color:#fff; font-size:12px; font-weight:normal;
                       line-height:1.5; padding:10px 12px; border-radius:6px; z-index:30;
                       transition:opacity .15s; text-align:left; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.tooltip-campo:hover .tooltip-campo-texto { visibility:visible; opacity:1; }
@media (max-width:600px) { .tooltip-campo-texto { width:220px; max-width:220px; left:-10px; } }

/* Toggle switch estilo iOS — busca avancada do grupo 4 (modo OR/AND e
   exclusao por expressao, ver alerta_form.html). */
.toggle-linha { display:flex; align-items:center; gap:10px; margin-top:14px; }
.toggle-switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#d1d5db;
                 border-radius:999px; transition:background .15s; }
.toggle-slider::before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
                         background:#fff; border-radius:50%; transition:transform .15s; }
.toggle-switch input:checked + .toggle-slider { background:var(--verde-escuro); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); }
.toggle-label { font-size:13px; color:#374151; }
.toggle-label.inativo { color:#9ca3af; }

/* Botoes segmentados de modo OR/AND (grupo 4, 2026-07-27) — substituem o
   toggle switch usado antes: o switch usava o mesmo cinza do estado
   "desligado" do toggle de exclusao quando em OR, dando a falsa impressao
   de funcionalidade inativa (o modo esta SEMPRE ativo, so alterna entre
   dois valores validos). Dois botoes lado a lado evitam essa ambiguidade
   por construcao — um dos dois esta sempre destacado em verde, nunca os
   dois cinza/apagados ao mesmo tempo. Nao usa .toggle-switch/.toggle-
   slider (esses continuam servindo so o toggle de exclusao, inalterado). */
.segmentado { display:inline-flex; margin-top:8px; }
.segmento { padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
            background:#fff; color:#6b7280; border:1px solid #d1d5db; }
.segmento:first-child { border-radius:8px 0 0 8px; }
.segmento:last-child { border-radius:0 8px 8px 0; border-left:none; }
.segmento.ativo { background:var(--verde-escuro); color:#fff; border-color:var(--verde-escuro); }

.resumo-linha { display:flex; padding:8px 0; border-bottom:1px solid var(--cinza-borda); font-size:14px; }
.resumo-linha:last-child { border-bottom:none; }
.resumo-linha .rotulo { width:180px; color:#6b7280; flex-shrink:0; }
.resumo-linha .valor { color:#1a1a1a; }

details.avancado { margin-top:16px; }
details.avancado summary { cursor:pointer; font-size:13px; font-weight:bold; color:var(--verde-escuro); }

/* ------------------------------------------------------ selecao de orgaos */
.orgao-picker { margin-top:4px; position:relative; }

/* Botao "select normal" que abre o dropdown flutuante */
.orgao-toggle { width:100%; display:flex; align-items:center; justify-content:space-between;
                background:#fff; border:1.5px solid var(--verde-escuro); border-radius:6px;
                padding:9px 12px; font-size:14px; font-family:inherit; color:#1a1a1a;
                cursor:pointer; text-align:left; margin-top:4px; }
.orgao-toggle:hover { background:var(--verde-claro); }
.orgao-toggle .orgao-toggle-seta { color:var(--verde-escuro); font-size:11px; margin-left:8px;
                                    transition:transform .15s; flex-shrink:0; }
.orgao-toggle.aberto .orgao-toggle-seta { transform:rotate(180deg); }

/* Dropdown flutuante — fechado por padrao (display:none no HTML) */
.orgao-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
                  background:#fff; border:1.5px solid var(--verde-escuro); border-radius:8px;
                  box-shadow:0 4px 14px rgba(0,0,0,.14); padding:8px; }

.orgao-pills { display:flex; flex-wrap:wrap; gap:4px; }
.orgao-pills:not(:empty) { margin-top:6px; }
.pill-remover { background:none; border:none; color:#065f46; font-weight:bold; cursor:pointer;
                margin-left:6px; padding:0; font-size:13px; line-height:1; font-family:inherit; }
.pill-remover:hover { color:#047857; }
.orgao-busca-wrap { position:relative; }
.orgao-busca-wrap .orgao-busca-icone { position:absolute; left:10px; top:50%; transform:translateY(-50%);
                                        font-size:13px; opacity:.6; pointer-events:none; }
.orgao-busca-input { padding-left:30px !important; margin-top:0 !important; }
.orgao-lista { max-height:250px; overflow-y:auto; border:1px solid #d1d5db; border-radius:6px;
               margin-top:6px; background:#fff; }
.orgao-item { display:block; font-weight:normal; font-size:13px; color:#1a1a1a; padding:7px 10px;
              margin:0; cursor:pointer; }
.orgao-item:hover { background:var(--verde-claro); }
.orgao-item input[type=checkbox] { margin-right:6px; }
.orgao-item-oculto { display:none; }

/* -------------------------------------------------------------- landing */
.landing-header { display:flex; align-items:center; justify-content:space-between;
                   padding:16px 24px; border-bottom:1px solid var(--cinza-borda); background:#fff; }
.landing-header .marca { display:flex; align-items:center; gap:10px; text-decoration:none; }
.landing-header .marca img { height:32px; width:32px; display:block; }
.landing-header .marca span { font-weight:bold; font-size:19px; color:var(--verde-escuro); }
.link-discreto { color:#4b5563; font-size:14px; text-decoration:none; }
.link-discreto:hover { color:var(--verde-escuro); text-decoration:underline; }

.landing-hero { background:var(--verde-claro); text-align:center; padding:64px 24px; }
.landing-hero h1 { font-size:2.2rem; margin:0 0 14px; color:var(--verde-escuro); }
.landing-hero p { font-size:1.1rem; color:#374151; max-width:640px; margin:0 auto 28px; line-height:1.5; }

.landing-secao { max-width:960px; margin:0 auto; padding:56px 24px; }
.landing-secao h2 { text-align:center; font-size:1.6rem; margin:0 0 36px; }

.landing-passos { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.landing-passo { text-align:center; }
.landing-passo .numero { display:inline-flex; align-items:center; justify-content:center;
                          width:40px; height:40px; border-radius:50%; background:var(--verde-escuro);
                          color:#fff; font-weight:bold; font-size:16px; margin-bottom:14px; }
.landing-passo p { color:#4b5563; font-size:14px; line-height:1.5; margin:0; }
@media (max-width:700px) { .landing-passos { grid-template-columns:1fr; } }

.landing-iframe-wrap { border:1px solid var(--cinza-borda); border-radius:10px; overflow:hidden;
                       box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.landing-iframe-wrap iframe { width:100%; height:560px; border:0; display:block; }

.landing-footer { text-align:center; padding:32px 24px 48px; color:#9ca3af; font-size:13px; }
.landing-footer a { color:#6b7280; }

/* --------------------------------------------------- impressao (historico) */
.cabecalho-impressao, .texto-completo-impressao, .dou-link-impressao { display:none; }

@media print {
  body { font-family: Georgia, 'Times New Roman', serif; font-size:12pt; color:#000; background:#fff; }
  nav, .no-print { display:none !important; }
  .container { max-width:none; padding:0; }

  .cabecalho-impressao { display:block; margin-bottom:20px; border-bottom:2px solid #14532d; padding-bottom:10px; }
  .cabecalho-impressao .marca-impressao { font-size:18pt; font-weight:bold; color:#14532d; }
  .cabecalho-impressao .subtitulo-impressao { font-size:13pt; margin-top:4px; color:#000; }
  .cabecalho-impressao .meta-impressao { font-size:10pt; color:#333; margin-top:4px; }

  .card { box-shadow:none; border:1px solid #999; break-inside:avoid; }
  .trecho-tela { display:none; }
  .texto-completo-impressao { display:block; white-space:pre-wrap; margin-top:8px; font-size:11pt; line-height:1.5; }
  .dou-link-impressao { display:block; margin-top:8px; font-size:10pt; color:#000; }
  .quebra-pagina { page-break-before: always; }
  #modal-fundo { display:none !important; }
}

/* -------------------------------------------------------- admin (abas) */
.admin-tabs { display:flex; gap:6px; margin-top:16px; }
.admin-tab { background:#fff; color:var(--verde-escuro); border:1px solid var(--verde-escuro);
             border-bottom:none; border-radius:8px 8px 0 0; padding:10px 20px; font-size:14px;
             font-family:inherit; cursor:pointer; }
.admin-tab:hover { background:var(--verde-claro); }
.admin-tab.ativa { background:var(--verde-escuro); color:#fff; }
.admin-tabs-linha { border-bottom:2px solid var(--verde-escuro); margin-bottom:20px; }
.admin-aba-conteudo { display:none; }
.admin-perigo { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:16px; margin-top:24px; }