/* Sinal — aplicativo escola-família · Fase 1 (piloto local) */
:root{
  --roxo:#7030A0; --roxo-esc:#571F80; --lima:#A6CE39; --ciano:#29ABE2;
  --ink:#2A2230; --sub:#6F6579; --paper:#FFFFFF; --fundo:#F6F3FA; --linha:#E6DFEE;
  --ok:#2E7D32; --warn:#EF6C00; --crit:#D32F2F;
  --roxo-10:#F1E6FA; --lima-esc:#7BA31A; --lima-ink:#243002;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(112,48,160,.15), transparent 60%),
    radial-gradient(900px 460px at 108% 22%, rgba(166,206,57,.16), transparent 55%),
    #F1ECF6;
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{
  max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh;
  background:var(--fundo); display:flex; flex-direction:column; position:relative;
  box-shadow:0 0 40px rgba(40,15,70,.12);
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ------- cabeçalho ------- */
.topo{
  background:
    radial-gradient(150px 95px at 88% -25%, rgba(166,206,57,.38), transparent 70%),
    radial-gradient(130px 85px at 68% 130%, rgba(41,171,226,.30), transparent 70%),
    linear-gradient(135deg, #7B35AC 0%, var(--roxo) 45%, #4E1C73 100%);
  color:#fff; padding:14px 16px 12px; flex:none; border-bottom:3px solid var(--lima);
  position:sticky; top:0; z-index:5;
}
.topo-linha{ display:flex; align-items:center; gap:10px; }
.topo-titulo{ font-size:17px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topo-sub{ font-size:12px; opacity:.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-voltar, .btn-trocar{ background:rgba(255,255,255,.16); border:none; color:#fff; cursor:pointer; font-family:inherit; border-radius:999px; }
.btn-voltar{ width:32px; height:32px; font-size:16px; line-height:1; flex:none; }
.btn-trocar{ font-size:11px; padding:6px 10px; flex:none; }
.btn-voltar:hover, .btn-trocar:hover{ background:rgba(255,255,255,.28); }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--lima); color:var(--lima-ink);
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.4);
}

.corpo{ flex:1; overflow-y:auto; padding:14px 14px 90px; }

/* ------- navegação inferior ------- */
.navinf{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  display:flex; background:var(--paper); border-top:1px solid var(--linha); z-index:6;
  padding-bottom:env(safe-area-inset-bottom);
}
.navinf button{
  flex:1; background:none; border:none; cursor:pointer; font-family:inherit;
  padding:9px 2px 10px; font-size:10.5px; color:var(--sub); display:flex; flex-direction:column; align-items:center; gap:3px;
}
.navinf button svg{ width:21px; height:21px; padding:3px 12px; border-radius:999px; box-sizing:content-box; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.navinf button.ativo{ color:var(--roxo); font-weight:700; }
.navinf button.ativo svg{ background:var(--roxo-10); }

/* ------- componentes ------- */
.cartao{ background:var(--paper); border:1px solid var(--linha); border-radius:16px; padding:14px; margin-bottom:12px; }
.cartao.tocavel{ cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
.cartao.tocavel:hover{ box-shadow:0 6px 18px rgba(90,40,140,.12); transform:translateY(-1px); }
.secao-rotulo{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--sub); margin:16px 2px 8px; }
.secao-rotulo:first-child{ margin-top:2px; }
.secao-rotulo::before{ content:''; display:inline-block; width:14px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--roxo), var(--lima)); margin-right:6px; vertical-align:2px; }

.selo{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px; color:#fff; }
.selo-licao{ background:var(--roxo); }
.selo-material{ background:var(--ciano); }
.selo-aviso{ background:var(--warn); }
.selo-comunicado{ background:var(--roxo-esc); }
.selo-fotos{ background:var(--lima); color:var(--lima-ink); }
.selo-ok{ background:var(--ok); }
.selo-warn{ background:var(--warn); }
.selo-crit{ background:var(--crit); }
.selo-neutro{ background:var(--sub); }

.tipo-licao{ background:#FBF7FF; border-left:4px solid var(--roxo); }
.tipo-material{ background:#F4FAFE; border-left:4px solid var(--ciano); }
.tipo-aviso{ background:#FFFAF1; border-left:4px solid var(--warn); }
.tipo-comunicado{ background:#F8F3FD; border-left:4px solid var(--roxo-esc); }
.tipo-fotos{ background:#F8FBEE; border-left:4px solid var(--lima); }

.post-titulo{ font-size:15px; font-weight:700; margin:8px 0 4px; line-height:1.3; }
.post-meta{ font-size:12px; color:var(--sub); }
.post-texto{ font-size:13.5px; line-height:1.55; margin:8px 0 0; white-space:pre-line; overflow-wrap:break-word; }

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(135deg, #8A3BC2, var(--roxo)); color:#fff; border:none; border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700; padding:11px 16px; cursor:pointer; width:100%;
  box-shadow:0 4px 12px rgba(112,48,160,.25);
}
.botao:hover{ background:linear-gradient(135deg, #7A2FB0, var(--roxo-esc)); }
.botao.secundario{ background:#EFE8F6; color:var(--roxo); box-shadow:none; }
.botao.secundario:hover{ background:#E4D8F0; }
.botao.verde{ background:linear-gradient(135deg, #4CAF50, var(--ok)); box-shadow:0 4px 12px rgba(46,125,50,.25); }
.botao.mini{ width:auto; padding:8px 14px; font-size:12.5px; }
.botao[disabled]{ opacity:.55; cursor:not-allowed; }
button:focus-visible, .cartao.tocavel:focus-visible{ outline:3px solid var(--ciano); outline-offset:2px; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background:var(--paper); border:1.5px solid var(--linha); border-radius:999px; padding:8px 13px;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
}
.chip.ativo{ background:var(--roxo); border-color:var(--roxo); color:#fff; }
.chip .mini-badge{ background:var(--crit); color:#fff; border-radius:999px; font-size:10px; padding:1px 6px; margin-left:5px; font-weight:700; }
.chip.ativo .mini-badge{ background:var(--lima); color:var(--lima-ink); }
.chip[disabled]{ opacity:.55; cursor:not-allowed; }

.anexo{ display:flex; align-items:center; gap:10px; background:var(--fundo); border:1px solid var(--linha); border-radius:12px; padding:10px 12px; margin-top:8px; }
.anexo-icone{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800; flex:none; letter-spacing:.03em; }
.anexo-nome{ font-size:12.5px; font-weight:600; flex:1; min-width:0; overflow-wrap:break-word; }
.anexo-sub{ font-size:11px; color:var(--sub); }
.btn-x{ width:26px; height:26px; border-radius:50%; border:none; background:#E9E2F1; color:var(--roxo); font-size:15px; line-height:1; cursor:pointer; flex:none; font-weight:700; }

.farol{ width:12px; height:12px; border-radius:50%; flex:none; }
.farol.ok{ background:#43A047; } .farol.warn{ background:#F9A825; } .farol.crit{ background:#E53935; } .farol.neutro{ background:#B9AFC6; }

.turma-av{ width:40px; height:40px; border-radius:12px; font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex:none; letter-spacing:.02em; color:#fff; }
.msg-av{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; background:linear-gradient(135deg,#8A3BC2,#29ABE2); }
.mini-prog{ height:5px; background:#EDE6F4; border-radius:99px; overflow:hidden; margin-top:9px; }
.mini-prog i{ display:block; height:100%; background:linear-gradient(90deg, var(--ciano), var(--lima)); border-radius:99px; }

.bolha{ max-width:85%; border-radius:14px; padding:10px 12px; font-size:13px; line-height:1.5; margin-top:8px; overflow-wrap:break-word; }
.bolha.deles{ background:var(--paper); border:1px solid var(--linha); border-bottom-left-radius:4px; }
.bolha.meu{ background:#EDE3F7; border-bottom-right-radius:4px; margin-left:auto; }
.bolha-meta{ font-size:10.5px; color:var(--sub); margin-top:4px; }

.campo{ width:100%; border:1.5px solid var(--linha); border-radius:12px; padding:11px 12px; font-family:inherit; font-size:13.5px; background:var(--paper); color:var(--ink); }
textarea.campo{ resize:vertical; min-height:74px; }
.campo:focus{ outline:none; border-color:var(--roxo); }
.campo-rotulo{ font-size:12px; font-weight:700; color:var(--sub); margin:12px 2px 6px; }

.nota{ font-size:11.5px; color:var(--sub); line-height:1.5; margin-top:8px; }
.nota.destaque{ background:#FFF7E8; border:1px solid #F3DFB6; border-radius:10px; padding:8px 10px; color:#7A5A16; }

.toast{
  position:fixed; left:50%; bottom:74px; transform:translateX(-50%) translateY(8px);
  background:#2A2230; color:#fff; font-size:12.5px; font-weight:600; padding:10px 16px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:86%; text-align:center; z-index:9;
}
.toast.visivel{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ------- cartão "receber avisos" ------- */
.cartao-avisos{ border:1px solid var(--lima); background:linear-gradient(135deg, #fbfff0, #fff); }

/* ------- barra de progresso (lições feitas) ------- */
.barra{ height:8px; background:var(--roxo-10); border-radius:999px; overflow:hidden; }
.barra-cheia{ height:100%; background:linear-gradient(90deg, var(--lima-esc), var(--lima)); border-radius:999px; transition:width .3s ease; }

/* ------- faixa "nova versão disponível" ------- */
.faixa-versao{
  position:fixed; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top)); z-index:40;
  background:var(--lima); color:var(--lima-ink); font-size:13px; font-weight:600; padding:11px 14px; border-radius:14px;
  box-shadow:0 8px 24px rgba(42,34,48,.22); text-align:center; cursor:pointer; animation:faixa-entra .35s ease;
}
@keyframes faixa-entra{ from{ transform:translateY(-14px); opacity:0 } to{ transform:none; opacity:1 } }

/* ------- fotos ------- */
.foto-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:10px; }
.foto-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; }
.foto-grid img.ampliavel{ cursor:zoom-in; }
.visor-foto{ position:fixed; inset:0; background:rgba(20,10,32,.92); display:flex; align-items:center; justify-content:center; z-index:20; cursor:zoom-out; }
.visor-foto img{ max-width:94vw; max-height:92vh; border-radius:12px; }

/* ------- confete ------- */
.confete{ position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:480px; top:0; bottom:0; pointer-events:none; overflow:hidden; z-index:8; }
.confete i{ position:absolute; top:-12px; width:8px; height:8px; border-radius:2px; animation:cair 1s ease-in forwards; }
@keyframes cair{ to{ transform:translateY(340px) rotate(300deg); opacity:0; } }

/* ------- tela de entrada ------- */
.entrada{
  flex:1; overflow-y:auto; overflow-x:hidden; position:relative;
  background:linear-gradient(160deg, var(--roxo) 0%, var(--roxo-esc) 62%, #43175F 100%);
  color:#fff; padding:30px 22px 26px; display:flex; flex-direction:column;
}
.entrada > *:not(.blob){ position:relative; z-index:1; }
.blob{ position:absolute; border-radius:50%; opacity:.45; filter:blur(18px); pointer-events:none; animation:flutua 9s ease-in-out infinite alternate; }
@keyframes flutua{ to{ transform:translateY(20px); } }
.marca{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lima); }
.pill-escola{ background:var(--lima); color:var(--lima-ink); border-radius:999px; padding:2px 9px; font-size:10px; letter-spacing:.06em; margin-left:7px; vertical-align:1px; }
.logo-lockup{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.app-nome{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.05; }
.app-nome span{ color:var(--lima); }
.app-frase{ font-size:13.5px; line-height:1.55; opacity:.92; margin:10px 0 0; max-width:30ch; }
.demo-tag{ display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:4px 10px; border-radius:999px; }
.escolha{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin:24px 0 10px; }
.card-perfil{
  display:block; width:100%; text-align:left; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:13px 15px; margin-bottom:10px; color:#fff; font-family:inherit; cursor:pointer; transition:background .15s ease;
}
.card-perfil:hover{ background:rgba(255,255,255,.2); }
.card-perfil b{ display:block; font-size:15px; }
.card-perfil small{ display:block; font-size:12px; opacity:.85; margin-top:3px; line-height:1.4; }
.cp-linha{ display:flex; gap:11px; align-items:flex-start; text-align:left; }
.cp-icone{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; margin-top:2px; }
.cp-icone svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.entrada-rodape{ margin-top:auto; padding-top:22px; font-size:11px; opacity:.75; line-height:1.6; }
.entrada .campo{ border:none; }
.lista-escolha{ margin-top:8px; }
.lista-escolha button{
  display:block; width:100%; text-align:left; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:10px 13px; margin-bottom:8px; color:#fff; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
.lista-escolha button:hover{ background:rgba(255,255,255,.24); }
.lista-escolha small{ display:block; font-weight:400; font-size:11.5px; opacity:.8; margin-top:2px; }

.divisor{ height:1px; background:var(--linha); margin:12px 0; }
.linha-flex{ display:flex; align-items:center; gap:10px; }
.cresce{ flex:1; min-width:0; }
.vazio{ text-align:center; padding:26px 14px; color:var(--sub); font-size:13px; line-height:1.6; }
.vazio .vazio-icone{ font-size:30px; margin-bottom:8px; }
.faixa-fase{ background:#2A2230; color:#fff; font-size:10.5px; text-align:center; padding:4px 10px; letter-spacing:.04em; }
.faixa-fase b{ color:var(--lima); }