/* Este CSS solo contiene las clases dinámicas que Tailwind no maneja por defecto en modo claro/oscuro */

/* Clases de Mensaje */
.mensaje.ok {
    /* El color theme('colors.mensaje-ok') es '#d6f5d6' (verde muy claro) */
    background-color: theme('colors.mensaje-ok');
    color: #006400; /* Verde oscuro (Dark Green) */
}

.mensaje.error {
    /* El color theme('colors.mensaje-error') es '#ffdede' (rojo muy claro) */
    background-color: theme('colors.mensaje-error');
    color: #a80000; /* Rojo oscuro (Dark Red) */
}

/* Clase para la Tarjeta Disponible en Rojo (Modo Claro) */
.disponible.rojo {
    /* El color theme('colors.rojo-disponible') es '#ffbdbd' (rojo claro) */
    background-color: theme('colors.rojo-disponible') !important; 
    color: #a80000; /* Texto rojo oscuro */
    border-bottom-color: #a80000; /* Borde inferior también en rojo */
}

/* Modo Oscuro para la tarjeta disponible en rojo */
.dark .disponible.rojo {
    /* Usamos un RGBA para un rojo oscuro semitransparente que se mezcla con el fondo gris */
    background-color: rgba(168, 0, 0, 0.4) !important; 
    color: #ff9999; /* Texto rojo claro para contraste */
    border-bottom-color: #ff9999; /* Borde inferior rojo claro */
}