/* ==========================================================================
   EcoPlay / EscolaAvisa — tema PHP (DELTA)
   Fonte: CSS do index.html original (Firebase) extraído e organizado.
   Um arquivo só. Todas as cores vivem em tokens :root (sem hardcode espalhado).

   ÍNDICE
   00 · Tokens (:root)
   01 · Reset + base + tipografia (DM Sans)
   02 · Layout (.wrap) + navegação responsiva
   03 · Login (com dropdown de escola)
   04 · Telas (.screen) + cards
   05 · Formulários (inputs, selects, .row, busca, dropdown de busca)
   06 · Botões (.btn, .btn-v, .btn-danger, .btn-sm, .btn-out)
   07 · Feedback (.ok, .er) + rótulos de seção (.sl)
   08 · Badges + turnos (.turno-badge / .turno-M/V/N/I)  ← BUG CORRIGIDO
   09 · Pills de filtro de turno (Portão)
   10 · Listas de alunos/equipe (.tb/.th/.ar) + tabela listrada (.tabela)
   11 · Tela Sala (tema escuro #0c3526 + #FFD700, grid 6/4/2)
   12 · Popups e modais (saída, edição)
   13 · Config (.cfg-*)
   14 · Aniversariantes (cards + gradientes)
   15 · Banner de impersonation (.banner-imp)
   16 · master.php (tabelas de escolas/usuários, "Entrar como")
   17 · git.php (card + .saida mono + overlay #gitProg + barra .fill)
   18 · importar.php (tabela de prévia com scroll)
   19 · Topo/nav.php + telas do líder (master, git, login, zona de perigo)
   ========================================================================== */

/* ========================================================================
   00 · TOKENS
   ======================================================================== */
:root{
  /* verdes institucionais */
  --v:#1a9e6e;          /* primária */
  --vd:#116b4a;         /* verde escuro / hover */
  --vl:#e6f7f1;         /* verde claro / fundos suaves */
  --vm:#a8e6cf;         /* borda verde / realces */

  /* neutros */
  --bg:#f7f8f6;         /* fundo da página */
  --s:#fff;             /* superfície / cards */
  --b:#e4e6e2;          /* borda padrão */
  --line:#e4e6e2;       /* alias de --b (linhas divisórias) */
  --t:#1a1c18;          /* texto principal */
  --m:#6b7068;          /* texto secundário / muted */

  /* semânticos */
  --danger:#c0392b;     /* destrutivo (remover, erro) */
  --danger-bg:#fdf0ee;  /* fundo suave destrutivo */
  --danger-b:#f0a09a;   /* borda destrutivo */

  /* âmbar de destaque (impersonation, git progress, mensagens especiais) */
  --amber:#E8A020;
  --amber-d:#B87708;
  --amber-bg:#FEF9C3;

  /* raios */
  --r:12px;             /* cartões / caixas */
  --rs:8px;             /* inputs / botões */

  /* turnos — âmbar / azul / roxo / verde (antes hardcoded em ~5 lugares no JS) */
  --turno-m:#D97706;  --turno-m-bg:#FEF9C3;  --turno-m-t:#854D0E;   /* Matutino  */
  --turno-v:#2563EB;  --turno-v-bg:#DBEAFE;  --turno-v-t:#1E40AF;   /* Vespertino*/
  --turno-n:#7C3AED;  --turno-n-bg:#EDE9FE;  --turno-n-t:#5B21B6;   /* Noturno   */
  --turno-i:#16A34A;  --turno-i-bg:#DCFCE7;  --turno-i-t:#166534;   /* Integral  */

  /* tela Sala (tema escuro) */
  --sala-bg:#0c3526;
  --sala-gold:#FFD700;
  --sala-mint:#5DCAA5;
}

/* ========================================================================
   01 · RESET + BASE + TIPOGRAFIA
   ======================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--t);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--v);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ========================================================================
   02 · LAYOUT + NAVEGAÇÃO RESPONSIVA
   ======================================================================== */
.wrap{max-width:680px;margin:0 auto;padding:1.5rem;}

nav{
  background:var(--s);
  border-bottom:1px solid var(--b);
  padding:0 1rem;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:100;
}
.brand{
  font-size:14px;font-weight:600;color:var(--v);
  padding:1rem 1rem 1rem 0;
  border-right:1px solid var(--b);
  margin-right:1rem;
  white-space:nowrap;
}
.tabs{display:flex;flex:1;}
.tab{
  padding:.8rem 1rem;font-size:13px;font-weight:500;color:var(--m);
  cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;
  white-space:nowrap;transition:all .15s;
}
.tab:hover{color:var(--t);}
.tab.active{color:var(--v);border-bottom-color:var(--v);}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px;}
.nav-email{font-size:12px;color:var(--m);}

