/* ==========================================================================
   Carreira com Dados — Design system compartilhado dos apps
   Carregado DEPOIS do <style> inline de cada página para modernizar o visual
   (tokens, tipografia, botões, cards) mantendo os nomes das variáveis usadas
   pelo JavaScript (--accent, --muted, --bg, etc.).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg:#0a0e17; --bg-soft:#0f1524; --card:#121a2b;
  --accent:#2dd4bf; --accent-2:#5b9dfb;
  --text:#eaf0fb; --muted:#8ea0bd;
  --danger:#f87171; --ok:#4ade80; --warn:#facc15;
  --border:rgba(146,164,196,.13); --border-strong:rgba(146,164,196,.24);
  --btn-text:#04141b; --radius:16px;
  --shadow:0 20px 48px -22px rgba(0,0,0,.6);
}
[data-theme="light"] {
  --bg:#f7f9fd; --bg-soft:#eef2fa; --card:#ffffff;
  --accent:#0d9488; --accent-2:#2563eb;
  --text:#0e1a2e; --muted:#54637d;
  --danger:#dc2626; --ok:#16a34a; --warn:#b45309;
  --border:rgba(15,26,46,.10); --border-strong:rgba(15,26,46,.16);
  --btn-text:#ffffff;
  --shadow:0 20px 44px -24px rgba(15,26,46,.26);
}

/* ---------- tipografia ---------- */
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3 { letter-spacing:-.02em; }
header h1 { font-weight:800; }

/* ---------- botões ---------- */
button.btn, a.btn {
  background:var(--accent);
  color:var(--btn-text);
  border:1px solid transparent;
  border-radius:999px;
  font-weight:600;
  font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
button.btn:hover, a.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
button.ghost {
  border:1px solid var(--border-strong);
  color:var(--muted);
  background:transparent;
  border-radius:999px;
  font-family:inherit;
  transition:border-color .15s ease, color .15s ease;
}
button.ghost:hover { border-color:var(--accent); color:var(--accent); }
button.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }

/* ---------- superfícies ---------- */
.card, .auth-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.auth-card { box-shadow:var(--shadow); }
.kpi {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.kpi .v { color:var(--accent); font-weight:800; }

/* ---------- abas ---------- */
nav.tabs button {
  background:var(--bg-soft);
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  font-family:inherit;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
nav.tabs button:hover { color:var(--text); border-color:var(--border-strong); }
nav.tabs button.active {
  background:var(--accent);
  color:var(--btn-text);
  border-color:transparent;
}

/* ---------- inputs ---------- */
input, select, textarea { font-family:inherit; border-radius:10px; }
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- chips ---------- */
.chip {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
  border-radius:999px;
}

/* ---------- cartões de ferramenta (hub) ---------- */
.tool-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tool-card:hover { transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.tool-icon {
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:13px; margin-bottom:16px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
}
.tool-icon svg { width:24px; height:24px; }
.tool-badge {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
  border-radius:999px;
}
.tool-badge-admin {
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  color:var(--danger);
}

/* ---------- theme toggle moderno (knob deslizante com ícone SVG) ---------- */
/* Remove os emojis ☀️/🌙 que ladeavam o switch */
.theme-toggle .ti { display:none; }
.toggle-switch { width:54px; height:28px; }
.toggle-slider {
  background:var(--bg-soft);
  border:1px solid var(--border-strong);
  border-radius:999px;
  transition:border-color .18s ease;
}
.toggle-switch:hover .toggle-slider { border-color:var(--accent); }
/* knob */
.toggle-slider::before {
  content:'';
  position:absolute;
  width:22px; height:22px;
  left:2px; top:2px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 2px 8px -1px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:transform .28s cubic-bezier(.4,.1,.2,1);
}
/* ícone dentro do knob — sol quando light (unchecked) */
.toggle-slider::after {
  content:'';
  position:absolute;
  width:13px; height:13px;
  left:6.5px; top:6.5px;
  background:var(--btn-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .28s cubic-bezier(.4,.1,.2,1);
  pointer-events:none;
}
/* dark (checked): knob à direita + ícone de lua */
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(26px); }
.toggle-switch input:checked + .toggle-slider::after {
  transform:translateX(26px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M21%2012.8A9%209%200%201%201%2011.2%203%207%207%200%200%200%2021%2012.8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M21%2012.8A9%209%200%201%201%2011.2%203%207%207%200%200%200%2021%2012.8z'/%3E%3C/svg%3E");
}

/* ---------- brand ---------- */
header h1 span { color:var(--accent); }
header .brand-mark--light { display:none !important; }
[data-theme="light"] header .brand-mark--dark { display:none !important; }
[data-theme="light"] header .brand-mark--light {
  display:block !important;
  box-shadow:0 12px 28px -14px rgba(13,148,136,.35);
}

/* ---------- PWA install banner + CTA ---------- */
.ccd-pwa-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1000;
  max-width:560px; margin:0 auto;
  animation:ccd-pwa-in .28s ease;
}
@keyframes ccd-pwa-in {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
.ccd-pwa-banner__inner {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.ccd-pwa-banner__icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
}
.ccd-pwa-banner__icon--light { display:none; }
[data-theme="light"] .ccd-pwa-banner__icon--dark { display:none; }
[data-theme="light"] .ccd-pwa-banner__icon--light { display:block; }
.ccd-pwa-banner__copy {
  flex:1 1 180px; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.ccd-pwa-banner__copy strong {
  font-size:.92rem; font-weight:700; color:var(--text); line-height:1.25;
}
.ccd-pwa-banner__copy > span {
  font-size:.8rem; color:var(--muted); line-height:1.4;
}
.ccd-pwa-banner__ios { color:var(--accent) !important; }
.ccd-pwa-banner__actions {
  display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto;
}
.ccd-pwa-banner__btn {
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  background:var(--accent); color:var(--btn-text);
  font-weight:700; font-size:.85rem;
  padding:9px 16px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ccd-pwa-banner__btn:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.ccd-pwa-banner__dismiss {
  appearance:none; background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:.8rem; color:var(--muted); padding:8px 10px;
}
.ccd-pwa-banner__dismiss:hover { color:var(--text); }

[data-ccd-pwa-cta][hidden] { display:none !important; }
.ccd-pwa-cta {
  display:inline-flex; align-items:center; gap:8px;
  appearance:none; cursor:pointer; font-family:inherit;
  background:transparent; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ccd-pwa-cta:hover {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:var(--accent);
}
.ccd-pwa-cta svg { width:16px; height:16px; flex-shrink:0; }

@media (max-width:520px) {
  .ccd-pwa-banner { left:10px; right:10px; bottom:10px; }
  .ccd-pwa-banner__actions { width:100%; margin-left:0; }
  .ccd-pwa-banner__btn { flex:1; }
}