/* =========================================
   ESTILOS PÁGINA SERVICIO AL CLIENTE (PQRS)
   ========================================= */

/* --- HEADER ESPECÍFICO --- */
.pqrs-header {
    padding-top: 9rem;     
    padding-bottom: 4rem;  
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    /* Botón Whatsapp Móvil */
    .whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
        right: 20px;
        /* Quitamos animación de pulso fuerte en móvil para ahorrar batería/distracción */
        animation: fadeInUp 1s ease; 
    }

.pqrs-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Fondo con imagen de atención al cliente */
    background: 
        linear-gradient(rgba(11, 30, 45, 0.9), rgba(11, 30, 45, 0.8)),
        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80&w=1920'); 
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* --- SECCIÓN PRINCIPAL (FONDO TEXTURIZADO) --- */
.section-pqrs-bg {
    padding: 3.5rem 0; 
    position: relative;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
        url('https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&q=80&w=1920');
    background-size: cover;
    background-position: center;
}

/* --- TARJETAS INTERACTIVAS (Columna Izquierda) --- */
.definition-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 0.8rem 1rem; 
    border-radius: 0.6rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    cursor: pointer; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.definition-card:hover {
    transform: translateX(0.3rem);
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.definition-card.selected-card {
    border-color: var(--brand-cyan);
    background-color: rgba(43, 196, 243, 0.05);
    box-shadow: 0 4px 12px rgba(43, 196, 243, 0.15);
}

.font-desc {
    font-size: 0.75rem; 
}

/* Iconos */
.icon-wrap {
    width: 2.5rem; 
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bg-cyan-light { background: rgba(43, 196, 243, 0.15); }
.bg-warning-light { background: rgba(255, 193, 7, 0.15); }
.bg-danger-light { background: rgba(220, 53, 69, 0.15); }
.bg-success-light { background: rgba(25, 135, 84, 0.15); }
.bg-primary-light { background: rgba(13, 110, 253, 0.15); }

/* --- FORMULARIO ESTILIZADO (Inputs y Sombras) --- */
.form-wrapper {
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra más pronunciada al contenedor */
    border: 1px solid #e2e8f0;
    background-color: #ffffff; /* Asegurar fondo blanco puro */
}

/* Estilos específicos para los Inputs para asegurar contraste */
.form-control, .form-select {
    font-size: 0.9rem; 
    background-color: #f1f5f9 !important; /* Gris muy suave de fondo */
    border: 1px solid #cbd5e1;
    color: #0f2435 !important; /* TEXTO OSCURO OBLIGATORIO */
    font-weight: 500;
    /* Sombra suave interna y externa para que resalte */
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); 
    transition: all 0.3s ease;
}

/* Placeholder (texto de ayuda) visible */
.form-control::placeholder {
    color: #94a3b8 !important; /* Gris medio */
    font-weight: 400;
}

/* Efecto al hacer clic en un campo */
.form-control:focus, .form-select:focus {
    background-color: #ffffff !important; /* Se vuelve blanco puro al escribir */
    border-color: var(--brand-cyan);
    color: #000 !important;
    box-shadow: 0 4px 10px rgba(43, 196, 243, 0.15); /* Resplandor Cyan */
}

/* Etiquetas (Labels) */
.form-label {
    color: #334155; /* Gris oscuro para los títulos de los campos */
    margin-bottom: 0.4rem;
}

/* Botón Enviar */
.btn-cyan {
    background-color: var(--brand-cyan);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-cyan:hover {
    background-color: #22a7d4;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(43, 196, 243, 0.3);
}

/* --- SECCIÓN FAQ (OSCURA INTERMEDIA) --- */
.section-faq {
    padding: 3.5rem 0 2.5rem 0;
    background-color: #0f2435; 
    border-top: 1px solid rgba(255,255,255,0.05);
}

.accordion-button {
    font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
    color: var(--brand-cyan); 
    background-color: rgba(0, 0, 0, 0.3);
}

.accordion-button::after {
    filter: invert(1);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(1) drop-shadow(0 0 2px cyan);
}

/* =========================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================= */

@media (min-width: 768px) and (max-width: 991px) {
    .pqrs-header { padding-top: 8rem; }
    .definition-card { padding: 0.6rem; }
    .form-wrapper { padding: 2rem !important; }
}

@media (max-width: 767.98px) {
    .pqrs-header {
        padding-top: 7.5rem; 
        padding-bottom: 3rem;
        text-align: center;
    }
    
    .section-pqrs-bg { padding: 2.5rem 0; }
    
    .title-align { text-align: center; }
    
    .info-box-pqrs { margin-bottom: 2rem; }
    
    .form-wrapper { padding: 1.5rem !important; }
    
    .section-faq { padding: 2.5rem 0; }
}

/* =========================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================= */
.whatsapp-btn {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 60px; height: 60px; /* Tamaño estándar escritorio */
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulse-green 2s infinite, fadeInUp 1s ease;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}