/* Nav responsiva: em telas pequenas as abas rolam na horizontal sem estourar */
@media(max-width:640px){
  nav{flex-wrap:wrap;padding:0 .5rem;}
  .brand{border-right:none;margin-right:0;padding:.75rem .5rem .5rem 0;width:100%;}
  .nav-r{order:2;width:100%;justify-content:flex-end;padding-bottom:.5rem;}
  .tabs{
    order:3;width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-top:1px solid var(--b);
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:.7rem .75rem;font-size:12px;flex:0 0 auto;}
}

/* ========================================================================
   03 · LOGIN (com dropdown de escola)
   ======================================================================== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.login-box{
  background:var(--s);border:1px solid var(--b);border-radius:var(--r);
  padding:2rem;width:100%;max-width:400px;
}
.logo{font-size:22px;font-weight:600;color:var(--v);margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--m);margin-bottom:1.5rem;}
.login-foot{font-size:12px;color:var(--m);text-align:center;margin-top:1rem;}

/* ========================================================================
   04 · TELAS + CARDS
   ======================================================================== */
.screen{display:none;max-width:680px;margin:0 auto;padding:1.5rem;}
.screen.active{display:block;}

.card{
  background:var(--s);border:1px solid var(--b);border-radius:var(--r);
  padding:1.25rem;margin-bottom:1rem;
}
.ct{font-size:14px;font-weight:600;margin-bottom:3px;}
.cs{font-size:13px;color:var(--m);margin-bottom:1.25rem;line-height:1.5;}

/* ========================================================================
   05 · FORMULÁRIOS
   ======================================================================== */
.f{margin-bottom:.875rem;}
.f label{
  display:block;font-size:11px;font-weight:600;color:var(--m);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;
}
.f input,.f select,.f textarea{
  width:100%;padding:9px 12px;font-size:14px;font-family:'DM Sans',sans-serif;
  border:1px solid var(--b);border-radius:var(--rs);
  background:var(--bg);color:var(--t);outline:none;
}
.f textarea{resize:vertical;}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.12);background:#fff;
}
.row{display:flex;gap:10px;}
.row .f{flex:1;}

/* busca (Portão) + dropdown de resultados */
.search input{
  width:100%;padding:11px 14px;font-size:15px;font-family:'DM Sans',sans-serif;
  border:1.5px solid var(--b);border-radius:var(--rs);background:#fff;color:var(--t);outline:none;
}
.search input:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.12);}
.dd{
  background:var(--s);border:1px solid var(--b);border-radius:var(--rs);
  overflow:hidden;margin-top:4px;display:none;box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.di{
  padding:11px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--b);
}
.di:last-child{border-bottom:none;}
.di:hover{background:var(--vl);}
.dn{font-size:14px;font-weight:500;}
.ds{font-size:12px;color:var(--v);}

/* aluno selecionado (Portão) */
.sel{
  display:none;padding:12px 14px;background:var(--vl);border:1px solid var(--vm);
  border-radius:var(--rs);margin-bottom:1rem;
}
.sn{font-size:16px;font-weight:600;color:var(--vd);}
.ss{font-size:13px;color:var(--v);margin-top:2px;}
.sc{float:right;font-size:12px;color:var(--v);cursor:pointer;font-weight:500;}

/* avisos "chamados hoje" (Portão) */
.ai{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:var(--s);border:1px solid var(--b);border-radius:var(--rs);margin-bottom:6px;
}
.ai.new{background:var(--vl);border-color:var(--vm);}
.an{font-size:14px;font-weight:500;}
.as{font-size:12px;color:var(--m);margin-top:1px;}
.ah{font-size:12px;color:var(--m);}

/* ========================================================================
   06 · BOTÕES
   ======================================================================== */
.btn{
  display:block;width:100%;padding:10px 16px;font-size:14px;font-weight:600;
  font-family:'DM Sans',sans-serif;border:none;border-radius:var(--rs);
  cursor:pointer;text-align:center;transition:all .15s;
}
/* .btn-v = verde (SPEC). .btn-g mantido como alias do original. */
.btn-v,.btn-g{background:var(--v);color:#fff;}
.btn-v:hover,.btn-g:hover{background:var(--vd);}

.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#a5321f;}

.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;}

