.media-filter { display:flex; gap:10px; overflow-x:auto; padding:2px 0 21px; scrollbar-width:none; }
.media-filter::-webkit-scrollbar { display:none; }
.media-filter button { flex:none; padding:9px 17px; border:0; border-radius:9px; background:#e9e8ef; color:var(--ink); font-weight:650; }
.media-filter button[aria-pressed="true"] { background:var(--ink); color:var(--surface); }
.media-library #items { display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:28px 18px; }
.media-library .library-toolbar { margin-bottom:18px; }
.media-tile { min-width:0; }
.media-tile-open { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; }
.media-tile-poster { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:13px; background:#211d2b; }
.media-tile-poster img,.media-hover-video { display:block; width:100%; height:100%; object-fit:cover; }
.media-hover-video { position:absolute; inset:0; z-index:1; background:#000; }
.media-tile-placeholder { display:grid; place-items:center; width:100%; height:100%; color:#a696d4; }
.media-tile-placeholder svg { width:52px; height:52px; }
.media-duration { position:absolute; z-index:2; right:8px; bottom:8px; padding:2px 5px; border-radius:4px; background:#000c; color:#fff; font-size:11px; font-weight:700; }
.media-tile-caption { display:grid; grid-template-columns:36px minmax(0,1fr) 34px; align-items:start; gap:10px; padding-top:11px; }
.media-tile-caption .media-kind { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--lavender); color:var(--brand); }
.media-tile-caption .media-kind svg { width:18px; height:18px; }
.media-tile-caption strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; font-size:13px; }
.media-tile-caption small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.media-tile-caption .item-menu { justify-self:end; }
.media-tile .item-menu-options { position:absolute; top:calc(100% + 5px); bottom:auto; right:0; left:auto; }
.person-card.person-hidden { opacity:.7; }
.person-card.person-hidden .person-open img { filter:grayscale(1); }
@media(max-width:760px) { .media-library #items { grid-template-columns:1fr; gap:25px; } .media-tile-poster { border-radius:12px; } .media-tile-caption strong { font-size:14px; } }

html[data-theme="dark"] { color-scheme:dark; --bg:#0f0f0f; --surface:#181818; --ink:#f1f1f1; --muted:#aaa; --brand:#a99cff; --brand-dark:#8b7af2; --line:#303030; --lavender:#282435; --shadow:0 12px 35px #0005; }
html[data-theme="dark"] body { background:var(--bg); }
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar { background:#111; border-color:var(--line); }
html[data-theme="dark"] .storage-card,html[data-theme="dark"] .settings-card,html[data-theme="dark"] .person-card,html[data-theme="dark"] .file-card,html[data-theme="dark"] .empty-state,html[data-theme="dark"] .upload-panel,html[data-theme="dark"] .action-dialog,html[data-theme="dark"] .media-dialog,html[data-theme="dark"] .location-dialog,html[data-theme="dark"] .item-menu-options { background:#202020; border-color:#383838; color:var(--ink); }
html[data-theme="dark"] .file-visual,html[data-theme="dark"] .media-stage,html[data-theme="dark"] .office-page { background:#292929; }
html[data-theme="dark"] .file-card:hover,html[data-theme="dark"] .person-card:hover { border-color:#555; }
html[data-theme="dark"] .nav-item:hover,html[data-theme="dark"] .nav-item.active,html[data-theme="dark"] .icon-button:hover,html[data-theme="dark"] .icon-button.selected { background:#2c2c2c; color:var(--ink); }
html[data-theme="dark"] .button.secondary,html[data-theme="dark"] .media-filter button,html[data-theme="dark"] .dialog-input,html[data-theme="dark"] .dialog-select,html[data-theme="dark"] select,html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),html[data-theme="dark"] .item-menu-options button { background:#303030; color:var(--ink); border-color:#4a4a4a; }
html[data-theme="dark"] .media-filter button[aria-pressed="true"] { background:#f1f1f1; color:#161616; }
html[data-theme="dark"] .media-tile-caption .media-kind { background:#303030; color:#e0d9ff; }
html[data-theme="dark"] .media-tile-placeholder { background:#262626; color:#8e82b3; }
html[data-theme="dark"] .viewer-heading,html[data-theme="dark"] .viewer-toolbar,html[data-theme="dark"] .viewer-location,html[data-theme="dark"] .viewer-more-menu,html[data-theme="dark"] .pdf-controls { background:#202020; color:var(--ink); border-color:#383838; }
html[data-theme="dark"] .file-table-head,html[data-theme="dark"] .workspace-footer,html[data-theme="dark"] .settings-divider,html[data-theme="dark"] .nav-divider { border-color:#383838; background-color:transparent; }
html[data-theme="dark"] .info-note,html[data-theme="dark"] .pending-upload,html[data-theme="dark"] .upload-panel-head,html[data-theme="dark"] .organizer-sheet,html[data-theme="dark"] .organizer-destination { background:#242424; color:var(--ink); border-color:#383838; }
html[data-theme="dark"] .organizer-sheet-heading,html[data-theme="dark"] .organizer-quick-head strong { color:var(--ink); }

/* El menú del visor debe quedar encima del reproductor y aceptar clics en toda su área. */
.photo-viewer.immersive .viewer-heading { pointer-events:auto; overflow:visible; }
.photo-viewer.immersive .viewer-switches { position:relative; z-index:30; }
.photo-viewer.immersive .viewer-more { z-index:31; }
.photo-viewer.immersive .viewer-more-menu { z-index:32; max-height:calc(100dvh - 70px); overflow-y:auto; }