/* ═════════════════════════════════════════════════════════════════
   A PEÇA — aba de rascunhos da tela de Alunos (prefixo rnr-)
   Folha ADITIVA: recortar este bloco inteiro para o porte.

   A peça responde ao CONTÊINER da tela, não ao viewport, porque no
   celular a tela de Alunos roda num iframe de 375–430px. No app,
   dar container-type:inline-size ao contêiner que embute a tela
   (aqui, a classe .rnr-tela). Se o porte preferir @media, os
   valores são idênticos — o espelho está comentado no fim.
   ═════════════════════════════════════════════════════════════════ */
.rnr-tela{container-type:inline-size}

.rnr-aba{display:flex;flex-direction:column;gap:9px;margin:16px 0 20px}
.rnr-eyebrow{display:flex;align-items:center;gap:8px;color:var(--ink3,#6c6558);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.rnr-eyebrow::before{content:'';width:14px;height:1.5px;border-radius:1px;flex:none;background:linear-gradient(90deg,rgba(238,231,218,.38),rgba(238,231,218,0))}
.rnr-fileira{display:flex;flex-wrap:wrap;gap:10px}
.rnr-item{position:relative}

/* o cartão de rascunho: o vocabulário do "não é definitivo" —
   borda tracejada + bloco escuro, nos valores canônicos do vazio
   clicável (.16 / .26). Nenhum par novo. */
.rnr-card{display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 36px 9px 13px;border:1px dashed rgba(255,255,255,.16);border-radius:13px 13px 13px 6px;background:rgba(0,0,0,.26);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .18s,transform .18s cubic-bezier(.23,1,.32,1)}
.rnr-card:hover{border-color:rgba(255,255,255,.26)}
.rnr-card:hover .rnr-nome{color:#fff}
.rnr-card:focus-visible{outline:2px solid rgba(226,194,94,.6);outline-offset:2px}
.rnr-card:active{transform:translateY(1px)}

/* a pastilha do aluno, VAZADA: tem dono (ou cor escolhida), mas
   nada aqui é definitivo. Sem cor ainda: o mesmo anel, tracejado. */
.rnr-pill{width:7px;height:26px;flex:none;box-sizing:border-box;border:1.5px solid var(--cor,rgba(238,231,218,.38));border-radius:4px;background:transparent}
.rnr-pill--vazia{border:1px dashed rgba(255,255,255,.16)}

.rnr-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.rnr-nome{max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink,#eee7da);font:500 15px/1.15 'Playfair Display',Georgia,serif;transition:color .18s}
.rnr-nome--anonimo{color:var(--ink2,#9a9384);font-style:italic}
.rnr-meta{max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink2,#9a9384);font-size:11.5px;line-height:1.35}
.rnr-meta .t{color:var(--ink3,#6c6558)}

/* descartar: fantasma no canto, halo de toque de 44 */
.rnr-x{position:absolute;top:7px;right:7px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px 8px 8px 4px;background:none;color:var(--ink3,#6c6558);font:inherit;font-size:10.5px;cursor:pointer;opacity:0;transition:all .18s cubic-bezier(.23,1,.32,1)}
.rnr-x::before{content:'';position:absolute;inset:-10px}
.rnr-item:hover .rnr-x,.rnr-x:focus-visible{opacity:1}
.rnr-x:hover{color:var(--ink,#eee7da);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
@media (hover:none){.rnr-x{opacity:.55}}

/* saída (descartou): some no lugar, sem teatro */
.rnr-item--sai{opacity:0;transform:scale(.96);transition:opacity .18s,transform .18s cubic-bezier(.23,1,.32,1)}
.rnr-aba--sai{opacity:0;transform:translateY(-6px);transition:opacity .22s,transform .22s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){
.rnr-card,.rnr-x,.rnr-item--sai,.rnr-aba--sai,.rnr-nome{transition:none}
}

/* celular (contêiner ≤480: iframe 375–430): a fileira vira
   carrossel — a página nunca rola de lado. A sangria de -14px
   casa com o respiro lateral da tela; ajustar se o real for outro. */
@container (max-width:480px){
.rnr-fileira{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
.rnr-fileira::-webkit-scrollbar{display:none}
.rnr-item{flex:none;scroll-snap-align:start}
.rnr-card{min-height:64px;min-width:212px}
.rnr-x{opacity:.55}
}
/* espelho @media, se o porte preferir (mesmos valores):
@media (max-width:480px){
.rnr-fileira{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
.rnr-fileira::-webkit-scrollbar{display:none}
.rnr-item{flex:none;scroll-snap-align:start}
.rnr-card{min-height:64px;min-width:212px}
.rnr-x{opacity:.55}
}
*/