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

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --primary: 222 84% 16%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 90.4%;
    --input: 214.3 31.8% 90.4%;
    --ring: 214 95% 61%;
    --radius: 0.95rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: 'rlig' 1, 'calt' 1;
    background-image: linear-gradient(180deg, #edf4ff 0%, #f8fafc 22%, #f5f7fb 100%);
  }

  ::selection {
    background: rgba(59, 130, 246, 0.16);
    color: #0f172a;
  }
}

@layer components {
  .btn-touch {
    @apply min-h-[48px] min-w-[48px] text-base font-medium;
  }

  .card-ot {
    @apply rounded-2xl border bg-card p-4 shadow-sm transition-all hover:shadow-md;
  }

  .estado-badge {
    @apply inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold;
  }

  .estado-borrador {
    @apply bg-gray-100 text-gray-700;
  }

  .estado-en_proceso {
    @apply bg-amber-100 text-amber-700;
  }

  .estado-cotizada {
    @apply bg-violet-100 text-violet-700;
  }

  .estado-aprobada {
    @apply bg-emerald-100 text-emerald-700;
  }

  .estado-terminada {
    @apply bg-cyan-100 text-cyan-700;
  }

  .estado-entregada {
    @apply bg-green-100 text-green-700;
  }

  .offline-banner {
    @apply bg-amber-100 px-4 py-2 text-center text-sm font-medium text-amber-800;
  }

  .sync-pending {
    @apply bg-amber-500 text-white;
  }

  .sync-success {
    @apply bg-green-500 text-white;
  }

  .app-surface {
    @apply rounded-[28px] border border-white/70 bg-white/84 shadow-[0_26px_70px_-40px_rgba(15,23,42,0.34)] backdrop-blur-xl;
  }
}

@layer components {
  .form-input-lg {
    @apply h-12 px-4 text-base;
  }

  .form-label-lg {
    @apply mb-2 text-base font-medium;
  }
}

@layer components {
  .wizard-step {
    @apply flex items-center gap-2;
  }

  .wizard-step-circle {
    @apply flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium;
  }

  .wizard-step-active {
    @apply bg-primary text-primary-foreground;
  }

  .wizard-step-completed {
    @apply bg-green-500 text-white;
  }

  .wizard-step-pending {
    @apply bg-gray-200 text-gray-500;
  }
}

@layer components {
  .damage-marker {
    @apply absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer rounded-full border-2 border-white shadow-lg;
  }
}

@layer components {
  .signature-pad {
    @apply rounded-lg border-2 border-dashed border-gray-300 bg-white;
  }

  .signature-pad canvas {
    @apply h-full w-full;
  }
}

@layer utilities {
  .loading-shimmer {
    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200;
  }
}

@media print {
  .no-print {
    display: none !important;
  }
}