/* ═══════════════════════════════════════════════════════
   PsyAssist — global.css
   Liquid Glass Design System — purple/pink pastels
   ═══════════════════════════════════════════════════════ */

/* ─── Google Fonts ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── Variáveis de design ─────────────────────────────── */
:root {
  /* Cores principais */
  --color-primary:       #7c3aed;
  --color-primary-dark:  #6d28d9;
  --color-primary-light: rgba(124, 58, 237, 0.12);
  --color-primary-xlight:rgba(124, 58, 237, 0.06);

  /* Cores de destaque (rosa) */
  --color-accent:        #b4136d;
  --color-accent-light:  rgba(180, 19, 109, 0.10);

  /* Gradientes */
  --gradient-primary:    linear-gradient(135deg, #7c3aed 0%, #b4136d 100%);
  --gradient-card-a:     linear-gradient(135deg, rgba(172,237,255,0.55) 0%, rgba(253,86,167,0.55) 100%);
  --gradient-card-b:     linear-gradient(135deg, rgba(90,0,198,0.45) 0%, rgba(253,86,167,0.45) 100%);

  /* Glass */
  --glass-bg:            rgba(255, 255, 255, 0.28);
  --glass-bg-light:      rgba(255, 255, 255, 0.18);
  --glass-border:        rgba(255, 255, 255, 0.60);
  --glass-highlight:     inset 0 1.5px 0 rgba(255, 255, 255, 0.85);
  --glass-blur:          blur(24px);
  --glass-blur-sm:       blur(14px);

  /* Cores neutras */
  --color-bg:            #f5f3ff;
  --color-surface:       rgba(255, 255, 255, 0.28);
  --color-surface-solid: #ffffff;
  --color-surface-hover: rgba(255, 255, 255, 0.45);
  --color-border:        rgba(255, 255, 255, 0.55);
  --color-border-focus:  #7c3aed;

  /* Texto */
  --color-text:          #0b1c30;
  --color-text-secondary:#4a4455;
  --color-text-muted:    #7b7487;
  --color-text-on-primary:#ffffff;

  /* Estados */
  --color-success:       #059669;
  --color-success-light: rgba(5, 150, 105, 0.10);
  --color-warning:       #d97706;
  --color-warning-light: rgba(217, 119, 6, 0.10);
  --color-danger:        #dc2626;
  --color-danger-light:  rgba(220, 38, 38, 0.10);
  --color-info:          #0284c7;
  --color-info-light:    rgba(2, 132, 199, 0.10);

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Raios de borda — generosos para o look liquid */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Sombras suaves / coloridas */
  --shadow-xs:  0 2px 8px rgba(99, 14, 212, 0.06);
  --shadow-sm:  0 4px 16px rgba(99, 14, 212, 0.08);
  --shadow-md:  0 8px 32px rgba(99, 14, 212, 0.10);
  --shadow-lg:  0 16px 48px rgba(99, 14, 212, 0.14);
  --shadow-primary: 0 10px 20px -5px rgba(124, 58, 237, 0.35);

  /* Tipografia */
  --font-sans:  "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Transições */
  --transition-fast:  0.12s ease;
  --transition-base:  0.20s ease;
  --transition-slow:  0.35s ease;

  /* Sidebar */
  --sidebar-width:    240px;
}

/* ─── Reset ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  /* Blobs muito subtis como base para o efeito glass */
  background:
    radial-gradient(ellipse 65% 55% at  0% 10%, rgba(180, 140, 255, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 95%, rgba(240, 120, 190, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 75% 8%,  rgba(140, 210, 255, 0.10) 0%, transparent 65%),
    #f5f3ff;
  background-attachment: fixed;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

input, textarea, [contenteditable] {
  user-select: text;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ─── Tipografia utilitária ───────────────────────────── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }

.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }

.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary   { color: var(--color-primary); }
.text-danger    { color: var(--color-danger); }
.text-success   { color: var(--color-success); }

/* ─── Utilitários de layout ───────────────────────────── */
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2      { gap: var(--space-2); }
.gap-3      { gap: var(--space-3); }
.gap-4      { gap: var(--space-4); }
.gap-6      { gap: var(--space-6); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

.hidden { display: none !important; }

/* ─── Toast / notificações ────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: slideInToast var(--transition-base) forwards;
  backdrop-filter: var(--glass-blur-sm);
}
.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }
.toast.fade-out { animation: fadeOutToast var(--transition-slow) forwards; }

@keyframes slideInToast {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutToast {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(4px); }
}

/* ─── Modal de confirmação ────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* overlay branco suave + blur simples sem saturate */
  background: rgba(245, 243, 255, 0.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn var(--transition-fast) forwards;
}
.modal {
  /* glass mais opaco aqui para legibilidade do formulário */
  background: rgba(240, 232, 255, 0.55);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  max-width: 420px;
  width: 90%;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.90),
    0 24px 64px rgba(110, 40, 200, 0.22),
    0 4px 16px rgba(110, 40, 200, 0.12);
}
.modal h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); font-weight: var(--weight-bold); }
.modal p  { color: var(--color-text-secondary); margin-bottom: var(--space-6); line-height: var(--leading-relaxed); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ─── Spinner de carregamento ─────────────────────────── */
.feedback-fab {
  position: fixed;
  bottom: calc(var(--space-6) + 64px);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-primary);
  z-index: 900;
  transition: transform var(--transition-fast);
}
.feedback-fab:hover { transform: scale(1.08); }

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

/* ─── Scrollbar personalizada ─────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.4); }