@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');


@import "tw-animate-css";

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

[x-cloak] {
  display: none;
}

@layer base {
  :root {
    /* ── GECO Auditor Brand Palette ── */
    --geco-primary: #113557;
    --geco-secondary: #e2e2e2;
    --geco-accent: #e2e2e2;
    --geco-accent-light: rgba(64, 118, 86, 0.10);
    --geco-surface: #f8fafc;
    --geco-overlay: rgba(17, 53, 87, 0.90);
    --geco-text-on-dark: rgba(255, 255, 255, 0.90);
    --geco-text-muted: rgba(255, 255, 255, 0.70);
    --geco-muted-text: #64748b;
    --geco-radius: 8px;
    --geco-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── shadcn-vue tokens mapped to GECO palette ── */
    --background: oklch(0.98 0.003 220);
    --foreground: oklch(0.18 0.04 220);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.04 220);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.04 220);

    /* Primary = navy #113557 → oklch approx */
    --primary: oklch(0.31 0.07 234);
    --primary-foreground: oklch(0.985 0 0);

    /* Secondary = green #407656 → oklch approx */
    --secondary: oklch(0.51 0.07 155);
    --secondary-foreground: oklch(0.985 0 0);

    --muted: oklch(0.96 0.004 220);
    --muted-foreground: oklch(0.50 0.02 220);
    --accent: oklch(0.94 0.015 155);
    --accent-foreground: oklch(0.31 0.07 234);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.92 0 0);
    --input: oklch(0.91 0.006 220);
    --ring: oklch(0.51 0.07 155);
    --radius: 1rem;

    /* Chart colors */
    --chart-1: oklch(0.31 0.07 234);
    --chart-2: oklch(0.51 0.07 155);
    --chart-3: oklch(0.65 0.12 55);
    --chart-4: oklch(0.60 0.10 310);
    --chart-5: oklch(0.55 0.13 25);

    /* Sidebar uses navy */
    --sidebar: oklch(0.31 0.07 234);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.31 0.07 234);
    --sidebar-accent: oklch(0.25 0.06 234);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.25 0.06 234);
    --sidebar-ring: oklch(0.51 0.07 155);

    --font-sans: 'Inter', sans-serif;
  }

  .dark {
    --background: oklch(0.14 0.04 234);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.19 0.05 234);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.19 0.05 234);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.51 0.07 155);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.25 0.05 234);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.22 0.04 234);
    --muted-foreground: oklch(0.65 0.02 220);
    --accent: oklch(0.25 0.06 155);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.51 0.07 155);
    --sidebar: oklch(0.17 0.05 234);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.51 0.07 155);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.22 0.04 234);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.51 0.07 155);
  }

  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-slate-800 font-sans tracking-tight;
  }

  .dark h1,
  .dark h2,
  .dark h3,
  .dark h4,
  .dark h5,
  .dark h6 {
    @apply text-slate-200;
  }

  .theme {
    --font-heading: var(--font-sans);
  }
}

@layer utilities {

  /* ── Zona badges ── */
  .badge-zona-norte {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
  }

  .badge-zona-sur {
    @apply bg-emerald-100 text-emerald-800 border border-emerald-200;
  }

  .badge-zona-centro {
    @apply bg-amber-100 text-amber-800 border border-amber-200;
  }

  .badge-zona-mixta {
    @apply bg-purple-100 text-purple-800 border border-purple-200;
  }

  /* ── Etapa badges ── */
  .badge-etapa-1 {
    @apply bg-slate-100 text-slate-600 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  .badge-etapa-2 {
    @apply bg-blue-100 text-blue-700 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  .badge-etapa-3 {
    @apply bg-indigo-100 text-indigo-700 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  .badge-etapa-4 {
    @apply bg-violet-100 text-violet-700 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  .badge-etapa-5 {
    @apply bg-amber-100 text-amber-700 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  .badge-etapa-6 {
    @apply bg-emerald-100 text-emerald-700 text-xs font-medium px-2 py-0.5 rounded-full;
  }

  /* ── Cumplimiento ── */
  .estado-cumple {
    @apply bg-emerald-50 text-emerald-700 border border-emerald-200;
  }

  .estado-no-cumple {
    @apply bg-red-50 text-red-700 border border-red-200;
  }

  .estado-no-aplica {
    @apply bg-slate-50 text-slate-500 border border-slate-200;
  }

  /* ── Sidebar active item ── */
  .nav-item-active {
    @apply bg-white/10 text-white font-medium;
  }

  .nav-item {
    @apply text-white/70 hover:bg-white/10 hover:text-white transition-colors duration-200;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}