/* ─────────────────────────────────────────────
   2 Sigma EdTech — Design Tokens
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --brand-900: #0d2d4a;
  --brand-800: #1F4E79;
  --brand-700: #215d8d;
  --brand-600: #2E75B6;
  --brand-500: #4a90cc;
  --brand-100: #dbeafe;
  --brand-50:  #eff6ff;

  /* Neutrals */
  --neutral-900: #111827;
  --neutral-800: #1f2937;
  --neutral-700: #374151;
  --neutral-600: #4b5563;
  --neutral-500: #6b7280;
  --neutral-400: #9ca3af;
  --neutral-300: #d1d5db;
  --neutral-200: #e5e7eb;
  --neutral-100: #f3f4f6;
  --neutral-50:  #f9fafb;
  --neutral-25:  #fcfcfd;

  /* Semantic */
  --success-700: #15803d;
  --success-600: #16a34a;
  --success-100: #dcfce7;
  --success-50:  #f0fdf4;

  --warning-700: #a16207;
  --warning-600: #ca8a04;
  --warning-100: #fef9c3;
  --warning-50:  #fefce8;

  --danger-700:  #b91c1c;
  --danger-600:  #dc2626;
  --danger-100:  #fee2e2;
  --danger-50:   #fef2f2;

  --amber-800:   #92400e;
  --amber-200:   #fde68a;
  --amber-100:   #fef3c7;
  --amber-50:    #fffbeb;

  --purple-700:  #7e22ce;
  --purple-100:  #f3e8ff;

  /* Surface */
  --surface-page:   #f9fafb;
  --surface-card:   #ffffff;
  --surface-input:  #ffffff;

  /* Border */
  --border-default: #e5e7eb;
  --border-focus:   #2E75B6;
  --border-strong:  #d1d5db;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --text-subtle:    #9ca3af;
  --text-on-dark:   #ffffff;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Typography */
  --font-sans: 'Inter', 'Roboto', system-ui, sans-serif;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;

  /* Transitions */
  --t-fast:   120ms ease;
  --t-normal: 200ms ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Logo ── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--brand-600);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
  flex-shrink: 0;
}
.logo-mark.white {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
}
.logo-text {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.logo-text.white { color: #fff; }

/* ── Site Header ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-xs);
  height: 64px;
  display: flex; align-items: center;
}
.header-inner {
  max-width: 1120px; width: 100%; margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.header-right { display: flex; align-items: center; gap: var(--sp-4); }

/* ── Credits Badge ── */
.credits-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.credits-badge.green  { background: var(--success-600); color: #fff; }
.credits-badge.yellow { background: #fbbf24; color: #78350f; }
.credits-badge.red    { background: var(--danger-600);  color: #fff; }

/* ── Avatar ── */
.avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-default);
}

/* ── Logout btn ── */
.nav-btn {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none; border: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}
.nav-btn:hover { color: var(--text-primary); }

/* ── Card ── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.card-sm { padding: var(--sp-4); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px var(--sp-5);
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn-primary   { background: var(--brand-800); color: #fff; }
.btn-primary:hover { background: var(--brand-900); }

.btn-secondary { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.btn-secondary:hover { background: var(--brand-100); }

.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
.btn-ghost:hover { background: var(--neutral-50); }

.btn-danger { background: var(--danger-600); color: #fff; }
.btn-danger:hover { background: var(--danger-700); }

.btn-sm { font-size: var(--text-xs); padding: 6px var(--sp-3); border-radius: var(--radius-sm); }
.btn-lg { font-size: var(--text-md); padding: 12px var(--sp-8); border-radius: var(--radius-lg); }
.btn-full { width: 100%; }

/* Google Button */
.btn-google {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-md);
  padding: 12px var(--sp-6);
  border-radius: var(--radius-lg);
}
.btn-google:hover { background: var(--neutral-50); box-shadow: var(--shadow-md); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-primary  { background: var(--brand-100);    color: var(--brand-700); }
.badge-success  { background: var(--success-100);  color: var(--success-700); }
.badge-warning  { background: var(--warning-100);  color: var(--warning-700); }
.badge-danger   { background: var(--danger-100);   color: var(--danger-700); }
.badge-neutral  { background: var(--neutral-100);  color: var(--neutral-700); }
.badge-purple   { background: var(--purple-100);   color: var(--purple-700); }
.badge-amber    { background: var(--amber-100);     color: var(--amber-800); }
.badge-facil    { background: var(--success-100);  color: var(--success-700); }
.badge-medio    { background: var(--warning-100);  color: var(--warning-700); }
.badge-dificil  { background: var(--danger-100);   color: var(--danger-700); }
.badge-obj      { background: var(--brand-100);    color: var(--brand-700); }
.badge-disc     { background: var(--purple-100);   color: var(--purple-700); }

/* ── Form inputs ── */
.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.input, .select, .textarea {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px var(--sp-3);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(46,117,182,.12);
}
.textarea { resize: vertical; }
.input-sm { padding: 6px var(--sp-3); font-size: var(--text-sm); }

/* Checkbox row */
.check-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.check-row input[type=checkbox] { margin-top: 2px; accent-color: var(--brand-700); width:16px; height:16px; }
.check-row label { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }

/* ── Seg Toggle (Sim/Não) ── */
.seg-toggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.seg-toggle button {
  background: none; border: none;
  padding: 6px var(--sp-4);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
  border-radius: 0;
}
.seg-toggle button:first-child { border-right: 1px solid var(--border-default); }
.seg-toggle button.active-yes  { background: var(--success-100); color: var(--success-700); }
.seg-toggle button.active-no   { background: var(--danger-100);  color: var(--danger-700); }
.seg-toggle button:not([class*=active]):hover { background: var(--neutral-50); }

/* ── Wizard Progress Bar ── */
.wizard-bar { display: flex; gap: var(--sp-1); }
.wizard-seg {
  flex: 1; height: 4px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  transition: background var(--t-normal);
}
.wizard-seg.done    { background: var(--success-600); }
.wizard-seg.current { background: var(--brand-600); }

/* ── Progress bar (feedback) ── */
.progress-track {
  height: 4px; background: var(--neutral-200); border-radius: var(--radius-full); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--brand-600);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

/* ── Table ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
table.table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}
table.table tr:last-child td { border-bottom: none; }
table.table tbody tr:hover td { background: var(--neutral-50); }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); }
.tab-btn {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab-btn:hover  { color: var(--text-primary); }
.tab-btn.active { color: var(--brand-700); border-bottom-color: var(--brand-700); font-weight: 600; }

/* ── Alert Banner ── */
.alert-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
}
.alert-banner.amber {
  background: var(--amber-50);
  border-bottom: 1px solid var(--amber-200);
  color: var(--amber-800);
}
.alert-banner a { font-weight: 600; text-decoration: underline; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

/* ── Pulse ── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ── Utilities ── */
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.mt-1   { margin-top: var(--sp-1); }
.mt-2   { margin-top: var(--sp-2); }
.mt-4   { margin-top: var(--sp-4); }
.mt-6   { margin-top: var(--sp-6); }
.mb-2   { margin-bottom: var(--sp-2); }
.mb-4   { margin-bottom: var(--sp-4); }
.mb-6   { margin-bottom: var(--sp-6); }
.text-sm   { font-size: var(--text-sm); }
.text-xs   { font-size: var(--text-xs); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }