:root {
  color-scheme: dark;
  --ground: #262626;
  --surface: #202020;
  --raised: #303030;
  --film: #0c0c0c;
  --rule: #4b4b4b;
  --ink: #f1f1f1;
  --muted: #b8b8b8;
  --amber: #dfb16d;
  --marker: #ed756c;
  --focus: #f6cf91;
  --well: #171717;
  --stage: #1c1c1c;
  --viewer: #1b1b1b;
  --row-alt: #292929;
  --row-hover: #2d2d2d;
  --hover-fill: #383838;
  --press-fill: #454545;
  --disabled-fill: #282828;
  --rule-soft: #333;
  --rule-faint: #3a3a3a;
  --rule-line: #2f2f2f;
  --disabled-line: #444;
  --field-line: #717171;
  --line-strong: #838383;
  --line-float: #888;
  --film-hover: #8a8a8a;
  --dim: #aaa;
  --faint: #a0a0a0;
  --gray-mid: #8f8f8f;
  --undone-ink: #9a9a9a;
  --folder-ink: #d4d4d4;
  --thumb: #777;
  --track-done: #6b6b6b;
  --develop-high: #525252;
  --on-accent: #181818;
  --amber-hover: #edc58a;
  --amber-pressed: #cfa25f;
  --amber-disabled: #b5a184;
  --amber-text: #f4d4a3;
  --marker-hover: #f58e86;
  --marker-pressed: #d9635a;
  --marker-text: #f5a39c;
  --marker-wash: #3a2624;
  --done: #9ec59a;
  --scrim: rgba(0, 0, 0, 0.66);
  --lightbox-bg: rgba(12, 12, 12, 0.96);
  --check-bg: rgba(12, 12, 12, 0.88);
  --drop-bg: rgba(12, 12, 12, 0.82);
  --header-height: 114px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--ground);
  color: var(--ink);
  scrollbar-color: var(--thumb) var(--surface);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
button, input, select { font: inherit; }
button, .button, input, select { border-radius: 2px; }
button, .button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
button:hover, .button:hover { background: var(--hover-fill); border-color: var(--line-strong); }
button:active, .button:active { background: var(--press-fill); }
button:disabled { color: var(--dim); background: var(--disabled-fill); border-color: var(--disabled-line); cursor: default; }
.primary { background: var(--amber); border-color: var(--amber); color: var(--on-accent); }
.primary:hover, a.primary:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--on-accent); }
a.primary, a.danger { color: var(--on-accent); }
.primary:active { background: var(--amber-pressed); }
.primary:disabled { background: var(--amber-disabled); color: var(--ground); }
input, select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--field-line);
  caret-color: var(--amber);
}
input::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover { border-color: var(--dim); }
a { color: inherit; text-underline-offset: 4px; }
a:hover { color: var(--amber); }
.skip-link:hover, .skip-link:focus { color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--amber); color: var(--on-accent); }
h1, h2, p { margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
h2 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { min-width: 44px; padding: 10px; }
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px; z-index: 100; background: var(--amber); color: var(--on-accent); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

body.app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-header { flex: none; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--rule); }
.topbar { display: grid; grid-template-columns: auto minmax(220px, 520px) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 5px 12px; }
.brand { width: fit-content; min-height: 30px; display: flex; align-items: center; font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.search-form { display: flex; align-items: center; min-width: 0; background: var(--well); border: 1px solid var(--field-line); border-radius: 2px; }
.search-form > .icon { margin-left: 10px; color: var(--muted); }
.search-form input { border: 0; background: transparent; padding-left: 8px; }
.search-form input:focus-visible { outline-offset: -3px; }
.search-form button { border: 0; border-left: 1px solid var(--rule); border-radius: 0; flex-shrink: 0; }
.session { display: flex; justify-content: end; align-items: center; gap: 10px; min-width: 0; font-size: 0.875rem; }
#account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.session button { background: transparent; border-color: transparent; }
.utility-nav, .root-nav { display: flex; min-width: 0; gap: 0 16px; }
.utility-nav a, .root-nav a { min-height: 30px; display: flex; align-items: center; border-bottom: 2px solid transparent; padding: 0 2px; font-size: 0.875rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.utility-nav a:hover, .root-nav a:hover { color: var(--ink); }
.utility-nav a[aria-current], .root-nav a[aria-current] { border-bottom-color: var(--amber); color: var(--ink); }
.root-nav { display: none; }
.readonly-strip { margin: 0; padding: 2px 12px; background: var(--raised); border-top: 1px solid var(--rule); color: var(--amber-text); font-size: 0.75rem; line-height: 1.5; }
.notice { position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; border-bottom: 1px solid var(--amber); background: var(--raised); color: var(--amber-text); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.notice[data-open="false"] { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.notice p { font-size: 0.875rem; overflow-wrap: anywhere; max-width: 75ch; }
.notice button { color: var(--amber-text); background: transparent; flex-shrink: 0; min-height: 32px; padding: 0 12px; }
/* Persistent notices and those with an action are part of the page flow: they push the workspace down instead of covering the action bar. */
.notice[data-flow="stack"] { position: static; flex: none; z-index: auto; transition: none; border-top: 1px solid var(--rule); }
.notice[data-flow="stack"][data-open="false"] { display: none; }
.notice-actions { display: flex; align-items: center; flex-shrink: 0; gap: 4px; }
.notice-actions a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--amber); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.notice-actions a:hover { color: var(--amber-hover); }
.notice-actions #notice-action { border-color: var(--amber); color: var(--amber); }
.notice-actions #notice-action:hover { background: var(--hover-fill); color: var(--amber-hover); }
@media (pointer: coarse) { .notice button, .notice-actions a { min-height: 44px; } }
[data-readonly="true"] .write-only { display: none !important; }

/* Three panels: tree | files | preview. Each one scrolls on its own. */
.workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 280px 6px minmax(0, 1fr) 6px 380px; }
.workspace > * { min-width: 0; min-height: 0; }
.workspace.tree-collapsed #tree-panel, .workspace.tree-collapsed #split-tree, .workspace.preview-collapsed #viewer, .workspace.preview-collapsed #split-preview { display: none; }
body.resizing { cursor: col-resize; user-select: none; }
.splitter { position: relative; cursor: col-resize; touch-action: none; background: var(--ground); }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--rule); transition: background-color 120ms ease-out; }
.splitter:hover::after, .splitter.dragging::after { background: var(--amber); }
.splitter:focus-visible { outline: none; }
.splitter:focus-visible::after { background: var(--focus); left: 1px; width: 4px; }
.panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 3px 4px 3px 12px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.panel-head .icon-button { min-height: 24px; min-width: 24px; padding: 3px; border-color: transparent; background: transparent; }
.panel-head .icon-button:hover { background: var(--rule-soft); }
.panel-head .icon { width: 16px; height: 16px; flex-basis: 16px; }

