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

/* =============================================================================
   CSS VARIABLES - Design Tokens para Runtime Theming
   ============================================================================= */

@layer base {
  :root {
    /* =========================================================================
       RGB VALUES FOR TAILWIND ALPHA SUPPORT
       Format: R G B (space-separated for rgb(var(--color) / alpha) syntax)
       ========================================================================= */

    /* Primary Palette - ISEM Blue (RGB values) */
    --color-primary-50: 230 243 255;
    --color-primary-100: 204 231 255;
    --color-primary-200: 153 207 255;
    --color-primary-300: 102 183 255;
    --color-primary-400: 51 159 255;
    --color-primary-500: 0 97 168;
    --color-primary-600: 0 77 134;
    --color-primary-700: 0 58 101;
    --color-primary-800: 0 38 67;
    --color-primary-900: 0 19 34;

    /* Secondary Palette - ISEM Green (RGB values) */
    --color-secondary-50: 230 255 245;
    --color-secondary-100: 204 255 235;
    --color-secondary-200: 153 255 214;
    --color-secondary-300: 102 255 194;
    --color-secondary-400: 51 255 173;
    --color-secondary-500: 0 168 104;
    --color-secondary-600: 0 134 83;
    --color-secondary-700: 0 101 63;
    --color-secondary-800: 0 67 42;
    --color-secondary-900: 0 34 21;

    /* Success Palette (RGB values) */
    --color-success-50: 209 231 221;
    --color-success-100: 209 231 221;
    --color-success-500: 25 135 84;
    --color-success-600: 21 115 71;
    --color-success-700: 15 81 50;

    /* Warning Palette (RGB values) */
    --color-warning-50: 255 243 205;
    --color-warning-100: 255 243 205;
    --color-warning-500: 255 193 7;
    --color-warning-600: 224 168 0;
    --color-warning-700: 102 77 3;

    /* Danger Palette (RGB values) */
    --color-danger-50: 248 215 218;
    --color-danger-100: 248 215 218;
    --color-danger-500: 220 53 69;
    --color-danger-600: 187 45 59;
    --color-danger-700: 132 32 41;

    /* Info Palette (RGB values) */
    --color-info-50: 207 244 252;
    --color-info-100: 207 244 252;
    --color-info-500: 13 202 240;
    --color-info-600: 10 162 192;
    --color-info-700: 5 81 96;

    /* Background Colors (RGB values) - Light Theme */
    --color-background: 255 255 255;
    --color-background-subtle: 248 249 251;
    --color-background-muted: 241 243 245;
    --color-background-emphasis: 233 236 239;

    /* Foreground Colors (RGB values) - Light Theme */
    --color-foreground: 33 37 41;
    --color-foreground-muted: 108 117 125;
    --color-foreground-subtle: 173 181 189;

    /* Border Colors (RGB values) - Light Theme */
    --color-border: 222 226 230;
    --color-border-subtle: 233 236 239;
    --color-border-emphasis: 206 212 218;

    /* Surface Colors (RGB values) - Light Theme */
    --color-surface: 249 250 251;
    --color-surface-hover: 243 244 246;
    --color-surface-card: 255 255 255;
    --color-surface-popover: 255 255 255;
    --color-surface-modal: 255 255 255;
    --color-surface-dropdown: 255 255 255;

    /* =========================================================================
       LEGACY HEX VALUES (Backward Compatibility)
       Keep these for direct CSS usage and gradual migration
       ========================================================================= */

    /* Colores de Marca ISEM (HEX) */
    --color-brand-primary: #0061A8;
    --color-brand-secondary: #00A868;

    /* Colores Semanticos (HEX) */
    --color-success-hex: #198754;
    --color-success-light-hex: #D1E7DD;
    --color-success-dark-hex: #0F5132;
    --color-warning-hex: #FFC107;
    --color-warning-light-hex: #FFF3CD;
    --color-warning-dark-hex: #664D03;
    --color-danger-hex: #DC3545;
    --color-danger-light-hex: #F8D7DA;
    --color-danger-dark-hex: #842029;
    --color-info-hex: #0DCAF0;
    --color-info-light-hex: #CFF4FC;
    --color-info-dark-hex: #055160;

    /* Semantic Aliases (HEX for legacy components) */
    --color-success: #198754;
    --color-success-light: #D1E7DD;
    --color-success-dark: #0F5132;
    --color-warning: #FFC107;
    --color-warning-light: #FFF3CD;
    --color-warning-dark: #664D03;
    --color-danger: #DC3545;
    --color-danger-light: #F8D7DA;
    --color-danger-dark: #842029;
    --color-info: #0DCAF0;
    --color-info-light: #CFF4FC;
    --color-info-dark: #055160;

    /* Primary/Secondary HEX aliases */
    --color-primary-hex: var(--color-brand-primary);
    --color-secondary-hex: var(--color-brand-secondary);

    /* Sombras Tema Claro */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Tipografia */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    /* Animaciones */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);

    /* Bordes */
    --radius-sm: 0.125rem;
    --radius-default: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;
  }

  /* Tema Oscuro */
  .dark {
    /* Background Colors (RGB values) - Dark Theme */
    --color-background: 27 30 35;
    --color-background-subtle: 33 37 41;
    --color-background-muted: 45 49 57;
    --color-background-emphasis: 52 58 64;

    /* Foreground Colors (RGB values) - Dark Theme */
    --color-foreground: 236 236 236;
    --color-foreground-muted: 160 160 160;
    --color-foreground-subtle: 108 117 125;

    /* Border Colors (RGB values) - Dark Theme */
    --color-border: 73 80 87;
    --color-border-subtle: 52 58 64;
    --color-border-emphasis: 108 117 125;

    /* Surface Colors (RGB values) - Dark Theme */
    --color-surface: 31 41 55;
    --color-surface-hover: 55 65 81;
    --color-surface-card: 45 49 57;
    --color-surface-popover: 52 58 64;
    --color-surface-modal: 45 49 57;
    --color-surface-dropdown: 52 58 64;

    /* Sombras Tema Oscuro */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }

  html {
    @apply antialiased;
    font-family: var(--font-sans);
  }

  body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

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

