/* =========================================================
   ARTESÃ · ALUNAS, PERMISSÕES E "MEUS DADOS" (frente A)
   Usa as peças prontas (.cartao, .chip, .tabela, .filtros, .niveis, .ranking…); aqui só o que é novo. Tudo cabe em 390 px.
   ========================================================= */
/* lista de alunas */
.al-grupos .kpi { color: inherit; text-decoration: none; }
.al-grupos .kpi.al-marcado { outline: 3px solid var(--texto); outline-offset: -3px; }
.al-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.al-linha input { flex: 1 1 180px; min-width: 0; }
.al-nome { color: inherit; text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px; }
.al-paginas { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.papel.equipe { background: var(--info-suave); color: var(--info); }

/* ficha da aluna */
.al-coluna { display: grid; gap: 14px; align-content: start; min-width: 0; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-etiqueta { display: inline-flex; margin: 0; }
.al-etiqueta .chip button { margin-left: 4px; min-width: 28px; min-height: 28px; border-radius: 99px; font-weight: 800; font-size: 16px; line-height: 1; color: inherit; background: transparent; border: 0; cursor: pointer; }
.al-numero { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 30px; line-height: 1; }

/* "tem certeza?" e blocos que abrem (funcionam sem JavaScript) */
details.al-confirmar > summary, details.al-dobra > summary { list-style: none; cursor: pointer; }
details.al-confirmar > summary::-webkit-details-marker, details.al-dobra > summary::-webkit-details-marker { display: none; }
details.al-confirmar[open] > summary { margin-bottom: 10px; }
details.al-confirmar form { border: 2px solid var(--perigo-suave); border-radius: var(--raio-p, 14px); padding: 12px; }
details.al-dobra > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
details.al-dobra > summary::after { content: "▾"; margin-left: auto; color: var(--texto2); }
details.al-dobra[open] > summary::after { content: "▴"; }

/* permissões */
.al-matriz td:not(:first-child), .al-matriz th:not(:first-child) { text-align: center; }
.al-areas { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.al-areas legend { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.al-membro .meio { display: grid; gap: 6px; }
.al-membro .meio b a { color: inherit; }
.al-perigo { border: 2px solid var(--perigo-suave); }
.al-texto { white-space: normal; overflow-wrap: anywhere; font-size: 14.5px; }

/* meus dados (aluna) */
.al-opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.al-opcoes legend { margin-bottom: 6px; }
.al-pedido .meio { display: grid; gap: 4px; }
.al-resposta { display: block; margin-top: 6px; padding: 10px 12px; overflow-wrap: anywhere; }

/* no celular: os grupos ficam compactos (só o nome e o número) e o quadro de permissões não força largura */
@media (max-width: 640px) { .al-grupos .kpi .pequeno { display: none; } }
.tabela-rola table.tabela.al-matriz { min-width: 0; }
.al-matriz td:not(:first-child), .al-matriz th:not(:first-child) { white-space: nowrap; }