:root { --control-bg:#fff; --control-border:#dcd7eb; --control-hover:#f4f1ff; --control-selected:#ebe6ff; }
html[data-theme="dark"] { --control-bg:#282828; --control-border:#505050; --control-hover:#393443; --control-selected:#453d5d; }

/* Mantener selectores, casillas y menús dentro del mismo sistema visual. */
select { appearance:none; -webkit-appearance:none; min-height:40px; padding:9px 34px 9px 12px; border:1px solid var(--control-border); border-radius:10px; background-color:var(--control-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23675a89' stroke-width='1.8'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-position:right 11px center; background-size:15px 15px; background-repeat:no-repeat; color:var(--ink); box-shadow:0 1px 2px #1d17300a; cursor:pointer; }
select:hover { border-color:var(--brand); }
select:focus-visible { outline:3px solid #9f94f3; outline-offset:2px; }
select option { background:var(--control-bg); color:var(--ink); padding:9px 12px; }
html[data-theme="dark"] select { background-color:var(--control-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d4cbe9' stroke-width='1.8'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:15px 15px; border-color:var(--control-border); }
@supports (appearance:base-select) {
  select,::picker(select) { appearance:base-select; }
  select,html[data-theme="dark"] select { background-image:none; padding-right:12px; }
  select::picker-icon { margin-left:auto; color:var(--muted); }
  ::picker(select) { margin-top:5px; padding:5px; border:1px solid var(--control-border); border-radius:11px; background:var(--control-bg); box-shadow:0 14px 34px #1115; }
  select option { border-radius:7px; padding:9px 12px; }
  select option:hover,select option:focus { background:var(--control-hover); }
  select option:checked { background:var(--control-selected); color:var(--ink); }
  select option::checkmark { color:var(--brand); }
}
input[type="checkbox"] { color-scheme:light; accent-color:#6756df; }
html[data-theme="dark"] input[type="checkbox"] { accent-color:#a99cff; }
.file-grid:not(.list-mode) .select-file { background:#fff; box-shadow:0 2px 8px #1112; }
html[data-theme="dark"] .file-grid:not(.list-mode) .select-file { background:#2a2a2a; }
.settings-row #theme-preference,.settings-row #default-image-quality { width:min(230px,100%); flex:none; min-height:42px; border-color:var(--control-border); background-color:var(--control-bg); color:var(--ink); font-size:12px; }
.selection-actions-popover,.heading-actions-menu,.viewer-more-menu,.organizer-filter-menu,.organizer-more-dialog { background:var(--surface); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .feature-gallery,html[data-theme="dark"] .feature-gallery>label,html[data-theme="dark"] .collage-grid,html[data-theme="dark"] .timeline-card,html[data-theme="dark"] .organizer,html[data-theme="dark"] .organizer-sheet,html[data-theme="dark"] .organizer-filter-menu,html[data-theme="dark"] .organizer-more-dialog,html[data-theme="dark"] .selection-actions-popover,html[data-theme="dark"] .heading-actions-menu,html[data-theme="dark"] .viewer-more-menu,html[data-theme="dark"] .people-selection,html[data-theme="dark"] .selection-actions { background:#202020; border-color:#393939; color:var(--ink); }
html[data-theme="dark"] .organizer-destination,html[data-theme="dark"] .organizer-setup select,html[data-theme="dark"] .organizer-modes,html[data-theme="dark"] .face-choice,html[data-theme="dark"] .quota-user input,html[data-theme="dark"] .text-preview,html[data-theme="dark"] .office-page,html[data-theme="dark"] .sheet-scroll tr:nth-child(even) { background:#2b2b2b; border-color:#484848; color:var(--ink); }
html[data-theme="dark"] .organizer-destination:hover,html[data-theme="dark"] .face-choice:has(input:checked),html[data-theme="dark"] .selection-actions-popover button:hover,html[data-theme="dark"] .viewer-more-menu button:hover { background:var(--control-hover); color:var(--ink); }
html[data-theme="dark"] .organizer-quick-head span,html[data-theme="dark"] .organizer-sheet-handle,html[data-theme="dark"] .organizer-destination strong,html[data-theme="dark"] .timeline-caption strong { color:var(--ink); }
html[data-theme="dark"] .place-results button,html[data-theme="dark"] .place-results>span,html[data-theme="dark"] .map-counter { background:#292929; border-color:#444; color:var(--ink); }

/* Aprovechar el ancho disponible sin separar el contenido de la navegación. */
@media(min-width:761px) {
  .workspace { max-width:none; margin:0; padding-inline:clamp(18px,1.5vw,30px); }
  .topbar { padding-inline:clamp(18px,1.5vw,30px); }
  .heading-actions-menu,html[data-theme="dark"] .heading-actions-menu { background:transparent; border:0; box-shadow:none; padding:0; }
}
.search-box { min-height:46px; padding:0 14px; border:1px solid var(--control-border); border-radius:999px; background:var(--control-bg); gap:11px; }
.search-box input,html[data-theme="dark"] .search-box input { background:transparent; border:0; box-shadow:none; font-size:15px; }
.search-box input::placeholder { color:var(--muted); opacity:1; }
.search-box:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px #6756df1c; }
.search-box kbd { flex:none; }
@media(max-width:760px) {
  .search-box { min-height:42px; padding-inline:10px; }
  .search-box input,html[data-theme="dark"] .search-box input { font-size:16px; }
}
.map-toolbar { flex-wrap:wrap; }
.map-toolbar .place-search { flex:1 1 340px; max-width:none; }
.map-style-label,.map-labels-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
.map-style-label select,.map-labels-label select { min-width:125px; max-width:180px; }
@media(max-width:900px) { .map-toolbar { flex-wrap:wrap; } .map-toolbar .place-search { max-width:none; flex-basis:100%; } }
@media(max-width:560px) { .map-style-label,.map-labels-label { flex:1; } .map-style-label select,.map-labels-label select { min-width:0; width:100%; } }

/* Galería amplia, con cuatro tarjetas por fila y miniaturas a todo el ancho en móvil. */
.media-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.media-controls .media-filter { padding:0; }
.media-folder-label { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:600; }
.media-folder-label select { min-width:180px; max-width:min(340px,70vw); }
.media-library #items { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 16px; }
.media-tile-poster { background:#000; }
.media-hover-video { pointer-events:none; }
.media-tile .item-menu-options { z-index:40; }
@media(max-width:1180px) { .media-library #items { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:940px) { .media-library #items { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .media-library #items { grid-template-columns:1fr; gap:27px; margin-inline:-22px; }
  .media-tile-poster { border-radius:0; }
  .media-tile-caption { padding:11px 22px 0; }
  .media-controls { align-items:stretch; }
  .media-folder-label { width:100%; justify-content:space-between; }
  .media-folder-label select { flex:1; min-width:0; max-width:none; }
  .settings-row:has(#theme-preference),.settings-row:has(#default-image-quality) { flex-wrap:wrap; }
  .settings-row #theme-preference,.settings-row #default-image-quality { width:100%; }
}

/* Un fondo negro uniforme para fotos y videos en ambos modos. */
.media-dialog.photo-viewer,.media-dialog.photo-viewer::backdrop,.photo-viewer .viewer-canvas,.photo-viewer .media-stage { background:#000!important; }
.photo-viewer .media-stage video-player,.photo-viewer .media-stage video-neutral-skin,.photo-viewer .media-stage media-container,.photo-viewer .media-stage video { background:#000!important; --media-background:#000; --media-video-border-radius:0; }
.photo-viewer:not(.immersive) .viewer-heading,.photo-viewer:not(.immersive) .viewer-toolbar,.photo-viewer:not(.immersive) .viewer-location { background:#171717!important; color:#fff; border-color:#363636; }
.photo-viewer:not(.immersive) .viewer-heading h2 { color:#fff; }
.photo-viewer.immersive #viewer-close:before { content:none!important; }
.photo-viewer.immersive #viewer-close svg { display:block!important; width:25px; height:25px; }
.video-tap-feedback { position:absolute; z-index:7; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:#0009; color:#fff; font-size:30px; opacity:0; pointer-events:none; }
.video-tap-feedback.visible { animation:tap-playback .6s ease-out forwards; }
@keyframes tap-playback { 0%{opacity:1;transform:translate(-50%,-50%) scale(.8)} 70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)} }