/* WhatsMED V20.19 — Theme do logo novo (paleta unificada) */
:root {
  /* === PALETA DA MARCA === */
  --wm-deep: #1E3A8A;
  --wm-cyan: #0891B2;
  --wm-mint: #10B981;
  --wm-ice: #F0F9FF;
  --wm-ink: #0F172A;
  --wm-mute: #64748B;
  --wm-line: #E2E8F0;
  --wm-bg: #FFFFFF;
  --wm-bg-soft: #F8FAFC;
  --wm-warn: #F59E0B;
  --wm-danger: #DC2626;
  
  /* === GRADIENTES OFICIAIS === */
  --wm-grad: linear-gradient(135deg, #1E3A8A 0%, #0891B2 50%, #10B981 100%);
  --wm-grad-h: linear-gradient(90deg, #1E3A8A 0%, #0891B2 50%, #10B981 100%);
  --wm-grad-soft: linear-gradient(135deg, rgba(30,58,138,.06), rgba(8,145,178,.06), rgba(16,185,129,.06));
  
  /* === SOMBRAS PROFISSIONAIS === */
  --wm-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --wm-shadow-sm: 0 2px 6px rgba(15,23,42,.06);
  --wm-shadow-md: 0 6px 18px rgba(15,23,42,.08);
  --wm-shadow-lg: 0 12px 32px rgba(15,23,42,.10);
  --wm-shadow-glow: 0 0 0 4px rgba(8,145,178,.12);
  
  /* === RAIOS === */
  --wm-r-sm: 8px;
  --wm-r-md: 12px;
  --wm-r-lg: 16px;
  --wm-r-xl: 22px;
  --wm-r-pill: 999px;
  
  /* === TRANSITIONS === */
  --wm-tr: 220ms cubic-bezier(.4,0,.2,1);
  --wm-tr-slow: 360ms cubic-bezier(.4,0,.2,1);
  
  /* compat com CSS antigo */
  --primary: var(--wm-deep);
  --primary-color: var(--wm-deep);
  --accent: var(--wm-mint);
  --teal: var(--wm-cyan);
  --ice: var(--wm-ice);
  --bg-primary: var(--wm-bg);
  --text-primary: var(--wm-ink);
  --brand: var(--wm-deep);
}

/* === FOCUS RING ACESSIVEL EM TODOS INTERATIVOS === */
*:focus-visible {
  outline: 2px solid var(--wm-cyan) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* === BOTOES PRIMARIOS — usam gradiente da marca === */
button.btn-primary, .btn-primary, button.primary, .button-primary,
[class*="btn-primary"], button[class*="iniciar"], a[class*="btn-primary"] {
  background: var(--wm-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wm-r-md) !important;
  font-weight: 600 !important;
  transition: transform var(--wm-tr), box-shadow var(--wm-tr), filter var(--wm-tr) !important;
  box-shadow: var(--wm-shadow-sm);
}
button.btn-primary:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--wm-shadow-md);
  filter: brightness(1.05);
}
button.btn-primary:active, .btn-primary:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* === CARDS — sombra suave, raio maior, hover lift === */
[class*="card"], .card, article[class*="post"], div[class*="-card"] {
  border-radius: var(--wm-r-lg) !important;
  transition: transform var(--wm-tr), box-shadow var(--wm-tr), border-color var(--wm-tr) !important;
}
[class*="card"]:hover, .card:hover {
  box-shadow: var(--wm-shadow-md);
}

/* === LINKS DA NAVBAR — underline gradient on hover === */
header nav a, header a[href*="#"] {
  position: relative;
  transition: color var(--wm-tr);
}

/* === FOOTER LGPD pills — usar paleta da marca === */
.wm-lgpd-footer a {
  background: linear-gradient(135deg, rgba(30,58,138,.92), rgba(15,23,42,.92)) !important;
  border: 1px solid rgba(8,145,178,.20) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  font-weight: 500 !important;
  transition: all var(--wm-tr) !important;
}
.wm-lgpd-footer a:hover {
  background: var(--wm-grad) !important;
  border-color: rgba(255,255,255,.20) !important;
  transform: translateY(-2px);
  box-shadow: var(--wm-shadow-md);
}
.wm-lgpd-footer a.wm-lgpd-seo {
  background: linear-gradient(135deg, rgba(8,145,178,.92), rgba(16,185,129,.92)) !important;
}

/* === ADMIN dashboard — ja usa CSS proprio, alinhar cores === */
.wm-av20-card.ok { border-left-color: var(--wm-mint) !important; }
.wm-av20-card.warn { border-left-color: var(--wm-warn) !important; }
.wm-av20-card.info { border-left-color: var(--wm-cyan) !important; }
.wm-av20-tab.active { color: var(--wm-cyan) !important; border-bottom-color: var(--wm-cyan) !important; }
.wm-av20-refresh { background: var(--wm-grad-h) !important; }

/* === BADGE / PILL === */
[class*="badge"]:not(.wm-av20-badge):not(.wm-lgpd-footer *) {
  border-radius: var(--wm-r-pill);
}

/* === SCROLLBAR ESTILIZADA === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wm-bg-soft); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--wm-cyan), var(--wm-deep)); border-radius: var(--wm-r-pill); border: 2px solid var(--wm-bg-soft); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--wm-mint), var(--wm-cyan)); }

/* === SELECAO DE TEXTO === */
::selection { background: rgba(8,145,178,.25); color: var(--wm-ink); }

/* === LOADING SKELETON melhorado === */
.skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%) !important;
  background-size: 200% 100% !important;
  animation: wm-skeleton 1.4s ease-in-out infinite !important;
  border-radius: var(--wm-r-sm);
}
@keyframes wm-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === INPUT FIELDS — refinement === */
input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select {
  transition: border-color var(--wm-tr), box-shadow var(--wm-tr) !important;
  border-radius: var(--wm-r-sm) !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, textarea:focus, select:focus {
  border-color: var(--wm-cyan) !important;
  box-shadow: var(--wm-shadow-glow) !important;
  outline: none !important;
}

/* === META theme color === */
/* aplicado via JS no boot */