/* ============================================================
   PLATAFORMA DE ESTUDO — estilo compartilhado
   ============================================================ */
:root{
  --azul:#0b3c66;
  --azul-claro:#1170b8;
  --acento:#00c07a;
  --acento-escuro:#009a61;
  --perigo:#c0392b;
  --alerta:#d4761a;
  --texto:#12212e;
  --suave:#51677a;
  --borda:#e2eaf2;
  --fundo:#f4f8fc;
  --raio:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--fundo);color:var(--texto);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--azul-claro)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- Topo ---------- */
.topo{
  background:linear-gradient(160deg,#0b3c66,#08223a);color:#fff;
  padding:16px 0;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 18px rgba(8,34,58,.18);
}
.topo .wrap{display:flex;align-items:center;gap:18px}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.3px;font-size:17px}
.marca .sig{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--azul-claro),var(--azul));
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  border:1px solid rgba(255,255,255,.18);
}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topo nav a,.topo nav button{
  color:#c6dcee;text-decoration:none;font-size:14.5px;font-weight:600;
  background:none;border:0;cursor:pointer;font-family:inherit;
  padding:8px 13px;border-radius:9px;
}
.topo nav a:hover,.topo nav button:hover{background:rgba(255,255,255,.10);color:#fff}
.topo nav a.ativo{background:rgba(255,255,255,.13);color:#fff}
.selo-admin{
  background:rgba(0,192,122,.18);border:1px solid rgba(0,192,122,.45);
  color:#8ff0c8;font-size:11.5px;font-weight:800;letter-spacing:.8px;
  padding:4px 10px;border-radius:99px;text-transform:uppercase;
}

/* ---------- Conteúdo ---------- */
main{padding:38px 0 70px}
h1.titulo{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.6px;font-weight:800;line-height:1.2}
p.lead{color:var(--suave);font-size:16.5px;margin-top:7px;max-width:66ch}
h2.secao{
  font-size:13px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--azul-claro);margin:38px 0 14px;
}

/* ---------- Cartões ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.card{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px;display:block;text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
a.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,60,102,.10);border-color:var(--azul-claro)}
.card h3{font-size:17.5px;letter-spacing:-.2px;margin-bottom:6px}
.card p{color:var(--suave);font-size:14.5px}
.card .rotulo{
  font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--azul-claro);margin-bottom:9px;display:block;
}

/* Lista de módulos */
.lista{list-style:none;display:grid;gap:11px}
.lista li a,.lista li .item{
  display:flex;gap:15px;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--borda);border-radius:13px;padding:15px 19px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.lista li a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,60,102,.09);border-color:var(--azul-claro)}
.lista .n{
  flex:none;width:40px;height:40px;border-radius:10px;
  background:linear-gradient(140deg,var(--azul-claro),var(--azul));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.lista .txt{flex:1;min-width:0}
.lista .txt b{display:block;font-size:16px;letter-spacing:-.2px}
.lista .txt span{font-size:14px;color:var(--suave);display:block}
.tag{
  font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:99px;white-space:nowrap;
  background:rgba(17,112,184,.10);color:var(--azul-claro);
}
.tag.ok{background:rgba(0,192,122,.14);color:var(--acento-escuro)}
.tag.off{background:rgba(212,118,26,.14);color:var(--alerta)}

/* ---------- Formulários ---------- */
.caixa{
  background:#fff;border:1px solid var(--borda);border-radius:18px;
  padding:30px;max-width:430px;margin:0 auto;
}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--texto);
  border:1px solid var(--borda);border-radius:11px;padding:13px 15px;background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(17,112,184,.14);
}
.campo textarea{min-height:96px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:linear-gradient(160deg,var(--acento),var(--acento-escuro));color:#04231a;
  font-family:inherit;font-size:16px;font-weight:800;border:0;border-radius:11px;
  padding:15px 22px;cursor:pointer;transition:filter .15s ease,transform .15s ease;
}
.btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secundario{background:#fff;border:1px solid var(--borda);color:var(--texto)}
.btn.perigo{background:#fff;border:1px solid #f0c8c2;color:var(--perigo)}
.btn.auto{width:auto}
.link-btn{
  background:none;border:0;color:var(--azul-claro);font-family:inherit;font-size:14px;
  font-weight:600;cursor:pointer;padding:0;text-decoration:underline;
}

/* ---------- Avisos ---------- */
.aviso{border-radius:12px;padding:13px 16px;font-size:14.5px;margin-bottom:16px;display:none}
.aviso.erro{background:#fdf1ef;border:1px solid #f2ccc5;color:#93281a;display:block}
.aviso.ok{background:#eefaf4;border:1px solid #bfe8d6;color:#00694a;display:block}
.aviso.info{background:#f0f6fc;border:1px solid #cfe2f2;color:#1c4f77;display:block}

/* ---------- Estados ---------- */
.vazio{
  background:#fff;border:1px dashed var(--borda);border-radius:var(--raio);
  padding:44px 26px;text-align:center;color:var(--suave);
}
.carregando{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:56px 20px;color:var(--suave);font-size:15px;
}
.giro{
  width:20px;height:20px;border-radius:50%;flex:none;
  border:2.5px solid var(--borda);border-top-color:var(--azul-claro);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Leitor ---------- */
.leitor-topo{
  background:#fff;border-bottom:1px solid var(--borda);padding:11px 0;
  position:sticky;top:66px;z-index:40;
}
.leitor-topo .wrap{display:flex;align-items:center;gap:14px}
.leitor-topo b{font-size:15px;letter-spacing:-.2px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#quadro{
  width:100%;border:0;background:#fff;display:block;min-height:calc(100vh - 130px);
}

/* ============================================================
   CELULAR
   O cabeçalho passa a ter duas faixas: marca em cima, navegação
   embaixo em fila rolável. Evita a marca quebrar em duas linhas e
   os botões se espremerem.
   ============================================================ */
@media (max-width:720px){
  .topo{padding:12px 0}
  .topo .wrap{flex-wrap:wrap;gap:10px;row-gap:11px}

  .marca{font-size:15.5px;white-space:nowrap;letter-spacing:-.3px}
  .marca .sig{width:30px;height:30px;font-size:13px;border-radius:8px}

  /* O selo "Admin" é redundante: quem o vê já enxerga o link Administração */
  .selo-admin{display:none}

  .topo nav{
    order:3;width:100%;margin-left:0;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:1px;
  }
  .topo nav::-webkit-scrollbar{display:none}
  .topo nav a,.topo nav button{
    white-space:nowrap;font-size:13.5px;padding:8px 13px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  }
  .topo nav a.ativo{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.24);color:#fff}
  .topo nav button{margin-left:auto}   /* "Sair" sempre no fim da fila */

  /* Com o cabeçalho em duas faixas, a barra do leitor não pode ficar
     presa a uma altura fixa — deixa de ser fixa no celular. */
  .leitor-topo{position:static;top:auto}

  .caixa{padding:24px 20px}
  main{padding:24px 0 50px}
  h1.titulo{font-size:23px}
  .grade{grid-template-columns:1fr}
}

@media (max-width:400px){
  .marca{font-size:0}                    /* mantém só o símbolo PC */
  .marca .sig{font-size:13px}
  .topo nav a,.topo nav button{font-size:13px;padding:7px 11px}
}