/* 
   ESTILOS ESPECÍFICOS DE LA APLICACIÓN 
   Nota: Las directivas @tailwind se cargan en application.tailwind.css 
   No duplicar aquí para evitar conflictos de especificidad.
*/

.panel-editorial::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  pointer-events: none;
}

@layer components {
  .program-container {
    @apply max-w-4xl mx-auto px-6 py-10 bg-white shadow-md rounded-lg;
  }

  .section-title {
    @apply text-xl font-semibold text-gray-700 mb-4 border-b pb-2;
  }

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

  .program-card {
    @apply bg-white shadow rounded-lg p-4 hover:shadow-md transition;
  }

  .program-card-title {
    @apply text-lg font-bold text-gray-800 mb-2;
  }

  .program-card-meta {
    @apply text-sm text-gray-500;
  }

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

  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300;
  }

  .form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm resize-y focus:outline-none focus:ring focus:border-blue-300;
  }
}