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

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

@layer base {
  * {
    @apply border-neutral-200;
  }
  
  body {
    @apply bg-background text-neutral-900 font-sans;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold;
  }
}

@layer components {
  /* Botones (Estilo iOS 26 / Glassmorphism) */
  .btn-primary {
    @apply px-6 py-3 bg-primary-500/90 backdrop-blur-md text-white font-semibold rounded-lg 
           border border-white/20 shadow-sm hover:shadow-md hover:bg-primary-600/90 
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-300 ease-out disabled:opacity-50 disabled:cursor-not-allowed
           transform hover:-translate-y-0.5 active:translate-y-0 active:scale-95;
    box-shadow: 0 4px 12px rgba(0, 131, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .btn-secondary {
    @apply px-6 py-3 bg-white/70 backdrop-blur-md border border-neutral-200/80 text-neutral-700 font-semibold rounded-lg
           hover:bg-white/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2
           transition-all duration-300 ease-out
           transform hover:-translate-y-0.5 active:translate-y-0 active:scale-95;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  
  .btn-danger {
    @apply px-4 py-2 bg-error/10 backdrop-blur-md border border-error/20 text-error font-semibold rounded-lg 
           hover:bg-error/20 hover:shadow-md transition-all duration-300 ease-out
           transform hover:-translate-y-0.5 active:translate-y-0 active:scale-95;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  /* Aplicar estilo global a botones con clases utilitarias de Tailwind (bg-primary-*) */
  button[class*="bg-primary-500"],
  button[class*="bg-primary-600"],
  a[class*="bg-primary-500"],
  a[class*="bg-primary-600"] {
    @apply bg-opacity-90 backdrop-blur-md border border-white/20 shadow-sm 
           transition-all duration-300 ease-out;
    box-shadow: 0 4px 12px rgba(0, 131, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  button[class*="bg-primary-500"]:not(:disabled):hover,
  button[class*="bg-primary-600"]:not(:disabled):hover,
  a[class*="bg-primary-500"]:not([disabled]):hover,
  a[class*="bg-primary-600"]:not([disabled]):hover {
    @apply shadow-md bg-opacity-100 transform -translate-y-0.5;
    box-shadow: 0 6px 16px rgba(0, 131, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  button[class*="bg-primary-500"]:not(:disabled):active,
  button[class*="bg-primary-600"]:not(:disabled):active,
  a[class*="bg-primary-500"]:not([disabled]):active,
  a[class*="bg-primary-600"]:not([disabled]):active {
    @apply transform translate-y-0 scale-95;
  }

  /* Aplicar estilo global a botones secundarios (border-neutral-300) */
  button[class*="border-neutral-300"],
  a[class*="border-neutral-300"] {
    @apply bg-white/80 backdrop-blur-md border-neutral-300/80 shadow-sm 
           transition-all duration-300 ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  button[class*="border-neutral-300"]:not(:disabled):hover,
  a[class*="border-neutral-300"]:not([disabled]):hover {
    @apply shadow-md bg-white/100 transform -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  button[class*="border-neutral-300"]:not(:disabled):active,
  a[class*="border-neutral-300"]:not([disabled]):active {
    @apply transform translate-y-0 scale-95;
  }

  /* Aplicar estilo global a botones de peligro (border-error) */
  button[class*="border-error"],
  a[class*="border-error"] {
    @apply bg-error/10 backdrop-blur-md border-error/20 shadow-sm 
           transition-all duration-300 ease-out;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  button[class*="border-error"]:not(:disabled):hover,
  a[class*="border-error"]:not([disabled]):hover {
    @apply shadow-md bg-error/20 transform -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  button[class*="border-error"]:not(:disabled):active,
  a[class*="border-error"]:not([disabled]):active {
    @apply transform translate-y-0 scale-95;
  }
  
  /* Inputs */
  .input-field {
    @apply w-full px-3 py-2 border border-neutral-300 rounded-lg text-base
           focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500
           transition-all duration-150;
  }
  
  /* Cards */
  .card {
    @apply bg-white border border-neutral-200 rounded-lg p-6 shadow-sm 
           hover:shadow-md transition-shadow duration-150;
  }

  /* Aplicar estilo Liquid Glass a las cards principales (bg-white con rounded-lg/xl/2xl y shadow) */
  div[class*="bg-white"][class*="rounded-lg"][class*="shadow"],
  div[class*="bg-white"][class*="rounded-xl"][class*="shadow"],
  div[class*="bg-white"][class*="rounded-2xl"][class*="shadow"] {
    @apply relative overflow-hidden transition-all duration-300 ease-out;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      inset 0 0 20px 10px rgba(255, 255, 255, 0.3);
  }

  div[class*="bg-white"][class*="rounded-lg"][class*="shadow"]:hover,
  div[class*="bg-white"][class*="rounded-xl"][class*="shadow"]:hover,
  div[class*="bg-white"][class*="rounded-2xl"][class*="shadow"]:hover {
    @apply transform -translate-y-1;
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3),
      inset 0 0 20px 10px rgba(255, 255, 255, 0.4);
  }

  div[class*="bg-white"][class*="rounded-lg"][class*="shadow"]::before,
  div[class*="bg-white"][class*="rounded-xl"][class*="shadow"]::before,
  div[class*="bg-white"][class*="rounded-2xl"][class*="shadow"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );
    pointer-events: none;
  }

  div[class*="bg-white"][class*="rounded-lg"][class*="shadow"]::after,
  div[class*="bg-white"][class*="rounded-xl"][class*="shadow"]::after,
  div[class*="bg-white"][class*="rounded-2xl"][class*="shadow"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8),
      transparent,
      rgba(255, 255, 255, 0.3)
    );
    pointer-events: none;
  }
  
  /* Toast Notifications */
  .toast-success {
    @apply fixed top-4 right-4 bg-success/10 border border-success text-success 
           px-4 py-3 rounded-lg text-sm font-medium shadow-md z-50;
  }
  
  .toast-error {
    @apply fixed top-4 right-4 bg-error/10 border border-error text-error 
           px-4 py-3 rounded-lg text-sm font-medium shadow-md z-50;
  }
  
  .toast-warning {
    @apply fixed top-4 right-4 bg-warning/10 border border-warning text-warning 
           px-4 py-3 rounded-lg text-sm font-medium shadow-md z-50;
  }
  
  /* Loading Spinner */
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .spinner {
    @apply animate-spin h-4 w-4;
  }
  
  /* Status Badges */
  .badge-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
           bg-warning/10 text-warning border border-warning/30;
  }
  
  .badge-approved {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
           bg-success/10 text-success border border-success/30;
  }
  
  .badge-rejected {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
           bg-error/10 text-error border border-error/30;
  }
  
  .badge-in-review {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
           bg-info/10 text-info border border-info/30;
  }

  /* Glassmorphism Utilities */
  .glass-panel {
    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
  }
  
  /* Liquid Glass Card (iOS 26 Style) */
  .glass-card {
    @apply relative overflow-hidden rounded-2xl transition-all duration-300 ease-out;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 20px 10px rgba(255, 255, 255, 0.5); /* Reducido el alpha para que no sea tan blanco sólido */
  }

  .glass-card:hover {
    @apply transform -translate-y-1;
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      inset 0 0 20px 10px rgba(255, 255, 255, 0.6);
  }

  .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );
  }

  .glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8),
      transparent,
      rgba(255, 255, 255, 0.3)
    );
  }

  /* Animaciones Fluidas (AOS/Framer style fallbacks) */
  .fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  .slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
}