/* botão pequeno (editar/remover em listas, "Entrar como" no master) */
.btn-sm{
  display:inline-block;width:auto;padding:4px 10px;font-size:12px;
  font-family:'DM Sans',sans-serif;background:transparent;border:1px solid var(--b);
  color:var(--m);border-radius:6px;cursor:pointer;transition:all .15s;
}
.btn-sm:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-b);}
/* variante verde do botão pequeno (ações não-destrutivas, ex: "Entrar como") */
.btn-sm.v:hover{background:var(--vl);color:var(--vd);border-color:var(--vm);}

/* botão outline no topo (Sair) */
.btn-out{
  padding:5px 12px;font-size:12px;font-family:'DM Sans',sans-serif;
  background:transparent;border:1px solid var(--b);color:var(--m);
  border-radius:6px;cursor:pointer;transition:all .15s;
}
.btn-out:hover{background:var(--danger-bg);color:var(--danger);}

/* ========================================================================
   07 · FEEDBACK + RÓTULOS DE SEÇÃO
   ======================================================================== */
.ok{
  padding:10px 14px;border-radius:var(--rs);font-size:13px;margin-top:.75rem;display:none;
  background:var(--vl);color:var(--vd);border:1px solid var(--vm);
}
.er{
  padding:10px 14px;border-radius:var(--rs);font-size:13px;margin-top:.75rem;display:none;
  background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-b);
}
.sl{
  font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;
  letter-spacing:.05em;margin:1.25rem 0 .625rem;
}
.empty{font-size:13px;color:var(--m);text-align:center;padding:1.5rem 0;}

/* ========================================================================
   08 · BADGES + TURNOS  ← BUG CORRIGIDO
   O index.html original usava .turno-badge e .turno-M/V/N/I em renderAlunos
   mas NUNCA as definiu. Aqui elas existem, alimentadas pelos tokens de turno.
   ======================================================================== */
.badge{
  background:var(--v);color:#fff;font-size:10px;font-weight:600;
  padding:1px 6px;border-radius:99px;margin-left:5px;display:inline-block;
}

.turno-badge{
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;
  display:inline-flex;align-items:center;gap:4px;line-height:1.4;
  border:1px solid transparent;
}
.turno-M{background:var(--turno-m-bg);color:var(--turno-m-t);border-color:var(--turno-m);}
.turno-V{background:var(--turno-v-bg);color:var(--turno-v-t);border-color:var(--turno-v);}
.turno-N{background:var(--turno-n-bg);color:var(--turno-n-t);border-color:var(--turno-n);}
.turno-I{background:var(--turno-i-bg);color:var(--turno-i-t);border-color:var(--turno-i);}

/* ========================================================================
   09 · PILLS DE FILTRO DE TURNO (Portão)
   Classes utilitárias p/ substituir o cssText inline do original.
   Uso: <div class="pill" data-on> / classe pill-M/V/N/I quando selecionada.
   ======================================================================== */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;
  cursor:pointer;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--m);border:1.5px solid var(--b);transition:all .15s;
}
.pill:hover{border-color:var(--vm);}
.pill.on-all{background:var(--vl);color:var(--vd);border-color:var(--v);}
.pill.pill-M{background:var(--turno-m-bg);color:var(--turno-m-t);border-color:var(--turno-m);}
.pill.pill-V{background:var(--turno-v-bg);color:var(--turno-v-t);border-color:var(--turno-v);}
.pill.pill-N{background:var(--turno-n-bg);color:var(--turno-n-t);border-color:var(--turno-n);}
.pill.pill-I{background:var(--turno-i-bg);color:var(--turno-i-t);border-color:var(--turno-i);}
.pill-label{font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;letter-spacing:.05em;}

/* ========================================================================
   10 · LISTAS DE ALUNOS/EQUIPE + TABELA LISTRADA
   ======================================================================== */
/* agrupamento por série/função (original) */
.tb{margin-bottom:1rem;}
.th{
  font-size:11px;font-weight:600;color:var(--vd);text-transform:uppercase;
  padding:6px 10px;background:var(--vl);border-radius:var(--rs);margin-bottom:4px;
}
.ar{
  display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
  background:var(--s);border:1px solid var(--b);border-radius:var(--rs);margin-bottom:4px;
}
.ar-info{min-width:0;}
.ar-nome{font-size:14px;font-weight:500;color:var(--t);}

/* tabela listrada genérica (.tabela) — master, importar, listagens */
.tabela{width:100%;border-collapse:collapse;font-size:13px;}
.tabela th{
  text-align:left;font-size:11px;font-weight:600;color:var(--m);
  text-transform:uppercase;letter-spacing:.05em;
  padding:8px 10px;border-bottom:2px solid var(--b);white-space:nowrap;
}
.tabela td{padding:8px 10px;border-bottom:1px solid var(--b);color:var(--t);vertical-align:middle;}
.tabela tbody tr:nth-child(odd){background:var(--bg);}
.tabela tbody tr:hover{background:var(--vl);}
.tabela td.acoes{white-space:nowrap;text-align:right;}

