/* ============================================================================
   AQUAVIVA — Design System
   ----------------------------------------------------------------------------
   Paleta extraída do flyer oficial (NÃO mude os valores das variáveis de cor):
     --cor-primaria        azul profundo da água
     --cor-primaria-escura navy dos balões/banners do flyer
     --cor-secundaria      ciano das bolhas / água clara
     --cor-acento          dourado do banner "NOVIDADE" / CTA
     --cor-acento-2        laranja do sol atrás do mascote (polvo)

   GUIA PARA PRÓXIMAS TELAS (admin de alunos/professores/planos, financeiro,
   área do professor) — reaproveite este vocabulário, ele já existe e funciona:

   ESTRUTURA
     .wrap            largura máxima centralizada do conteúdo
     .card            "cartão" branco padrão com sombra e raio grande
     .card.flutuante  variante com leve hover/elevação (use em listas clicáveis)
     .secao-titulo    cabeçalho de seção com ícone-bolha + linha ondulada
     .grid / .grid-cards   grid responsivo (auto-fit, min 220px)
     .grid-2 / .grid-3     grids fixos (2 ou 3 colunas) que colapsam no mobile

   BOTÕES
     .btn             botão primário (pílula, azul, gradiente sutil)
     .btn.secundario  contorno, fundo claro
     .btn.perigo      vermelho (ações destrutivas: cancelar etc.)
     .btn.acento      dourado (CTA de destaque)
     .btn.fantasma    transparente, só texto+ícone (ações terciárias)
     .btn.pequeno     modificador de tamanho, combina com qualquer variante acima

   FEEDBACK
     .flash / .flash.ok / .flash.erro    alertas de topo de página
     .tag / .tag.livre / .tag.cheio / .tag.minha   pílulas de status pequenas
     .badge-onda      selo decorativo (ex.: "novo", contadores) com fundo ondulado

   TABELAS / LISTAS
     table, .tabela-card   tabela padrão (agora com zebra + cabeçalho sticky em telas largas)

   DECORAÇÃO AQUÁTICA (reaproveitável em qualquer tela nova)
     .onda-topo / .onda-rodape   faixas SVG de onda (use como primeiro/último filho de uma section)
     .bolhas-fundo               container com bolhas animadas em CSS (decorativo, position:absolute)
     .anel-progresso              indicador circular simples (usado na grade do aluno)

   Tudo continua CSS puro, mobile-first, sem dependências externas e sem build step.
   ============================================================================ */

:root{
  --cor-primaria:#0f5c94;        /* azul da água, meio-tom */
  --cor-primaria-escura:#0a3d63; /* navy dos balões/banners do flyer */
  --cor-secundaria:#3ec6f0;      /* ciano das bolhas/água clara */
  --cor-acento:#ffcb05;          /* dourado do banner "NOVIDADE"/botão CTA */
  --cor-acento-2:#f5a531;        /* laranja do sol atrás do polvo */
  --cor-fundo:#eaf8fd;
  --cor-card:#ffffff;
  --cor-texto:#0a2f49;
  --cor-texto-suave:#4d7290;
  --cor-borda:#cdeef9;
  --cor-erro:#dc2626;
  --cor-ok:#16a34a;
  --raio:18px;
  --raio-grande:26px;
  --sombra:0 4px 16px rgba(10,61,99,.14);
  --sombra-forte:0 12px 32px rgba(10,61,99,.22);
  --gradiente-agua:linear-gradient(135deg,var(--cor-secundaria) -20%,var(--cor-primaria) 45%,var(--cor-primaria-escura) 120%);
  --gradiente-sol:linear-gradient(135deg,var(--cor-acento) 0%,var(--cor-acento-2) 100%);
  --fonte:"Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--fonte);
  background:var(--cor-fundo); color:var(--cor-texto); line-height:1.5;
  /* textura leve de bolhas no fundo da página inteira */
  background-image:
    radial-gradient(circle at 8% 18%, rgba(62,198,240,.10) 0, rgba(62,198,240,0) 60px),
    radial-gradient(circle at 92% 12%, rgba(255,203,5,.10) 0, rgba(255,203,5,0) 70px),
    radial-gradient(circle at 85% 80%, rgba(15,92,148,.07) 0, rgba(15,92,148,0) 90px),
    radial-gradient(circle at 12% 85%, rgba(62,198,240,.08) 0, rgba(62,198,240,0) 80px);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:var(--cor-primaria); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin-top:0; color:var(--cor-primaria-escura)}

