/* SAAW — Painel da Associação Comunitária do Prea
   Estilo institucional (padrão sistemas públicos): Arial, azul institucional,
   tabelas densas com bordas, formulários de filtro. */
:root {
  --azul: #1351b4; --azul-escuro: #0c326f; --azul-claro: #d4e5ff;
  --fundo: #f3f4f6; --branco: #fff; --borda: #ccd1d9;
  --texto: #1c1e21; --texto-2: #555c66; --texto-3: #8a919c;
  --ok: #168821; --ok-fundo: #e8f5ea;
  --alerta: #b38600; --alerta-fundo: #fff8e6;
  --erro: #c2271a; --erro-fundo: #fdf0ef;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13.5px; background: var(--fundo); color: var(--texto); }
button { font-family: inherit; cursor: pointer; }
a { color: var(--azul); }

/* ---------- casca ---------- */
.barra-gov { background: var(--azul-escuro); color: #fff; font-size: 11.5px; padding: 5px 20px; display: flex; gap: 16px; }
.barra-gov a { color: #cfe0ff; text-decoration: none; }
.cabecalho { background: var(--azul); color: #fff; padding: 11px 20px; display: flex; align-items: center; gap: 14px; }
.cabecalho .brasao { width: 38px; height: 38px; background: #fff; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.cabecalho h1 { font-size: 16px; font-weight: bold; line-height: 1.2; }
.cabecalho h1 small { font-weight: normal; opacity: .85; display: block; font-size: 11.5px; }
.cabecalho .usuario { margin-left: auto; font-size: 12px; text-align: right; opacity: .95; }
.cabecalho .usuario a { color: #cfe0ff; }

.corpo { display: flex; min-height: calc(100vh - 92px); }
nav.menu { width: 215px; background: var(--branco); border-right: 1px solid var(--borda); padding: 12px 0; flex: none; }
nav.menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  color: var(--texto-2); text-decoration: none; font-weight: bold; font-size: 13px;
  border-left: 4px solid transparent;
}
nav.menu a:hover { background: #f0f5ff; color: var(--azul); }
nav.menu a.ativo { border-left-color: var(--azul); color: var(--azul); background: #eaf1fd; }
nav.menu .badge { margin-left: auto; background: var(--erro); color: #fff; font-size: 11px; border-radius: 99px; padding: 1px 8px; }
main { flex: 1; padding: 16px 22px 60px; min-width: 0; }
.migalha { font-size: 12px; color: var(--texto-3); margin-bottom: 10px; }
.migalha b { color: var(--texto-2); }
h2.titulo { font-size: 18px; margin-bottom: 12px; }

/* ---------- painéis e formulários ---------- */
.painel { background: var(--branco); border: 1px solid var(--borda); border-radius: 4px; margin-bottom: 14px; }
.painel-cab { padding: 9px 16px; border-bottom: 1px solid var(--borda); font-weight: bold; font-size: 12.5px; color: var(--texto-2); background: #fafbfc; display: flex; align-items: center; gap: 10px; }
.painel-cab .direita { margin-left: auto; font-weight: normal; font-size: 12px; }
.painel-corpo { padding: 14px 16px; }
.filtros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 16px; }
.campo label { display: block; font-size: 11.5px; font-weight: bold; color: var(--texto-2); margin-bottom: 4px; }
.campo select, .campo input, .campo textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 3px;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--texto);
}
.campo select:focus, .campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
.filtros-acoes { display: flex; gap: 8px; padding: 0 16px 14px; }

.btn { border-radius: 3px; font-weight: bold; font-size: 13px; padding: 8px 20px; border: 1px solid transparent; }
.btn-prim { background: var(--azul); color: #fff; }
.btn-prim:hover { background: var(--azul-escuro); }
.btn-sec { background: #fff; color: var(--azul); border-color: var(--azul); }
.btn-sec:hover { background: #eaf1fd; }
.btn-perigo { background: #fff; color: var(--erro); border-color: var(--erro); }
.btn-perigo:hover { background: var(--erro-fundo); }
.btn-mini { font-size: 12px; padding: 5px 12px; }

/* ---------- resumo do filtro ---------- */
.resumo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #eaf1fd; border: 1px solid #b9d0f5; border-radius: 4px;
  padding: 10px 16px; margin-bottom: 14px; font-size: 13px;
}
.resumo b { font-size: 15px; }
.resumo .sep { color: #b9d0f5; }
.resumo .acoes { margin-left: auto; display: flex; gap: 8px; }

/* ---------- tabelas ---------- */
table.dados { width: 100%; border-collapse: collapse; background: var(--branco); }
table.dados th { background: #fafbfc; border: 1px solid var(--borda); padding: 8px 10px; font-size: 11.5px; text-align: left; color: var(--texto-2); white-space: nowrap; }
table.dados td { border: 1px solid #e3e6ea; padding: 7px 10px; font-size: 12.5px; }
table.dados tbody tr:nth-child(even) { background: #f8f9fa; }
table.dados tbody tr:hover { background: #eef4fd; }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sit { font-size: 12px; font-weight: bold; }
.sit.atrasado { color: var(--erro); }
.sit.a-vencer { color: var(--alerta); }
.sit.em-dia { color: var(--ok); }
.sit.pagou { color: var(--azul); }
.link { color: var(--azul); text-decoration: underline; font-size: 12px; background: none; border: none; padding: 0; cursor: pointer; }

.paginacao { display: flex; align-items: center; gap: 6px; padding: 12px 0; font-size: 12.5px; color: var(--texto-2); }
.paginacao button { min-width: 28px; padding: 5px 8px; border: 1px solid var(--borda); background: #fff; border-radius: 3px; font-size: 12.5px; color: var(--azul); font-weight: bold; }
.paginacao button.pag-ativa { background: var(--azul); color: #fff; border-color: var(--azul); }
.paginacao .info { margin-left: auto; }

/* ---------- cartões de indicadores ---------- */
.cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 4px; padding: 14px 16px; }
.cartao .rotulo { font-size: 11.5px; font-weight: bold; color: var(--texto-2); }
.cartao .valor { font-size: 26px; font-weight: bold; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cartao .obs { font-size: 11.5px; color: var(--texto-3); margin-top: 3px; }
.cartao .obs.bom { color: var(--ok); }
.cartao .obs.ruim { color: var(--erro); }
.cartao.destaque { border-color: #b9d0f5; background: #f4f8ff; }
.cartao.destaque .valor { color: var(--azul); }

/* ---------- gráfico de barras simples ---------- */
.gbarras { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 6px 4px 0; }
.gmes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.gmes .pilha { width: 100%; max-width: 48px; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.gmes .via-bot { background: var(--azul); }
.gmes em { font-style: normal; font-size: 10.5px; color: var(--texto-3); }
.gmes .tot { font-size: 10.5px; color: var(--texto-2); font-weight: bold; font-variant-numeric: tabular-nums; }

/* ---------- barra/taxa ---------- */
.taxa { display: flex; align-items: center; gap: 8px; }
.taxa .trilho { flex: 1; height: 8px; background: #eef0f3; border-radius: 2px; overflow: hidden; }
.taxa .trilho i { display: block; height: 100%; background: var(--azul); }
.taxa span { font-size: 12px; font-weight: bold; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- chave liga/desliga ---------- */

/* ---------- etiquetas ---------- */
.etiqueta { font-size: 11px; font-weight: bold; padding: 3px 9px; border-radius: 3px; white-space: nowrap; display: inline-block; }
.etiqueta.azul { background: #e8eef5; color: var(--azul); }
.etiqueta.verde { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.ambar { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.vermelha { background: var(--erro-fundo); color: var(--erro); }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: 10px; align-items: center; border-radius: 4px; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; border: 1px solid; }
.aviso.amarelo { background: var(--alerta-fundo); border-color: #ecd9a0; }
.aviso.vermelho { background: var(--erro-fundo); border-color: #efb9b2; }
.aviso .acao { margin-left: auto; white-space: nowrap; }

/* ---------- modal ---------- */
.veu { position: fixed; inset: 0; background: rgba(12,30,60,.45); display: none; place-items: center; z-index: 10; }
.veu.aberto { display: grid; }
.modal { background: #fff; border-radius: 4px; width: 480px; max-width: 92vw; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal h3 { font-size: 15px; margin-bottom: 10px; }
.modal p { font-size: 13px; color: var(--texto-2); margin-bottom: 8px; }
.modal .destaque { background: var(--alerta-fundo); border: 1px solid #ecd9a0; border-radius: 3px; padding: 10px 12px; font-size: 12.5px; margin: 12px 0; }
.modal .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- conversa (atendimento) ---------- */
.atendimento { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.fila-item { padding: 11px 14px; border-bottom: 1px solid #e3e6ea; cursor: pointer; }
.fila-item:hover { background: #f0f5ff; }
.fila-item.sel { background: #eaf1fd; border-left: 4px solid var(--azul); padding-left: 10px; }
.fila-item b { font-size: 13px; display: block; }
.fila-item span { font-size: 11.5px; color: var(--texto-3); }
.fila-item .espera { float: right; font-size: 11px; color: var(--erro); font-weight: bold; }

/* ---------- ficha do cliente ---------- */
.ficha-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; padding: 14px 16px; }
.ficha-grade .item { padding: 6px 0; font-size: 13px; }
.ficha-grade .item label { display: block; font-size: 11px; font-weight: bold; color: var(--texto-3); }

.rodape { text-align: center; font-size: 11px; color: var(--texto-3); padding: 18px; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 980px) {
  .cartoes, .filtros, .ficha-grade { grid-template-columns: 1fr 1fr; }
  .duas-col, .atendimento { grid-template-columns: 1fr; }
  nav.menu { width: 180px; }
}

/* ---------- celular (diretoria consultando os números) ---------- */
.menu-botao { display: none; }
@media (max-width: 768px) {
  body { font-size: 14px; }
  .barra-gov { display: none; }
  .cabecalho { padding: 10px 14px; position: sticky; top: 0; z-index: 9; }
  .cabecalho .brasao { width: 32px; height: 32px; font-size: 16px; }
  .cabecalho h1 { font-size: 14px; }
  .cabecalho h1 small { font-size: 10.5px; }
  .cabecalho .usuario { display: none; }
  .menu-botao {
    display: block; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.5);
    color: #fff; font-size: 19px; line-height: 1; border-radius: 4px; padding: 6px 10px;
  }
  .corpo { display: block; }
  nav.menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: 240px; z-index: 20;
    box-shadow: -4px 0 24px rgba(0,0,0,.25);
    transform: translateX(100%); transition: transform .2s ease;
  }
  body.menu-aberto nav.menu { transform: none; }
  .menu-veu { position: fixed; inset: 0; background: rgba(12,30,60,.45); z-index: 19; display: none; }
  body.menu-aberto .menu-veu { display: block; }
  nav.menu a { padding: 13px 18px; font-size: 14px; }

  main { padding: 12px 12px 50px; }
  .cartoes, .filtros, .ficha-grade { grid-template-columns: 1fr; }
  .cartoes { gap: 8px; }
  .cartao .valor { font-size: 23px; }
  h2.titulo { font-size: 16px; }

  /* tabelas densas: rolagem horizontal no celular */
  table.dados { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.dados th, table.dados td { white-space: nowrap; }

  .resumo { flex-direction: column; align-items: flex-start; gap: 6px; }
  .resumo .sep { display: none; }
  .resumo .acoes { margin-left: 0; width: 100%; flex-direction: column; }
  .resumo .acoes .btn { width: 100%; }
  .filtros-acoes { flex-direction: column; padding: 0 16px 14px; }
  .filtros-acoes .btn { width: 100%; }
  .paginacao { flex-wrap: wrap; }
  .paginacao .info { margin-left: 0; width: 100%; }
  .aviso { flex-wrap: wrap; }
  .aviso .acao { margin-left: 0; width: 100%; text-align: center; }
  .gbarras { gap: 5px; height: 120px; }
  .gmes .tot { font-size: 9px; }
  .gmes em { font-size: 9.5px; }
  .painel-cab { flex-wrap: wrap; }
  .painel-cab .direita { margin-left: 0; width: 100%; }
      .modal { padding: 16px; }
  h2.titulo[style] { flex-wrap: wrap; }
}