/* ========================================================================
   11 · TELA SALA (tema escuro #0c3526 + #FFD700, grid 6/4/2)
   ======================================================================== */
#screen-sala{width:100%;padding:.75rem;display:none;}
.sala{background:var(--sala-bg);border-radius:12px;padding:1.25rem 1.5rem;width:100%;}
.sala-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;flex-wrap:wrap;gap:8px;
}
.sala-esc{
  font-size:18px;font-weight:700;color:var(--sala-gold);
  letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 12px rgba(255,215,0,.4);
}
.sala-clk{font-size:13px;color:var(--sala-mint);}
.sala-h{font-size:20px;font-weight:600;color:#fff;margin-bottom:4px;}
.sala-d{font-size:13px;color:var(--sala-mint);margin-bottom:1rem;}
.sala-fb{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap;}
.sala-fl{font-size:11px;color:var(--sala-mint);font-weight:600;text-transform:uppercase;}
.sala-fs{
  padding:6px 10px;font-size:13px;font-family:'DM Sans',sans-serif;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(93,202,165,.4);
  border-radius:8px;outline:none;cursor:pointer;
}
.sala-fs option{background:var(--sala-bg);}
.sala-sb{
  margin-left:auto;padding:5px 12px;font-size:12px;font-family:'DM Sans',sans-serif;
  font-weight:500;background:rgba(255,255,255,.08);color:#9FE1CB;
  border:1px solid rgba(93,202,165,.3);border-radius:8px;cursor:pointer;
}
.sala-sb.muted{opacity:.45;}
.sala-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
@media(max-width:900px){.sala-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:600px){.sala-grid{grid-template-columns:repeat(2,1fr);}}
@keyframes si{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.sala-card{
  background:#fff;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;
  animation:si .3s ease;overflow:hidden;cursor:pointer;transition:background .15s;
}
.sala-card:hover{background:#f0fdf8;}
.sala-cn{font-size:12px;font-weight:600;color:#1a1a1a;line-height:1.3;word-break:break-word;}
.sala-cs{font-size:11px;color:#777;margin-top:2px;}
.sala-empty{font-size:14px;color:var(--sala-mint);text-align:center;padding:3rem 0;}
.sala-foot{font-size:11px;color:rgba(93,202,165,.4);text-align:center;margin-top:1rem;}

/* ========================================================================
   12 · POPUPS E MODAIS
   ======================================================================== */
/* popup de confirmação de saída */
.popup-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  align-items:center;justify-content:center;z-index:999;display:none;
}
.popup-bg.open{display:flex;}
.popup-box{
  background:#fff;border-radius:var(--r);padding:1.75rem;max-width:360px;width:90%;text-align:center;
}
.popup-nome{font-size:18px;font-weight:600;color:var(--t);margin-bottom:4px;}
.popup-serie{font-size:13px;color:var(--m);margin-bottom:1.5rem;}
.popup-btns{display:flex;gap:10px;}
.popup-btns button{
  flex:1;padding:10px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;
  border:none;border-radius:var(--rs);cursor:pointer;
}
.popup-ok{background:var(--v);color:#fff;}
.popup-ok:hover{background:var(--vd);}
.popup-cancel{background:var(--bg);color:var(--m);border:1px solid var(--b) !important;}

/* modal de edição (aluno / membro) */
.edit-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;z-index:500;
}
.edit-bg.open{display:flex;}
.edit-box{
  background:var(--s);border-radius:var(--r);padding:1.75rem;max-width:480px;width:92%;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.edit-box h3{font-size:16px;font-weight:600;margin-bottom:1.25rem;color:var(--t);}
.edit-btns{display:flex;gap:10px;margin-top:1.25rem;}
.edit-btns button{
  flex:1;padding:10px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;
  border:none;border-radius:var(--rs);cursor:pointer;
}
.edit-save{background:var(--v);color:#fff;}
.edit-save:hover{background:var(--vd);}
.edit-cancel{background:var(--bg);color:var(--m);border:1px solid var(--b);}

/* seletor de turno em formulários (cadastro/edição) — substitui cssText inline */
.turno-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.turno-opt{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;
  cursor:pointer;font-size:13px;font-weight:500;color:var(--m);
  border:1.5px solid var(--b);background:transparent;transition:all .15s;user-select:none;
}
.turno-opt.sel-M{background:var(--turno-m-bg);color:var(--turno-m-t);border-color:var(--turno-m);}
.turno-opt.sel-V{background:var(--turno-v-bg);color:var(--turno-v-t);border-color:var(--turno-v);}
.turno-opt.sel-N{background:var(--turno-n-bg);color:var(--turno-n-t);border-color:var(--turno-n);}
.turno-opt.sel-I{background:var(--turno-i-bg);color:var(--turno-i-t);border-color:var(--turno-i);}

/* ========================================================================
   13 · CONFIG
   ======================================================================== */
.cfg-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--b);
}
.cfg-row:last-child{border-bottom:none;}
.cfg-label{font-size:14px;font-weight:500;color:var(--t);}
.cfg-desc{font-size:12px;color:var(--m);margin-top:2px;}
.cfg-select,.cfg-input{
  padding:7px 12px;font-size:14px;font-family:'DM Sans',sans-serif;
  border:1px solid var(--b);border-radius:var(--rs);background:var(--bg);color:var(--t);
  outline:none;cursor:pointer;
}
.cfg-input{width:180px;cursor:text;}
.cfg-select:focus,.cfg-input:focus{border-color:var(--v);}

/* ========================================================================
   14 · ANIVERSARIANTES (cards + gradientes)
   ======================================================================== */
.aniv-sec{
  font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;
  letter-spacing:.05em;margin:1.25rem 0 .625rem;
}
.aniv-sec.equipe{color:#059669;}
.aniv-card{
  background:#fff;border:1px solid var(--b);border-radius:12px;padding:14px 16px;
  margin-bottom:8px;display:flex;align-items:center;gap:14px;
}
.aniv-card.hoje{border-color:#FDE68A;box-shadow:0 2px 8px rgba(251,191,36,.2);}
.aniv-card.equipe.hoje{border-color:#6EE7B7;box-shadow:0 2px 8px rgba(16,185,129,.2);}
.aniv-ava{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--bg);
}
.aniv-card.hoje .aniv-ava{font-size:22px;background:linear-gradient(135deg,#FEF9C3,#FDE68A);}
.aniv-card.equipe .aniv-ava{background:#f0fdf4;}
.aniv-card.equipe.hoje .aniv-ava{background:linear-gradient(135deg,#D1FAE5,#6EE7B7);}
.aniv-nome{font-size:15px;font-weight:600;color:var(--t);}
.aniv-meta{font-size:12px;color:var(--m);margin-top:2px;}
.aniv-dia{font-weight:600;color:var(--turno-m);}
.aniv-dia.equipe{color:#059669;}
/* mensagem especial destacada (gradiente âmbar) */
.aniv-msg{
  background:linear-gradient(135deg,#FEF9C3,#FDE68A);border:1px solid #FCD34D;
  border-radius:12px;padding:14px 18px;margin-bottom:12px;
}
.aniv-msg-t{font-size:13px;font-weight:600;color:#92400E;margin-bottom:4px;}
.aniv-msg-b{font-size:14px;color:#78350F;line-height:1.5;}

/* ========================================================================
   15 · BANNER DE IMPERSONATION (fixo, âmbar, topo)
   ======================================================================== */
.banner-imp{
  position:sticky;top:0;z-index:200;
  background:var(--amber);color:#3a2a00;
  padding:8px 16px;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--amber-d);
}
.banner-imp a{color:#3a2a00;text-decoration:underline;font-weight:700;}
.banner-imp a:hover{color:#000;}

/* ========================================================================
   16 · master.php (tabelas de escolas/usuários + "Entrar como")
   ======================================================================== */
.master-head{margin-bottom:1.25rem;}
.master-head h1{font-size:20px;font-weight:600;color:var(--t);}
.master-head p{font-size:13px;color:var(--m);margin-top:2px;}
/* selo de papel na tabela de usuários */
.selo{
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.03em;display:inline-block;
}
.selo-master{background:var(--amber-bg);color:var(--amber-d);}
.selo-admin{background:var(--turno-v-bg);color:var(--turno-v-t);}
.selo-usuario{background:var(--bg);color:var(--m);border:1px solid var(--b);}
/* indicador ativo/inativo */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.dot-on{background:var(--v);}
.dot-off{background:#cbd0ca;}

/* ========================================================================
   17 · git.php (card + saída mono + overlay de progresso + barra âmbar)
   ======================================================================== */
.saida{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  background:#0d0d0d;color:#e8e8e8;border-radius:var(--rs);
  padding:14px 16px;max-height:340px;overflow:auto;margin-top:1rem;
}
/* linha de status NO AR × PENDENTE */
.git-status{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.git-status .lbl{font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;letter-spacing:.05em;}
.git-status .val{font-size:14px;font-weight:600;color:var(--t);font-family:'JetBrains Mono',monospace;}

/* overlay de progresso (#gitProg) */
#gitProg{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;z-index:600;
}
#gitProg.open{display:flex;}
.git-prog-box{
  background:#fff;border-radius:var(--r);padding:1.75rem;max-width:420px;width:90%;text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.git-prog-box h3{font-size:16px;font-weight:600;margin-bottom:.5rem;color:var(--t);}
.git-prog-box p{font-size:13px;color:var(--m);margin-bottom:1.25rem;}
.bar{
  height:8px;border-radius:99px;background:var(--b);overflow:hidden;
}
.bar .fill{
  height:100%;width:30%;border-radius:99px;
  background:linear-gradient(90deg,var(--amber),var(--amber-d));
  animation:barmove 1.1s ease-in-out infinite;
}
@keyframes barmove{
  0%{margin-left:-30%;} 100%{margin-left:100%;}
}

/* ========================================================================
   18 · importar.php (tabela de prévia com scroll)
   ======================================================================== */
.imp-textarea{
  width:100%;min-height:160px;padding:12px 14px;font-size:13px;
  font-family:'JetBrains Mono',ui-monospace,monospace;line-height:1.5;
  border:1px solid var(--b);border-radius:var(--rs);background:var(--bg);color:var(--t);
  outline:none;resize:vertical;
}
.imp-textarea:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.12);background:#fff;}
.imp-acoes{display:flex;gap:10px;flex-wrap:wrap;margin:1rem 0;}
.imp-acoes .btn{width:auto;}
/* prévia com scroll vertical (352 alunos não estouram a tela) */
.imp-previa{
  max-height:360px;overflow:auto;border:1px solid var(--b);border-radius:var(--rs);margin-top:.5rem;
}
.imp-previa .tabela th{
  position:sticky;top:0;background:var(--s);z-index:1;
}
.imp-resultado{
  margin-top:1rem;padding:12px 14px;border-radius:var(--rs);font-size:13px;
  background:var(--vl);color:var(--vd);border:1px solid var(--vm);
}
.imp-resultado.vazio{background:var(--bg);color:var(--m);border-color:var(--b);}

/* ========================================================================
   19 · TOPO / nav.php + TELAS DO LÍDER (master, git, login, importar, zona perigo)
   Classes usadas pelos arquivos do LÍDER. Tudo alimentado pelos tokens :root.
   ======================================================================== */

/* --- barra de topo (includes/nav.php) --- */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--s);border-bottom:1px solid var(--line);
  padding:10px 18px;position:sticky;top:0;z-index:100;flex-wrap:wrap;
}
.topo-marca{font-size:15px;color:var(--t);}
.topo-marca b{font-weight:700;color:var(--v);}
.topo-escola{color:var(--m);font-weight:500;}
.topo-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.topo-usuario{color:var(--m);font-size:13px;}

/* --- botão mini (serve como <a> e <button>) --- */
.btn-mini{
  display:inline-flex;align-items:center;gap:5px;width:auto;
  padding:5px 10px;font-size:12.5px;font-weight:600;font-family:'DM Sans',sans-serif;
  line-height:1.2;background:var(--bg);color:var(--t);border:1px solid var(--b);
  border-radius:8px;cursor:pointer;text-decoration:none;transition:all .15s;
}
.btn-mini:hover{background:var(--vl);color:var(--vd);border-color:var(--vm);text-decoration:none;}
.btn-mini[disabled],.btn-mini:disabled{opacity:.55;cursor:not-allowed;}

/* botão escuro (ex: ação neutra de destaque) */
.btn-escuro{background:var(--t);color:#fff;border:none;}
.btn-escuro:hover{background:#000;color:#fff;}

/* botão que ocupa a linha toda (login) */
.btn-bloco{width:100%;}

/* --- utilitários de layout --- */
.inline{display:inline;}
.form-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.form-linha input,.form-linha select{
  flex:1;min-width:140px;padding:9px 12px;font-size:14px;font-family:'DM Sans',sans-serif;
  border:1px solid var(--b);border-radius:var(--rs);background:var(--bg);color:var(--t);outline:none;
}
.form-linha input:focus,.form-linha select:focus{
  border-color:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.12);background:#fff;
}
.form-linha .btn,.form-linha .btn-mini,.form-linha button{flex:0 0 auto;}

/* célula/bloco de ações (editar/remover/entrar como) */
.acoes,td.acoes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
td.acoes{justify-content:flex-end;}

/* célula vazia / placeholder */
.vazio{color:var(--m);font-style:italic;text-align:center;}

/* aviso de sucesso compacto (topo de listas) */
.aviso-ok{
  background:var(--vl);color:var(--vd);border:1px solid var(--vm);
  border-radius:8px;padding:8px 14px;margin-bottom:14px;font-size:13px;
}

/* linha selecionada na tabela */
.linha-sel td{background:var(--vl);}

/* --- títulos de página (wrap/h1) --- */
h1 .hl,.hl{color:var(--v);}
h1 span{color:var(--v);}
.sub{font-size:14px;color:var(--m);margin-bottom:18px;}

/* --- zona de perigo (details/summary) --- */
.zona-perigo{margin-top:1.5rem;}
.zona-perigo>summary{
  font-size:13px;font-weight:600;color:var(--danger);cursor:pointer;
  list-style:none;padding:6px 0;user-select:none;
}
.zona-perigo>summary::-webkit-details-marker{display:none;}
.zona-perigo>summary::before{content:'▸ ';color:var(--danger);}
.zona-perigo[open]>summary::before{content:'▾ ';}
.zona-perigo>summary:hover{color:#a5321f;}
.zona-perigo-corpo{
  display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--danger-b);background:var(--danger-bg);
  border-radius:var(--rs);padding:14px 16px;margin-top:.5rem;
}
.zona-perigo-corpo form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;}

/* --- login (página do líder) --- */
body.pagina-login{
  background:var(--bg);min-height:100vh;display:grid;place-items:center;padding:1.5rem;
}
.login-card{
  background:var(--s);border:1px solid var(--b);border-radius:var(--r);
  padding:2rem;max-width:380px;width:92vw;
}
.login-logo{font-size:20px;font-weight:600;color:var(--v);text-align:center;}
/* .login-sub já existe (seção 03); mantido centralizado aqui p/ a página de login */
.login-card .login-sub{text-align:center;margin-bottom:12px;}
.login-erro{
  background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-b);
  border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:13px;text-align:center;
}
.login-card label{
  display:block;font-size:11px;font-weight:600;color:var(--m);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;
}
.login-card input,.login-card select{
  width:100%;padding:9px 12px;font-size:14px;font-family:'DM Sans',sans-serif;
  border:1px solid var(--b);border-radius:var(--rs);background:var(--bg);color:var(--t);
  outline:none;margin-bottom:10px;
}
.login-card input:focus,.login-card select:focus{
  border-color:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.12);background:#fff;
}
/* vídeo demo embutido no rodapé do login */
.login-demo{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--b);}
.login-demo-titulo{
  font-size:12px;font-weight:600;color:var(--m);text-align:center;margin-bottom:8px;
}
.login-demo video{
  width:100%;border-radius:var(--rs);border:1px solid var(--b);background:#000;display:block;
}

/* --- git.php (ações + passos + overlay padronizado .trilho>.fill) --- */
.git-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.passo{font-size:13px;color:var(--m);line-height:1.7;}

/* overlay de progresso — nomes padronizados usados pelo git.php do líder */
#gitProg .box{
  background:#fff;border-radius:var(--r);padding:1.75rem;max-width:420px;width:90%;
  text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.25);
}
#gitProg .tt{font-size:16px;font-weight:600;color:var(--t);margin-bottom:.5rem;}
#gitProg .mini{font-size:13px;color:var(--m);margin-bottom:1.25rem;}
/* trilho = trilha; .fill = preenchimento âmbar. A largura é controlada pelo JS
   do git.php (0→95%), então é DETERMINADA: transição suave, sem loop. */
.trilho{height:10px;border-radius:99px;background:var(--b);overflow:hidden;}
.trilho .fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--amber),var(--amber-d));
  transition:width .4s ease;
}

/* ========================================================================
   20 · MASTER — dashboard geral, grid de escolas em cards, stats da escola
   ======================================================================== */
.stats-escola{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px}
.stat{background:var(--bg);border:1px solid var(--b);border-radius:var(--rs);padding:12px 10px;text-align:center}
.stat b{display:block;font-size:22px;line-height:1.2;color:var(--vd)}
.stat span{font-size:11.5px;color:var(--m)}
.stat.destaque{background:var(--vl);border-color:var(--vm)}
.stat.destaque b{color:var(--v)}

.escolas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.escola-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--s);border:1px solid var(--b);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;color:var(--t);transition:all .15s;
}
.escola-card:hover{border-color:var(--v);box-shadow:0 3px 12px rgba(26,158,110,.14);transform:translateY(-2px)}
.escola-card.sel{border-color:var(--v);background:var(--vl)}
.escola-card.off{opacity:.6}
.escola-card-top{display:flex;justify-content:space-between;align-items:center}
.escola-emoji{font-size:22px}
.escola-card-nome{font-weight:600;font-size:15px;line-height:1.3}
.escola-card-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--m)}
.escola-card-abrir{font-size:12.5px;font-weight:600;color:var(--v);margin-top:auto}

.detalhe-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:600px){
  .escolas-grid{grid-template-columns:1fr 1fr}
  .stats-escola{grid-template-columns:repeat(2,1fr)}
}

/* 21 · vídeo de apresentação na home (login) */
.login-demo{margin-top:18px;border-top:1px solid var(--b);padding-top:14px}
.login-demo-titulo{font-size:13px;font-weight:600;color:var(--m);margin-bottom:8px}
.login-demo video{width:100%;border-radius:var(--rs);border:1px solid var(--b);background:#0c3526;display:block}

/* 22 · tela Git — pill de status de conexão (o "verdinho") */
.con-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid var(--b);background:var(--bg);color:var(--m)}
.con-pill .con-dot{width:9px;height:9px;border-radius:50%;background:#9ca3af;flex:0 0 auto}
.con-pill.con-ok{background:var(--vl);border-color:var(--vm);color:var(--vd)}
.con-pill.con-ok .con-dot{background:var(--v);box-shadow:0 0 0 3px rgba(26,158,110,.25);animation:pulso 1.6s ease-in-out infinite}
.con-pill.con-erro{background:var(--danger-bg);border-color:var(--danger-b);color:var(--danger)}
.con-pill.con-erro .con-dot{background:var(--danger)}
@keyframes pulso{0%,100%{box-shadow:0 0 0 3px rgba(26,158,110,.25)}50%{box-shadow:0 0 0 6px rgba(26,158,110,.10)}}

/* 23 · tela Apresentação (pública) — vídeo em destaque no tema do telão */
body.pagina-apresentacao{background:var(--sala-bg);color:#fff;min-height:100vh}
.apres-wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px}
.apres-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:34px}
.apres-logo{font-size:17px}
.apres-logo b{color:var(--sala-gold);font-weight:700}
.apres-logo span{color:var(--sala-mint);font-size:12.5px;margin-left:4px}
.apres-titulo{font-size:clamp(26px,4.5vw,44px);font-weight:700;line-height:1.15;text-align:center;margin-bottom:10px}
.apres-titulo span{color:var(--sala-gold)}
.apres-sub{text-align:center;color:var(--sala-mint);font-size:15px;margin-bottom:26px}
.apres-video video{width:100%;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 60px rgba(0,0,0,.45);background:#000}
.apres-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:30px 0}
.apres-feat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px;font-size:13px;color:#d8e6df;line-height:1.55}
.apres-feat span{display:block;font-size:24px;margin-bottom:6px}
.apres-feat b{display:block;color:#fff;font-size:14.5px;margin-bottom:3px}
.apres-cta{text-align:center;margin-top:8px}
.apres-cta .btn{display:inline-block;width:auto;padding:12px 34px;font-size:15px}
.apres-dominio{margin-top:14px;color:var(--sala-gold);font-weight:600;letter-spacing:.04em}
.btn-apres{background:var(--sala-bg);color:#fff;text-align:center;display:block;text-decoration:none}
.btn-apres:hover{background:#0a2c20;color:var(--sala-gold);text-decoration:none}
.apres-acoes{display:flex;gap:8px;align-items:center}
.pagina-apresentacao .btn-mini{background:rgba(255,255,255,.92)}

/* 24 · tela Usuários (master) — filtros + tabela larga */
.wrap-largo{max-width:1050px}
.filtros-usuarios input[type=text]{flex:2;min-width:180px}
.filtros-usuarios select{flex:1;min-width:140px}

/* 25 · Apresentação limpa (menu padrão no topo, conteúdo centralizado) */
.apres-wrap{padding-top:34px}
.apres-feat{text-align:center}
.apres-feat b{font-size:15px;margin-bottom:5px}
.escola-card-top{justify-content:flex-end}

/* tabelas largas (usuários/master) roláveis no celular — nada estoura a tela */
.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-scroll .tabela{min-width:640px}
@media (max-width:640px){
  td.acoes,.acoes{flex-wrap:nowrap}
  .acoes .btn-mini{padding:5px 8px;font-size:11.5px;white-space:nowrap}
}