/* Estilos personalizados para a Rede de Oração - Adaptado para Tailwind CSS */

/* Estilos personalizados que no pueden ser fácilmente reemplazados por clases de Tailwind */

/* Estilos para las tarjetas de oración */
.prayer-card {
    border-left: 4px solid #2563eb; /* blue-600 en Tailwind */
}

.prayer-card.anonymous {
    border-left: 4px solid #6b7280; /* gray-500 en Tailwind */
}

.prayer-card.in-prayer {
    border-left: 4px solid #10b981; /* emerald-500 en Tailwind */
}

.home-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    margin-bottom: 30px;
    border-radius: 10px;
}

/* Los estilos para form-control:focus se manejan con clases de Tailwind */

.profile-img {
    /* Estos estilos se pueden manejar con clases de Tailwind:
    w-[150px] h-[150px] rounded-full object-cover border-4 border-white shadow */
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Los siguientes estilos se pueden manejar con clases de Tailwind */

/* .donation-section - bg-blue-50 rounded-lg p-8 mb-8 */

/* .pix-code - bg-white p-5 rounded-lg text-center max-w-xs mx-auto */

/* Estilos adicionales que no tienen equivalente directo en Tailwind */

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    /* Estos estilos se pueden manejar con clases responsive de Tailwind */
    /* .home-banner - py-12 md:py-24 */
    /* .profile-img - w-24 h-24 md:w-36 md:h-36 */
}

/* Estilo para el banner principal - se mantiene para conservar el fondo */
.home-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    margin-bottom: 30px;
    border-radius: 10px;
}