@tailwind base;
@layer base {
  .biggo { @apply text-4xl sm:text-5xl md:text-8xl font-mouse font-black tracking-wider }
  .smilzo { @apply text-2xl sm:text-3xl md:text-4xl font-mouse font-thin tracking-wide}
  /* h1, h2, h3, h4, h5, h6 {
    @apply font-mouse font-black tracking-wider;
  } */
  .titinfo { @apply text-2xl font-semibold py-2 mb-4 mt-8 border-b}
  .app-subtitle { @apply  text-2xl font-semibold mb-4 pt-3 }
  .add-button { @apply text-sm bg-blue-50 text-gray-800 font-semibold py-1 px-3 border border-blue-600 rounded-md transition duration-150 ease-in-out hover:bg-blue-300 }
}

@tailwind components;
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  .btn { @apply text-center bg-gradient-to-r from-green-600 to-blue-700 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-150 ease-in-out }
  .btn-secondary { @apply border border-gray-300 text-center block bg-gray-100 hover:bg-blue-100 text-gray-600 font-semibold py-2 px-4 rounded-md transition duration-150 ease-in-out }
  .btn-danger { @apply bg-gradient-to-r from-orange-400 to-red-400 text-white font-semibold py-2 px-4 rounded-md transition duration-150 ease-in-out }
  .error_notification { @apply bg-red-50 text-red-800 p-6 rounded-lg }
  .alert { @apply px-3 bg-orange-50 text-orange-500 text-sm rounded-md flex items-center }
  .notice { @apply  px-3 bg-teal-50 text-teal-500 text-sm rounded-md flex items-center }
  .subtitle { @apply font-mouse text-purple1 text-center tracking-wide }
  .simplink { @apply block text-indigo-800 underline decoration-dotted hover:decoration-solid }
}

@tailwind utilities;
@layer utilities {
  .sortable-ghost {
    @apply opacity-50;
  }
  .sortable-chosen {
    @apply bg-blue-100 border-blue-300;
  }
  .sortable-drag {
    @apply transform rotate-3 shadow-lg;
  }
  .topic-item:hover {
    @apply bg-gray-100 border-gray-300;
  }
  /* Select placeholder styling: make only real blanks gray via controller */
  .select-placeholder { color: #9CA3AF; /* text-gray-400 */ }
  select option[value=""] { color: #9CA3AF; /* gray for placeholder option */ }
  select option:not([value=""]) { color: #111827; /* black for real options */ }
  .gradiente { @apply bg-gradient-to-r from-green-600 to-blue-800}
  .gradientesto { @apply gradiente bg-clip-text text-transparent }
  .warn_missing { @apply  px-3 py-1 bg-yellow-50 text-yellow-700 text-sm rounded-md border-yellow-400 border }
  .info_missing { @apply  px-3 py-1 text-gray-500 text-sm italic }
}


/* .mouse-memoirs-regular {
  font-family: "Mouse Memoirs", sans-serif;
  font-weight: 400;
  font-style: normal;
} */