/* =======================================================
   MEJORA DE TARJETAS - GREMIA 2025
   Estilo mejorado para tarjetas destacadas con colores vibrantes
======================================================= */

/* ===== TARJETA DESTACADA "COMPROMETIDOS CON EL AGUA" ===== */

/* Tarjeta con gradiente azul y mejor contraste */
.card.border-0.shadow-sm {
    background: linear-gradient(135deg, #0093dd 0%, #0074bb 100%) !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 147, 221, 0.3) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Overlay sutil para mejorar contraste del texto */
.card.border-0.shadow-sm::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15) !important; /* Overlay oscuro sutil */
    z-index: 1;
    pointer-events: none;
}

/* Efecto hover para la tarjeta */
.card.border-0.shadow-sm:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 147, 221, 0.4) !important;
}

/* Contenido de la tarjeta - texto blanco para contrastar */
.card.border-0.shadow-sm .card-body {
    color: white !important;
    padding: 25px !important;
    position: relative !important;
    z-index: 3 !important; /* Por encima del overlay */
}

/* Título de la tarjeta - Blanco puro con sombra para máximo contraste */
.card.border-0.shadow-sm .card-body h5 {
    color: #ffffff !important;
    font-weight: 700 !important; /* Más bold para mejor legibilidad */
    font-size: 19px !important; /* Ligeramente más grande */
    margin-bottom: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; /* Sombra más fuerte */
    letter-spacing: 0.3px !important; /* Mejor espaciado */
}

/* Párrafo de la tarjeta - Blanco casi puro con sombra */
.card.border-0.shadow-sm .card-body p.text-muted {
    color: #ffffff !important; /* Blanco puro en lugar de transparente */
    font-size: 16px !important; /* Ligeramente más grande */
    line-height: 1.7 !important; /* Mejor line-height */
    margin-bottom: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra para contraste */
    font-weight: 500 !important; /* Ligeramente más bold */
}

/* Ícono de la tarjeta - Blanco brillante con sombra */
.card.border-0.shadow-sm .card-body i.text-primary {
    color: #ffffff !important;
    font-size: 30px !important; /* Ligeramente más grande */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; /* Sombra más fuerte */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) !important; /* Resplandor blanco */
}

/* Forzar colores específicos para elementos internos */
.card.border-0.shadow-sm .card-body * {
    color: inherit !important;
}

/* Asegurar que el contenedor de flex mantenga el color */
.card.border-0.shadow-sm .card-body .d-flex {
    color: #ffffff !important;
}

/* Sobreescribir cualquier clase text-muted dentro de la tarjeta */
.card.border-0.shadow-sm .text-muted {
    color: #ffffff !important;
}

/* Efecto de brillo sutil */
.card.border-0.shadow-sm::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 2; /* Entre el overlay y el contenido */
}

/* Activar efecto de brillo en hover */
.card.border-0.shadow-sm:hover::before {
    left: 100%;
}

/* ===== ALTERNATIVA: TARJETA CON BORDE COLORIDO ===== */

/* Si prefieres mantener fondo blanco pero con borde destacado */
.card-alternative {
    background: white !important;
    border: 3px solid #0093dd !important;
    box-shadow: 0 8px 25px rgba(0, 147, 221, 0.15) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.card-alternative:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 147, 221, 0.25) !important;
    border-color: #0074bb !important;
}

.card-alternative .card-body {
    padding: 25px !important;
}

.card-alternative h5 {
    color: #0093dd !important;
    font-weight: 600 !important;
}

.card-alternative .text-muted {
    color: #666 !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablets */
@media (max-width: 768px) {
    .card.border-0.shadow-sm,
    .card-alternative {
        margin-top: 20px !important;
    }
    
    .card.border-0.shadow-sm .card-body,
    .card-alternative .card-body {
        padding: 20px !important;
    }
    
    .card.border-0.shadow-sm .card-body h5,
    .card-alternative h5 {
        font-size: 17px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important; /* Sombra más fuerte en tablet */
    }
    
    .card.border-0.shadow-sm .card-body p,
    .card-alternative p {
        font-size: 15px !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Sombra más fuerte en tablet */
    }
    
    .card.border-0.shadow-sm .card-body i.text-primary {
        font-size: 26px !important;
    }
}

/* Móviles */
@media (max-width: 576px) {
    .card.border-0.shadow-sm,
    .card-alternative {
        margin-top: 15px !important;
        border-radius: 8px !important;
    }
    
    .card.border-0.shadow-sm .card-body,
    .card-alternative .card-body {
        padding: 18px !important;
    }
    
    .card.border-0.shadow-sm .card-body h5 {
        font-size: 16px !important;
        font-weight: 800 !important; /* Más bold en móviles */
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7) !important; /* Sombra muy fuerte */
    }
    
    .card.border-0.shadow-sm .card-body p {
        font-size: 14px !important;
        font-weight: 600 !important; /* Más bold en móviles */
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; /* Sombra muy fuerte */
        line-height: 1.8 !important; /* Mejor spacing en móviles */
    }
    
    .card.border-0.shadow-sm .card-body i.text-primary {
        font-size: 24px !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important; /* Sombra más fuerte */
    }
    
    /* Overlay más fuerte en móviles para mejor contraste */
    .card.border-0.shadow-sm::after {
        background: rgba(0, 0, 0, 0.25) !important;
    }
}

/* ===== VARIANTES DE COLOR ADICIONALES ===== */

/* Verde sostenible */
.card-green {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3) !important;
}

.card-green:hover {
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.4) !important;
}

/* Azul oscuro profesional */
.card-dark-blue {
    background: linear-gradient(135deg, #222f46 0%, #1a253a 100%) !important;
    box-shadow: 0 8px 25px rgba(34, 47, 70, 0.3) !important;
}

.card-dark-blue:hover {
    box-shadow: 0 15px 35px rgba(34, 47, 70, 0.4) !important;
}

/* Gradiente agua */
.card-water {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #00b894 100%) !important;
    box-shadow: 0 8px 25px rgba(116, 185, 255, 0.3) !important;
}

.card-water:hover {
    box-shadow: 0 15px 35px rgba(116, 185, 255, 0.4) !important;
}