/* Kaula PRO: el encabezado desplegable de cambios ha de parecer pulsable.
   Alcance limitado a Mi cuenta → Planes y renovaciones. */
details.ksb-plan-change.ksb-panel > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px;
    list-style: none !important;
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
}

details.ksb-plan-change.ksb-panel > summary::-webkit-details-marker {
    display: none;
}
details.ksb-plan-change.ksb-panel > summary::marker {
    content: "";
}

details.ksb-plan-change.ksb-panel > summary > strong {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

/* Botón visual circular: flecha hacia abajo cuando está cerrado. */
details.ksb-plan-change.ksb-panel > summary::after {
    content: "";
    display: block;
    box-sizing: border-box;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e7c8ba;
    background-color: #fff0e9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8523d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

details.ksb-plan-change.ksb-panel[open] > summary::after {
    transform: rotate(180deg);
    background-color: #f9e3d9;
}

details.ksb-plan-change.ksb-panel > summary:hover::after,
details.ksb-plan-change.ksb-panel > summary:focus-visible::after {
    background-color: #f8dbcf;
    border-color: #d46f53;
}

details.ksb-plan-change.ksb-panel > summary:focus-visible {
    outline: 3px solid #d46f53;
    outline-offset: 5px;
    border-radius: 8px;
}

@media (max-width: 600px) {
    details.ksb-plan-change.ksb-panel > summary {
        gap: 10px;
    }
    details.ksb-plan-change.ksb-panel > summary::after {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    details.ksb-plan-change.ksb-panel > summary::after {
        transition: none;
    }
}