/* =========================================================================
   AURA Dental · Panel de clínica — custom CSS (design tokens + surfaces).
   Light, calm, clinical-premium. Cobalt primary, coral accent on a soft
   slate background. Compositor-only animations (transform/opacity).
   ========================================================================= */
:root {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Brand palette */
  --cobalt:        #2563EB;
  --cobalt-light:  #3B82F6;
  --cobalt-dark:   #1E40AF;
  --coral:         #FB7185;
  --success:       #16A34A;
  --bg-soft:       #F1F5F9;
  --ink:           #1E293B;
  --gray:          #64748B;
  --hairline:      #E2E8F0;

  /* Soft diffuse elevation tokens (cool shadow, low spread) */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-md: 0 6px 18px -10px rgba(15,23,42,0.14), 0 2px 6px -2px rgba(15,23,42,0.06);
  --shadow-lg: 0 22px 46px -24px rgba(37,99,235,0.24), 0 10px 22px -14px rgba(15,23,42,0.10);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 560px at 84% -12%, rgba(37,99,235,0.06), transparent 60%),
    radial-gradient(820px 480px at -6% 110%, rgba(251,113,133,0.06), transparent 55%),
    var(--bg-soft);
  color: #334155;
}

/* Tabular numerals for every figure */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Premium subtle scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.16); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.30); }

/* Surface card base — white card, hairline border, soft diffuse elevation */
.surface {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
}
.surface-hover {
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal),
              border-color var(--duration-normal);
}
.surface-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,0.28);
  box-shadow: var(--shadow-lg);
}

.nav-item { transition: color var(--duration-fast), background-color var(--duration-fast); }
.nav-item:hover { background: rgba(37,99,235,0.07); color: var(--cobalt-dark); }
.nav-item:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.btn {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast),
              border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* List rows nudge on hover */
.row-nudge { transition: transform var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast); }
.row-nudge:hover { transform: translateX(3px); }

/* Soft live pulse (opacity only) */
@keyframes softpulse { 0%,100% { opacity: 1 } 50% { opacity: 0.32 } }
.live-dot { animation: softpulse 2.4s ease-in-out infinite; }

/* Entrance rise (transform/opacity only) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise var(--duration-normal) var(--ease-out-expo) both; }

/* Activity feed item entrance */
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.feed-in { animation: feedIn var(--duration-normal) var(--ease-out-expo) both; }

.tab-pane[hidden] { display: none; }

.row-hover { transition: background-color var(--duration-fast); }
.row-hover:hover { background: rgba(37,99,235,0.045); }

/* Free-slot pill: subtle hover lift */
.slot-pill { transition: transform var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast), border-color var(--duration-fast); }
.slot-pill:hover { transform: translateY(-1px); border-color: rgba(37,99,235,0.45); background: rgba(37,99,235,0.10); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}