/* Portal EBD · "Cada um com o seu acesso": salas de aula com o professor no celular,
   a chamada voando até o celular da secretaria (js/salas.js). */
.sl-palco{position:relative;background:#fff;border-radius:28px;padding:clamp(20px,3.5vw,44px);box-shadow:0 8px 22px rgba(35,22,33,.05);display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr);grid-template-areas:"rp . rs" "vp seta vs" "tp . ts";gap:16px clamp(16px,2.5vw,32px);align-items:stretch}
.sl-a-rp{grid-area:rp}.sl-a-rs{grid-area:rs}.sl-a-vp{grid-area:vp}.sl-a-vs{grid-area:vs}.sl-a-tp{grid-area:tp}.sl-a-ts{grid-area:ts}.sl-a-seta{grid-area:seta}
.sl-rot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sl-tag{font-size:11.5px;font-weight:800;letter-spacing:1.6px;color:#6F275F}
.sl-sub{font-size:13px;font-weight:600;color:#6E6470}
.sl-seta{align-self:center;display:flex;align-items:center;justify-content:center}
.sl-salas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center}
.sl-sala{position:relative;background:#F8F6F5;border-radius:22px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .4s;min-width:0}
.sl-sala.enviando{box-shadow:inset 0 0 0 2px #E6DEE3}
.sl-av{width:58px;height:58px;border-radius:18px;overflow:hidden;flex-shrink:0}
.sl-av svg{display:block}
.sl-corpo{display:flex;align-items:flex-start;gap:14px}
.sl-prof{position:relative;flex-shrink:0}
.sl-mini{flex:1;min-width:0;max-width:190px;margin-left:auto;background:#EFE7EC;border-radius:20px;padding:8px 8px 12px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .3s}
.sl-sala.marcando .sl-mini{box-shadow:0 0 0 2px #E6DEE3,0 10px 22px rgba(35,22,33,.08)}
.sl-mini-cab{height:20px;border-radius:13px 13px 7px 7px;background:linear-gradient(145deg,#8A3373 0%,#5A1D4C 62%,#45153C 100%)}
.sl-alunos{display:flex;flex-direction:column;gap:5px}
.sl-lin{display:flex;align-items:center;gap:7px;height:26px;background:#fff;border-radius:9px;padding:0 4px 0 6px}
.sl-lin s{display:block;width:3px;height:12px;border-radius:99px;background:#EADCE6;flex-shrink:0;transition:background .2s}
.sl-lin b{display:block;height:6px;border-radius:3px;background:#ECE5E9;max-width:calc(100% - 40px);transition:background .2s}
.sl-lin::after{content:"";flex:1;order:1}
.sl-alunos i{order:2;display:block;width:19px;height:19px;border-radius:6px;background:#EFE7EC no-repeat center/12px;flex-shrink:0;transition:background-color .2s,transform .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.8l4.4 4.2L19 7.4' stroke='%23CFC3CB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sl-alunos i.ok{background-color:#276B47;transform:scale(1.06);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.8l4.4 4.2L19 7.4' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sl-lin:has(i.ok) s{background:#276B47}
.sl-lin:has(i.ok) b{background:#CFC3CB}
.sl-ilha{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:76px;height:22px;border-radius:99px;background:#17131A}
.sl-turmas{margin-bottom:16px}
.sl-nome{font-size:13px;font-weight:700;color:#17131A;line-height:1.25;display:flex;align-items:center;gap:5px;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-nome::before{content:'';width:0;height:14px;transition:width .25s;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.8l4.4 4.2L19 7.4' stroke='%23276B47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sl-sala.enviada .sl-nome::before{width:14px}
.sl-sec{background:#F3E7EF;border-radius:24px;padding:16px;display:flex;align-items:flex-start;gap:14px;min-height:0}
.sl-secr{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;width:76px;flex-shrink:0;text-align:center}
.sl-av-sec{width:56px;height:56px;border-radius:18px}
.sl-sec-n{font-size:14px;font-weight:800;letter-spacing:-.2px;margin-top:2px}
.sl-sec-c{font-size:11.5px;font-weight:600;color:#6E6470}
.sl-tel{flex:1;min-width:0;max-width:290px;margin-left:auto;align-self:stretch;background:#17131A;border-radius:44px;padding:9px;box-shadow:0 30px 60px rgba(35,22,33,.18);display:flex}
.sl-tela{position:relative;flex:1;min-width:0;background:#F8F6F5;border-radius:36px;padding:42px 14px 16px;display:flex;flex-direction:column;overflow:hidden}
.sl-tel-k{font-size:9.5px;font-weight:700;letter-spacing:1px;color:#6E6470}
.sl-tel-h{font-size:22px;font-weight:800;letter-spacing:-.8px;margin:2px 0 12px}
.sl-aula{border-radius:20px;padding:14px;color:#fff;background:linear-gradient(145deg,#8B570A 0%,#6A3E08 58%,#543005 100%);box-shadow:0 12px 24px rgba(84,48,5,.22);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.sl-aula::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#276B47 0%,#1A5134 58%,#123723 100%);opacity:0;transition:opacity .6s}
.sl-aula>*{position:relative}
.sl-aula.ok::before{opacity:1}
.sl-aula-l1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.16);font-size:9.5px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.sl-pill i{width:7px;height:7px;border-radius:99px;background:#FFD86B;transition:background .4s}
.sl-aula.ok .sl-pill i{background:#B9F0CF}
.sl-aula-n b{font-size:26px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.sl-aula-n small{font-size:13px;font-weight:700;opacity:.8}
.sl-aula-tx{font-size:11.5px;font-weight:500;line-height:1.4;opacity:.92;min-height:3.2em}
.sl-barra{height:6px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.sl-barra span{display:block;height:100%;width:0;border-radius:99px;background:#FFD86B;transition:width .6s cubic-bezier(.2,.7,.3,1),background .4s}
.sl-aula.ok .sl-barra span{background:#B9F0CF}
.sl-tel-t{font-size:16px;font-weight:800;letter-spacing:-.4px;margin:14px 0 8px}
.sl-turmas{background:#fff;border-radius:18px;padding:2px 12px}
.sl-turma{display:flex;align-items:center;gap:10px;padding:9px 0}
.sl-turma+.sl-turma{border-top:1px solid #F2ECEF}
.sl-tic{width:30px;height:30px;border-radius:10px;background:#FBEBD2;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .35s,transform .35s}
.sl-tic .sl-ic-ok{display:none}
.sl-turma.ok .sl-tic{background:#DFF3E6;animation:slPulo .45s cubic-bezier(.2,.7,.3,1)}
.sl-turma.ok .sl-ic-ok{display:block}.sl-turma.ok .sl-ic-p{display:none}
@keyframes slPulo{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.sl-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.sl-tx b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-tp{font-size:11px;font-weight:600;color:#8B570A}
.sl-tok{display:none;font-size:11px;font-weight:500;color:#6E6470}
.sl-turma.ok .sl-tp{display:none}.sl-turma.ok .sl-tok{display:block}
.sl-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sl-chip{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#F8F6F5;border-radius:18px;padding:14px;font-size:13.5px;font-weight:700;line-height:1.3;color:#17131A}
.sl-chip-ic{width:36px;height:36px;border-radius:12px;background:#F3E7EF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sl-voo{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sl-token{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#6F275F;color:#fff;border-radius:99px;padding:6px 10px 6px 8px;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 10px 22px rgba(90,29,76,.3);will-change:transform}
@media (max-width:899.98px){
  .sl-palco{grid-template-columns:minmax(0,1fr);grid-template-areas:"rp" "vp" "tp" "seta" "rs" "vs" "ts"}
  .sl-seta{transform:rotate(90deg)}
}
.sl-st,.sl-notif{display:none}
/* Celular: salas em lista (nome inteiro e as caixas da chamada legíveis), a secretaria logo abaixo
   e a chamada que chega aparece como aviso na tela do celular dela, sem sair da vista. */
@media (max-width:640px){
  .sl-palco{grid-template-areas:"rp" "vp" "seta" "rs" "vs" "tp" "ts";gap:12px;padding:18px 14px}
  .sl-seta{height:20px}.sl-seta svg{width:20px;height:20px}
  .sl-salas{grid-template-columns:minmax(0,1fr);gap:8px}
  .sl-sala{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"av nome nome" "av cel st";gap:6px 12px;align-items:center;padding:10px 12px;border-radius:18px;transition:box-shadow .3s}
  .sl-sala.marcando{box-shadow:inset 0 0 0 2px #E6DEE3}
  .sl-corpo{display:contents}
  .sl-prof{grid-area:av;align-self:center}
  .sl-av{width:44px;height:44px;border-radius:14px}
  .sl-nome{grid-area:nome;font-size:14px;white-space:normal;overflow:visible}
  .sl-st{display:block;grid-area:st;font-size:11.5px;font-weight:600;color:#6E6470;white-space:nowrap;text-align:right}
  .sl-sala.enviada .sl-st{color:#276B47}
  .sl-mini{grid-area:cel;margin:0;max-width:none;background:none;padding:0;border-radius:0}
  .sl-sala.marcando .sl-mini{box-shadow:none}
  .sl-mini-cab{display:none}
  .sl-alunos{flex-direction:row;gap:4px}
  .sl-lin{height:auto;background:none;padding:0}
  .sl-lin s,.sl-lin b,.sl-lin::after{display:none}
  .sl-alunos i{width:22px;height:22px;border-radius:7px;background-size:13px}
  .sl-chip{padding:12px 10px;font-size:12.5px}
  .sl-sec{padding:0;background:none}
  .sl-secr{display:none}
  .sl-tel{max-width:330px;margin:0 auto;border-radius:40px}
  .sl-tela{border-radius:32px;padding-top:40px}
  .sl-notif{display:flex;position:absolute;z-index:2;top:8px;left:10px;right:10px;align-items:center;gap:10px;background:#17131A;color:#fff;border-radius:20px;padding:10px 12px;opacity:0;transform:translateY(-8px) scale(.92);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.3,1)}
  .sl-notif.on{opacity:1;transform:none}
  .sl-notif .sl-n-ic{width:30px;height:30px;border-radius:9px;background:#276B47;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .sl-notif .sl-n-tx{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:11px;font-weight:500;color:#D9D2D7}
  .sl-notif .sl-n-tx b{font-size:12.5px;font-weight:700;color:#fff}
}