/* ---------------------------------------------------------------------------
   CABEÇALHO
--------------------------------------------------------------------------- */
header.topo{
  background:var(--gradiente-agua);
  color:#fff; padding:14px 24px; display:flex; align-items:center; gap:16px;
  box-shadow:var(--sombra); position:sticky; top:0; z-index:50;
  overflow:visible;
}
header.topo .marca{
  font-size:1.3rem; font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
header.topo .marca .bolha-emoji{
  display:inline-block; animation:flutuar 3.2s ease-in-out infinite;
}
header.topo .marca img{height:32px; vertical-align:middle; margin-right:6px}
header.topo nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto}
header.topo nav a{
  color:#e8fbff; font-weight:600; opacity:.92; padding:7px 12px; border-radius:999px;
  transition:background .15s, opacity .15s;
}
header.topo nav a:hover{opacity:1; text-decoration:none; background:rgba(255,255,255,.16)}
header.topo form{margin:0}
header.topo button.linklike{
  background:none; border:none; color:#e8fbff; font-weight:600; cursor:pointer; font-size:1rem;
  padding:7px 12px; border-radius:999px; transition:background .15s;
}
header.topo button.linklike:hover{background:rgba(255,255,255,.16)}

.suporte-banner{
  background:var(--gradiente-sol); color:#3a2400; text-align:center; padding:9px 12px; font-weight:700;
  position:relative; z-index:40; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.suporte-banner button.linklike{background:none; border:none; cursor:pointer; font:inherit; padding:0}

/* ---------------------------------------------------------------------------
   LAYOUT GERAL
--------------------------------------------------------------------------- */
.wrap{max-width:1100px; margin:0 auto; padding:24px}

.card{
  background:var(--cor-card); border:1px solid var(--cor-borda); border-radius:var(--raio-grande);
  box-shadow:var(--sombra); padding:22px; margin-bottom:18px;
  position:relative;
}
a.card{display:block; color:inherit; transition:transform .18s ease, box-shadow .18s ease}
.card.flutuante, a.card{cursor:pointer}
a.card:hover, .card.flutuante:hover{
  transform:translateY(-4px); box-shadow:var(--sombra-forte); text-decoration:none;
}

.grid{display:grid; gap:16px}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:780px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.secao-titulo{display:flex; align-items:center; gap:10px; margin:8px 0 16px}
.secao-titulo .bolha-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--gradiente-agua);
  font-size:1.1rem; box-shadow:var(--sombra); flex-shrink:0;
}
.secao-titulo h1, .secao-titulo h2{margin:0}

/* ---------------------------------------------------------------------------
   LOGIN
--------------------------------------------------------------------------- */
.tela-login{
  min-height:calc(100vh - 48px); display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:24px 16px;
}
.login-card{
  max-width:400px; width:100%; text-align:center; z-index:2;
  border-top:6px solid var(--cor-acento);
}
.login-card .login-emoji{font-size:2.6rem; line-height:1; margin-bottom:2px; animation:flutuar 3.2s ease-in-out infinite}
.login-card h1{font-size:1.5rem; margin-bottom:4px}
.login-card .subtitulo{color:var(--cor-texto-suave); font-size:.92rem; margin-bottom:18px}
.login-card form{text-align:left}
.login-card input{margin-bottom:14px}
.login-card .btn{width:100%; margin-top:4px; justify-content:center}

