/* Akbar Design System v1 — 21/10/2026.
 * Camada comum: Escola, Full Web, Cadastro, Live, Moedas, Baixar e Materiais.
 * Sem alterar player, mídia, autenticação, JS ou geometria de páginas.
 * Decisões e testes: docs/AKBAR_IDENTIDADE_FILOSOFIA_UX.md.
 */
:root {
  --akbar-ux-action: #1459b8;
  --akbar-ux-success: #17653b;
  --akbar-ux-focus: #78b9ff;
  --akbar-ux-text-on-action: #ffffff;
  --akbar-ux-min-target: 44px;
  --akbar-ux-form-radius: 12px;
}
/* O mesmo padrão alcança os formulários já existentes sem trocar cores
 * locais, componentes de mídia ou layout do professor/cursos. */
:where(form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
       form select, form textarea) {
  box-sizing: border-box;
  min-height: var(--akbar-ux-min-target);
  max-width: 100%;
  font-size: max(16px, 1em);
}
:where(form textarea) { line-height: 1.5; resize: vertical; }
:where(form button, form [type="submit"], form [type="reset"],
       form [role="button"], .akbarPhoneDialog button) {
  min-height: var(--akbar-ux-min-target);
}
:where(button, a, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--akbar-ux-focus);
  outline-offset: 3px;
}
:where(form [aria-invalid="true"]) {
  outline: 2px solid #ff9aaf;
  outline-offset: 1px;
}
/* Para novos elementos: ícone familiar + nome curto, sem impor botões
 * ou letras sobre o vídeo original. */
.akbarUxAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--akbar-ux-min-target);
  border: 1px solid #458af0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--akbar-ux-action);
  color: var(--akbar-ux-text-on-action);
  font: 700 15px/1.2 Urbanist, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.akbarUxAction[data-state="success"] {
  background: var(--akbar-ux-success);
  border-color: #3ca66b;
}
.akbarUxAction svg { width: 20px; height: 20px; flex: 0 0 auto; }
.akbarUxStatus { color: var(--akbar-ux-focus); overflow-wrap: anywhere; }
.akbarUxStatus[data-state="success"] { color: #7fe2a8; }
@media (max-width: 360px) {
  :where(form input, form select, form textarea) { min-width: 0; }
  .akbarUxAction { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .akbarUxAction { animation: none; transition: none; }
}
@media (forced-colors: active) {
  .akbarUxAction { border: 2px solid ButtonText; forced-color-adjust: auto; }
}