/* ============================================================
   iconica-ui.css — design tokens compartilhados dos módulos Icônica
   Linguagem visual: rosa bebê + marrom, esferas em gradiente (aurora)
   flutuando no fundo, cartões em glass — "futurista suave".
   Copiar este arquivo para a pasta html/ de cada módulo (crm,
   central, contratos, financeiro) pra manter a UI unificada.
   ============================================================ */

:root {
  /* paleta rosa bebê + marrom */
  --iconica-accent: #f6a9c7;
  --iconica-accent-alt: #f8bcd4;
  --iconica-accent-light: #ffd9e8;
  --iconica-accent-deep: #e88fb3;

  --iconica-brown: #6b4c3b;
  --iconica-brown-deep: #43322b;
  --iconica-brown-light: #a9826a;

  --iconica-text-primary: #43322b;
  --iconica-text-secondary: #7a6255;
  --iconica-text-muted: #ab9186;

  --iconica-bg-page: #fdf7f6;
  --iconica-bg-blush: #ffeef4;
  --iconica-bg-sand: #f3e3d8;

  --iconica-border: rgba(255, 255, 255, 0.85);

  --iconica-font-sans: 'Manrope', system-ui, sans-serif;
  --iconica-font-serif: 'Instrument Serif', serif;
}

body {
  font-family: var(--iconica-font-sans);
  background: var(--iconica-bg-page);
  position: relative;
}

::selection {
  background: var(--iconica-accent-light);
  color: var(--iconica-text-primary);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(107, 76, 59, 0.06);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--iconica-accent), var(--iconica-brown-light));
  border-radius: 999px;
}

/* ---------- fundo com esferas em gradiente (aurora) ---------- */
.iconica-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
}
.iconica-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.iconica-aurora span:nth-child(1) {
  top: -12%; left: -18%; width: 62vmax; height: 62vmax;
  background: radial-gradient(circle at 42% 42%, rgba(250, 197, 217, 0.55), rgba(250, 197, 217, 0) 68%);
  animation: iconicaDrift1 24s ease-in-out infinite;
}
.iconica-aurora span:nth-child(2) {
  top: 18%; right: -22%; width: 55vmax; height: 55vmax;
  background: radial-gradient(circle at 50% 50%, rgba(196, 173, 156, 0.35), rgba(196, 173, 156, 0) 66%);
  animation: iconicaDrift2 28s ease-in-out infinite;
}
.iconica-aurora span:nth-child(3) {
  bottom: -18%; left: 8%; width: 65vmax; height: 65vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255, 221, 234, 0.6), rgba(255, 221, 234, 0) 68%);
  animation: iconicaDrift3 32s ease-in-out infinite;
}
@keyframes iconicaDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.08); } }
@keyframes iconicaDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 4%) scale(1.1); } }
@keyframes iconicaDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, 3%) scale(1.06); } }

/* conteúdo real sempre acima da aurora */
#root, .iconica-content {
  position: relative;
  z-index: 1;
}

/* ---------- cartão em glass "futurista" ---------- */
.iconica-glass {
  border-radius: 26px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--iconica-border);
  box-shadow:
    0 18px 44px rgba(107, 76, 59, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -14px 26px rgba(255, 255, 255, 0.16),
    inset 0 22px 30px rgba(255, 255, 255, 0.24);
}

/* botão primário com o gradiente rosa bebê */
.iconica-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--iconica-font-sans);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--iconica-brown-deep);
  cursor: pointer;
  background: linear-gradient(90deg, var(--iconica-accent), var(--iconica-accent-light));
  box-shadow: 0 8px 22px rgba(232, 143, 179, 0.3);
}

/* pill/badge no padrão de status */
.iconica-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}