@import "tailwindcss";

@theme {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
}

:root {
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light;
  color: #1f2937;
  /* text-gray-800 - oscuro para fondos claros */
  background-color: #f5f5f5;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
  color: #1f2937;
}

#root {
  width: 100%;
}

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

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

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

  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-gray-900 bg-white;
  }

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

/* Estilos adicionales para inputs, selects y textareas */
input,
select,
textarea {
  color: #111827 !important;
  /* text-gray-900 - texto oscuro */
  background-color: white !important;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  /* text-gray-400 - placeholder gris claro */
}

/* Asegurar que los options en select sean legibles */
select option {
  color: #111827;
  background-color: white;
}