/* Shared accordion identity: identical category styling in 2D and 3D. */
.sidebar :is(.layer-group,.map3d-accordion) {
    --group-accent:#74c7f4;
    --accordion-surface:#14263d;
    --accordion-end:#132438;
    --accordion-tint:24%;
    --accordion-border:color-mix(in srgb,var(--group-accent) 38%,transparent);
    --accordion-start:color-mix(in srgb,var(--group-accent) var(--accordion-tint),var(--accordion-surface));
}
body.light-mode .sidebar :is(.layer-group,.map3d-accordion) {
    --accordion-surface:#edf4f9;
    --accordion-end:#f8fbfd;
    --accordion-tint:13%;
    --accordion-border:color-mix(in srgb,var(--group-accent) 30%,transparent);
}

/* Existing thematic accents (Zonas, Drenaje, Unidades) remain in styles.css. */
.sidebar .layer-group:has(#local-basemaps) { --group-accent:#74c7f4; }
.sidebar .layer-group:has(#coverage-layers) { --group-accent:#a78bfa; }
.sidebar .layer-group:has(#coverage-change-layers) { --group-accent:#f3a65c; }
.sidebar #map3d-layers-section { --group-accent:#78aaff; }
.sidebar #temporal-selection-section { --group-accent:#a4a5ff; }
.sidebar #temporal-playback-section { --group-accent:#69d8a6; }
.sidebar #temporal-visibility-section { --group-accent:#61d5cf; }
.sidebar #temporal-statistics-section { --group-accent:#edc36d; }
body.light-mode .sidebar .layer-group:has(#local-basemaps) { --group-accent:#247da8; }
body.light-mode .sidebar .layer-group:has(#coverage-layers) { --group-accent:#7c5ce5; }
body.light-mode .sidebar .layer-group:has(#coverage-change-layers) { --group-accent:#ab601e; }
body.light-mode .sidebar #map3d-layers-section { --group-accent:#346bd0; }
body.light-mode .sidebar #temporal-selection-section { --group-accent:#5b58bd; }
body.light-mode .sidebar #temporal-playback-section { --group-accent:#187d59; }
body.light-mode .sidebar #temporal-visibility-section { --group-accent:#137f7c; }
body.light-mode .sidebar #temporal-statistics-section { --group-accent:#966414; }

body .sidebar .layer-group > .layer-group-header,
body .sidebar .map3d-accordion > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    box-sizing:border-box;
    min-height:40px;
    padding:9px 12px;
    border:1px solid var(--accordion-border);
    border-left:4px solid var(--group-accent);
    border-radius:10px;
    background:linear-gradient(105deg,var(--accordion-start),var(--accordion-end) 85%);
    color:var(--text-secondary);
    box-shadow:0 3px 10px #00000014;
    font-size:11px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.85px;
    text-transform:uppercase;
    list-style:none;
    cursor:pointer;
    user-select:none;
    transition:background .2s,border-color .2s,box-shadow .2s;
}
body .sidebar .layer-group > .layer-group-header { margin:0 12px; }
body .sidebar .map3d-accordion > summary::-webkit-details-marker { display:none; }
body .sidebar .map3d-accordion > summary::before {
    content:'';
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--group-accent);
}
body .sidebar .map3d-accordion > summary::after {
    content:'▶';
    margin-left:auto;
    flex:0 0 auto;
}
body .sidebar .layer-group > .layer-group-header .arrow-icon,
body .sidebar .map3d-accordion > summary::after {
    font-size:9px;
    color:var(--group-accent);
    transition:transform .25s ease;
}
body .sidebar .layer-group > .layer-group-header .group-header-left { gap:8px; min-width:0; }
body .sidebar .layer-group > .layer-group-header svg { color:var(--group-accent); opacity:1; flex-shrink:0; }
body .sidebar .layer-group > .layer-group-header .section-dot { background:var(--group-accent); }
body .sidebar .layer-group > .layer-group-header:hover,
body .sidebar .map3d-accordion > summary:hover {
    border-color:var(--group-accent);
    background:linear-gradient(105deg,color-mix(in srgb,var(--group-accent) 30%,var(--accordion-surface)),var(--accordion-end));
    box-shadow:0 4px 12px #0000001c;
}
body.light-mode .sidebar :is(.layer-group-header,.map3d-accordion > summary):hover {
    background:linear-gradient(105deg,color-mix(in srgb,var(--group-accent) 18%,var(--accordion-surface)),var(--accordion-end));
}
body .sidebar .layer-group.open > .layer-group-header,
body .sidebar .map3d-accordion[open] > summary {
    border-color:var(--group-accent);
    border-radius:10px 10px 0 0;
    background:linear-gradient(105deg,var(--accordion-start),var(--accordion-surface));
    color:var(--text-primary);
}
body .sidebar .layer-group.open > .layer-group-header .arrow-icon,
body .sidebar .map3d-accordion[open] > summary::after { transform:rotate(90deg); }
body .sidebar .map3d-accordion > summary:focus-visible,
body .sidebar .layer-group > .layer-group-header:focus-visible { outline:2px solid var(--group-accent); outline-offset:-3px; }
body .sidebar .map3d-accordion-content { border:1px solid var(--accordion-border); border-top:0; border-radius:0 0 10px 10px; }
body .sidebar .layer-group.open > .layer-group-content > .layer-group-inner { border-color:var(--accordion-border); border-radius:0 0 10px 10px; }

/* Native details retain keyboard and open-state behavior; older browsers fall back normally. */
@supports (interpolate-size:allow-keywords) {
    .sidebar .map3d-accordion { interpolate-size:allow-keywords; }
    .sidebar .map3d-accordion::details-content { block-size:0; overflow:clip; transition:block-size .25s ease,content-visibility .25s allow-discrete; }
    .sidebar .map3d-accordion[open]::details-content { block-size:auto; }
}
@media(max-width:768px) {
    body .sidebar .layer-group > .layer-group-header,body .sidebar .map3d-accordion > summary { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
    body .sidebar .layer-group > .layer-group-header,body .sidebar .map3d-accordion > summary,
    body .sidebar .layer-group .arrow-icon,body .sidebar .map3d-accordion > summary::after,
    .sidebar .layer-group-content,.sidebar .map3d-accordion::details-content { transition:none; }
}
