:root {
  --ca-primary: #5b5cf6;
  --ca-primary-strong: #4038d6;
  --ca-secondary: #00bfa6;
  --ca-accent: #ff8a3d;
  --ca-surface: #ffffff;
  --ca-bg: #f6f7fb;
  --ca-text: #151827;
  --ca-muted: #667085;
  --ca-border: rgba(98, 102, 238, .14);
  --ca-shadow: 0 24px 70px rgba(21, 24, 39, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(91, 92, 246, .11), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(0, 191, 166, .10), transparent 34rem),
    var(--ca-bg);
  color: var(--ca-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

h1, h2, h3, h4,
.font-headline, .font-plus-jakarta-sans { font-family: 'Plus Jakarta Sans', sans-serif; }

.material-symbols-outlined { vertical-align: middle; }

.signature-gradient,
.ca-gradient {
  background-image: linear-gradient(135deg, #5b5cf6 0%, #756bff 52%, #00bfa6 100%) !important;
  color: #fff !important;
}

.ca-gradient-warm {
  background-image: linear-gradient(135deg, #ff8a3d 0%, #ff6b8b 100%) !important;
  color: #fff !important;
}

.glass-panel,
.glass-header {
  background: rgba(255, 255, 255, .76) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(255,255,255,.55) !important;
}

.ca-card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--ca-border);
  box-shadow: 0 18px 55px rgba(21, 24, 39, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ca-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ca-shadow);
  border-color: rgba(91,92,246,.24);
}

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ca-primary-strong);
  background: rgba(91, 92, 246, .10);
  border: 1px solid rgba(91, 92, 246, .12);
}

button,
a,
input,
select,
textarea { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(91,92,246,.22);
  outline-offset: 3px;
}

button:active,
a:active { transform: scale(.98); }

/* Blindagem visual: evita botão branco com texto branco quando uma classe customizada não carregar. */
.bg-white.text-white,
.text-white.bg-white,
button.bg-white.text-white,
a.bg-white.text-white {
  color: var(--ca-text);
  border: 1px solid rgba(102,112,133,.18) !important;
}

/* Fallbacks para utilitários de cores customizadas caso o Tailwind CDN demore a compilar. */
.text-primary { color: var(--ca-primary); }
.text-secondary { color: var(--ca-secondary); }
.text-on-surface { color: var(--ca-text); }
.text-on-surface-variant { color: var(--ca-muted); }
.bg-primary { background-color: var(--ca-primary); }
.bg-secondary { background-color: var(--ca-secondary); }
.bg-on-surface { background-color: #111827; }
.bg-background { background-color: var(--ca-bg); }
.bg-surface-container-low { background-color: #f1f3f9; }
.bg-surface-container-high { background-color: #e8ebf5; }
.bg-surface-container-lowest { background-color: #fff; }
.border-outline-variant { border-color: rgba(102,112,133,.18); }

.ca-main {
  margin-left: 16rem;
  min-height: 100vh;
  width: calc(100% - 16rem);
}

.ca-page-pad { padding: clamp(1.5rem, 3vw, 4rem); }
.ca-page-title { font-size: clamp(2.25rem, 4vw, 4.5rem); line-height: .92; letter-spacing: -.06em; }
.ca-page-subtitle { color: var(--ca-muted); font-weight: 700; }

.ca-primary-btn {
  background-image: linear-gradient(135deg, #5b5cf6 0%, #756bff 52%, #00bfa6 100%);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(91, 92, 246, .24);
}
.ca-primary-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(91, 92, 246, .30); }

.ca-dark-btn {
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(17, 24, 39, .16);
}
.ca-dark-btn:hover { background: var(--ca-primary) !important; }

.ca-soft-btn {
  background: rgba(91,92,246,.10) !important;
  color: var(--ca-primary-strong) !important;
  border: 1px solid rgba(91,92,246,.12) !important;
}
.ca-soft-btn:hover { background: rgba(91,92,246,.16) !important; }

.ca-danger-btn {
  background: #fff1f3 !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220,38,38,.12) !important;
}
.ca-danger-btn:hover { background: #dc2626 !important; color: #fff !important; }

.ca-input {
  background: #f1f3f9 !important;
  border: 1px solid transparent !important;
  color: var(--ca-text);
}
.ca-input:focus {
  background: #fff !important;
  border-color: rgba(91,92,246,.24) !important;
  box-shadow: 0 0 0 5px rgba(91,92,246,.08) !important;
}

.ca-empty {
  background: rgba(255,255,255,.70);
  border: 2px dashed rgba(102,112,133,.18);
}

@media (max-width: 1024px) {
  aside.fixed.left-0 { position: fixed; transform: translateX(-100%); }
  .ca-main,
  main.ml-64 { margin-left: 0 !important; width: 100% !important; }
  .ca-page-pad { padding: 1.25rem; }
}


.ca-label {
  display: block;
  margin: 0 0 .45rem .15rem;
  font-size: .70rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ca-muted);
}

.ca-select {
  width: 100%;
  min-height: 3.5rem;
  border-radius: 1rem;
  padding: .8rem 1rem;
  background: #f1f3f9 !important;
  border: 1px solid transparent !important;
  color: var(--ca-text);
  font-weight: 700;
}

.ca-select:focus {
  background: #fff !important;
  border-color: rgba(91,92,246,.24) !important;
  box-shadow: 0 0 0 5px rgba(91,92,246,.08) !important;
}

/* Sidebar fixa e revisada: mantém o botão sair sempre visível. */
.ca-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 92, 246, .35) transparent;
}
.ca-sidebar-nav::-webkit-scrollbar { width: 6px; }
.ca-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.ca-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(91, 92, 246, .28);
  border-radius: 999px;
}
.ca-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(91, 92, 246, .46); }

.ca-logout-pill {
  background: #fff1f3 !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220,38,38,.12) !important;
}
.ca-logout-pill:hover { background: #dc2626 !important; color: #fff !important; }