/*
==========================================
PM UI Framework
Accordion
Version: 0.1.0
==========================================
*/


/* ==========================================
   ACCORDION BASE
========================================== */

.pm-accordion {
    width: 100%;
    margin: 0 auto;
}

.pm-accordion-item {
    border: 1px solid var(--pm-border, #e0e0e0);
    border-radius: var(--pm-radius-md, 10px);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--pm-bg, #ffffff);
    transition: all .3s ease;
}


.pm-accordion-item:hover {
    box-shadow: var(--pm-shadow-sm, 0 4px 12px rgba(0,0,0,.08));
}



/* ==========================================
   HEADER / TITULO
========================================== */

.pm-accordion-header {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;

    font-size: 1rem;
    font-weight: 600;

    color: var(--pm-text, #333);

    transition: background .3s ease;
}


.pm-accordion-header:hover {

    background: rgba(46,125,50,.05);

}

/* ==========================================
   ICONO DEL ACCORDION
========================================== */

.pm-accordion-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--pm-primary, #2E7D32);

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

    line-height: 1;

    transition: transform .3s ease,
                background .3s ease;

}


/* Estado hover icono */

.pm-accordion-header:hover .pm-accordion-icon {

    background: var(--pm-primary-dark, #1B5E20);

}



/* ==========================================
   CONTENIDO DEL ACCORDION
========================================== */

.pm-accordion-content {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    padding: 0 20px;

    color: var(--pm-text-muted, #666);

    line-height: 1.7;

    transition:
        max-height .35s ease,
        opacity .35s ease,
        padding .35s ease;

}



/* ==========================================
   ESTADO ACTIVO
========================================== */

.pm-accordion-item.active 
.pm-accordion-content {

    max-height: 600px;

    opacity: 1;

    padding-top: 5px;

    padding-bottom: 20px;

}



.pm-accordion-item.active 
.pm-accordion-icon {

    transform: rotate(45deg);

    background: var(--pm-secondary, #1976D2);

}

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


/* Verde PM */

.pm-accordion-success 
.pm-accordion-icon {

    background: var(--pm-primary, #2E7D32);

}


/* Azul información */

.pm-accordion-info 
.pm-accordion-icon {

    background: var(--pm-secondary, #1976D2);

}


/* Amarillo destacado */

.pm-accordion-warning 
.pm-accordion-icon {

    background: var(--pm-accent, #FFC107);

    color: #333;

}



/* ==========================================
   ACCORDION FAQ SEO
========================================== */

.pm-faq-accordion {

    margin-top: 30px;

}


.pm-faq-accordion .pm-accordion-item {

    border-radius: 14px;

}


.pm-faq-accordion .pm-accordion-header {

    font-size: 1.05rem;

}


.pm-faq-accordion .pm-accordion-content {

    font-size: .95rem;

}



/* ==========================================
   ACCORDION COMPACTO
========================================== */

.pm-accordion-small 
.pm-accordion-header {

    padding: 12px 15px;

    font-size: .95rem;

}


.pm-accordion-small 
.pm-accordion-content {

    padding-left: 15px;

    padding-right: 15px;

}



/* ==========================================
   ACCORDION DESTACADO
========================================== */

.pm-accordion-featured {

    border: 2px solid var(--pm-primary, #2E7D32);

}


.pm-accordion-featured 
.pm-accordion-header {

    font-weight: 700;

}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.pm-accordion-header:focus-visible {

    outline: 3px solid var(--pm-secondary, #1976D2);

    outline-offset: 3px;

}



/* ==========================================
   ESTADO ACTIVO DEL HEADER
========================================== */

.pm-accordion-item.active 
.pm-accordion-header {

    color: var(--pm-primary-dark, #1B5E20);

    background: rgba(46,125,50,.06);

}



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

.pm-accordion-content p {

    margin-bottom: 15px;

}


.pm-accordion-content ul,
.pm-accordion-content ol {

    padding-left: 22px;

    margin-bottom: 15px;

}


.pm-accordion-content li {

    margin-bottom: 8px;

}



/* ==========================================
   ENLACES DENTRO DEL ACCORDION
========================================== */

.pm-accordion-content a {

    color: var(--pm-secondary, #1976D2);

    text-decoration: underline;

    transition: color .3s ease;

}


.pm-accordion-content a:hover {

    color: var(--pm-primary, #2E7D32);

}



/* ==========================================
   RESPONSIVE TABLET
========================================== */

@media (max-width: 768px) {


    .pm-accordion-header {

        padding: 15px;

        font-size: .95rem;

    }


    .pm-accordion-content {

        padding-left: 15px;

        padding-right: 15px;

    }


    .pm-accordion-icon {

        width: 25px;

        height: 25px;

        font-size: 16px;

    }

}

/* ==========================================
   RESPONSIVE MOVIL
========================================== */

@media (max-width: 480px) {


    .pm-accordion-item {

        border-radius: 8px;

        margin-bottom: 10px;

    }


    .pm-accordion-header {

        padding: 13px 14px;

        font-size: .9rem;

    }


    .pm-accordion-icon {

        width: 23px;

        height: 23px;

        font-size: 15px;

    }


    .pm-accordion-item.active 
    .pm-accordion-content {

        padding-bottom: 15px;

    }


}



/* ==========================================
   ANIMACION SUAVE
========================================== */

.pm-accordion-item,
.pm-accordion-icon,
.pm-accordion-header {

    will-change: transform;

}



/* ==========================================
   FAQ LARGO / CONTENIDO SEO
========================================== */

.pm-accordion-content img {

    max-width: 100%;

    height: auto;

    border-radius: var(--pm-radius-sm, 6px);

}


.pm-accordion-content blockquote {

    margin: 20px 0;

    padding: 15px 20px;

    border-left: 4px solid var(--pm-primary, #2E7D32);

    background: rgba(46,125,50,.05);

}



/* ==========================================
   FIN PM UI FRAMEWORK
   Accordion v0.1.0
========================================== */