/* ---------------------------------------------------------------------------
   FLASH / ALERTAS
--------------------------------------------------------------------------- */
.flash{padding:13px 16px; border-radius:14px; margin-bottom:14px; font-weight:600; box-shadow:0 2px 8px rgba(10,61,99,.08)}
.flash.ok{background:#e7f9ee; color:var(--cor-ok); border:1px solid #bbeccd}
.flash.erro{background:#fdecec; color:var(--cor-erro); border:1px solid #f7c7c7}

/* ---------------------------------------------------------------------------
   BOTÕES
--------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--gradiente-agua); color:#fff; font-weight:700; font-size:.92rem;
  box-shadow:0 3px 10px rgba(15,92,148,.28); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,92,148,.34); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn.secundario{background:#fff; color:var(--cor-primaria); border:1px solid var(--cor-borda); box-shadow:0 2px 6px rgba(15,92,148,.10)}
.btn.secundario:hover{background:var(--cor-fundo)}
.btn.perigo{background:linear-gradient(135deg,#ef4444,var(--cor-erro)); box-shadow:0 3px 10px rgba(220,38,38,.28)}
.btn.acento{background:var(--gradiente-sol); color:#3a2400; box-shadow:0 3px 10px rgba(245,165,49,.32)}
.btn.fantasma{background:transparent; color:var(--cor-primaria); box-shadow:none; border:1px dashed var(--cor-borda)}
.btn.fantasma:hover{background:rgba(62,198,240,.10); box-shadow:none; transform:none}
.btn.pequeno{padding:6px 13px; font-size:.82rem}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* ---------------------------------------------------------------------------
   FORMULÁRIOS
--------------------------------------------------------------------------- */
input,select,textarea{
  width:100%; padding:10px 13px; border:1.5px solid var(--cor-borda); border-radius:12px;
  font-size:.95rem; font-family:inherit; background:#fff; color:var(--cor-texto);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--cor-secundaria); box-shadow:0 0 0 3px rgba(62,198,240,.25);
}
label{font-weight:600; font-size:.88rem; color:var(--cor-texto-suave); display:block; margin-bottom:4px}

/* ---------------------------------------------------------------------------
   TABELAS
--------------------------------------------------------------------------- */
table{width:100%; border-collapse:collapse}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--cor-borda)}
th{
  font-size:.78rem; color:var(--cor-texto-suave); text-transform:uppercase; letter-spacing:.05em;
  background:var(--cor-fundo); position:sticky; top:0;
}
tbody tr:hover{background:rgba(62,198,240,.06)}
tbody tr:nth-child(even){background:rgba(62,198,240,.03)}
.tabela-card{overflow-x:auto; border-radius:var(--raio); border:1px solid var(--cor-borda)}
.tabela-card table{margin:0}

/* ---------------------------------------------------------------------------
   TAGS / BADGES
--------------------------------------------------------------------------- */
.tag{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.01em}
.tag.livre{background:#e7f9ee; color:var(--cor-ok)}
.tag.cheio{background:#fdecec; color:var(--cor-erro)}
.tag.minha{background:#e0f7fb; color:var(--cor-primaria-escura)}

.badge-onda{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 6px; border-radius:999px;
  background:var(--gradiente-sol); color:#3a2400; font-weight:700; font-size:.78rem;
}

/* ---------------------------------------------------------------------------
   DECORAÇÃO AQUÁTICA REUTILIZÁVEL
--------------------------------------------------------------------------- */
.onda-topo, .onda-rodape{display:block; width:100%; line-height:0}
.onda-topo svg, .onda-rodape svg{display:block; width:100%; height:auto}

.bolhas-fundo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1}
.bolhas-fundo span{
  position:absolute; bottom:-40px; display:block; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.05) 70%);
  opacity:.55; animation:subir linear infinite;
}
@keyframes subir{
  0%{transform:translateY(0) translateX(0); opacity:.55}
  90%{opacity:.4}
  100%{transform:translateY(-620px) translateX(12px); opacity:0}
}
@keyframes flutuar{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-4deg)}
}

