/* Estilos base del acordeón */
.lightweight-accordion {
    width: 100%;
    max-width: none;
    margin: 0 0 0.4em 0;
    position: relative;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightweight-accordion details {
    margin-bottom: 0.4em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Título del acordeón */
.lightweight-accordion .lightweight-accordion-title {
    width: 50%;
    display: block;
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    outline: none;
    text-align: center;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-left 0.3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Título del acordeón - estado normal */
.lightweight-accordion .lightweight-accordion-title::before {
    content: "";
    position: absolute;
    right: 1em;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

/* Flecha cuando está abierto */
.lightweight-accordion details[open] .lightweight-accordion-title::before {
    content: "▼";
    opacity: 1;
    color: #000;
}

/* Efecto hover y estado abierto */
.lightweight-accordion .lightweight-accordion-title:hover,
.lightweight-accordion details[open] .lightweight-accordion-title {
    background: #f0f5ff;
    border-left: 4px solid #4a90e2;
}

/* Estado expandido */
.lightweight-accordion details[open] {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    align-items: stretch;
}

/* Ajuste del título cuando está abierto */
.lightweight-accordion details[open] .lightweight-accordion-title {
    width: 100%;
    border-radius: 8px 8px 0 0;
    max-width: none;
    margin: 0 auto;
    padding: 10px 2rem;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor del contenido */
.lightweight-accordion .lightweight-accordion-body {
    width: 100%;
    padding: 15px;
    background: #fff;
    border: 1px solid #f1f2f6;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
    opacity: 0;
}

/* Contenedor del contenido cuando está expandido */
.lightweight-accordion details[open] .lightweight-accordion-body {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
    align-self: stretch;
}

/* Versión con borde */
.lightweight-accordion.bordered .lightweight-accordion-body {
    border: 1px solid #f1f2f6;
    border-top: 0;
}

/* Animación al abrir */
.lightweight-accordion details[open] summary ~ * {
    animation: lwopen 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lwopen {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos de texto en el título */
.lightweight-accordion .lightweight-accordion-title p, 
.lightweight-accordion .lightweight-accordion-title span, 
.lightweight-accordion .lightweight-accordion-title h1, 
.lightweight-accordion .lightweight-accordion-title h2, 
.lightweight-accordion .lightweight-accordion-title h3, 
.lightweight-accordion .lightweight-accordion-title h4 {
    display: inline;
    font-size: 16px;
    font-family: inherit;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

/* Eliminar el marcador predeterminado del summary */
.lightweight-accordion details > summary {
    list-style: none;
}

/* Para Firefox que necesita un selector adicional */
.lightweight-accordion details summary::-webkit-details-marker,
.lightweight-accordion details summary::marker {
    display: none;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .lightweight-accordion {
        width: 100%;
    }
    
    .lightweight-accordion .lightweight-accordion-title {
        width: 100%;
    }
    
    .lightweight-accordion details[open] {
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .lightweight-accordion details[open] .lightweight-accordion-body,
    .lightweight-accordion details[open] .lightweight-accordion-title {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Estilos para acordeones anidados */
.lightweight-accordion .lightweight-accordion {
    margin: 0.4em auto;
}

/* Estilos para nivel 2 */
.lightweight-accordion-level-2 .lightweight-accordion-title {
    background: #e8f0f7 !important;
    font-size: 0.95em;
    width: 60% !important;
}

.lightweight-accordion-level-2 details[open] .lightweight-accordion-title {
    background: #dae8f4 !important;
    border-left: 4px solid #5a9fd4 !important;
}

/* Estilos para nivel 3 */
.lightweight-accordion-level-3 .lightweight-accordion-title {
    background: #f0e8f7 !important;
    font-size: 0.9em;
    width: 70% !important;
}

.lightweight-accordion-level-3 details[open] .lightweight-accordion-title {
    background: #e6daf4 !important;
    border-left: 4px solid #9575cd !important;
}

.lightweight-accordion-level-3 details[open] {
    width: 90% !important;
}

/* Estilos para nivel 4 */
.lightweight-accordion-level-4 .lightweight-accordion-title {
    background: #f7f0e8 !important;
    font-size: 0.85em;
    width: 75% !important;
}

.lightweight-accordion-level-4 details[open] .lightweight-accordion-title {
    background: #f4e6da !important;
    border-left: 4px solid #d4a574 !important;
}

.lightweight-accordion-level-4 details[open] {
    width: 92% !important;
}

/* Estilos para nivel 5 */
.lightweight-accordion-level-5 .lightweight-accordion-title {
    background: #e8f7e8 !important;
    font-size: 0.8em;
    width: 80% !important;
}

.lightweight-accordion-level-5 details[open] .lightweight-accordion-title {
    background: #daf4da !important;
    border-left: 4px solid #7cb342 !important;
}

.lightweight-accordion-level-5 details[open] {
    width: 94% !important;
}

/* Ajuste general para acordeones anidados */
.lightweight-accordion .lightweight-accordion details[open] .lightweight-accordion-body {
    padding: 1.5rem;
    background: #fafafa;
}