/* ============================================================
   estilo.css — Colégio Primus · Portal
   Visual institucional, sóbrio e moderno.
   ============================================================ */

:root{
  --azul-900:#102a4c;
  --azul-700:#1a3a6b;
  --azul-500:#2c5aa0;
  --azul-300:#6f93c7;
  --dourado:#c9a24b;
  --tinta:#1c2433;
  --cinza:#5b6675;
  --linha:#e4e9f1;
  --fundo:#eef2f8;
  --branco:#ffffff;
  --sombra:0 10px 30px -12px rgba(16,42,76,.28);
  --sombra-sutil:0 2px 10px -4px rgba(16,42,76,.18);
  --raio:16px;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--tinta);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(44,90,160,.14), transparent 60%),
    radial-gradient(700px 400px at -5% 110%, rgba(201,162,75,.12), transparent 55%),
    var(--fundo);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px 16px 48px;
}

/* ----- cabeçalho com logos parceiros ----- */
.topo{
  width:100%;
  max-width:520px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.topo a{display:inline-flex;opacity:.85;transition:opacity .2s}
.topo a:hover{opacity:1}
.logo-mini{height:34px;width:auto}

/* ----- marca principal ----- */
.marca{
  display:flex;flex-direction:column;align-items:center;
  margin:18px 0 6px;
}
.marca img{width:230px;max-width:72vw;height:auto}
.marca .subtitulo{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azul-500);font-weight:700;margin-top:10px;
}

/* ----- cartão central ----- */
.cartao{
  width:100%;max-width:440px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:30px 26px;
  margin-top:18px;
  animation:surge .5s ease both;
}
@keyframes surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cartao h1{
  font-family:"Fraunces",Georgia,serif;
  font-size:1.55rem;line-height:1.2;margin:0 0 4px;color:var(--azul-900);
}
.cartao .legenda{margin:0 0 22px;color:var(--cinza);font-size:.95rem}

/* ----- formulário de login ----- */
.campo{margin-bottom:16px;text-align:left}
.campo label{display:block;font-size:.82rem;font-weight:600;color:var(--azul-700);margin-bottom:6px}
.campo input{
  width:100%;padding:13px 14px;font-size:1rem;
  border:1.5px solid var(--linha);border-radius:10px;background:#fbfcfe;
  transition:border-color .15s,box-shadow .15s;
}
.campo input:focus{
  outline:none;border-color:var(--azul-500);
  box-shadow:0 0 0 4px rgba(44,90,160,.12);background:#fff;
}

.botao{
  width:100%;border:none;cursor:pointer;
  padding:14px;font-size:1rem;font-weight:700;color:#fff;
  border-radius:10px;
  background:linear-gradient(135deg,var(--azul-700),var(--azul-500));
  box-shadow:var(--sombra-sutil);transition:transform .12s,filter .15s;
  font-family:inherit;
}
.botao:hover{filter:brightness(1.06)}
.botao:active{transform:translateY(1px)}

.aviso-erro{
  background:#fdecec;border:1px solid #f6c6c6;color:#a52727;
  padding:10px 12px;border-radius:9px;font-size:.88rem;margin-bottom:16px;
}

/* ----- portal: grade de áreas ----- */
.barra-usuario{
  width:100%;max-width:440px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;padding:12px 16px;box-shadow:var(--sombra-sutil);margin-top:18px;
}
.barra-usuario .quem{text-align:left;line-height:1.25}
.barra-usuario .quem strong{display:block;color:var(--azul-900);font-size:.98rem}
.barra-usuario .quem span{font-size:.78rem;color:var(--cinza)}
.barra-usuario .acoes{display:flex;gap:8px;flex-shrink:0}
.link-saida,.link-admin{
  font-size:.8rem;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:8px;
}
.link-admin{color:var(--azul-700);background:#eaf0fa}
.link-saida{color:#a52727;background:#fdecec}

.grade{
  width:100%;max-width:440px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;
}
.area{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:108px;padding:18px 16px;border-radius:14px;color:#fff;
  text-decoration:none;font-weight:700;font-size:1.08rem;
  box-shadow:var(--sombra-sutil);position:relative;overflow:hidden;
  transition:transform .14s,box-shadow .2s;
  animation:surge .5s ease both;
}
.area::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%);
}
.area:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.area .rotulo-area{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:auto}

/* ----- avisos / rodapé ----- */
.cartao-aviso{
  width:100%;max-width:440px;background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;padding:18px;margin-top:18px;box-shadow:var(--sombra-sutil);
  font-size:.9rem;color:var(--cinza);line-height:1.5;text-align:center;
}
.cartao-aviso .tutorial{
  display:block;color:#fff;background:linear-gradient(135deg,var(--dourado),#b8902f);
  text-decoration:none;font-weight:700;padding:11px;border-radius:9px;margin-bottom:14px;
}
.cartao-aviso strong{color:var(--azul-900)}

.rodape{margin-top:26px;font-size:.76rem;color:var(--azul-300)}

/* ----- painel admin ----- */
.painel{width:100%;max-width:680px}
.tabela{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sombra-sutil)}
.tabela th,.tabela td{padding:11px 13px;text-align:left;font-size:.88rem;border-bottom:1px solid var(--linha)}
.tabela th{background:var(--azul-700);color:#fff;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.tabela tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.74rem;font-weight:700;background:#eaf0fa;color:var(--azul-700)}
.mini-acao{font-size:.78rem;text-decoration:none;font-weight:700;margin-right:8px}
.mini-acao.editar{color:var(--azul-500)}
.mini-acao.excluir{color:#a52727}
.campo select{
  width:100%;padding:12px 14px;font-size:1rem;border:1.5px solid var(--linha);
  border-radius:10px;background:#fbfcfe;font-family:inherit;
}
.aviso-ok{background:#e9f7ee;border:1px solid #bfe6cd;color:#1d6b3b;padding:10px 12px;border-radius:9px;font-size:.88rem;margin-bottom:16px}
.voltar{display:inline-block;margin-top:18px;color:var(--azul-700);text-decoration:none;font-weight:700;font-size:.9rem}

@media (max-width:380px){
  .grade{grid-template-columns:1fr}
}