/* ===================================================================================
    CEO © 2006-2025
    Nombre del archivo: priciap.css
    Descripción: css para el estilo del dashboard de los usuarios
    Desarrollador inicial: Antonio Alexander Reyes Cruz
    Fecha de creación: 2025-04-15
    Versión actual: 1.0.0
    ===============================================================================

    Historial de cambios:
    ------------------------------------------------------------------------------------------------------------------
    Fecha        Versión       Desarrollador                                Descripción
    ------------------------------------------------------------------------------------------------------------------
    2025-04-15   1.0.0        Antonio Reyes 	    Se creo el archivo
    =============================================================================== 
*/
/* Catalogo */
.filter-button {
    border: 1px solid #007bff;
    padding: 8px 16px;
    background-color: #f8f8f8;
    cursor: pointer;
    color: #007bff;
    border-radius: 4px;
}

.filter-button:hover {
    border: 1px solid #007bff;
    padding: 8px 16px;
    background-color: #D4E9FFFF;
    cursor: pointer;
    border-radius: 4px;
}

.filter-button.active {
    border-color: #007bff;
    background-color: #007bff;
    color: #fff;
}

.img-card {
    height: 250px;
    object-fit: cover;
}

/* Encuestas elegante  */
.encuesta-destacada {
    background: linear-gradient(145deg, #f4f5fa, #e9ebf0);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.encuesta-destacada:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.encuesta-destacada h3 {
    font-size: 1.8rem;
    color: #33415c;
    margin-bottom: 1rem;
}

.encuesta-destacada p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.btn-encuesta {
    background-color: #3caea3;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-encuesta:hover {
    background-color: #32988f;
    color: rgb(240, 240, 240);
    text-decoration: none;
}

/* Encuesta Estilo dark */
.encuesta-dark {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    color: #ecf0f1;
    transition: transform 0.3s ease;
}

.encuesta-dark:hover {
    transform: translateY(-4px);
}

.encuesta-dark h3 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.encuesta-dark p {
    color: #bdc3c7;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.btn-encuesta-dark {
    background-color: #1abc9c;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-encuesta-dark:hover {
    background-color: #16a085;
}

/* Encuesta estilo imagen */
.encuesta-fondo {
    background: url('https://images.unsplash.com/photo-1525182008055-f88b95ff7980?auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;
    border-radius: 20px;
    padding: 2.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.encuesta-fondo::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.55);
    position: absolute;
    inset: 0;
    border-radius: 20px;
}

.encuesta-fondo .contenido {
    position: relative;
    z-index: 2;
}

.encuesta-fondo h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.encuesta-fondo p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #f0f0f0;
}

.btn-encuesta-fondo {
    background-color: #f39c12;
    padding: 0.75rem 1.5rem;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.btn-encuesta-fondo:hover {
    background-color: #e67e22;
    color: rgb(240, 240, 240);
}