/* Primitivos: botões, pills, inputs, avatares, cards (docs/03-components-shell.md) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 32px; border-radius: var(--r-sm); border: 1px solid transparent; font: 700 16px/24px var(--font); text-transform: uppercase; cursor: pointer; transition: background .1s, color .1s; white-space: nowrap; }
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-ui); }
.btn-primary:hover { background: var(--yellow-hover); }
.btn-secondary { background: var(--card); color: var(--gray); border-color: var(--border); }
.btn-secondary:hover { color: var(--ink); }
.btn-danger { background: var(--card); color: var(--red-today); border-color: var(--border); }
.btn[disabled], .btn.is-disabled { background: var(--border); color: var(--gray-text); box-shadow: none; cursor: not-allowed; border-color: var(--border); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; border: 0; color: var(--gray); display: inline-grid; place-items: center; cursor: pointer; }
.btn-icon.lg { width: 48px; height: 48px; }
.btn-icon.outlined { background: var(--card); border: 1px solid var(--border); }
.btn-icon:hover { background: var(--border); color: var(--ink); }
button.link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; }
button.link:hover { text-decoration: underline; }
.inline { display: inline; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--border); font: 400 14px/20px var(--font); color: var(--gray); white-space: pre; }
.pill:hover { color: var(--ink); }
.pill.active { background: var(--gray); border-color: var(--gray); color: #fff; }

.field { position: relative; margin-bottom: 16px; }
.field input, .field select, .field textarea { width: 100%; height: 52px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; font: 400 16px/24px var(--font); color: var(--ink); background: var(--card); outline: 0; }
.field textarea { height: auto; min-height: 120px; padding: 14px; resize: vertical; }
.field label { position: absolute; left: 10px; top: 14px; padding: 0 4px; background: var(--card); color: var(--gray); font: 400 16px/24px var(--font); pointer-events: none; transition: all .15s; }
.field input:focus, .field select:focus, .field textarea:focus { border: 2px solid var(--ink); padding-left: 13px; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field select + label { top: -12px; font-size: 13px; color: var(--ink); }
.field input:focus + label { color: var(--ink); }
.field .errorlist, .form-errors { margin: 6px 0 0; padding: 0; list-style: none; color: var(--red-today); font-size: 13px; }
.form-errors { margin-bottom: 16px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/19.5px var(--font); color: var(--gray); margin: 0 0 16px; }
.checkbox input { margin: 2px 0 0; }
.checkbox a { color: var(--blue); }
.file-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 14px; color: var(--gray); }
.help { color: var(--gray); font-size: 13px; }

.avatar { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--gray); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .initials { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--font); color: #fff; background: var(--gray); }
.avatar-25 .initials { font-size: 11px; } .avatar-32 .initials { font-size: 13px; } .avatar-48 .initials { font-size: 19px; } .avatar-96 .initials { font-size: 38px; } .avatar-160 .initials { font-size: 64px; } .avatar-200 .initials { font-size: 80px; }
.avatar-25 { width: 25px; height: 25px; } .avatar-32 { width: 32px; height: 32px; } .avatar-48 { width: 48px; height: 48px; } .avatar-96 { width: 96px; height: 96px; } .avatar-160 { width: 160px; height: 160px; } .avatar-200 { width: 200px; height: 200px; }
.avatar .badge { position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; border-radius: 50%; background: var(--indigo); color: #fff; font: 700 11px/21px var(--font); text-align: center; border: 2px solid var(--card); }
.avatar-200 .badge { width: 60px; height: 60px; font: 700 26px/56px var(--font); right: 2px; bottom: 2px; }
.avatar-160 .badge { width: 48px; height: 48px; font: 700 21px/44px var(--font); right: 2px; bottom: 2px; }
.avatar .badge--admin { background: var(--green-staff); } /* equipe: verde "A" (admin) e amarela "M" (moderador), sem número */
.avatar .badge--moderator { background: var(--yellow); color: var(--ink); }
.avatar .badge--muted { background: #9aa0a6; } /* silenciado pela moderação: mesmo número, bolinha cinza */
.avatar-96 .badge { width: 30px; height: 30px; font: 700 13px/26px var(--font); right: 2px; bottom: 2px; }
.avatar-48 .badge { width: 24px; height: 24px; line-height: 20px; font-size: 12px; }
.avatar-row { display: flex; gap: 12px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; overflow: hidden; }
.card + .card { margin-top: 16px; }
.card--editorial { padding: 32px; }
.card--hover:hover { box-shadow: var(--shadow-card-hover); }
.card--pinned { border-color: var(--yellow); box-shadow: var(--shadow-pinned); }
.card--flush { padding: 0; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.stats { display: flex; }
.stats > div { flex: 1; text-align: center; border-left: 1px solid var(--border); height: 46px; display: flex; flex-direction: column; justify-content: center; }
.stats > div:first-child { border-left: 0; }
.stats b { font: 500 18px/27px var(--font); } .stats span { font: 400 13px/19.5px var(--font); color: var(--gray); }
.empty { text-align: center; color: var(--gray); font: 400 16px/24px var(--font); padding: 32px 16px; }
.section-title { font: 500 16px/24px var(--font); margin-bottom: 16px; }
.muted { color: var(--gray); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.online-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--green-online); }
.icon { width: 24px; height: 24px; flex: none; } .icon-20 { width: 20px; height: 20px; } .icon-16 { width: 16px; height: 16px; }
.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.list th { text-align: left; font: 700 13px/19.5px var(--font); color: var(--gray); padding: 8px 0; border-bottom: 1px solid var(--border); }
.list td { padding: 12px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
code { font: 13.6px/1.5 SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
.toast { position: fixed; left: 24px; bottom: 24px; z-index: 1300; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 16px; background: var(--ink); color: #fff; border-radius: var(--r-md); font: 400 16px/24px var(--font); box-shadow: var(--shadow-ui); max-width: calc(100vw - 48px); }
.toast .btn-icon { color: #fff; } .toast .btn-icon:hover { background: rgba(255,255,255,.15); }
.wordmark { font: 700 23px/1 var(--font); letter-spacing: -.5px; display: inline-flex; }
.wordmark.sm { font-size: 16px; }
.wm-0 { color: #e0453b; } .wm-1 { color: #2e6ef5; } .wm-2 { color: #e8b530; } .wm-3 { color: #009e5d; } .wm-4 { color: #f5852a; }

/* Diálogo: usado pelas folhas do feed e pelo <dialog> nativo de confirmação */
.btn-text { background: none; border-color: transparent; color: var(--gray-text); padding: 0 16px; }
.btn-text:hover { color: var(--ink); }
.dialog h2 { font: 700 23px/1.5 var(--font); margin-bottom: 24px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
dialog.dialog { width: 420px; max-width: calc(100vw - 32px); padding: 24px; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-ui); background: var(--card); color: var(--ink); }
dialog.dialog p { margin: 0 0 24px; }
dialog.dialog::backdrop { background: rgba(0,0,0,.5); }

/* Tooltip por atributo, usado pelas ferramentas do composer e pelo painel de notificações */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 10; background: var(--ink); color: #fff; font: 400 13px/19.5px var(--font); padding: 6px 10px; border-radius: 6px; pointer-events: none; }
[data-tip-side="left"]:hover::after, [data-tip-side="left"]:focus-visible::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); }

/* Conteúdo do editor do admin (aula, evento, página Sobre): imagens e tabelas cabem na coluna */
.rich a { color: var(--blue); }
.rich img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.rich table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.rich th, .rich td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.rich th { background: var(--surface); font-weight: 700; }
.rich iframe { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); }

/* Senha: requisitos ao vivo (password-rules.js) e botão de mostrar/ocultar */
.pw-rules { display: grid; gap: 6px; margin: -4px 0 20px; padding: 0; list-style: none; text-align: left; font: 400 14px/20px var(--font); color: var(--gray-text); }
.pw-rules li { display: flex; align-items: center; gap: 8px; transition: color .15s; }
.pw-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #c4c4c4; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.pw-rules [data-state="checking"] .pw-mark { border-color: var(--gray); border-top-color: transparent; animation: pw-spin .8s linear infinite; }
.pw-rules [data-state="ok"] { color: #0b7a47; }
.pw-rules [data-state="ok"] .pw-mark { border-color: var(--green-online); background: var(--green-online); color: #fff; }
.pw-rules [data-state="ok"] .pw-mark::before { content: "✓"; }
.pw-rules [data-state="fail"] { color: var(--red-today); }
.pw-rules [data-state="fail"] .pw-mark { border-color: var(--red-today); color: var(--red-today); }
.pw-rules [data-state="fail"] .pw-mark::before { content: "✕"; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-rules [data-state="checking"] .pw-mark { animation: none; } }
.field--password input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gray); cursor: pointer; }
.pw-toggle:hover { background: var(--surface); color: var(--ink); }

/* Erro de campo (accounts/_form.html): texto vermelho logo abaixo e borda marcada */
.field--error input, .field--error select, .field--error textarea { border-color: var(--red-today); }
.field--error input:focus, .field--error textarea:focus { border-color: var(--red-today); }
.field--error label { color: var(--red-today); }
.field-error { margin: -10px 0 16px; text-align: left; font: 400 13px/18px var(--font); color: var(--red-today); }
.checkbox + .field-error { margin-top: -4px; }

/* Bloco de código com "Copiar" (posts e aulas; static/js/code-copy.js) */
.code-block { position: relative; margin: 12px 0; }
.post-body .code-block pre, .rich .code-block pre {
  margin: 0; overflow-x: auto; padding: 12px; padding-right: 84px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); white-space: pre; font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-copy {
  position: absolute; top: 8px; right: 8px; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card); color: var(--gray-text); font: 500 13px/20px var(--font); cursor: pointer;
}
.code-copy:hover { color: var(--ink); }

/* Links dos documentos legais (templates/_legal_links.html) e janela de novo aceite (legal/_terms_update.html) */
.legal-links { font: 400 13px/19.5px var(--font); color: var(--gray); text-align: center; }
.legal-links a:hover { text-decoration: underline; }
.auth-legal { margin-top: 16px; }
.terms-update a, .mdlg-lead a { color: var(--blue); }
.terms-update .dialog-actions form { margin: 0; }
.terms-update-changes { margin: 0 0 16px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }  /* o que mudou (15/10/2026) */

/* Coluna lateral presa ao rolar (sidebar-sticky.js calcula o top) e botão do chat de suporte abaixo dos links legais */
.sidebar--sticky { position: sticky; top: calc(var(--header-h) + var(--content-top)); }
.side-support { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 10px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-card-hover); font: 500 14px/20px var(--font); color: var(--ink); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.side-support:hover { box-shadow: var(--shadow-ui); transform: translateY(-1px); }
.side-support-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.sidebar .join-support { display: none; }  /* no computador o botão da coluna substitui o link do card */

/* Confirmação do site (templates/_site_confirm.html): explicação opcional e botão vermelho para ações destrutivas */
.site-confirm h2 { margin-bottom: 8px; font-size: 20px; }
.site-confirm p { color: var(--gray-text); white-space: pre-line; }  /* o siteAlert lista um arquivo por linha */
.site-confirm p[hidden] { display: none; }
.site-confirm h2:has(+ p[hidden]) { margin-bottom: 24px; }
.btn-danger-solid { background: var(--red-today); color: #fff; border-color: var(--red-today); }
.btn-danger-solid:hover { filter: brightness(.95); }

/* Corte de imagem antes do envio (static/js/image-crop.js): post, capa e texto do artigo */
dialog.image-crop { width: 640px; }
.image-crop h2 { margin-bottom: 16px; font-size: 20px; }
.image-crop-stage { position: relative; height: min(60vh, 440px); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.image-crop-area { position: absolute; inset: 12px; }  /* folga para as alças na borda não serem cortadas */
.image-crop-stage img { display: block; max-width: 100%; }
.image-crop-ratios { margin-top: 16px; }
.image-crop-ratios[hidden] { display: none; }
.image-crop-ratios .pill { height: 32px; }
.image-crop .dialog-actions { flex-wrap: wrap; margin-top: 24px; }
.image-crop-spacer { flex: 1; }
.image-crop--round .cropper-view-box, .image-crop--round .cropper-face { border-radius: 50%; }  /* foto de perfil */
@media (max-width: 768px) {  /* celular: Usar original e Recortar lado a lado, Cancelar embaixo na largura toda */
  .image-crop .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .image-crop .dialog-actions .btn { padding: 0 8px; }
  .image-crop-spacer { display: none; }
  .image-crop [data-crop=cancel] { grid-column: 1 / -1; order: 1; }
}
/* Toque: o Cropper deixa só a alça do canto inferior direito grande (20px) e as outras com 5px. Aqui as 8 ficam
   iguais, 14px visíveis com área de toque de ~42px (o ::after conta como a própria alça), e as bordas ganham 24px. */
@media (pointer: coarse) {
  dialog.image-crop .cropper-point { width: 14px; height: 14px; opacity: 1; border: 2px solid #fff; border-radius: 3px; }
  dialog.image-crop .cropper-point::after { content: ""; position: absolute; inset: -14px; }
  dialog.image-crop .cropper-point.point-se::before { display: none; }
  dialog.image-crop .cropper-point.point-n, dialog.image-crop .cropper-point.point-s { margin-left: -7px; }
  dialog.image-crop .cropper-point.point-e, dialog.image-crop .cropper-point.point-w { margin-top: -7px; }
  dialog.image-crop .point-n, dialog.image-crop .point-ne, dialog.image-crop .point-nw { top: -7px; }
  dialog.image-crop .point-s, dialog.image-crop .point-se, dialog.image-crop .point-sw { bottom: -7px; }
  dialog.image-crop .point-e, dialog.image-crop .point-ne, dialog.image-crop .point-se { right: -7px; }
  dialog.image-crop .point-w, dialog.image-crop .point-nw, dialog.image-crop .point-sw { left: -7px; }
  dialog.image-crop .cropper-line { background: transparent; }
  dialog.image-crop .cropper-line.line-e, dialog.image-crop .cropper-line.line-w { width: 24px; }
  dialog.image-crop .cropper-line.line-n, dialog.image-crop .cropper-line.line-s { height: 24px; }
  dialog.image-crop .line-e { right: -12px; } dialog.image-crop .line-w { left: -12px; }
  dialog.image-crop .line-n { top: -12px; } dialog.image-crop .line-s { bottom: -12px; }
}

/* Navegador de outro app (templates/_inapp_browser.html, static/js/inapp-browser.js); a faixa usa .app-bar */
.inapp-dialog h2 { margin-bottom: 12px; font-size: 20px; }
.inapp-steps { margin: 0 0 20px; padding: 12px 16px 12px 32px; border-radius: var(--r-md); background: var(--surface); }
.inapp-actions { display: grid; gap: 8px; }
.inapp-actions .btn { width: 100%; }
dialog.dialog .inapp-copied { margin: 0; color: var(--green-staff); font-size: 14px; text-align: center; }
.inapp-copied[hidden], .inapp-bar[hidden] { display: none; }

/* Prévia de documento anexado (templates/_document_viewer.html, static/js/document-viewer.js) */
dialog.doc-viewer { width: min(860px, calc(100vw - 32px)); height: calc(100dvh - 48px); max-height: none; padding: 0; overflow: hidden; }
dialog.doc-viewer[open] { display: flex; flex-direction: column; }
.doc-viewer-head { display: flex; align-items: center; gap: 4px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--border); }
.doc-viewer-title { flex: 1; min-width: 0; }
.doc-viewer .doc-viewer-title h2 { margin: 0; font-size: 18px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-viewer-title span { color: var(--gray-text); font-size: 13px; }
.doc-viewer-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--surface); overscroll-behavior: contain; }
.doc-viewer-pages { display: grid; gap: 12px; justify-items: center; }
.doc-viewer-page { display: block; width: 100%; max-width: 800px; height: auto; min-height: 240px; background: #fff; box-shadow: var(--shadow-ui); }
.doc-viewer-page.loaded { min-height: 0; }
dialog.dialog .doc-viewer-note { margin: 24px auto; max-width: 480px; text-align: center; color: var(--gray-text); }
.doc-viewer [hidden] { display: none; }  /* .btn-icon e as notas têm display próprio */
@media (max-width: 768px) {  /* celular: tela cheia */
  dialog.doc-viewer { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
  .doc-viewer-body { padding: 8px; }
  .doc-viewer-pages { gap: 8px; }
}

/* "Ver" a prévia de um anexo (templates/feed/_doc_view.html): feed, aulas, calendário e Painel */
.doc-view { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 12px; background: none; color: var(--gray-text); font: 500 13px/19.5px var(--font); cursor: pointer; }
.doc-view:hover { background: var(--surface); color: var(--ink); }