/* Animação "Como funciona": mapa visto de cima, celular do responsável e telas da escola. Tudo ilustrativo, com dados fictícios.
   Prefixo anim- para não conflitar com o resto do site. Gerada junto com js/animacao-fluxo.js. */

.anim { container-type: inline-size; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #0f172a; }
.anim * { box-sizing: border-box; }
.anim-in { font-size: clamp(11px, 2.1cqw, 14px); }

/* ---- controles ---- */
.anim-topo { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin-bottom: .8em; }
.anim-cenas { display: flex; flex-wrap: wrap; gap: .4em; flex: 1 1 auto; }
.anim-cena-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 999px; padding: .45em .9em; font-weight: 600; font-size: 1em; cursor: pointer; }
.anim-cena-btn[aria-current="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.anim-cena-btn:focus-visible, .anim-ctl:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.anim-ctl { border: 1px solid #cbd5e1; background: #fff; border-radius: .6em; width: 2.6em; height: 2.6em; font-size: 1em; cursor: pointer; color: #1e3a8a; }
.anim-barra { height: .45em; background: #e2e8f0; border-radius: 999px; overflow: hidden; cursor: pointer; margin-bottom: .8em; }
.anim-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #06b6d4); }

/* ---- palco ---- */
.anim-palco { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .9em; align-items: start; align-content: start; }
.anim-col1 { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
@container (max-width: 600px) { .anim-palco { grid-template-columns: minmax(0, 1fr); } }
.anim-mapa { position: relative; aspect-ratio: 640 / 380; border-radius: 1.1em; overflow: hidden; background: #e8f1fb; border: 1px solid #cbd5e1; }
.anim-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anim-chip { position: absolute; left: .7em; top: .7em; display: flex; align-items: center; gap: .5em; background: rgba(255,255,255,.95); border: 1px solid #cbd5e1; border-radius: 999px; padding: .4em .9em; font-weight: 700; font-size: 1em; color: #475569; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.anim-chip i { width: .8em; height: .8em; border-radius: 50%; background: #94a3b8; flex: none; }
.anim-chip.dentro { color: #166534; border-color: #86efac; background: #f0fdf4; }
.anim-chip.dentro i { background: #16a34a; }
.anim-chip.aviso { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.anim-chip.aviso i { background: #f59e0b; }
.anim-chip[hidden] { display: none; }
.anim-selo { position: absolute; right: .6em; bottom: .4em; font-size: .78em; color: #475569; background: rgba(255,255,255,.75); padding: .15em .6em; border-radius: 999px; }

.anim-legenda { margin-top: .1em; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .9em; padding: .8em 1em; display: flex; gap: .8em; align-items: flex-start; min-height: 5.6em; }
.anim-legenda b { flex: none; background: #2563eb; color: #fff; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-size: 1em; }
.anim-legenda p { margin: 0; font-size: 1.12em; line-height: 1.45; color: #1e3a8a; font-weight: 600; }

/* ---- aparelhos ---- */
.anim-aps { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.anim-ap { position: relative; min-width: 0; }
.anim-ap[hidden] { display: none; }
.anim-ap.largo { grid-column: 1 / -1; }

.tel { position: relative; aspect-ratio: 9 / 17; background: #0f172a; border-radius: 1.5em; padding: .45em; box-shadow: 0 10px 24px rgba(15,23,42,.25); max-width: 15em; margin: 0 auto; width: 100%; }
.tel-tela { position: relative; width: 100%; height: 100%; background: #f8fafc; border-radius: 1.15em; overflow: hidden; display: flex; flex-direction: column; }
.tel-bar { background: #4a6fa5; color: #fff; font-weight: 800; padding: .55em .7em; font-size: 1em; display: flex; justify-content: space-between; align-items: center; flex: none; }
.tel-bar small { font-weight: 600; opacity: .85; font-size: .8em; }
.tel-corpo { position: relative; flex: 1; min-height: 0; }
.tel-s { position: absolute; inset: 0; padding: .6em; display: flex; flex-direction: column; gap: .5em; opacity: 0; pointer-events: none; transition: opacity .25s; }
.tel-s.on { opacity: 1; }
.tel-cartao { background: #fff; border: 1px solid #e2e8f0; border-radius: .8em; padding: .55em .65em; }
.tel-aluno { display: flex; gap: .55em; align-items: center; }
.tel-av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #dbeafe; color: #1d4ed8; display: grid; place-items: center; font-weight: 800; flex: none; }
.tel-aluno b { display: block; font-size: 1.05em; line-height: 1.15; }
.tel-aluno span { font-size: .85em; color: #64748b; }
.tel-linha { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-weight: 700; font-size: .95em; }
.tel-chave { width: 2.5em; height: 1.4em; border-radius: 999px; background: #cbd5e1; position: relative; flex: none; transition: background .2s; }
.tel-chave::after { content: ''; position: absolute; left: .15em; top: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.tel-chave.on { background: #16a34a; }
.tel-chave.on::after { transform: translateX(1.1em); }
.tel-pilula { display: flex; align-items: center; gap: .4em; border-radius: 999px; padding: .4em .7em; font-weight: 700; font-size: .88em; background: #f1f5f9; color: #475569; }
.tel-pilula i { width: .7em; height: .7em; border-radius: 50%; background: #94a3b8; flex: none; }
.tel-pilula.dentro { background: #dcfce7; color: #166534; }
.tel-pilula.dentro i { background: #16a34a; }
.tel-pilula.aviso { background: #fef3c7; color: #92400e; }
.tel-pilula.aviso i { background: #f59e0b; }
.tel-num { font-size: .85em; color: #64748b; }
.tel-num b { color: #0f172a; font-size: 1.1em; }
.tel-selo { border-radius: .7em; padding: .55em .65em; font-weight: 800; font-size: .95em; text-align: center; opacity: 0; transition: opacity .25s; }
.tel-selo.on { opacity: 1; }
.tel-selo.verde { background: #dcfce7; color: #166534; }
.tel-selo.azul { background: #dbeafe; color: #1e40af; }
.tel-campo { background: #fff; border: 1px solid #cbd5e1; border-radius: .6em; padding: .45em .6em; font-size: .95em; }
.tel-campo small { display: block; color: #64748b; font-size: .78em; }
.tel-btn { background: #2563eb; color: #fff; text-align: center; font-weight: 800; border-radius: .7em; padding: .6em; font-size: 1em; transition: transform .12s, background .12s; }
.tel-btn.press { transform: scale(.95); background: #1d4ed8; }
.tel-btn.ok { background: #16a34a; }
.tel-qr { align-self: center; width: 52%; aspect-ratio: 1; background: #fff; border: 1px solid #cbd5e1; border-radius: .5em; padding: .35em; }
.tel-qr svg { width: 100%; height: 100%; display: block; }
.tel-cod { text-align: center; font-weight: 800; letter-spacing: .12em; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.tel-push { position: absolute; left: .4em; right: .4em; top: .4em; background: #0f172a; color: #fff; border-radius: .9em; padding: .6em .7em; transform: translateY(-140%); transition: transform .35s; box-shadow: 0 8px 20px rgba(0,0,0,.35); z-index: 3; }
.tel-push.on { transform: translateY(0); }
.tel-push b { display: block; font-size: 1em; }
.tel-push span { font-size: .88em; opacity: .9; line-height: 1.3; display: block; margin-top: .15em; }
.tel-dedo { position: absolute; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(37,99,235,.28); border: 2px solid rgba(37,99,235,.7); transform: translate(-50%, -50%) scale(.4); opacity: 0; z-index: 4; pointer-events: none; }
.tel-dedo.on { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform .2s, opacity .15s; }

/* ---- telas da escola (TV da sala, portaria, saguão) ---- */
.tv { position: relative; aspect-ratio: 16 / 10; border-radius: .9em; overflow: hidden; border: .35em solid #1e293b; background: #0b2742; color: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.25); }
.tv-modo { position: absolute; inset: 0; padding: .7em .9em; opacity: 0; transition: opacity .25s; display: flex; flex-direction: column; }
.tv-modo.on { opacity: 1; }
.tv-cab { font-weight: 800; font-size: .95em; opacity: .9; display: flex; justify-content: space-between; gap: .5em; }
.tv-cab small { font-weight: 600; opacity: .75; }
.tv-meio { flex: 1; display: grid; place-items: center; text-align: center; font-size: 1.15em; opacity: .8; }
.tv-chamado { position: absolute; inset: 0; background: linear-gradient(135deg, #dc2626, #991b1b); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .25em; opacity: 0; transition: opacity .25s; padding: .6em; }
.tv-chamado.on { opacity: 1; animation: anim-pulso 1.1s ease-in-out infinite; }
.tv-chamado .sino { font-size: 2em; line-height: 1; }
.tv-chamado b { font-size: 1.9em; letter-spacing: .02em; line-height: 1.05; }
.tv-chamado span { font-size: 1.05em; opacity: .95; }
.tv-chamado small { font-size: .85em; opacity: .85; }
.tv-som { display: flex; gap: .25em; margin-top: .15em; }
.tv-som i { width: .35em; height: .9em; background: #fff; border-radius: 3px; animation: anim-onda .9s ease-in-out infinite; }
.tv-som i:nth-child(2) { animation-delay: .15s; } .tv-som i:nth-child(3) { animation-delay: .3s; }
.tv-ok { position: absolute; left: 0; right: 0; bottom: 0; background: #16a34a; color: #fff; font-weight: 800; padding: .5em .8em; transform: translateY(100%); transition: transform .3s; text-align: center; font-size: 1.05em; }
.tv-ok.on { transform: translateY(0); }
@keyframes anim-pulso { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes anim-onda { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.2); } }

.tv.claro { background: #f8fafc; color: #0f172a; border-color: #334155; }
.tv.claro .tv-cab { color: #1e3a8a; }
.por-item { background: #fff; border: 1px solid #cbd5e1; border-radius: .6em; padding: .5em .65em; margin-top: .5em; font-size: .95em; line-height: 1.3; }
.por-item b { display: block; font-size: 1.05em; color: #0f172a; }
.por-item span { color: #475569; font-size: .88em; }
.por-leitor { margin-top: .5em; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; align-items: stretch; flex: 1; min-height: 0; }
.por-cam { position: relative; background: #0f172a; border-radius: .6em; overflow: hidden; display: grid; place-items: center; min-height: 4.5em; }
.por-cam .qr { width: 62%; aspect-ratio: 1; background: #fff; border-radius: .3em; padding: .25em; transition: opacity .2s; }
.por-cam .qr svg { width: 100%; height: 100%; display: block; }
.por-cam .laser { position: absolute; left: 6%; right: 6%; height: 3px; background: #f43f5e; box-shadow: 0 0 10px #f43f5e; top: 10%; opacity: 0; }
.por-cam .cantos { position: absolute; inset: 10%; border: 2px solid rgba(255,255,255,.75); border-radius: .4em; }
.por-lado { display: flex; flex-direction: column; gap: .4em; justify-content: center; font-size: .92em; }
.por-botao { background: #2563eb; color: #fff; border-radius: .5em; padding: .5em; text-align: center; font-weight: 800; }
.por-estado { border-radius: .5em; padding: .45em .5em; text-align: center; font-weight: 800; background: #e2e8f0; color: #334155; }
.por-estado.ok { background: #dcfce7; color: #166534; }
.sag-item { background: rgba(255,255,255,.1); border-radius: .6em; padding: .5em .7em; margin-top: .5em; font-size: .98em; display: flex; justify-content: space-between; gap: .5em; align-items: center; opacity: 0; transition: opacity .3s; }
.sag-item.on { opacity: 1; }
.sag-item em { font-style: normal; font-weight: 800; padding: .15em .55em; border-radius: 999px; background: #f59e0b; color: #422006; font-size: .85em; white-space: nowrap; }
.sag-item.ok em { background: #22c55e; color: #052e16; }

.anim-voo { position: absolute; top: 18%; left: 22%; font-size: 1.6em; opacity: 0; z-index: 6; pointer-events: none; }

.anim-nota { margin-top: .8em; font-size: .88em; color: #475569; line-height: 1.5; }
.anim-vazio { padding: 1.2em; border: 1px dashed #cbd5e1; border-radius: 1em; color: #475569; }

@media (prefers-reduced-motion: reduce) {
  .tv-chamado.on, .tv-som i { animation: none; }
}