/* ---------------------------------------------------------------------------
   PAINÉIS (dashboards)
--------------------------------------------------------------------------- */
.painel-hero{
  position:relative; overflow:hidden; border-radius:var(--raio-grande);
  background:var(--gradiente-agua); color:#fff; padding:30px 26px 46px; margin-bottom:24px;
  box-shadow:var(--sombra-forte);
}
.painel-hero h1{color:#fff; font-size:1.6rem; margin-bottom:6px}
.painel-hero p{color:#e3f8ff; margin:0; max-width:560px; position:relative; z-index:2}
.painel-hero .onda-rodape{position:absolute; left:0; right:0; bottom:-1px; z-index:1}

/* ---------------------------------------------------------------------------
   GRADE DO ALUNO
--------------------------------------------------------------------------- */
.semana-nav{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px;
  flex-wrap:wrap;
}
.semana-nav .semana-label{
  font-weight:700; color:var(--cor-primaria-escura); background:#fff; border:1px solid var(--cor-borda);
  padding:8px 16px; border-radius:999px; box-shadow:var(--sombra);
}

.grade-dia{margin-bottom:24px}
.grade-dia h3{
  color:var(--cor-primaria-escura); display:flex; align-items:center; gap:8px;
  border-bottom:2px dashed var(--cor-borda); padding-bottom:8px; margin-bottom:12px;
}
.grade-dia h3::before{content:"〜"; color:var(--cor-secundaria); font-weight:900; font-size:1.2rem}

.aula-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border:1px solid var(--cor-borda); border-radius:var(--raio); padding:14px 16px; margin-bottom:10px;
  background:linear-gradient(180deg,#fff,#f7fdfe);
  box-shadow:0 2px 8px rgba(10,61,99,.06);
  transition:box-shadow .15s ease, transform .15s ease;
}
.aula-card:hover{box-shadow:var(--sombra); transform:translateY(-2px)}
.aula-card.cancelada{opacity:.55; background:repeating-linear-gradient(135deg,#fff,#fff 10px,#fdecec 10px,#fdecec 20px)}
.aula-card .hora{
  font-weight:800; min-width:108px; color:var(--cor-primaria); display:flex; align-items:center; gap:6px;
}
.aula-card .hora::before{content:"🕐"; font-size:.85rem}
.aula-card .info-aula{flex:1; min-width:160px; color:var(--cor-texto-suave); font-size:.92rem}
.aula-card .acao-aula{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.cota-card{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.anel-progresso{
  --pct:0%;
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--cor-acento) var(--pct), var(--cor-borda) 0);
  display:flex; align-items:center; justify-content:center;
}
.anel-progresso::after{
  content:""; width:40px; height:40px; border-radius:50%; background:#fff;
}
.anel-progresso .anel-texto{
  position:absolute; font-size:.74rem; font-weight:800; color:var(--cor-primaria-escura);
}
.cota-card .anel-wrap{position:relative; display:flex; align-items:center; justify-content:center}

/* ---------------------------------------------------------------------------
   RODAPÉ
--------------------------------------------------------------------------- */
footer.rodape{
  text-align:center; color:var(--cor-texto-suave); font-size:.82rem; padding:30px 24px 26px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
footer.rodape .rodape-onda{opacity:.6; width:120px}

/* ---------------------------------------------------------------------------
   PÁGINA DE ERRO
--------------------------------------------------------------------------- */
.erro-tela{
  min-height:calc(100vh - 48px); display:flex; align-items:center; justify-content:center; padding:24px 16px;
}
.erro-card{max-width:460px; width:100%; text-align:center}
.erro-card .erro-emoji{font-size:3rem; margin-bottom:6px; animation:flutuar 3.2s ease-in-out infinite}
.erro-card .erro-codigo{
  display:inline-block; font-weight:800; color:var(--cor-primaria-escura); background:var(--cor-fundo);
  padding:3px 14px; border-radius:999px; font-size:.85rem; margin-bottom:10px;
}

/* ---------------------------------------------------------------------------
   RESPONSIVO
--------------------------------------------------------------------------- */
@media (max-width:680px){
  header.topo{flex-wrap:wrap; padding:12px 16px}
  header.topo nav{margin-left:0; width:100%; justify-content:flex-start}
  .wrap{padding:16px}
  .aula-card{flex-direction:column; align-items:flex-start}
  .aula-card .acao-aula{width:100%; justify-content:flex-end}
  .painel-hero{padding:24px 18px 38px}
  .semana-nav{justify-content:center; text-align:center}
  .semana-nav .btn{flex:1; justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}