@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos adicionales si son necesarios, pero Tailwind debería ser suficiente */
/* Por ejemplo, animaciones, fuentes personalizadas, etc. */

/* Para asegurar que el html y body usan el 100% de alto en móviles */
html, body {
    height: 100%;
}

body {
    -webkit-tap-highlight-color: transparent; /* Elimina el resaltado azul en elementos táctiles en iOS */
    @apply antialiased text-gray-800 bg-gray-50; /* Base para el texto y fondo */
}

/* Scrollbar personalizado para una apariencia más limpia en navegadores modernos */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Clases de utilidad para centrado y flexbox común */
.flex-center {
    @apply flex items-center justify-center;
}

.flex-between {
    @apply flex items-center justify-between;
}

/* Estilo para los mensajes flash (exito, error, info) */
.flash-message {
    @apply p-4 mb-4 rounded-lg shadow-md;
}
.flash-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}
.flash-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}
.flash-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}
.flash-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}