/* ============================================================
   Store admin · Accordion (details > summary)
   ------------------------------------------------------------
   Reglas para la animación de altura: el padding/contenido vive
   en .sa-accordion__inner y .sa-accordion__body solo controla el
   overflow + transición. Sin esto el accordion da un "salto" al
   abrir/cerrar porque height: 0 seguiría reservando padding.
   ============================================================ */

.sa-accordion {
    display: block;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: var(--sa-surface);
    overflow: hidden;
}
.sa-accordion + .sa-accordion { margin-top: 10px; }

.sa-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    list-style: none;
    cursor: pointer;
    background: var(--sa-surface);
    transition: background 0.15s ease;
}
.sa-accordion__summary::-webkit-details-marker { display: none; }
.sa-accordion__summary:hover { background: var(--sa-surface-muted); }

.sa-accordion[open] .sa-accordion__summary {
    border-bottom: 1px solid var(--sa-border);
}

.sa-accordion__copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sa-accordion__copy h2 { margin: 0; font-size: 14px; font-weight: 650; }
.sa-accordion__copy span { font-size: 12.5px; color: var(--sa-muted); }

.sa-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sa-radius-sm);
    border: 1px solid var(--sa-border);
    background: var(--sa-surface-muted);
    color: var(--sa-muted);
    transition: transform 0.18s ease;
    flex: 0 0 auto;
}
.sa-accordion[open] .sa-accordion__icon { transform: rotate(180deg); }

.sa-accordion__body {
    overflow: hidden;
    transition: height 0.26s ease, opacity 0.22s ease;
}
.sa-accordion.is-animating .sa-accordion__body {
    will-change: height, opacity;
}
.sa-accordion__inner {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.sa-accordion--plain {
    border: 0;
    background: transparent;
    overflow: visible;
}
.sa-accordion--plain .sa-accordion__summary {
    padding: 0;
    background: transparent;
}
.sa-accordion--plain .sa-accordion__summary:hover {
    background: transparent;
}
.sa-accordion--plain[open] .sa-accordion__summary {
    border-bottom: 0;
}
.sa-accordion--plain .sa-accordion__inner {
    padding: 16px 0 0;
}