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

/* Estilos para impresión */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-area {
    visibility: visible !important;
  }
  
  .page-break {
    page-break-before: always;
  }
  
  .page-break-inside-avoid {
    page-break-inside: avoid;
  }
  
  /* Optimizar colores para impresión */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Estilos para componentes */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-gray-300;
}

.input-field {
  @apply border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.section-title {
  @apply text-lg font-semibold text-gray-900 mb-4;
}

.page-title {
  @apply text-3xl font-bold text-gray-900;
}

.table-container {
  @apply overflow-x-auto;
}

.table-header {
  @apply text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 249, 250, 251;
}

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

.table-container {
  @apply overflow-x-auto rounded-lg border border-gray-200;
}

.table-header {
  @apply bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

.input-field {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.page-title {
  @apply text-2xl font-bold text-gray-900 mb-6;
}

.section-title {
  @apply text-lg font-semibold text-gray-800 mb-4;
}

/* Estilos Mobile-First */
@media (max-width: 768px) {
  .page-title {
    @apply text-xl font-bold text-gray-900 mb-4;
  }
  
  .card {
    @apply p-4;
  }
  
  .table-container {
    @apply -mx-4;
  }
  
  /* Touch targets mínimos 44px */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  .input-field {
    @apply text-base; /* Evita zoom en iOS */
  }
}