/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 17/04/2026, 09:30:35 AM
    Author     : kpesantez
*/
/* ===============================
   PAGE NOTICIAS - ESTILO PRO LIMPIO
   =============================== */

#page-queja .card {
    border-radius: 16px;
    background: #ffffff;

    /* borde base invisible pero consistente */
    border: 2px solid rgba(0,0,0,0.05);

    transition: 
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.25s ease;

    box-shadow: 
        0 6px 18px rgba(0,0,0,0.06);

    position: relative;
}

/* ===============================
   HOVER PRINCIPAL (AQUÍ ESTÁ LA MAGIA)
   =============================== */

#page-queja .card:hover {
    transform: translateY(-8px) scale(1.025);

    border-color: #00c853;

    box-shadow:
        0 0 0 1px rgba(0, 200, 83, 0.25),  /* borde glow limpio */
        0 12px 30px rgba(0,0,0,0.10),     /* profundidad */
        0 0 20px rgba(0, 200, 83, 0.35);  /* glow real */
}

/* ===============================
   EFECTO ESPEJO (VISIBLE PERO FINO)
   =============================== */

#page-queja .card.left:hover {
    transform: translate(-12px, -8px) scale(1.025);
}

#page-queja .card.right:hover {
    transform: translate(12px, -8px) scale(1.025);
}

/* ===============================
   CONTENIDO INTERNO
   =============================== */

#page-queja .card .card-body {
    transition: transform 0.3s ease;
}

#page-queja .card:hover .card-body {
    transform: translateY(-3px);
}

/* ===============================
   OPCIONAL: MEJORA VISUAL DE TEXTO
   =============================== */

#page-queja .card h5,
#page-queja .card h6 {
    transition: color 0.3s ease;
}

#page-queja .card:hover h5,
#page-queja .card:hover h6 {
    color: #00c853;
}