/* ------------------------------
   FUNDACIÓN ZORAIDA - ESTILO GLOBAL
------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;600&family=Platypi:wght@600;700&display=swap');
@import 'theme.css';
/* Tailwind base + components + utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ------------------------------
   Tipografías personalizadas
------------------------------- */
body {
    font-family: 'Onest', sans-serif;
}

h1, h2, .font-heading {
    font-family: 'Platypi', serif;
}

/* ------------------------------
   Colores personalizados
------------------------------- */
/* Usa directamente en config si quieres colores como bg-zoraida-blue (#002f67) */
/* O puedes definirlo aquí manualmente si es CSS puro */

/* ------------------------------
   Botones reutilizables
------------------------------- */
.btn-primary {
    @apply bg-[#002f67] text-white px-4 py-2 rounded hover:bg-blue-800 transition;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition;
}

/* ------------------------------
   Encabezado general (Topbar)
------------------------------- */
.page-title {
    @apply text-white text-2xl font-heading;
    background-color: #002f67;
    padding: 16px;
}

/* ------------------------------
   Sidebar personalizado
------------------------------- */
.sidebar {
    @apply bg-[#002f67] text-white w-full md:w-60 p-4 md:fixed md:top-0 md:left-0 md:h-full overflow-y-auto shadow-sm;
}

.sidebar-logo {
    @apply text-white font-extrabold text-lg tracking-widest uppercase;
}

.sidebar-link {
    @apply block px-4 py-3 rounded hover:bg-blue-800 transition text-sm text-white;
}

.sidebar-link-active {
    @apply bg-blue-900 font-semibold;
}

.submenu-link {
    @apply block px-3 py-1 rounded hover:bg-blue-700 text-sm text-white transition;
}

.submenu-link-active {
    @apply bg-blue-900 font-semibold;
}

/* ------------------------------
   Espaciado y contenedores
------------------------------- */
.section {
    @apply px-6 py-4;
}

/* ------------------------------
   Loader visual
------------------------------- */
.loader {
    @apply fixed inset-0 bg-slate-300 bg-opacity-75 flex items-center justify-center z-50 hidden;
}

/* Mejora presentación de gráficos tipo dashboard */
.chart-container {
    @apply bg-white rounded-xl shadow-md p-6 mb-8 max-w-xl mx-auto;
}

/* Centrado y tamaño controlado del canvas */
.chart-container canvas {
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
}

/* Opcional: mejora título de gráfico */
.chart-title {
    @apply text-lg font-semibold text-gray-700 mb-4 text-center;
}