/* =============================================================================
   SISTEMA ASSESSOR DE GABINETE — CSS institucional, responsivo, acessível
   Paleta: azul institucional #1B3A6B · azul #2563EB · âmbar #F59E0B
   ============================================================================= */
:root {
  --primaria: #1B3A6B;
  --secundaria: #2563EB;
  --acento: #F59E0B;
  --verde: #059669;
  --vermelho: #DC2626;
  --fundo: #F1F5F9;
  --painel: #FFFFFF;
  --texto: #111827;
  --texto-suave: #6B7280;
  --borda: #E2E8F0;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.5; }
a { color: var(--secundaria); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--acento); outline-offset: 2px; /* foco visível — acessibilidade */
}
code { background: #EEF2FF; padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* ── Estrutura ─────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; background: var(--primaria); color: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar-brand i { font-size: 1.6rem; color: var(--acento); }
.sidebar-brand strong { display: block; font-size: .95rem; }
.sidebar-brand small { color: rgba(255,255,255,.7); font-size: .75rem; }
.sidebar-nav { padding: 10px 0; flex: 1; }
.sidebar-nav a {
  display: flex; gap: 12px; align-items: center; padding: 11px 18px;
  color: rgba(255,255,255,.9); font-size: .92rem;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.sidebar-nav a i { width: 18px; text-align: center; }
.sidebar-atalhos { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.15); }
.sidebar-atalhos small { color: rgba(255,255,255,.55); display: block; margin-bottom: 6px; text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; }
.sidebar-atalhos a { display: block; color: rgba(255,255,255,.85); font-size: .85rem; padding: 4px 0; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--painel); border-bottom: 1px solid var(--borda); padding: 10px 22px;
  display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20;
}
.btn-menu { display: none; background: none; border: 0; font-size: 1.3rem; color: var(--primaria); cursor: pointer; }
.topbar-user { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.user-info { display: flex; gap: 8px; align-items: center; color: var(--texto); }
.user-info i { font-size: 1.5rem; color: var(--primaria); }
.user-info em { color: var(--texto-suave); font-style: normal; font-size: .82rem; }
.btn-sair { background: none; border: 0; color: var(--vermelho); font-size: 1.1rem; cursor: pointer; padding: 6px; }

.conteudo { padding: 24px; flex: 1; }
.rodape { padding: 12px 24px; text-align: center; color: var(--texto-suave); font-size: .8rem; border-top: 1px solid var(--borda); }

/* ── Títulos / Painéis ─────────────────────────────────────────── */
.titulo-pagina { font-size: 1.4rem; color: var(--primaria); margin-bottom: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.titulo-pagina small { color: var(--texto-suave); font-weight: 400; font-size: .9rem; }
.painel { background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; }
.painel h3 { color: var(--primaria); margin-bottom: 12px; font-size: 1.02rem; display: flex; gap: 8px; align-items: center; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.colunas-agenda { grid-template-columns: 2fr 1fr; }
.vazio { color: var(--texto-suave); padding: 10px 0; }
.texto-suave { color: var(--texto-suave); }

/* ── Cards do dashboard ────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card-ind {
  background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px; text-align: center; color: var(--texto); display: flex; flex-direction: column; gap: 4px; align-items: center;
  border-top: 4px solid var(--secundaria); transition: transform .12s;
}
.card-ind:hover { transform: translateY(-2px); text-decoration: none; }
.card-ind i { font-size: 1.4rem; color: var(--secundaria); }
.card-ind strong { font-size: 1.7rem; color: var(--primaria); }
.card-ind span { color: var(--texto-suave); font-size: .82rem; }
.card-ind-alerta { border-top-color: var(--vermelho); } .card-ind-alerta i { color: var(--vermelho); }
.card-ind-ok { border-top-color: var(--verde); } .card-ind-ok i { color: var(--verde); }
.cards-config .card-ind { border-top-color: var(--acento); }
.botoes-rapidos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.graficos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }

/* ── Botões ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px;
  border-radius: 8px; border: 1px solid var(--borda); background: var(--painel);
  color: var(--texto); font-size: .9rem; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(.97); text-decoration: none; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-secundario { background: var(--secundaria); border-color: var(--secundaria); color: #fff; }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-alerta { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-bloco { width: 100%; justify-content: center; }
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 6px; border: 1px solid var(--borda); background: #fff; color: var(--secundaria); cursor: pointer;
}
.btn-mini-perigo { color: var(--vermelho); }
.btn-whats { color: #25D366; margin-left: 6px; font-size: 1.05rem; }
.btn-whats-grande { background: #25D366; border-color: #25D366; color: #fff; padding: 9px 16px; border-radius: 8px; display: inline-flex; gap: 8px; align-items: center; }
.inline { display: inline; }
.acoes-topo { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.acoes-form { display: flex; gap: 10px; align-items: center; }
.link-discreto { color: var(--texto-suave); font-size: .88rem; display: inline-block; margin: 8px 0; }

/* ── Formulários ───────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 600; color: var(--primaria); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: .92rem; font-family: inherit; background: #fff; color: var(--texto);
}
input[type="color"] { padding: 2px; height: 40px; }
input[type="checkbox"] { width: auto; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--texto); margin: 8px 0; }
.check small { display: block; color: var(--texto-suave); font-size: .78rem; }
.check-destaque { background: #FFFBEB; border: 1px solid #FDE68A; padding: 10px; border-radius: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.form-grid .campo { display: flex; flex-direction: column; }
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
.form-secao { grid-column: span 12; color: var(--primaria); border-bottom: 2px solid var(--borda); padding-bottom: 6px; margin-top: 8px; font-size: .95rem; }
.form-secao-mini { font-weight: 600; color: var(--primaria); margin-top: 10px; font-size: .85rem; }
.form-vertical { display: flex; flex-direction: column; gap: 10px; }
.form-inline-vertical { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.form-popover { position: absolute; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 30; width: 280px; right: 0; }
.detalhe-edicao { position: relative; display: inline-block; }
.detalhe-edicao summary { list-style: none; }
.linha-dupla { display: flex; gap: 8px; }
.form-anexo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.form-anexo input, .form-anexo select { width: auto; flex: 1; min-width: 140px; }
.caixa-lgpd { background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 8px; padding: 14px; }
.caixa-lgpd p { font-size: .88rem; }
.caixa-info { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 8px; padding: 12px; font-size: .9rem; }
.nota-lgpd { color: var(--texto-suave); font-size: .82rem; margin-top: 10px; }

/* ── Filtros ───────────────────────────────────────────────────── */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; flex: 1; min-width: 130px; }

/* ── Tabelas ───────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th { background: var(--primaria); color: #fff; text-align: left; padding: 9px 11px; white-space: nowrap; }
.tabela td { padding: 8px 11px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:nth-child(even) td { background: #F8FAFC; }
.tabela .acoes { white-space: nowrap; display: flex; gap: 5px; }
.tabela-scroll { overflow-x: auto; }
.tabela-compacta td, .tabela-compacta th { padding: 5px 8px; font-size: .8rem; }
.centro { text-align: center; }
.linha-atrasada td { background: #FEF2F2 !important; }
.alerta-icone { color: var(--vermelho); }

/* ── Badges ────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #fff; background: var(--texto-suave); }
.badge-azul { background: var(--secundaria); }
.badge-verde { background: var(--verde); }
.badge-vermelho { background: var(--vermelho); }
.badge-amarelo { background: var(--acento); }
.badge-cinza { background: #9CA3AF; }
.badge-grande { font-size: .85rem; padding: 5px 14px; }

/* ── Flash ─────────────────────────────────────────────────────── */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
.flash-ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.flash-erro { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ── Listas ────────────────────────────────────────────────────── */
.lista-simples { list-style: none; }
.lista-simples li { padding: 7px 0; border-bottom: 1px dashed var(--borda); font-size: .9rem; }
.lista-simples small { display: block; color: var(--texto-suave); }
.linha-tempo { list-style: none; border-left: 3px solid var(--borda); padding-left: 16px; }
.linha-tempo li { margin-bottom: 14px; position: relative; font-size: .9rem; }
.linha-tempo li::before { content: ''; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--secundaria); }
.obs-historico { background: #F8FAFC; border-radius: 6px; padding: 8px 10px; margin-top: 4px; font-size: .85rem; }
.lista-tutoriais { list-style: none; }
.lista-tutoriais li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.lista-tutoriais i { font-size: 1.4rem; color: var(--vermelho); }
.lista-tutoriais li div { flex: 1; } .lista-tutoriais small { display: block; color: var(--texto-suave); }
.dl-dados { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: .9rem; }
.dl-dados dt { font-weight: 600; color: var(--primaria); }

/* ── Busca rápida (duplicidade) ────────────────────────────────── */
.busca-duplicidade label { margin-bottom: 8px; }
.resultado-busca { margin-top: 8px; }
.resultado-busca .item-busca {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 6px;
  background: #fff; cursor: pointer; font-size: .88rem;
}
.resultado-busca .item-busca:hover { border-color: var(--secundaria); background: #EFF6FF; }

/* ── Mapa / Paginação / Erros / Login / Modal ──────────────────── */
.mapa-grande { height: 540px; border-radius: 8px; }
.paginacao { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.paginacao a { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; font-size: .85rem; }
.paginacao a.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.painel-perigo { border-left: 4px solid var(--vermelho); }
.painel-perigo form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.painel-perigo input { width: auto; flex: 1; min-width: 180px; }

.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--primaria), #0F2347); padding: 20px; }
.card-login { background: #fff; border-radius: 14px; padding: 34px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 12px; }
.login-brand { text-align: center; margin-bottom: 8px; }
.login-brand i { font-size: 2.4rem; color: var(--acento); }
.login-brand h1 { color: var(--primaria); font-size: 1.3rem; margin-top: 8px; }
.login-brand p { color: var(--texto-suave); font-size: .85rem; }
.card-login form { display: flex; flex-direction: column; gap: 10px; }
.card-login .link-discreto { text-align: center; }

.pagina-erro { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--fundo); }
.card-erro { background: #fff; border-radius: 14px; padding: 44px; text-align: center; box-shadow: var(--sombra); }
.card-erro h1 { font-size: 3.4rem; color: var(--primaria); }
.card-erro p { color: var(--texto-suave); margin: 12px 0 20px; }

.modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal[hidden] { display: none; }
.modal-conteudo { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; }

/* ── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .sidebar { position: fixed; left: -260px; transition: left .25s; z-index: 40; }
  .sidebar.aberta { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  .btn-menu { display: block; }
  .duas-colunas, .colunas-agenda { grid-template-columns: 1fr; }
  .c1,.c2,.c3,.c4,.c5,.c6,.c8 { grid-column: span 12; }
  .conteudo { padding: 14px; }
  .dl-dados { grid-template-columns: 1fr; }
  .dl-dados dt { margin-top: 6px; }
}
@media print { .sidebar, .topbar, .rodape, .acoes-topo, .btn, .paginacao { display: none !important; } }