@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500&family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── shadcn/ui CSS Variables (Enhanced Blue Palette) ─── */
:root {
  --background: 210 40% 98%;
  --foreground: 215 25% 20%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 20%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 20%;
  --primary: 200 80% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 200 60% 96%;
  --secondary-foreground: 200 80% 35%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 40%;
  --accent: 200 70% 94%;
  --accent-foreground: 200 80% 35%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 200 80% 45%;
  --radius: 0.625rem;
}

@layer base {
  * {
    @apply border-border;
    box-sizing: border-box;
  }
  body {
    @apply bg-calm-bg text-calm-text antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0;
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, sans-serif;
    @apply text-calm-text tracking-tight font-light;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ::selection {
    @apply bg-fresh-sky-200 text-fresh-sky-900;
  }

  /* Material Symbols default styling */
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
  }
}

@layer components {

  /* ─── Calm Ghost Buttons ─── */
  .ghost-btn {
    @apply flex items-center gap-2 px-5 py-2.5 rounded-huge border border-calm-border 
           text-sm font-light text-calm-muted hover:bg-fresh-sky-50 hover:text-fresh-sky-600 hover:border-fresh-sky-200
           transition-all duration-300;
  }

  /* ─── Legacy Buttons (Enhanced with Blue) ─── */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-huge 
           font-light text-sm transition-all duration-300
           focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
           disabled:opacity-50 disabled:pointer-events-none;
  }
  .btn-primary {
    @apply bg-gradient-to-r from-fresh-sky-500 to-fresh-sky-600 text-white hover:from-fresh-sky-600 hover:to-fresh-sky-700 
           focus-visible:ring-fresh-sky-500 shadow-sm hover:shadow-md;
  }
  .btn-secondary {
    @apply bg-white text-fresh-sky-600 hover:text-fresh-sky-700 border border-fresh-sky-200 hover:bg-fresh-sky-50;
  }
  .btn-ghost {
    @apply bg-transparent text-calm-muted hover:bg-fresh-sky-50 hover:text-fresh-sky-600;
  }
  .btn-danger {
    @apply bg-red-50 text-red-600 hover:bg-red-100 border border-red-200;
  }
  .btn-admin {
    @apply bg-gradient-to-r from-steel-azure-500 to-steel-azure-600 text-white hover:from-steel-azure-600 hover:to-steel-azure-700;
  }
  .btn-asesor {
    @apply bg-gradient-to-r from-fresh-sky-500 to-fresh-sky-600 text-white hover:from-fresh-sky-600 hover:to-fresh-sky-700;
  }
  .btn-cliente {
    @apply bg-gradient-to-r from-fresh-sky-500 to-fresh-sky-600 text-white hover:from-fresh-sky-600 hover:to-fresh-sky-700;
  }
  .btn-warning {
    @apply bg-amber-50 text-amber-700 hover:bg-amber-100 border border-amber-200;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-2xl;
  }
  .btn-lg {
    @apply px-6 py-3 text-base rounded-huge;
  }
  .btn-icon {
    @apply p-2.5 rounded-2xl;
  }

  /* ─── Calm Cards (Enhanced with Blue) ─── */
  .card {
    @apply bg-white rounded-huge border border-calm-border p-8 transition-all duration-300 backdrop-blur-sm;
  }
  .card-hover {
    @apply card hover:shadow-card-hover hover:border-fresh-sky-200;
  }
  .metric-card {
    @apply card-hover cursor-pointer relative overflow-hidden hover:shadow-md hover:-translate-y-0.5 transition-all duration-300;
  }
  .metric-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-fresh-sky-400 to-fresh-sky-500 opacity-0 transition-opacity duration-300;
  }
  .metric-card:hover::before {
    @apply opacity-100;
  }
  .card-colored {
    @apply rounded-huge border p-8 transition-all duration-300 backdrop-blur-sm hover:shadow-md;
  }
  .card-blue {
    @apply bg-gradient-to-br from-fresh-sky-50 to-white border-fresh-sky-200;
  }

  /* ─── Calm Table ─── */
  .table-container {
    @apply overflow-x-auto bg-white rounded-huge border border-calm-border;
  }

  /* ─── Calm Badges (Enhanced with Blue) ─── */
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-light;
  }
  .badge-success {
    @apply bg-emerald-50 text-emerald-700;
  }
  .badge-warning {
    @apply bg-amber-50 text-amber-700;
  }
  .badge-error {
    @apply bg-red-50 text-red-700;
  }
  .badge-info {
    @apply bg-fresh-sky-50 text-fresh-sky-700 border border-fresh-sky-200;
  }
  .badge-secondary {
    @apply bg-slate-50 text-calm-muted;
  }
  .badge-admin {
    @apply bg-steel-azure-100 text-steel-azure-700 border border-steel-azure-200;
  }
  .badge-asesor {
    @apply bg-fresh-sky-100 text-fresh-sky-700 border border-fresh-sky-200;
  }
  .badge-cliente {
    @apply bg-fresh-sky-100 text-fresh-sky-700 border border-fresh-sky-200;
  }

  /* ─── Calm Form Inputs (Enhanced) ─── */
  .input {
    @apply block w-full px-4 py-2.5 bg-white border border-calm-border rounded-2xl
           text-calm-text placeholder-calm-accent text-sm font-light
           transition-all duration-300
           focus:outline-none focus:ring-2 focus:ring-fresh-sky-200 focus:border-fresh-sky-400
           disabled:bg-slate-50 disabled:text-calm-muted disabled:cursor-not-allowed;
  }
  .textarea {
    @apply input min-h-[120px] resize-y;
  }
  .select {
    @apply input cursor-pointer appearance-none pr-10;
  }
  .label {
    @apply block text-[10px] font-medium text-calm-muted uppercase tracking-[0.15em] mb-2;
  }

  /* ─── Calm Sidebar Nav (Enhanced with Blue) ─── */
  .sidebar-link {
    @apply flex items-center gap-4 px-4 py-3 rounded-2xl text-sm font-light
           text-calm-muted transition-all duration-200
           hover:bg-fresh-sky-50 hover:text-fresh-sky-600;
  }
  .sidebar-link-active {
    @apply sidebar-link bg-gradient-to-r from-fresh-sky-50 to-fresh-sky-100/50 text-fresh-sky-700 font-medium border-l-2 border-fresh-sky-500;
  }

  /* ─── Calm Active Pill ─── */
  .active-pill {
    @apply bg-fresh-sky-500 text-white font-light shadow-sm;
  }

  /* ─── Section headings ─── */
  .section-title {
    @apply text-xl font-light text-calm-text font-display;
  }
  .section-subtitle {
    @apply text-sm text-calm-muted font-light mt-1;
  }
  .page-title {
    @apply text-5xl font-light text-calm-text font-display tracking-tight;
  }
  .page-subtitle {
    @apply text-lg text-calm-muted font-light mt-4;
  }

  /* ─── Stat/Metric display (Enhanced) ─── */
  .stat-value {
    @apply text-2xl font-light text-fresh-sky-600 font-display tabular-nums;
  }
  .stat-label {
    @apply text-[10px] font-medium text-calm-muted uppercase tracking-widest mt-1;
  }
  .stat-change-up {
    @apply inline-flex items-center gap-0.5 text-xs font-light text-emerald-600;
  }
  .stat-change-down {
    @apply inline-flex items-center gap-0.5 text-xs font-light text-red-600;
  }

  /* ─── Dividers ─── */
  .divider {
    @apply border-t border-calm-border my-6;
  }
}

@layer utilities {
  /* ─── Minimal Scrollbar ─── */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent; 
  }
  ::-webkit-scrollbar-thumb {
    background: #1babe4; 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #1589b7;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #1babe4 transparent;
  }
  .scrollbar-thin::-webkit-scrollbar { width: 4px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background-color: #1babe4; border-radius: 10px; }

  /* Stagger animation delays */
  .stagger-1 { animation-delay: 0.05s; animation-fill-mode: backwards; }
  .stagger-2 { animation-delay: 0.10s; animation-fill-mode: backwards; }
  .stagger-3 { animation-delay: 0.15s; animation-fill-mode: backwards; }
  .stagger-4 { animation-delay: 0.20s; animation-fill-mode: backwards; }
  .stagger-5 { animation-delay: 0.25s; animation-fill-mode: backwards; }
  .stagger-6 { animation-delay: 0.30s; animation-fill-mode: backwards; }

  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-fresh-sky-500 to-steel-azure-600;
  }
  .text-gradient-blue {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-fresh-sky-500 to-fresh-sky-700;
  }
}