/* CONTENEDOR GENERAL */
.section-cambios {
    background-color: #fdfaf9;
}

/* TITULO */
.section-title h1 {
    font-size: 30px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 40px;
}

.btn-back-pro {
    margin-bottom: 25px;
}

/* TEXTO GENERAL */
.registro-cambios {
    margin-bottom: 40px;
}

/* ========================= */
/* BLOQUE EXPLICACION */
/* ========================= */

.registro-cambios h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e1e1e;
    margin-bottom: 10px;
}

.registro-cambios p {
    font-size: 15px;
    color: #555;
    max-width: 700px;
    margin-bottom: 20px;
    line-height: 1.7;
}
/* ========================= */
/* ACCORDION MODERNO */
/* ========================= */

.accordion .item {
    border-radius: 10px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #eee;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion .item:hover {
    border-color: #ddd;
    transform: translateY(-2px);
}

.accordion .title {
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion .content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    font-size: 14px;
    color: #555;
    transition: all 0.3s ease;
}

/* ACTIVO */
.accordion .item.active .content {
    max-height: 200px;
    padding: 15px 20px 20px;
}

/* FLECHA */
.arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.item.active .arrow {
    transform: rotate(180deg);
}

/* ========================= */
/* BOTONES FILTRO */
/* ========================= */

.botones-rcambio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* BOTONES BASE */
.filtro-btn {
    border: none;
    background: #f1f1f1;
    color: #444;
    padding: 8px 14px;
    border-radius: 999px; /* estilo pill */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* HOVER */
.filtro-btn:hover {
    background: #e4e4e4;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* CLICK */
.filtro-btn:active {
    transform: scale(0.96);
}

/* ACTIVO (cuando seleccionas) */
.filtro-btn.activo {
    background: linear-gradient(135deg, #66FFE4, #5ac8fa);
    color: #000;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(102,255,228,0.4);
}

/* BOTONES SOLO ICONO (emoji) */
.filtro-btn[data-filtro]:not([data-filtro="ALL"]) {
    padding: 8px;
    width: 38px;
    height: 38px;
    font-size: 16px;
}

/* HOVER ESPECIAL PARA EMOJIS */
.filtro-btn[data-filtro]:not([data-filtro="ALL"]):hover {
    transform: scale(1.1);
}

/* ========================= */
/* BOTONES ORDEN */
/* ========================= */
.orden-container {
    display: flex;
    gap: 10px;
    margin-bottom: 35px;
}

.btn-orden {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-orden:hover {
    background: #1e1e1e;
    color: #fff;
    transform: scale(1.05);
}

/* ========================= */
/* TARJETAS DE CAMBIO */
/* ========================= */

.cambio {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
    width: 100%;
}

/* ICONO */
.cambio-icono {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* CONTENIDO */
.cambio-contenido {
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.cambio-contenido:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* TITULO */
.cambio-contenido h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

/* DESCRIPCION */
.cambio-contenido p {
    font-size: 14px;
    color: #444;
    margin-bottom: 10px;
}

/* META INFO */
.cambio-meta {
    display: flex;
    gap: 18px;
    font-size: 14px; /* antes 12px */
    color: #666;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cambio-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.container-registro-cambios {
    display: flex;
    flex-direction: column;
}

/* asegurar orden visual SIEMPRE */
.cont-botones-rcambio {
    margin-bottom: 20px;
}
/* ========================= */
/* SIN RESULTADOS */
/* ========================= */

.sin-resultados {
    display: none; /* IMPORTANTE */
    width: 100%;
    margin-top: 30px;
    animation: fadeIn 0.4s ease;
}

.sin-resultados-box {
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.sin-resultados-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
/* EMOJI */
.sin-resultados .emoji {
    font-size: 50px;
    margin-bottom: 15px;
    animation: floatEmoji 2.5s infinite ease-in-out;
}
/* TITULO */
.sin-resultados h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 10px;
}
/* TEXTO */
.sin-resultados p {
    font-size: 15px;
    color: #666;
    max-width: 400px;
    margin: 0 auto 25px;
    line-height: 1.6;
}
/* BOTON */
.btn-reset-filtros {
    background: linear-gradient(135deg, #66FFE4, #5ac8fa);
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-reset-filtros:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(102,255,228,0.4);
}
.btn-reset-filtros:active {
    transform: scale(0.95);
}
/* ANIMACIONES */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px);}
    to { opacity: 1; transform: translateY(0);}
}
@keyframes floatEmoji {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(-8px);}
}

/* ========================= */
/* RESPONSIVE CADA 100px */
/* ========================= */

@media (max-width: 1200px) {
    .section-cambios-container {
        padding: 60px 80px;
    }
}

@media (max-width: 1000px) {
    .section-cambios-container {
        padding: 50px 60px;
    }
}

@media (max-width: 900px) {
    .section-title h1 {
        font-size: 28px;
    }
    .registro-cambios h3 {
        font-size: 17px;
    }

    .registro-cambios p {
        font-size: 14px;
    }

    .accordion .title {
        font-size: 14.5px;
    }
    .accordion .content {
        font-size: 13.5px;
    }

    .sin-resultados .emoji {
        font-size: 45px;
    }
    .sin-resultados h2 {
        font-size: 18px;
    }
    /* TEXTO */
    .sin-resultados p {
        font-size: 14px;
    }
}

@media (max-width: 800px) {
    .section-cambios-container {
        padding: 40px 40px;
    }

    .cambio-icono {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 700px) {
    .cambio {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .section-title h1 {
        font-size: 26px;
    }
    .section-cambios-container {
        padding: 30px 20px;
    }
    .registro-cambios h3 {
        font-size: 16px;
    }
    .registro-cambios p {
        font-size: 13.5px;
    }

    .accordion .title {
        font-size: 14px;
    }
    .accordion .content {
        font-size: 13px;
    }

    .cambio-contenido h3 {
        font-size: 15px;
    }
    .cambio-contenido p {
        font-size: 13.5px;
    }
    .cambio-meta {
        font-size: 13px;
    }

    .sin-resultados .emoji {
        font-size: 40px;
    }
    .sin-resultados h2 {
        font-size: 17px;
    }
    .sin-resultados p {
        font-size: 13.5px;
    }
}

@media (max-width: 400px) {
    .section-title h1 {
        font-size: 24px;
    }
    .registro-cambios p {
        font-size: 13px;
    }
    .accordion .title {
        font-size: 13.5px;
    }
}