@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,-25..200");

/* Camada visual unificada para alertas e modais */
:root {
  --duo-font: "Nunito", "Avenir Next Rounded", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  --ui-surface: rgba(255, 255, 255, 0.9);
  --ui-surface-dark: rgba(15, 23, 42, 0.9);
  --ui-border: rgba(2, 6, 23, 0.08);
  --ui-border-dark: rgba(148, 163, 184, 0.25);
  --ui-shadow: 0 18px 60px rgba(2, 6, 23, 0.18);
  --ui-shadow-dark: 0 18px 60px rgba(0, 0, 0, 0.55);
}

/* Tipografia global no estilo Duolingo */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
select,
textarea,
label,
span,
div,
li,
td,
th {
  font-family: var(--duo-font) !important;
}

/* Mantém fontes de ícone intactas */
.material-symbols-outlined {
  font-family: "Material Symbols Rounded" !important;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 120, "opsz" 24;
}

.material-icons-round {
  font-family: "Material Icons Round" !important;
}

/* Ícones em botões com aparência próxima do Duolingo */
:where(
  .duo-btn,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate
) .material-symbols-outlined {
  font-size: 1.05em;
  line-height: 1;
  vertical-align: middle;
}

/* Mantém trechos monoespaçados */
code,
pre,
kbd,
samp,
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

:root[data-theme="dark"] {
  --glass-surface: rgba(15, 23, 42, 0.68);
  --glass-border: rgba(148, 163, 184, 0.26);
  --glass-shadow: 0 20px 52px rgba(0, 0, 0, 0.36);
}

.ui-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: linear-gradient(120deg, rgba(5, 205, 19, 0.08), rgba(1, 45, 240, 0.08));
  box-shadow: var(--ui-shadow);
  backdrop-filter: none;
}

.dark .ui-alert {
  border-color: var(--ui-border-dark);
  background: linear-gradient(120deg, rgba(5, 205, 19, 0.08), rgba(255, 200, 9, 0.12));
  box-shadow: var(--ui-shadow-dark);
}

.ui-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.ui-alert--success {
  color: #056e0f;
  background: linear-gradient(120deg, rgba(5, 205, 19, 0.15), rgba(1, 161, 116, 0.12));
}

.ui-alert--error {
  color: #b91c1c;
  background: linear-gradient(120deg, rgba(255, 23, 23, 0.16), rgba(255, 200, 9, 0.06));
}

.ui-alert--info {
  color: #0b3cce;
  background: linear-gradient(120deg, rgba(1, 45, 240, 0.14), rgba(5, 205, 19, 0.06));
}

.dark .ui-alert--success {
  color: #22c55e;
}

.dark .ui-alert--error {
  color: #fca5a5;
}

.dark .ui-alert--info {
  color: #93c5fd;
}

dialog.ui-dialog {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 18px;
  padding: 0;
  box-shadow: var(--ui-shadow);
  backdrop-filter: none;
}

.dark dialog.ui-dialog {
  background: var(--ui-surface-dark);
  border-color: var(--ui-border-dark);
  box-shadow: var(--ui-shadow-dark);
}

dialog.ui-dialog::backdrop {
  background: radial-gradient(circle at center, rgba(5, 205, 19, 0.08), rgba(1, 45, 240, 0.18));
  backdrop-filter: none;
}

.ui-dialog__header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-dialog__body {
  padding: 18px 20px;
  color: #0f172a;
}

.dark .ui-dialog__body {
  color: #e2e8f0;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  background: rgba(1, 45, 240, 0.08);
  color: #0b3cce;
}

.dark .ui-chip {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

/* =========================================================
   Botões globais (estilo Duolingo)
   ========================================================= */
:root {
  --duo-green: #58cc02;
  --duo-green-edge: #3f8f02;
  --duo-green-press: #46a302;

  --duo-blue: #1cb0f6;
  --duo-blue-edge: #1586bc;
  --duo-blue-press: #1899d6;

  --duo-red: #ff4b4b;
  --duo-red-edge: #bf3737;
  --duo-red-press: #d73e3e;

  --duo-gray: #ffffff;
  --duo-gray-edge: #d1d5db;
  --duo-gray-press: #e5e7eb;
  --duo-gray-text: #374151;

  --duo-focus: rgba(88, 204, 2, 0.32);
}

:root[data-theme="dark"] {
  --duo-gray: #111827;
  --duo-gray-edge: #334155;
  --duo-gray-press: #1f2937;
  --duo-gray-text: #e5e7eb;
  --duo-focus: rgba(88, 204, 2, 0.38);
}

:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain) {
  --duo-bg: var(--duo-green);
  --duo-edge: var(--duo-green-edge);
  --duo-press: var(--duo-green-press);
  --duo-text: #ffffff;

  appearance: none;
  border: 2px solid var(--duo-edge) !important;
  border-bottom-width: 5px !important;
  border-radius: 14px !important;
  background: var(--duo-bg) !important;
  color: var(--duo-text) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(2, 6, 23, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.08s ease,
    filter 0.12s ease,
    background-color 0.12s ease,
    border-bottom-width 0.08s ease;
}

:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain):hover {
  background: var(--duo-bg) !important;
  filter: brightness(1.03);
  transform: translateY(-1px);
}

:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain):active {
  background: var(--duo-press) !important;
  border-bottom-width: 3px !important;
  transform: translateY(2px);
  filter: none;
}

:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--duo-focus), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain):disabled,
:where(
  .duo-btn,
  button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
  button[type="submit"],
  button[data-act],
  button[data-del],
  button[data-rg-open],
  button[data-dl-team],
  button[data-close]:not([aria-label]),
  button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
  .js-open-prereg,
  .eco-btn,
  .btn-primary,
  .btn-ghost,
  .btn-validate,
  .btn-refresh,
  .eco-feedback-btn,
  .tip-button,
  a.eco-btn,
  a.btn-primary,
  a.btn-ghost,
  a.btn-validate,
  label.eco-btn,
  a[id="voltarInicio"],
  a[class*="bg-primary-"][class*="rounded"],
  a[class*="bg-[#04B811]"]
):not(.duo-btn-plain)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.12);
}

:where(
  .duo-btn--ghost,
  .btn-ghost,
  button[id*="cancel" i],
  button[id*="clear" i],
  button[id$="Cancelar"],
  button[id*="prev" i],
  button[id*="theme" i],
  button[data-dl-team],
  button[class*="bg-white"],
  button[class*="bg-gray-200"],
  button[class*="bg-slate-100"],
  button[class*="bg-transparent"]
):not(.duo-btn-plain) {
  --duo-bg: var(--duo-gray);
  --duo-edge: var(--duo-gray-edge);
  --duo-press: var(--duo-gray-press);
  --duo-text: var(--duo-gray-text);
  --duo-focus: rgba(148, 163, 184, 0.35);
}

:where(
  .duo-btn--blue,
  .eco-btn.primary,
  .btn-primary,
  .eco-feedback-btn.primary,
  .btn-refresh,
  button[id*="next" i],
  button[id*="send" i],
  button[id*="save" i],
  button[id*="confirm" i],
  button[class*="bg-sky"],
  button[class*="bg-blue"],
  button[class*="bg-secondary"],
  button[class*="bg-primary-blue"],
  button[class*="bg-[var(--primary-blue)]"],
  #openSponsorModal,
  #cookieAccept
):not(.duo-btn-plain) {
  --duo-bg: var(--duo-blue);
  --duo-edge: var(--duo-blue-edge);
  --duo-press: var(--duo-blue-press);
  --duo-text: #ffffff;
  --duo-focus: rgba(28, 176, 246, 0.35);
}

:where(
  .duo-btn--danger,
  .eco-btn.danger,
  button[id*="sair" i],
  button[id*="logout" i],
  button[id*="remove" i],
  button[id*="remover" i],
  button[id*="reject" i],
  button[data-del],
  button[data-act="del"],
  button[data-act="reject"],
  button[class*="bg-rose"],
  button[class*="bg-danger"],
  button[class*="text-rose"][data-del]
):not(.duo-btn-plain) {
  --duo-bg: var(--duo-red);
  --duo-edge: var(--duo-red-edge);
  --duo-press: var(--duo-red-press);
  --duo-text: #ffffff;
  --duo-focus: rgba(255, 75, 75, 0.33);
}

:where(
  button[class*="h-8 w-8"],
  button[class*="h-9 w-9"],
  button[class*="p-2"][class*="rounded-full"]
):not(.duo-btn-plain) {
  border-radius: 999px !important;
  border-bottom-width: 3px !important;
  padding: 6px 10px !important;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .duo-btn,
    button[id]:not([id*="close" i]):not(#ecoMobileMenuToggle):not(#mobileMenuToggle):not(#openRegulamento):not(#badgeUser),
    button[type="submit"],
    button[data-act],
    button[data-del],
    button[data-rg-open],
    button[data-dl-team],
    button[data-close]:not([aria-label]),
    button[class*="bg-"]:not([aria-label="Fechar"]):not([class*="p-2"][class*="rounded-full"]),
    .js-open-prereg,
    .eco-btn,
    .btn-primary,
    .btn-ghost,
    .btn-validate,
    .btn-refresh,
    .eco-feedback-btn,
    .tip-button,
    a.eco-btn,
    a.btn-primary,
    a.btn-ghost,
    a.btn-validate,
    label.eco-btn,
    a[id="voltarInicio"],
    a[class*="bg-primary-"][class*="rounded"],
    a[class*="bg-[#04B811]"]
  ):not(.duo-btn-plain) {
    transition: none;
  }
}