/* @tailwind base; 
@tailwind components;
@tailwind utilities;

html, body {
  @apply h-full bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100 font-sans;
}

.layout {
  @apply grid min-h-screen grid-rows-[auto_1fr_auto];
}

header {
  @apply bg-orange-600 text-white p-4 text-center shadow-md;
}

header a {
  @apply text-sm underline hover:text-gray-200;
}

main {
  @apply p-4 bg-gray-100 dark:bg-gray-800;
}

footer {
  @apply bg-orange-100 dark:bg-gray-700 text-center p-3 text-sm text-gray-700 dark:text-gray-300;
}

#controles {
  @apply mb-4 flex gap-2 flex-wrap;
}

#controles button {
  @apply px-4 py-2 rounded-md text-sm font-medium bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-400 dark:hover:bg-orange-500;
}

#explorador {
  @apply grid gap-4;
}

.carpeta, .archivo {
  @apply p-4 rounded-lg shadow-md cursor-pointer transition-all duration-200;
}

.carpeta {
  @apply bg-yellow-100 dark:bg-yellow-800 hover:bg-yellow-200 dark:hover:bg-yellow-700;
}

.archivo {
  @apply bg-blue-100 dark:bg-blue-800 hover:bg-blue-200 dark:hover:bg-blue-700;
}

.carpeta::before {
  content: "📁 ";
}

.archivo::before {
  content: "📄 ";
}

.subcarpetas {
  @apply ml-4 mt-2 border-l-2 border-gray-300 dark:border-gray-600 pl-4;
  display: none;
}

.carpeta.abierta > .subcarpetas {
  display: block;
}

.carpeta span:first-child {
  font-size: 1.2em;
}

.archivo span:first-child {
  font-size: 1.2em;
}
*/