/**
 * COMPONENTS.CSS
 * Sistema de componentes reutilizables para el proyecto Argus
 * Basado en Tailwind CSS con DaisyUI
 */

@tailwind components;

@layer components {

  /* ========================================
     BUTTONS SYSTEM
     ======================================== */

  /**
   * Botón base - Estilos compartidos por todos los botones
   */
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-all duration-200 inline-flex items-center justify-center gap-2;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    min-height: 44px; /* WCAG touch target minimum */
  }

  /**
   * Variantes de color
   */
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
    @apply focus:ring-primary-500;
  }

  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800;
    @apply focus:ring-gray-500;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 active:bg-green-800;
    @apply focus:ring-green-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
    @apply focus:ring-red-500;
  }

  .btn-warning {
    @apply bg-yellow-600 text-white hover:bg-yellow-700 active:bg-yellow-800;
    @apply focus:ring-yellow-500;
  }

  .btn-info {
    @apply bg-cyan-600 text-white hover:bg-cyan-700 active:bg-cyan-800;
    @apply focus:ring-cyan-500;
  }

  /**
   * Variantes de tamaño
   */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
    min-height: 36px;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
    min-height: 52px;
  }

  /**
   * Variantes de estilo
   */
  .btn-outline {
    @apply bg-transparent border-2;
  }

  .btn-outline.btn-primary {
    @apply border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white;
  }

  .btn-outline.btn-secondary {
    @apply border-gray-600 text-gray-600 hover:bg-gray-600 hover:text-white;
  }

  .btn-ghost {
    @apply bg-transparent hover:bg-gray-100 text-gray-700;
  }

  /**
   * Botón circular/icono
   */
  .btn-icon {
    @apply p-0 rounded-full;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  .btn-icon.btn-sm {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
  }

  .btn-icon.btn-lg {
    min-width: 52px;
    min-height: 52px;
    width: 52px;
    height: 52px;
  }

  /* ========================================
     CARDS SYSTEM
     ======================================== */

  /**
   * Card base
   */
  .card {
    @apply bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden;
  }

  /**
   * Card oscuro (para tema dark)
   */
  .card-dark {
    @apply bg-slate-800 border-slate-700 text-white shadow-xl;
  }

  /**
   * Padding de card
   */
  .card-body {
    @apply p-6;
  }

  .card-body-sm {
    @apply p-4;
  }

  .card-body-lg {
    @apply p-8;
  }

  /**
   * Secciones de card
   */
  .card-header {
    @apply pb-4 mb-4 border-b border-gray-200;
  }

  .card-dark .card-header {
    @apply border-slate-600;
  }

  .card-footer {
    @apply pt-4 mt-4 border-t border-gray-200;
  }

  .card-dark .card-footer {
    @apply border-slate-600;
  }

  /**
   * Card con hover (para elementos clicables)
   */
  .card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer;
  }

  /* ========================================
     INPUTS & FORMS SYSTEM
     ======================================== */

  /**
   * Input base
   */
  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
    @apply transition-colors duration-200;
    @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
    min-height: 44px; /* WCAG touch target */
  }

  /**
   * Estados de input
   */
  .input-error {
    @apply border-red-500 focus:ring-red-500;
  }

  .input-success {
    @apply border-green-500 focus:ring-green-500;
  }

  .input-dark {
    @apply bg-slate-700 border-slate-600 text-white;
    @apply focus:ring-primary-400 focus:border-transparent;
  }

  /**
   * Tamaños de input
   */
  .input-sm {
    @apply px-2 py-1.5 text-sm;
    min-height: 36px;
  }

  .input-lg {
    @apply px-4 py-3 text-lg;
    min-height: 52px;
  }

  /**
   * Labels
   */
  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .label-dark {
    @apply text-gray-300;
  }

  .label-required::after {
    content: " *";
    @apply text-red-500;
  }

  /**
   * Select
   */
  .select {
    @apply input appearance-none bg-no-repeat pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
  }

  .select-dark {
    @apply input-dark;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  /**
   * Textarea
   */
  .textarea {
    @apply input resize-y;
    min-height: 100px;
  }

  /**
   * Checkbox y Radio
   */
  .checkbox,
  .radio {
    @apply w-5 h-5 text-primary-600 border-gray-300 rounded;
    @apply focus:ring-primary-500 focus:ring-2 focus:ring-offset-0;
    @apply cursor-pointer;
    min-width: 20px;
    min-height: 20px;
  }

  .radio {
    @apply rounded-full;
  }

  /* ========================================
     MODAL SYSTEM
     ======================================== */

  /**
   * Modal overlay (fondo semi-transparente)
   */
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center;
    @apply backdrop-blur-sm;
    z-index: 9999;
  }

  /**
   * Modal container
   */
  .modal {
    @apply bg-white rounded-lg shadow-2xl max-w-lg w-full mx-4;
    @apply max-h-[90vh] overflow-y-auto;
  }

  .modal-dark {
    @apply bg-slate-800 text-white;
  }

  /**
   * Secciones de modal
   */
  .modal-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .modal-dark .modal-header {
    @apply border-slate-700;
  }

  .modal-body {
    @apply px-6 py-4;
  }

  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-2;
  }

  .modal-dark .modal-footer {
    @apply border-slate-700;
  }

  /**
   * Tamaños de modal
   */
  .modal-sm {
    @apply max-w-sm;
  }

  .modal-lg {
    @apply max-w-2xl;
  }

  .modal-xl {
    @apply max-w-4xl;
  }

  .modal-full {
    @apply max-w-full w-[95vw] max-h-[95vh];
  }

  /* ========================================
     BADGES & PILLS
     ======================================== */

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

  /**
   * Variantes de badge
   */
  .badge-primary {
    @apply bg-primary-100 text-primary-800;
  }

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800;
  }

  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }

  .badge-info {
    @apply bg-cyan-100 text-cyan-800;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }

  /* ========================================
     ALERTS
     ======================================== */

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

  /**
   * Variantes de alert
   */
  .alert-success {
    @apply bg-green-50 border-green-300 text-green-800;
  }

  .alert-danger {
    @apply bg-red-50 border-red-300 text-red-800;
  }

  .alert-warning {
    @apply bg-yellow-50 border-yellow-300 text-yellow-800;
  }

  .alert-info {
    @apply bg-cyan-50 border-cyan-300 text-cyan-800;
  }

  /* ========================================
     LOADING SPINNERS
     ======================================== */

  /**
   * Spinner base
   */
  .spinner {
    @apply w-8 h-8 border-4 border-t-transparent rounded-full animate-spin;
  }

  .spinner-primary {
    @apply border-primary-600 border-t-transparent;
  }

  .spinner-white {
    @apply border-white border-t-transparent;
  }

  /**
   * Tamaños de spinner
   */
  .spinner-sm {
    @apply w-4 h-4 border-2;
  }

  .spinner-lg {
    @apply w-12 h-12 border-4;
  }

  /* ========================================
     UTILITIES
     ======================================== */

  /**
   * Estados de focus visibles (accesibilidad)
   */
  .focus-visible-ring {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
  }

  /**
   * Transiciones suaves
   */
  .transition-smooth {
    @apply transition-all duration-200 ease-in-out;
  }

  /**
   * Hover effects comunes
   */
  .hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
  }

  .hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
  }
}