:root{
  --verde:#2e6b4f; --verde-esc:#234f3b; --verde-claro:#e8f2ec;
  --cinza:#6b6b6b; --cinza-claro:#f4f6f5; --borda:#dfe4e1;
  --vermelho:#c0392b; --amarelo:#b8860b; --azul:#2a6f97;
  --branco:#fff; --texto:#222; --radius:12px;
  --sombra:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--cinza-claro);color:var(--texto);line-height:1.45}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{background:var(--verde);color:#fff;position:sticky;top:0;z-index:30;
  box-shadow:var(--sombra)}
.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;
  gap:16px;padding:10px 16px}
.brand{font-weight:700;font-size:1.15rem;color:#fff;display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none;opacity:.95}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{color:#eaf5ef;padding:7px 12px;border-radius:8px;font-size:.92rem}
.nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.nav a.ativo{background:rgba(255,255,255,.22);color:#fff;font-weight:600}
.user-chip{display:flex;align-items:center;gap:8px;color:#eaf5ef;font-size:.85rem}
.user-chip img{width:28px;height:28px;border-radius:50%}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:1.5rem;margin:0 0 4px}
h2{font-size:1.15rem;margin:24px 0 10px;color:var(--verde-esc)}
.sub{color:var(--cinza);margin:0 0 18px}

/* Cards / grid */
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--radius);
  padding:16px;box-shadow:var(--sombra)}
.card h3{margin:0 0 8px;font-size:1rem;color:var(--verde-esc)}

/* Stat cards */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .num{font-size:1.9rem;font-weight:700;color:var(--verde)}
.stat .lbl{color:var(--cinza);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.stat.alerta .num{color:var(--vermelho)}

/* Tabelas */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--sombra)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--borda);font-size:.9rem;vertical-align:top}
th{background:var(--verde-claro);color:var(--verde-esc);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfa}

/* Botoes */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--verde);color:#fff;
  border:none;border-radius:8px;padding:9px 16px;font-size:.9rem;cursor:pointer;
  font-weight:600;transition:.15s}
.btn:hover{background:var(--verde-esc);text-decoration:none}
.btn.sec{background:#fff;color:var(--verde);border:1px solid var(--verde)}
.btn.sec:hover{background:var(--verde-claro)}
.btn.peq{padding:6px 11px;font-size:.82rem}
.btn.cinza{background:#eceeed;color:#444}.btn.cinza:hover{background:#e0e3e1}
.btn.vermelho{background:var(--vermelho)}.btn.vermelho:hover{background:#9e2e22}
.btn.azul{background:var(--azul)}.btn.azul:hover{background:#21577a}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Forms */
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:.84rem;font-weight:600;color:var(--verde-esc)}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--borda);
  border-radius:8px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde-claro);border-color:var(--verde)}
textarea{resize:vertical;min-height:80px}
.hint{font-size:.78rem;color:var(--cinza)}
.check{flex-direction:row;align-items:center;gap:8px}
.check input{width:auto}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:600}
.b-ok{background:#e3f4ea;color:#1f7a48}
.b-erro{background:#fbe4e1;color:var(--vermelho)}
.b-pend{background:#f3eddb;color:var(--amarelo)}
.b-na{background:#eceeed;color:#777}
.b-info{background:#e3eef5;color:var(--azul)}
.b-batismo{background:#e7e1f5;color:#5a3ca8}

/* Flash */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:12px;font-size:.92rem;border:1px solid}
.flash.success{background:#e6f5ec;border-color:#bfe3cd;color:#1f7a48}
.flash.danger,.flash.error{background:#fbe4e1;border-color:#f3c4bd;color:var(--vermelho)}
.flash.warning{background:#fbf3dd;border-color:#eedcae;color:var(--amarelo)}
.flash.info{background:#e3eef5;border-color:#c4dcea;color:var(--azul)}

/* Util */
.muted{color:var(--cinza)}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}
.mt{margin-top:18px}.mb{margin-bottom:18px}
.pill-filtros{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pill-filtros a{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--borda);font-size:.86rem}
.pill-filtros a.ativo{background:var(--verde);color:#fff;border-color:var(--verde)}
.empty{text-align:center;padding:40px 20px;color:var(--cinza)}
.empty .big{font-size:2.4rem;margin-bottom:8px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:#444}
.pre{white-space:pre-wrap;font-size:.85rem;background:var(--cinza-claro);
  border:1px solid var(--borda);border-radius:8px;padding:10px}

/* PWA: botao instalar + dica iOS */
.btn-instalar{background:#fff;color:var(--verde);border:none;border-radius:8px;
  padding:6px 12px;font-weight:700;font-size:.85rem;cursor:pointer}
.btn-instalar:hover{background:var(--verde-claro)}
.ios-hint{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;
  border:1px solid var(--borda);border-radius:12px;padding:14px 16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:50;font-size:.9rem}

@media(max-width:640px){
  .nav a{padding:6px 9px;font-size:.85rem}
  .user-chip span{display:none}
  h1{font-size:1.3rem}
  .container{padding:16px 12px 60px}
  /* tabelas largas rolam na horizontal em vez de estourar a tela */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .form-grid{grid-template-columns:1fr}
  .btn,.btn.peq{min-height:38px}      /* alvos de toque maiores */
  input,select,textarea{font-size:16px} /* evita zoom automatico no iOS */
}
/* Standalone (app instalado): respeita a area segura do notch */
@media(display-mode:standalone){
  .topbar-inner{padding-top:max(10px,env(safe-area-inset-top))}
}