<script setup>
import Sidebar from './components/Sidebar.vue'
import { tema, alternarTema } from './lib/tema.js'
</script>

<template>
  <div class="min-h-screen flex">
    <Sidebar />
    <main class="flex-1 min-w-0 flex flex-col">
      <header class="h-14 shrink-0 flex items-center justify-end gap-1 px-6 border-b border-borde">
        <button
          class="btn-ghost !px-2.5 !py-1.5"
          :title="tema === 'oscuro' ? 'Cambiar a claro' : 'Cambiar a oscuro'"
          @click="alternarTema"
        >
          <span class="text-base leading-none">{{ tema === 'oscuro' ? '☀️' : '🌙' }}</span>
        </button>
      </header>
      <div class="flex-1 max-w-5xl w-full mx-auto px-8 py-8 animate-aparecer">
        <router-view />
      </div>
    </main>
  </div>
</template>