.tree-panel { display: flex; flex-direction: column; background: var(--surface); }
.tree { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 0 24px; overscroll-behavior: contain; }
.tree-group { list-style: none; margin: 0; padding: 0; }
.tree-item { outline: none; }
.tree-row { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 calc(4px + var(--level, 0) * 14px); color: var(--muted); font-size: 0.8125rem; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; }
.tree-row:hover { background: var(--row-hover); color: var(--ink); }
.tree-row.is-current { background: var(--raised); color: var(--ink); font-weight: 600; outline: 1px solid var(--marker); outline-offset: -1px; }
.tree-item:focus-visible > .tree-row { outline: 2px solid var(--focus); outline-offset: -2px; }
.tree-top > .tree-item > .tree-row { color: var(--ink); font-weight: 600; }
.tree-toggle { flex: 0 0 14px; width: 14px; height: 22px; display: grid; place-items: center; }
.tree-arrow { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease-out; }
.tree-item[aria-expanded="true"] > .tree-row .tree-arrow { transform: rotate(90deg); }
.tree-item.is-leaf > .tree-row .tree-arrow { visibility: hidden; }
.tree-folder { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-item.is-loading > .tree-row .tree-name { opacity: 0.6; }
.tree-item.has-error > .tree-row .tree-name::after { content: " · no se pudo cargar"; color: var(--marker-text); font-weight: 400; }
.tree-note { padding: 4px 12px; color: var(--muted); font-size: 0.75rem; line-height: 1.4; white-space: normal; }

.content { container: center / inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ground); }
.content:focus-visible { outline-offset: -3px; }
.center-head { flex: none; background: var(--ground); }
.head-row { display: flex; align-items: center; gap: 4px 12px; min-height: 30px; padding: 0 12px; border-bottom: 1px solid var(--rule-soft); }
.toolbar-toggle { min-height: 24px; padding: 0 8px; border-color: transparent; background: transparent; color: var(--muted); font-size: 0.8125rem; font-weight: 600; flex: none; }
.toolbar-toggle[aria-pressed="true"] { background: var(--raised); border-color: var(--rule); color: var(--ink); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: nowrap; min-height: 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 0.8125rem; color: var(--muted); }
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs:empty { display: none; }
.crumb-nav { flex: 1 1 0; min-width: 0; }
.breadcrumbs li { flex: 0 0 auto; min-width: 0; }
.breadcrumbs li + li::before { content: '/'; display: inline-block; margin: 0 6px; color: var(--faint); }
.breadcrumbs a { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 28px; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
#view-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.content[data-section="folder"] #view-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.content:not([data-section="folder"]) .crumb-nav { display: none; }
#item-count { flex-shrink: 0; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-filters { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 6px 12px; border-bottom: 1px solid var(--rule-soft); }
.search-filters label { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.875rem; color: var(--muted); }
.search-filters select { width: auto; max-width: 280px; }
.center-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-anchor: none; position: relative; overscroll-behavior: contain; padding-bottom: 16px; }
.center-scroll > .empty-state { padding: 40px 16px; }
.view-panel { padding: 12px 16px 24px; }
.sheet-guide { flex-shrink: 0; color: var(--muted); font-size: 0.75rem; }
.new-legend { display: inline-flex; align-items: center; gap: 6px; }
.new-legend svg { width: 26px; height: 18px; }
.new-legend path, .new-mark path { stroke: var(--marker); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.contact-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px 8px; align-items: start; }
/* The 5px of padding hold the selection mark, which paint containment (content-visibility) would otherwise clip. */
.cell { position: relative; min-width: 0; padding: 5px; content-visibility: auto; contain-intrinsic-size: auto 340px; }
.frame { user-select: none; scroll-margin: calc(var(--header-height) + 12px) 0 12px; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: start; gap: 0; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 400; }
.frame:hover, .frame:active { background: transparent; }
.film { position: relative; display: block; background: var(--film); padding: 0 10px 10px; border: 1px solid var(--film); }
.frame:hover .film { border-color: var(--film-hover); }
.edge-code { display: flex; justify-content: space-between; align-items: center; min-height: 30px; gap: 10px; color: var(--amber); font: 0.75rem/1.4 Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.frame-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 320px; aspect-ratio: 4 / 5; margin: 0 auto; background: var(--stage); color: var(--muted); overflow: hidden; }
.frame-stage img, .viewer-preview img, .row-thumb img, .multi-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.frame-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin: 9px 2px 0; color: var(--ink); font-size: 0.875rem; line-height: 1.4; }
.frame-path { margin: 4px 2px 0; color: var(--muted); font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.new-mark { position: absolute; width: 40px; height: 28px; top: 28px; right: 14px; z-index: 1; pointer-events: none; }
.selection-mark { display: none; position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); z-index: 2; fill: none; stroke: var(--marker); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.selection-mark path { vector-effect: non-scaling-stroke; }
.frame[aria-current] .selection-mark, .cell[data-chosen] .selection-mark { display: block; }
.folder-frame .frame-stage { background: var(--raised); flex-direction: row; justify-content: center; align-items: center; gap: 12px; aspect-ratio: auto; min-height: 72px; padding: 16px; }
.folder-symbol { width: 36px; height: 30px; flex: 0 0 auto; color: var(--folder-ink); }
.folder-label { color: var(--folder-ink); font-size: 0.8125rem; }
.file-symbol { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.file-symbol svg { width: 42px; height: 46px; }
.extension { max-width: 100%; padding: 0 6px; overflow-wrap: anywhere; text-align: center; font-size: 0.75rem; font-weight: 600; }
.thumb-message { font-size: 0.8125rem; text-align: center; padding: 0 8px; }
.developing-mark { width: 38px; height: 30px; border: 1px solid var(--line-float); background: var(--hover-fill); animation: developing 2.4s ease-in-out infinite alternate; }
@keyframes developing { from { background-color: var(--raised); border-color: var(--thumb); } to { background-color: var(--develop-high); border-color: var(--dim); } }
.empty-state { padding: 64px 0; max-width: 65ch; }
.empty-state p { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
.page-end { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; padding: 32px 0 8px; color: var(--muted); font-size: 0.875rem; }


.viewer { display: flex; flex-direction: column; min-width: 0; background: var(--viewer); }
.viewer-toolbar { background: var(--viewer); }
.viewer-toolbar h2 { margin-right: auto; }
.viewer-pagination { display: flex; align-items: center; gap: 4px; }
#viewer-position { min-width: 46px; text-align: center; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.preview-empty { padding: 24px 16px; color: var(--muted); font-size: 0.875rem; max-width: 32ch; }
.viewer-preview { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; height: clamp(200px, 42dvh, 520px); margin: 12px; background: var(--film); color: var(--muted); overflow: hidden; }
.viewer-preview.zoomable { cursor: zoom-in; }
.viewer-details { padding: 4px 16px 16px; }
.viewer-details h2 { margin-bottom: 8px; font-size: 1.125rem; }
.file-metadata { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 12px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.file-metadata > div { display: flex; gap: 8px; min-width: 0; }
.file-metadata .metadata-path { flex: 1 1 100%; }
.file-metadata dt { flex-shrink: 0; color: var(--muted); }
.file-metadata dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#viewer-download, #viewer-zip { display: flex; justify-content: space-between; width: 100%; }
.file-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.file-actions button { padding-left: 4px; padding-right: 4px; font-size: 0.8125rem; }
.viewer-multi { padding: 16px; }
.multi-count { margin-bottom: 4px; font-size: 1.125rem; font-weight: 600; }
.multi-actions { margin-top: 12px; }
.multi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.multi-cell { position: relative; display: block; width: 100%; min-height: 0; aspect-ratio: 1; padding: 0; border: 1px solid var(--rule); background: var(--stage); overflow: hidden; }
.multi-cell:hover { background: var(--stage); }
.multi-thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.multi-thumb .extension, .multi-thumb .thumb-message, .multi-thumb .folder-label { display: none; }
.multi-thumb .file-symbol svg { width: 28px; height: 30px; }
.multi-thumb .folder-symbol { width: 36px; height: 28px; }
.multi-thumb .developing-mark { width: 24px; height: 16px; }
.multi-more { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--rule); color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.multi-downloads { display: grid; gap: 8px; margin-top: 14px; }
.multi-downloads .primary { justify-content: space-between; }
.similar-toggle { display: flex; justify-content: space-between; width: 100%; margin-top: 10px; }
.similar-tabs { display: flex; gap: 20px; margin: 16px 0; border-bottom: 1px solid var(--rule); }
.similar-tabs button { padding-left: 0; padding-right: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.similar-tabs button[aria-selected="true"] { border-bottom-color: var(--amber); color: var(--ink); }
.similar-status { margin-bottom: 16px; font-size: 0.8125rem; color: var(--muted); }
.similar-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 2px; padding: 0; }
.similar-sheet .film { padding: 0 6px 6px; }
.similar-sheet .frame-name { font-size: 0.8125rem; }
.similar-sheet .edge-code { font-size: 0.6875rem; gap: 4px; }
.preview-fold { display: inline-flex; }
.viewer-toolbar #viewer-close { display: none; }

dialog.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--lightbox-bg); }
dialog.lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog.lightbox::backdrop { background: var(--film); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 56px); object-fit: contain; }
.lightbox-name { position: absolute; left: 16px; right: 72px; bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.875rem; }
.lightbox .icon-button { position: absolute; top: 8px; right: 8px; }
.drawer-scrim { display: none; }


.login-page { min-height: 100dvh; display: grid; align-items: center; justify-items: center; padding: 32px 20px; }
.login-panel { width: 100%; max-width: 400px; padding: 0 32px 32px; background: var(--film); border: 1px solid var(--film); outline: 1px solid var(--rule); outline-offset: -1px; }
.login-panel .edge-code { margin: 0 0 20px; }
.login-panel h1 { font-size: 1.5rem; }
.login-intro { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; }
.login-form { display: grid; margin-top: 32px; }
.login-form label { margin-bottom: 8px; font-size: 0.875rem; }
.login-form input { margin-bottom: 20px; background: var(--ground); }
.login-form button { margin-top: 8px; }
.login-panel .notice { position: static; margin-top: 24px; padding: 8px 0; }
.login-panel .notice[data-open="false"] { display: none; }

@media (min-width: 1024px) and (pointer: fine) {
  .topbar input, .topbar .search-form button, .session button { min-height: 28px; padding-top: 2px; padding-bottom: 2px; }
  .topbar .search-form button { padding: 2px 12px; }
  .brand, .utility-nav a { min-height: 28px; }
  .center-head button, .center-head select, .center-head .button { min-height: 24px; padding: 0 8px; font-size: 0.8125rem; }
  .center-head select { padding: 0 6px; }
  .viewer button, .viewer .button { min-height: 32px; }
  .viewer .panel-head .icon-button { min-height: 26px; }
  .viewer-toolbar #viewer-close { display: none; }
}
@media (min-width: 1024px) {
  #drawer-scrim { display: none; }
  #tree-collapse { display: inline-flex; }
}
@media (max-width: 1023px) {
  .topbar { grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) auto auto; gap: 12px; }
  .utility-nav { order: 3; }
  #account-name { display: none; }
  .root-nav { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 12px; border-top: 1px solid var(--rule-soft); }
  .root-nav a { min-height: 44px; flex-shrink: 0; }
  .workspace { display: block; position: relative; }
  .splitter { display: none; }
  .content { height: 100%; }
  .tree-panel { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(88vw, 340px); border-right: 1px solid var(--line-float); transform: translateX(-100%); visibility: hidden; transition: transform 160ms ease-out, visibility 160ms; padding-top: env(safe-area-inset-top); }
  .workspace.drawer-open .tree-panel { transform: none; visibility: visible; }
  .workspace.drawer-open ~ .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
  .tree-row { height: 40px; font-size: 0.875rem; padding-left: calc(8px + var(--level, 0) * 16px); }
  .tree-toggle { flex-basis: 28px; width: 28px; height: 40px; }
  .tree-arrow { width: 10px; height: 10px; }
  .tree-folder { flex-basis: 16px; width: 16px; height: 16px; }
  .panel-head { min-height: 44px; }
  .panel-head .icon-button { min-height: 44px; min-width: 44px; }
  .viewer { position: fixed; inset: auto 0 0; z-index: 30; max-height: 82dvh; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line-float); }
  .viewer[data-state="empty"], .viewer[data-state="many"] { display: none; }
  .viewer-toolbar #viewer-close { display: inline-flex; }
  .preview-fold { display: none; }
  .viewer-preview { width: min(100% - 32px, 520px); height: 32dvh; margin: 12px auto; }
  .viewer-details { max-width: 680px; margin: 0 auto; }
  .workspace:has(.viewer[data-state="one"]) .center-scroll { padding-bottom: 60dvh; }
  .toolbar-toggle { min-height: 36px; }
  .preview-toggle { display: none; }
  .upload-panel { left: 8px; bottom: 8px; width: calc(100% - 16px); max-height: 40dvh; }
}
@media (max-width: 767px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 4px 12px 8px; }
  .brand { grid-column: 1; grid-row: 1; }
  .session { grid-column: 2; grid-row: 1; }
  .search-form { grid-column: 1 / -1; grid-row: 2; }
  .utility-nav { grid-column: 1 / -1; grid-row: 3; order: 0; gap: 0 20px; }
  .utility-nav a { min-height: 40px; }
  /* The folder drawer (Carpetas button) holds the roots on a phone. */
  .root-nav { display: none; }
  .head-row { flex-wrap: wrap; padding: 4px 12px; }
  .crumb-nav { flex: 1 1 100%; order: 5; }
  .breadcrumbs { min-height: 44px; }
  .breadcrumbs a { line-height: 44px; }
  .breadcrumbs:empty { display: none; }
  .search-filters label { flex: 1 1 200px; }
  .search-filters select { width: 100%; max-width: 100%; }
}
@media (max-width: 640px) {
  .contact-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 2px; padding: 7px; }
  .film { padding: 0 7px 7px; }
  .edge-code { min-height: 27px; font-size: 0.6875rem; gap: 4px; }
  .frame-name { font-size: 0.8125rem; }
  .folder-frame .frame-stage { padding: 12px; gap: 10px; }
  .new-mark { width: 34px; height: 24px; top: 26px; right: 10px; }
  .file-actions { gap: 6px; }
  .login-panel { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Buttons: variants used by operations */
.danger { background: var(--marker); border-color: var(--marker); color: var(--on-accent); }
.danger:hover { background: var(--marker-hover); border-color: var(--marker-hover); }
.danger:active { background: var(--marker-pressed); }
.danger-quiet { border-color: var(--marker); color: var(--marker-text); }
.danger-quiet:hover { background: var(--marker-wash); border-color: var(--marker-hover); }
.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.link-button { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--amber); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.link-button:hover { background: transparent; color: var(--amber-hover); }

/* Selection checkbox on every frame */
.frame-check { position: absolute; top: 33px; left: 11px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 120ms ease-out; }
.frame-check input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.frame-check-mark { width: 26px; height: 26px; padding: 3px; background: var(--check-bg); border: 1px solid var(--muted); fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cell:hover .frame-check, .cell:focus-within .frame-check, .has-selection .frame-check, .cell[data-chosen] .frame-check { opacity: 1; }
.frame-check input:checked + .frame-check-mark { background: var(--marker); border-color: var(--marker); stroke: var(--on-accent); }
.frame-check input:focus-visible + .frame-check-mark { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: none), (max-width: 640px) { .frame-check { opacity: 1; } }


/* A narrow file panel (small window or wide side panels): crumbs on their own line, icon-only folder actions. */
@container center (max-width: 700px) {
  .head-row { flex-wrap: wrap; padding-top: 2px; padding-bottom: 2px; }
  .crumb-nav { flex: 1 1 100%; order: -1; }
  .selection-count[data-hint] { display: none; }
  .action-buttons { flex: 1 1 auto; justify-content: flex-end; }
  .action-buttons .label { display: none; }
  #act-mkdir, #act-upload { min-width: 32px; padding-left: 6px; padding-right: 6px; }
}

/* Action bar */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 32px; padding: 3px 12px; background: var(--ground); border-bottom: 1px solid var(--rule); }
.selection-count { min-width: 0; color: var(--muted); font-size: 0.8125rem; }
.action-bar:has(#act-clear:not([hidden])) .selection-count { color: var(--ink); font-weight: 600; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
/* The bar always keeps its height (buttons appear and disappear inside it), so selecting a row never moves the list. */
.action-bar[data-idle="true"] { visibility: hidden; }
.content[data-section="admin"] .action-bar, .content[data-section="trash"] .action-bar { display: none; }
@media (pointer: coarse) { .action-bar { min-height: 50px; } }

/* Drop zone */
.content.drop-active::after { content: attr(data-drop-text); position: fixed; inset: calc(var(--header-height) + 12px) 12px 12px; z-index: 40; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 1.125rem; font-weight: 600; color: var(--amber); background: var(--drop-bg); border: 2px dashed var(--amber); pointer-events: none; }
.content.drop-blocked::after { color: var(--marker-text); border-color: var(--marker); }

/* Dialogs */
dialog.modal { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; overflow: auto; }
dialog.modal-wide { width: min(560px, calc(100% - 32px)); }
dialog.modal::backdrop { background: var(--scrim); }
.modal-form { display: grid; gap: 14px; padding: 22px 24px 20px; }
.modal-title { font-size: 1.125rem; overflow-wrap: anywhere; }
.modal-message { color: var(--muted); font-size: 0.9375rem; max-width: 65ch; overflow-wrap: anywhere; }
.modal-list { margin: 0; padding: 0 0 0 18px; color: var(--ink); font-size: 0.875rem; overflow-wrap: anywhere; }
.modal-field { display: grid; gap: 6px; }
.modal-field label { font-size: 0.875rem; }
.modal-error { color: var(--marker-text); font-size: 0.8125rem; }
.modal-error:empty { display: none; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-actions button { flex: 0 1 auto; max-width: 100%; text-align: center; overflow-wrap: anywhere; }

/* Folder picker */
.picker { display: grid; gap: 8px; min-width: 0; }
.picker-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font-size: 0.8125rem; color: var(--muted); }
.picker-sep { color: var(--faint); }
.picker-here { color: var(--ink); overflow-wrap: anywhere; }
.picker-current { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.picker-current:focus-visible { outline-offset: 2px; }
.picker-status { color: var(--muted); font-size: 0.8125rem; }
.picker-status:empty { display: none; }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 36dvh; overflow-y: auto; border: 1px solid var(--rule); background: var(--well); }
.picker-list:empty { display: none; }
.picker-item { width: 100%; justify-content: flex-start; text-align: left; border: 0; border-bottom: 1px solid var(--rule-line); background: transparent; font-weight: 400; }
.picker-item span { min-width: 0; overflow-wrap: anywhere; }
.picker-item:hover:not(:disabled) { background: var(--raised); }
.picker-item:disabled { background: transparent; color: var(--gray-mid); }
.picker-item:focus-visible { outline-offset: -3px; }

/* Upload panel */
.upload-panel { position: fixed; left: 16px; bottom: 16px; z-index: 45; width: min(380px, calc(100% - 32px)); max-height: 50dvh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); }
.upload-head { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--rule); }
.upload-head h2 { flex: 1; min-width: 0; font-size: 0.9375rem; }
.upload-head button { background: transparent; border-color: transparent; }
.upload-panel.collapsed .upload-list { display: none; }
.upload-panel.collapsed .upload-head { border-bottom: 0; }
.upload-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.upload-item { padding: 10px 14px 12px; border-bottom: 1px solid var(--rule-line); }
.upload-item:last-child { border-bottom: 0; }
.upload-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upload-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.upload-cancel { flex-shrink: 0; min-height: 44px; padding: 0 8px; background: transparent; border-color: transparent; color: var(--marker-text); font-weight: 400; }
.upload-bar { height: 6px; margin: 2px 0 6px; background: var(--rule-faint); overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--amber); }
.upload-item[data-state="done"] .upload-bar span { background: var(--done); }
.upload-item[data-state="error"] .upload-bar span, .upload-item[data-state="cancelled"] .upload-bar span { background: var(--marker); }
.upload-item[data-state="retrying"] .upload-bar span { background: var(--gray-mid); }
.upload-status { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.upload-item[data-state="error"] .upload-status { color: var(--marker-text); }
@media (max-width: 767px) { .action-bar { padding: 6px 12px; } .selection-count[data-hint] { display: none; } .action-buttons { flex: 1 1 auto; justify-content: flex-end; } }
@media (max-width: 640px) { .action-buttons .label { display: none; } #act-mkdir, #act-upload { min-width: 44px; padding-left: 10px; padding-right: 10px; } .action-buttons button { padding-left: 10px; padding-right: 10px; } }

/* Recents, trash and admin views */
.view-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 24px; }
.toolbar-label { color: var(--muted); font-size: 0.875rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.view-status { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.view-status:empty { display: none; }
.view-panel [role="status"].empty-state { padding: 40px 0; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--rule); }
.segmented button { border: 0; border-radius: 0; background: transparent; min-width: 64px; }
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button[aria-pressed="true"] { background: var(--amber); color: var(--on-accent); }
.segmented button[aria-pressed="true"]:hover { background: var(--amber-hover); }
.day-group { margin-bottom: 36px; }
.day-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.day-count { color: var(--muted); font-size: 0.8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.frame-event { display: block; margin: 4px 2px 0; color: var(--muted); font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.trash-toolbar { justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 0; }
.trash-lead { display: flex; align-items: center; gap: 4px; min-width: 0; }
.trash-summary:focus-visible { outline-offset: 2px; }
.row-check { position: relative; flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.row-check input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.row-check .frame-check-mark { position: static; }
.row-check input:checked + .frame-check-mark { background: var(--marker); border-color: var(--marker); stroke: var(--on-accent); }
.row-check input:focus-visible + .frame-check-mark { outline: 2px solid var(--focus); outline-offset: 2px; }
.trash-list { list-style: none; margin: 0; padding: 0; }
.trash-row { display: grid; grid-template-columns: 44px 88px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--rule-faint); }
.trash-row[data-chosen] { background: var(--row-hover); }
.trash-thumb { background: var(--film); padding: 4px; }
.trash-thumb .frame-stage { max-width: none; aspect-ratio: 1; }
.trash-thumb .file-symbol svg { width: 30px; height: 33px; }
.trash-thumb .file-symbol { gap: 4px; }
.trash-thumb .extension { font-size: 0.6875rem; }
.trash-thumb .folder-symbol { width: 40px; height: 32px; }
.trash-thumb .folder-label { display: none; }
.trash-info { min-width: 0; }
.trash-name { font-size: 0.9375rem; overflow-wrap: anywhere; }
.trash-path { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.trash-meta { margin-top: 2px; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.admin-section { max-width: 1200px; margin-bottom: 44px; }
.admin-section > h2, .admin-head h2 { margin-bottom: 14px; }
.admin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.admin-head h2 { margin-bottom: 0; }
.admin-head { margin-bottom: 8px; }
.worker-state { margin-bottom: 4px; font-size: 0.9375rem; }
.worker-state[data-paused="true"] { color: var(--amber-text); }
.backup-state { margin: 0 0 16px; font-size: 0.875rem; }
.backup-state[data-bad="true"] { color: var(--marker); font-weight: 600; }
.backup-alert { display: block; margin-top: 4px; color: var(--amber-text); font-weight: 600; }
.worker-alert { margin: 0 0 8px; color: var(--marker); font-size: 0.875rem; font-weight: 600; }
.worker-cache { margin: 0 0 16px; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.schedule legend { flex: 0 0 100%; margin-bottom: 2px; padding: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.schedule-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.875rem; cursor: pointer; }
.schedule-option input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--amber); cursor: pointer; }
.schedule .inline-field { flex: 0 0 100%; margin-top: 4px; }
.progress { height: 8px; background: var(--rule-faint); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--amber); }
.progress[data-state="done"] span { background: var(--track-done); }
.progress-text { margin: 6px 0 20px; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.worker-figures { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 22px; }
.worker-figures dt { color: var(--muted); font-size: 0.8125rem; }
.worker-figures dd { margin: 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.worker-current { margin-bottom: 22px; }
.worker-current h3 { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.current-list { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.current-list li { overflow-wrap: anywhere; padding: 2px 0; }
.current-list .current-none { color: var(--muted); }
.worker-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.inline-field { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--muted); }
.inline-field select { width: auto; min-width: 72px; }
.activity-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.activity-item { display: grid; grid-template-columns: 9.5rem 6.5rem 11rem minmax(0, 1fr) 6.5rem; align-items: center; gap: 2px 14px; min-height: 38px; padding: 4px 0; border-bottom: 1px solid var(--rule-faint); font-size: 0.875rem; }
.activity-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-user { overflow-wrap: anywhere; }
.activity-path { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.activity-item[data-undone] .activity-op, .activity-item[data-undone] .activity-path { color: var(--undone-ink); }

@media (max-width: 767px) {
  .activity-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .activity-when { grid-column: 1 / 3; }
  .activity-user { grid-column: 1; grid-row: 2; }
  .activity-op { grid-column: 2; grid-row: 2; }
  .activity-path { grid-column: 1 / -1; grid-row: 3; }
  .activity-item button { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 640px) {
  .trash-row { grid-template-columns: 44px 72px minmax(0, 1fr); padding-right: 0; }
  .trash-row > button { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
  .trash-thumb .file-symbol svg { width: 24px; height: 27px; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions button { flex: 1 1 auto; }
  .worker-figures { gap: 12px 28px; }
}
.admin-section .view-status { margin-bottom: 12px; }

/* View switcher in the toolbar */
.view-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; flex-shrink: 0; }
.view-modes .segmented button { min-height: 20px; min-width: 0; padding: 0 10px; font-size: 0.8125rem; }
.check-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--muted); font-size: 0.8125rem; cursor: pointer; white-space: nowrap; }
.check-toggle:hover { color: var(--ink); }
.check-toggle input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--amber); cursor: pointer; }
@media (max-width: 767px) { .view-modes .segmented button, .check-toggle { min-height: 44px; } .view-modes .segmented button { padding: 0 12px; } }

/* Details view: a compact, Explorer-style table (22px rows with a fine pointer, 44px on touch). */
.details-sheet { container-type: inline-size; overflow-anchor: none; }
.details-sheet:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.details-table .spacer td { height: 0; padding: 0; border: 0; background: transparent; }
.details-table { --row-h: 22px; width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.details-table:has(tbody:empty) { display: none; }
.details-table th { position: sticky; top: 0; z-index: 5; height: 24px; padding: 0; background: var(--ground); border-bottom: 1px solid var(--rule); text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.details-table th:not([aria-sort]) { padding: 0 8px; }
.details-table th[aria-sort="ascending"], .details-table th[aria-sort="descending"] { color: var(--ink); }
.sort-button { width: 100%; min-height: 24px; justify-content: flex-start; gap: 6px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: 600; }
.sort-button:hover { background: var(--raised); color: var(--ink); }
.sort-button:focus-visible { outline-offset: -3px; }
.sort-arrow { width: 10px; height: 10px; flex: 0 0 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 120ms ease-out; }
.sort-button:hover .sort-arrow { opacity: 0.45; }
th[aria-sort="ascending"] .sort-arrow, th[aria-sort="descending"] .sort-arrow { opacity: 1; color: var(--amber); }
th[aria-sort="descending"] .sort-arrow { transform: rotate(180deg); }
.col-size, .col-dims { text-align: right; }
th.col-size .sort-button, th.col-dims .sort-button { justify-content: flex-end; flex-direction: row-reverse; }
th.col-date { width: 8.5rem; }
th.col-kind { width: 11rem; }
th.col-size { width: 5rem; }
th.col-dims { width: 7rem; }
th.col-folder { width: 14rem; }
th.col-new { width: 32px; }
.detail-row { scroll-margin-top: 28px; user-select: none; }
.detail-row td { height: var(--row-h); padding: 0 8px; background: var(--ground); color: var(--muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-row[data-alt] td { background: var(--row-alt); }
.detail-row .col-name { color: var(--ink); padding-left: 2px; }
.detail-row:hover td { background: var(--row-hover); }
.detail-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.detail-row[data-chosen] td, .detail-row[aria-current] td { background: var(--raised); color: var(--ink); }
.detail-row[data-chosen], .detail-row[aria-current] { outline: 1px solid var(--marker); outline-offset: -1px; }
.row-main { display: flex; align-items: center; gap: 2px; min-width: 0; }
.row-lead { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.row-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.row-name { overflow: hidden; text-overflow: ellipsis; }
.folder-row .row-name { font-weight: 600; }
.row-sub { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.75rem; }
.row-folder { display: none; }
.details-table .row-check { flex: 0 0 18px; width: 18px; height: 22px; opacity: 0; transition: opacity 120ms ease-out; }
.details-table .row-check .frame-check-mark { width: 14px; height: 14px; padding: 1px; }
.detail-row:hover .row-check, .detail-row:focus-within .row-check, .has-selection .row-check, .detail-row[data-chosen] .row-check { opacity: 1; }
.row-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.row-thumb { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; background: var(--stage); color: var(--muted); overflow: hidden; }
.row-thumb .extension, .row-thumb .thumb-message, .row-thumb .folder-label { display: none; }
.row-thumb .file-symbol svg { width: 16px; height: 18px; }
.row-thumb .folder-symbol { width: 20px; height: 16px; }
.row-thumb .developing-mark { width: 14px; height: 10px; }
.details-table .col-new { padding: 0 2px; text-align: center; }
.details-table .col-new .new-mark { position: static; display: block; width: 24px; height: 17px; margin: 0 auto; }
@container (max-width: 880px) { .col-dims { display: none; } }
/* Search results: the name needs room more than the type and dimensions do. */
@container (max-width: 1100px) { .with-path .col-kind, .with-path .col-dims { display: none; } }
.details-table.with-path th.col-folder { width: 13rem; }
.path-mid { display: flex; min-width: 0; }
.path-head, .path-tail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-head { flex: 0 100 auto; }
.path-tail { flex: 0 1 auto; }
.details-table.with-thumbs { --row-h: 32px; }
@container (max-width: 640px) { .details-table.with-path { --row-h: 38px; } .details-table.with-path.with-thumbs { --row-h: 44px; } }
@container (max-width: 720px) { .col-kind { display: none; } }
@container (max-width: 640px) { .col-folder { display: none; } .row-folder { display: block; } }
@container (max-width: 440px) { .col-size { display: none; } }
@media (hover: none), (max-width: 640px) { .details-table .row-check { opacity: 1; } }
@media (max-width: 767px), (pointer: coarse) {
  .details-table { font-size: 0.875rem; }
  .details-table th { height: 32px; }
  .sort-button { min-height: 32px; }
  .details-table { --row-h: 44px; }
  .details-table.with-thumbs { --row-h: 52px; }
  .row-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .row-thumb { flex-basis: 36px; width: 36px; height: 40px; }
  .details-table .row-check { flex-basis: 36px; width: 36px; height: 44px; }
  .details-table .row-check .frame-check-mark { width: 22px; height: 22px; padding: 2px; }
  .detail-row { scroll-margin-top: 36px; }
}

/* Loading skeleton, empty-state action, thumbnail states */
.skeleton { padding: 6px 12px; }
.skeleton-row { height: 22px; margin: 0 0 2px; background: var(--raised); animation: skeleton 1.4s ease-in-out infinite alternate; }
.skeleton-row:nth-child(3n) { width: 82%; }
.skeleton-row:nth-child(3n + 1) { width: 94%; }
@keyframes skeleton { from { opacity: 0.45; } to { opacity: 1; } }
.empty-state button { margin-top: 16px; }
.thumb-retry { color: var(--amber); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.frame-stage[data-status="paused"] .developing-mark, .frame-stage[data-status="stalled"] .developing-mark { animation: none; }
.modal-check { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; cursor: pointer; }
.modal-check input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--amber); }
.multi-note { margin-top: 8px; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.lightbox-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: min(70vw, 420px); aspect-ratio: 4 / 5; max-height: calc(100dvh - 120px); background: var(--stage); color: var(--muted); }
.lightbox-stage .file-symbol svg { width: 84px; height: 92px; }
.lightbox-stage .folder-symbol { width: 84px; height: 66px; }
#upload-login { min-height: 36px; padding: 0 10px; }
.sheet-handle { display: none; }
.search-toggle { display: none; }

/* Phones: a compact header (search folds into an icon), the preview as a draggable bottom sheet. */
@media (max-width: 767px) {
  .topbar { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0 6px; padding: 2px 12px; }
  .brand { grid-column: 1; grid-row: 1; min-height: 40px; }
  .search-toggle { display: inline-flex; grid-column: 2; grid-row: 1; min-height: 40px; min-width: 40px; padding: 8px; border-color: transparent; background: transparent; }
  .app-header.search-open .search-toggle { color: var(--amber); }
  .utility-nav { grid-column: 3; grid-row: 1; order: 0; gap: 0 14px; justify-self: start; }
  .utility-nav a { min-height: 40px; }
  .session { grid-column: 4; grid-row: 1; }
  .session button { min-height: 40px; padding: 0 8px; }
  .search-form { display: none; grid-column: 1 / -1; grid-row: 2; margin: 0 0 6px; }
  .app-header.search-open .search-form { display: flex; }
  .search-form input, .search-form button { min-height: 40px; }
  .head-row { flex-wrap: wrap; gap: 0 8px; padding: 4px 12px; min-height: 0; }
  .toolbar-toggle { min-height: 36px; }
  .crumb-nav { flex: 1 1 calc(100% - 120px); order: 0; }
  .breadcrumbs { min-height: 36px; }
  .breadcrumbs a { line-height: 36px; }
  .view-modes .segmented button, .check-toggle { min-height: 36px; }
  #item-count { margin-left: auto; }
  .action-bar { padding: 2px 12px; min-height: 0; }
  .action-buttons button { min-height: 44px; }
}
@media (max-width: 479px) {
  .brand { display: none; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .search-toggle { grid-column: 1; }
  .utility-nav { grid-column: 2; }
  .session { grid-column: 3; }
}
@media (max-width: 1023px) {
  .viewer { max-height: 60dvh; border-top: 1px solid var(--line-float); transition: transform 160ms ease-out; }
  .viewer.dragging { transition: none; }
  .sheet-handle { display: flex; justify-content: center; align-items: center; height: 22px; flex: none; cursor: grab; touch-action: none; background: var(--viewer); }
  .sheet-handle span { width: 40px; height: 4px; background: var(--line-strong); }
  .viewer-preview { height: min(32dvh, 280px); }
  .workspace:has(.viewer[data-state="one"]) .center-scroll { padding-bottom: 60dvh; }
}
/* Landscape phones: the preview is a compact side panel instead of a sheet over the list. */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .viewer { inset: var(--header-height) 0 0 auto; width: min(44vw, 340px); max-height: none; border-top: 0; border-left: 1px solid var(--line-float); }
  .sheet-handle { display: none; }
  .viewer-preview { height: min(34dvh, 200px); margin: 8px auto; }
  .workspace:has(.viewer[data-state="one"]) .center-scroll { padding-bottom: 16px; padding-right: min(44vw, 340px); }
  .tree-row { height: 36px; }
}
@media (max-width: 479px) {
  .content[data-section="folder"] #item-count { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .view-modes { flex: 1 1 auto; }
}
/* Short screens (a phone on its side): everything in the header gets a size that still fits. */
@media (max-width: 1023px) and (max-height: 520px) {
  .topbar { padding-top: 1px; padding-bottom: 1px; }
  .topbar input, .topbar .search-form button, .session button, .brand, .utility-nav a { min-height: 32px; }
  .root-nav { display: none; }
  .head-row { min-height: 28px; flex-wrap: nowrap; }
  .toolbar-toggle, .view-modes .segmented button, .check-toggle { min-height: 28px; }
  .breadcrumbs { min-height: 28px; }
  .breadcrumbs a { line-height: 28px; }
  .action-bar { padding-top: 1px; padding-bottom: 1px; }
  .action-buttons button { min-height: 36px; }
}
@media (max-width: 767px) {
  /* Folder name, view modes and actions share two lines instead of four. */
  .center-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0 12px; border-bottom: 1px solid var(--rule); }
  .head-row, .action-bar { display: contents; border-bottom: 0; }
  .toolbar-toggle { order: 0; }
  .crumb-nav, #view-title { order: 1; flex: 1 1 calc(100% - 120px); }
  .view-modes { order: 2; }
  #item-count { order: 3; }
  .selection-count { order: 4; }
  .action-buttons { order: 5; margin-left: auto; flex: 0 0 auto; }
  .search-filters { order: 6; flex: 1 1 100%; }
  .sheet-guide { order: 3; }
  .action-buttons button { min-height: 40px; }
}
@media (max-width: 479px) {
  .check-toggle { display: none; }
}
@media (max-width: 767px) { .action-buttons { min-height: 40px; } }
@media (max-width: 1023px) {
  /* The upload panel sits at the bottom, over the preview sheet: keep the sheet's last buttons reachable above it. */
  .upload-panel { max-height: 30dvh; }
  body:has(.upload-panel:not([hidden])) .viewer-body { padding-bottom: calc(30dvh + 8px); }
  /* With the preview sheet open its own buttons do the work: the bar keeps New folder and Upload. */
  .workspace:has(.viewer[data-state="one"]) :is(#act-rename, #act-move, #act-delete, #act-download, #act-clear) { display: none; }
}
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .workspace:has(.viewer[data-state="one"]) .center-head { margin-right: min(44vw, 340px); }
}
/* Touch: every target is at least 44px (rows stay 44px, the tree and the toggles follow). */
@media (pointer: coarse) {
  .tree-row { height: 44px; }
  .tree-toggle { height: 44px; flex-basis: 32px; width: 32px; }
  .toolbar-toggle, .panel-head .icon-button { min-height: 44px; min-width: 44px; }
  .details-table .row-check { flex-basis: 44px; width: 44px; }
  .details-table th { height: 44px; }
  .sort-button { min-height: 44px; }
}
@media (max-width: 767px) {
  .search-filters { gap: 4px 8px; padding: 4px 12px; flex-wrap: nowrap; order: 6; }
  .search-filters label { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 0; font-size: 0.75rem; }
  .search-filters select { min-height: 36px; width: 100%; max-width: none; }
}
@container center (max-width: 560px) {
  .action-bar { flex-wrap: nowrap; }
  .action-buttons button { padding-left: 6px; padding-right: 6px; }
  #act-clear { display: none; }
}
@media (max-width: 1023px) and (max-height: 520px) {
  .content[data-section="folder"] #item-count { display: none; }
}

/* Invitation page and the Admin users section */
.invite-form input[readonly] { color: var(--muted); border-color: var(--rule); cursor: default; }
.invite-hint { margin: -8px 0 12px; padding: 0 0 0 18px; color: var(--muted); font-size: 0.8125rem; }
.invite-hint li { margin-bottom: 2px; }
.invite-toggle { justify-self: start; margin-top: 0; }
.invite-error { min-height: 1.5em; margin-top: 8px; color: var(--marker-text); font-size: 0.875rem; }
.login-intro[data-state="error"] { color: var(--marker-text); font-weight: 600; }
.people-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); }
.people-item { display: grid; grid-template-columns: minmax(0, 1fr) 12rem minmax(0, 1.4fr) 15rem; align-items: center; gap: 4px 14px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--rule-faint); font-size: 0.875rem; }
.people-name { font-weight: 600; overflow-wrap: anywhere; }
.people-meta { color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.people-state[data-off="true"] { color: var(--marker-text); font-weight: 600; }
.people-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.people-actions button { min-height: 32px; padding: 4px 10px; }
.people-empty { padding: 10px 0; color: var(--muted); font-size: 0.875rem; }
.admin-subhead { margin: 18px 0 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.invite-link-field { display: grid; gap: 6px; }
.invite-link-field textarea { width: 100%; padding: 9px 12px; resize: none; color: var(--ink); background: var(--well); border: 1px solid var(--field-line); border-radius: 2px; font-family: Consolas, ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; caret-color: var(--amber); }
.invite-note { color: var(--muted); font-size: 0.8125rem; max-width: 65ch; }
.invite-copied { min-height: 1.4em; color: var(--done); font-size: 0.8125rem; }
@media (max-width: 767px) {
  .people-item { grid-template-columns: minmax(0, 1fr) auto; }
  .people-item .people-meta { grid-column: 1 / -1; }
  .people-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* "Carpetas" sits in the top bar beside Recientes; on phones and tablets it opens the drawer with the roots and the Papelera. */
.nav-folders { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--rule); background: var(--raised); color: var(--ink); font-size: 0.875rem; font-weight: 600; white-space: nowrap; flex: none; }
.nav-folders[hidden] { display: none; }
.nav-folders .icon { width: 18px; height: 18px; flex: none; }
.tree { flex: 0 1 auto; }
.tree-extra { flex: none; border-top: 1px solid var(--rule-soft); padding: 2px 0 24px; }
.tree-special { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 18px; color: var(--ink); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tree-special:hover { background: var(--row-hover); }
.tree-special:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tree-special[aria-current] { background: var(--raised); outline: 1px solid var(--marker); outline-offset: -1px; }
@media (max-width: 1023px) {
  .nav-folders::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  /* The drawer only picks the main folder; the subfolders are browsed in the main view. */
  .tree-top .tree-group, .tree-toggle { display: none; }
  .tree-top > .tree-item > .tree-row { padding-left: 14px; }
  .tree-top > .tree-item.is-current-root > .tree-row { background: var(--raised); outline: 1px solid var(--marker); outline-offset: -1px; }
  .tree-row, .tree-special { height: 44px; font-size: 0.9375rem; }
  .tree-special { padding-left: 14px; gap: 2px; }
  .tree-extra { padding-bottom: 12px; }
}
@media (max-width: 767px) {
  .nav-folders, .utility-nav a { min-height: 40px; }
  .nav-folders { padding: 0 8px; gap: 5px; }
}
@media (max-width: 479px) {
  .utility-nav { gap: 0 8px; }
}
@media (min-width: 1024px) and (pointer: fine) {
  .nav-folders { min-height: 28px; }
}
@media (max-width: 1023px) and (max-height: 520px) {
  .nav-folders { min-height: 32px; }
}
@media (max-width: 380px) {
  .nav-folders::after { display: none; }
}
@media (max-width: 350px) {
  .nav-folders .icon { display: none; }
}

/* Affordance layer: everything that can be clicked has a visible edge and fill, never only a colour change.
   Placed last so it wins over the flat variants above; sizes stay with the rules that set them. */
.utility-nav a, .session button, .search-toggle, .toolbar-toggle, .panel-head .icon-button, .quiet,
.upload-head button, .breadcrumbs a, .sort-button, .notice-actions a {
  border: 1px solid var(--rule); border-radius: 2px; background: var(--raised); color: var(--ink);
}
.utility-nav a:hover, .session button:hover, .search-toggle:hover, .toolbar-toggle:hover, .panel-head .icon-button:hover,
.quiet:hover, .upload-head button:hover, .breadcrumbs a:hover, .sort-button:hover, .notice-actions a:hover {
  background: var(--hover-fill); border-color: var(--line-strong); color: var(--ink);
}
.utility-nav a { padding: 0 12px; text-decoration: none; }
.utility-nav a[aria-current], .app-header.search-open .search-toggle { border-color: var(--amber); color: var(--amber-text); }
.session button { padding: 0 12px; }
.breadcrumbs a { padding: 0 8px; line-height: 24px; text-decoration: none; }
.breadcrumbs [aria-current] { border: 0; background: transparent; padding: 0 4px; }
.sort-button { width: calc(100% - 4px); margin: 0 2px; }
.notice-actions a { border-color: var(--amber); color: var(--amber-text); text-decoration: none; }
.toolbar-toggle[aria-pressed="true"] { border-color: var(--line-strong); }
.tree-top > .tree-item > .tree-row, .tree-special {
  margin: 3px 8px; border: 1px solid var(--rule); border-radius: 2px; background: var(--raised); color: var(--ink);
}
.tree-top > .tree-item > .tree-row:hover, .tree-special:hover { background: var(--hover-fill); border-color: var(--line-strong); }
.tree-top > .tree-item > .tree-row.is-current, .tree-special[aria-current] { border-color: var(--marker); outline: 0; }
.tree-special { padding-left: 8px; height: 26px; }
@media (max-width: 1023px) {
  .tree-top > .tree-item > .tree-row, .tree-special { margin: 6px 12px; padding-left: 12px; }
  .tree-top > .tree-item > .tree-row, .tree-special { height: 44px; }
  .tree-top > .tree-item.is-current-root > .tree-row { border-color: var(--marker); outline: 0; }
  .breadcrumbs a { line-height: 30px; }
}
@media (max-width: 479px) {
  .utility-nav a, .session button { padding: 0 8px; }
  .utility-nav { gap: 0 6px; }
}

/* Pinned folders ("Fijadas"), the pin button and the extra search filters. */
.pins { flex: none; max-height: 40%; overflow: auto; padding: 4px 0 6px; border-bottom: 1px solid var(--rule-soft); }
.pins h3 { margin: 4px 12px 2px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.pins-list { list-style: none; margin: 0; padding: 0; }
.pin-item { display: flex; align-items: stretch; margin: 3px 8px; border: 1px solid var(--rule); border-radius: 2px; background: var(--raised); }
.pin-item:hover { background: var(--hover-fill); border-color: var(--line-strong); }
.pin-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 8px; color: var(--ink); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pin-link .tree-name { overflow: hidden; text-overflow: ellipsis; }
.pin-link[aria-current] { color: var(--amber-text); }
.pin-item:has(.pin-link[aria-current]) { border-color: var(--marker); }
.pin-note { flex: none; color: var(--marker-text); font-size: 0.75rem; font-weight: 400; }
.pin-item.is-missing .tree-name { text-decoration: line-through; color: var(--muted); }
.pin-remove { min-height: 0; min-width: 28px; padding: 0 6px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--muted); }
.pin-remove:hover { background: var(--marker-wash); color: var(--marker-text); }
.pin-remove .icon { width: 12px; height: 12px; flex-basis: 12px; }
.pin-button .icon { width: 16px; height: 16px; flex-basis: 16px; }
.pin-button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber-text); }
.search-form #search-advanced { gap: 6px; padding: 0 12px; color: var(--ink); }
.search-form #search-advanced .icon { width: 16px; height: 16px; flex-basis: 16px; }
.search-filters input[type="date"], .search-filters input[type="text"] { width: auto; min-height: 28px; padding: 2px 8px; font-size: 0.875rem; }
.search-filters input[type="text"] { width: 12ch; }
.filter-range { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.filter-image { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.filter-image > button, .search-filters > .quiet { min-height: 28px; padding: 0 10px; font-size: 0.8125rem; }
.image-chip { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 2px; border: 1px solid var(--amber); border-radius: 2px; color: var(--amber-text); font-size: 0.8125rem; font-weight: 600; }
.image-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 1px; background: var(--film); }
.image-chip button { min-height: 28px; padding: 0 8px; font-size: 0.8125rem; }
@media (max-width: 1023px) {
  .pin-link { height: 44px; font-size: 0.9375rem; padding-left: 12px; }
  .pin-item { margin: 6px 12px; }
  .pin-remove { min-width: 44px; }
  .pin-button { min-height: 36px; }
}
@media (max-width: 767px) {
  .search-filters { flex-wrap: wrap; }
  .search-filters label { flex: 1 1 42%; }
  .search-filters input[type="date"], .search-filters input[type="text"] { width: 100%; min-height: 36px; }
  .filter-range { flex: 1 1 100%; }
  .filter-range label { flex: 1 1 42%; }
  .filter-image, .search-filters > .quiet { flex: 1 1 100%; }
  .filter-image > button, .image-chip button, .search-filters > .quiet { min-height: 40px; }
}
.filters-toggle { display: none; }
@media (max-width: 767px) {
  .content[data-section="search"] .filters-toggle { display: inline-flex; min-height: 36px; padding: 0 12px; }
  .search-filters.is-collapsed { display: none; }
}