/* =============================================================================
   COMPONENTES BASE
   ============================================================================= */

@layer components {
  /* Botones */
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    transition-duration: var(--duration-fast);
  }

  .btn-primary {
    @apply bg-primary-500 text-white hover:bg-primary-600 focus-visible:ring-primary-500;
  }

  .btn-secondary {
    @apply bg-secondary-500 text-white hover:bg-secondary-600 focus-visible:ring-secondary-500;
  }

  .btn-outline {
    @apply border border-border-emphasis bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
    color: rgb(var(--color-foreground));
  }

  .btn-ghost {
    @apply bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
    color: rgb(var(--color-foreground));
  }

  .btn-danger {
    @apply bg-danger-500 text-white hover:bg-danger-600 focus-visible:ring-danger-500;
  }

  .btn-sm {
    @apply h-8 px-3 text-sm;
  }

  .btn-md {
    @apply h-10 px-4;
  }

  .btn-lg {
    @apply h-12 px-6 text-lg;
  }

  /* Inputs */
  .input {
    @apply block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50;
    background-color: rgb(var(--color-background));
    border-color: rgb(var(--color-border));
    color: rgb(var(--color-foreground));
    transition-duration: var(--duration-fast);
  }

  .input::placeholder {
    color: rgb(var(--color-foreground-subtle));
  }

  .input:focus {
    border-color: rgb(var(--color-primary-500));
    --tw-ring-color: rgb(var(--color-primary-500));
  }

  .input-error {
    @apply border-danger-500 focus:border-danger-500 focus:ring-danger-500;
  }

  /* Labels */
  .label {
    @apply block text-sm font-medium;
    color: rgb(var(--color-foreground));
  }

  /* Cards */
  .card {
    @apply rounded-lg border;
    background-color: rgb(var(--color-surface-card));
    border-color: rgb(var(--color-border));
    box-shadow: var(--shadow-default);
  }

  /* Links */
  .link {
    @apply hover:underline;
    color: rgb(var(--color-primary-500));
    transition-duration: var(--duration-fast);
  }

  .link:hover {
    color: rgb(var(--color-primary-600));
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-700;
  }

  .badge-secondary {
    @apply bg-secondary-100 text-secondary-700;
  }

  .badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
  }

  .badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

  .badge-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

  .badge-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
  }

  /* Alerts */
  .alert {
    @apply rounded-lg border p-4;
  }

  .alert-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success-dark);
  }

  .alert-warning {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
  }

  .alert-danger {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger-dark);
  }

  .alert-info {
    background-color: var(--color-info-light);
    border-color: var(--color-info);
    color: var(--color-info-dark);
  }
}

/* =============================================================================
   UTILIDADES
   ============================================================================= */

@layer utilities {
  /* Scrollbar personalizado */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border)) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-border));
    border-radius: 3px;
  }

  /* Focus visible mejorado */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    --tw-ring-color: rgb(var(--color-primary-500));
  }

  /* Texto truncado */
  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Transiciones suaves */
  .transition-theme {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--easing-default);
  }
}

/* =============================================================================
   MULTI-TENANT THEMING (Placeholder para override por tenant)
   ============================================================================= */

/*
 * Los tenants pueden sobreescribir estas variables via JS:
 * document.documentElement.style.setProperty('--color-brand-primary', '#FF0000');
 *
 * O cargar un CSS adicional con:
 * [data-tenant="empresa-abc"] {
 *   --color-brand-primary: #123456;
 *   --color-brand-secondary: #654321;
 * }
 */