/* Apariencia aprobada; los recorridos y el movimiento siguen en las capas del piloto. */
:root {
  --canvas:#fff;--bg:#fff;--paper:#fff;--side:#f7f7f7;--soft:#f5f5f5;
  --ink:#242424;--muted:#595959;--line:#e4e4e4;--surface-edge:#e4e4e4;
  --glass:#ffffff45;--nav-glass:#ffffff73;--nav-edge:#24242415;
  --rim:#ffffff90;--surface-rim:none;--surface-shadow:none;
  --glass-shadow:0 8px 28px #00000008,inset 0 1px 0 #fff;
  --nav-shadow:0 8px 28px #00000008,inset 0 1px 0 #fff;
  --selection-fill:#ffffffc9;--selection-ink:#242424;
}
:root[data-theme=dark] {
  --canvas:#000;--bg:#080808;--paper:#101010;--side:#151515;--soft:#191919;
  --ink:#f3f3f3;--muted:#bdbdbd;--line:#292929;--surface-edge:#292929;
  --glass:#16161626;--nav-glass:#16161640;--nav-edge:#ffffff1c;
  --rim:#ffffff24;--surface-rim:none;--surface-shadow:none;
  --glass-shadow:0 8px 28px #0003,inset 0 1px 0 #ffffff24;
  --nav-shadow:0 8px 28px #0003,inset 0 1px 0 #ffffff24;
  --selection-fill:#ffffff18;--selection-ink:#f3f3f3;
}
body,:root[data-theme=dark] body {background:var(--canvas);background-image:none}
.sidebar {border-radius:26px;border-color:var(--nav-edge);background:var(--nav-glass);box-shadow:var(--nav-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.content {background:var(--bg);border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:26px}
.home-metric {border-color:var(--surface-edge);border-radius:22px;background:var(--bg);box-shadow:none}
.home-item-symbol,.avatar,:root[data-theme=dark] .home-item-symbol,:root[data-theme=dark] .avatar {box-shadow:none}
.nav>.selection-pill {background:var(--selection-fill);box-shadow:0 2px 8px #0000000a,inset 0 1px 0 var(--rim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav:has(>.selection-pill)>button:is(.active,[aria-current=page]),:root[data-theme=dark] .nav:has(>.selection-pill)>button.active {color:var(--selection-ink)}
.nav button.active,:root[data-theme=dark] .nav button.active {background:var(--selection-fill);color:var(--selection-ink);box-shadow:0 2px 8px #0000000a,inset 0 1px 0 var(--rim)}
.nav:has(>.selection-pill)>button.active,:root[data-theme=dark] .nav:has(>.selection-pill)>button.active {background:transparent;box-shadow:none}
.nav .pill-selected-label {color:var(--selection-ink)}
.folder-views,.segmented {border-color:var(--line);background:var(--soft)}
.search,.field input,.field select,.field textarea {border-radius:12px}
.loan-row,.browser-item,.theme-option {border-color:var(--line)}
.theme-option,.theme-preview {border-radius:16px}
.system-preview{position:relative;display:block}
.theme-half{position:absolute;inset:0;display:grid;grid-template-columns:25% 1fr;background:#fff;color:#222}
.theme-half.dark{background:#111;color:#eee;clip-path:polygon(100% 0,100% 100%,0 100%)}
dialog,dialog.drawer {background:var(--paper);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
dialog,:root[data-theme=dark] dialog {box-shadow:0 18px 60px #00000026}
dialog:not(.drawer) {border-radius:26px}
dialog::backdrop {background:#00000052}
.gate,.login-box {background:var(--bg);border-color:var(--line)}
.material-setting {margin-top:26px}
.material-setting h3 {font-size:14px;font-weight:550;margin:0 0 12px}
.material-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:520px;margin-top:16px}
.material-option {position:relative;display:grid;gap:12px;cursor:pointer;min-width:0;padding:8px;border:2px solid transparent;border-radius:20px}
.material-option input {position:absolute;opacity:0;width:1px;height:1px}
.material-option:has(input:checked) {border-color:var(--ink)}
.material-option:has(input:focus-visible) {outline:2px solid var(--accent);outline-offset:4px}
.material-label {position:relative;display:flex;align-items:center;min-height:44px;padding:4px 38px 4px 8px;font-size:14px;font-weight:550}
.material-label .theme-check {top:10px}
.material-option input:checked~.material-label .theme-check {background:var(--ink);color:var(--bg);border-color:var(--ink)}
.material-option input:checked~.material-label .theme-check svg {visibility:visible}
.material-preview {position:relative;display:block;isolation:isolate;aspect-ratio:1.66;overflow:hidden;border-radius:14px;background:#ededed;border:1px solid #20202018;color:#858b93}
.material-scene {position:absolute;inset:0;width:100%;height:100%;stroke:none;opacity:.6}
.scene-refracted {display:none}
[data-material-preview=glass] .scene-original {mask:url(#scb-material-outside)}
[data-material-preview=glass] .scene-refracted {display:block}
.material-sample {position:absolute;inset:18% 13.333%;display:flex;align-items:center;gap:12px;border-radius:20px;padding:16px;color:#303337;background:#fafafa;border:1px solid #20202020}
.material-sample>svg {width:26px;height:26px;stroke-width:1.4}
.material-sample>span {flex:1;display:grid;gap:8px}
.material-sample i {display:block;height:5px;border-radius:3px;background:currentColor;opacity:.5}
.material-sample i:last-child {width:65%;opacity:.25}
[data-material-preview=glass] .material-sample {background:linear-gradient(145deg,#ffffffa8,#ffffff0a 45%,#ffffff3d);border-color:#ffffffb3;box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #2d374848,0 8px 16px -8px #0000005c}
:root[data-theme=dark] .material-preview {background:#131416;border-color:#ffffff18;color:#79818d}
:root[data-theme=dark] .material-sample {background:#303236;color:#f0f0f2;border-color:#ffffff24}
:root[data-theme=dark] [data-material-preview=glass] .material-sample {background:linear-gradient(145deg,#ffffff24,#ffffff04 45%,#ffffff12);border-color:#ffffff38;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -2px 2px #0009,0 8px 16px -8px #000}
:root[data-material=solid] :is(.sidebar,.sidebar>.nav,.selection-pill,.material-options) {backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-material=solid] .sidebar,:root[data-material=solid] .sidebar>.nav {background:var(--side)}
:root[data-material=glass] {
  /* Lente, elegido en el laboratorio; Sólido conserva su material. */
  --panel-glass:#ffffff63;--control-glass:#ffffff14;--field-fill:var(--control-glass);
  --control-light:linear-gradient(145deg,#ffffffb3,#ffffff08 35%,#ffffff04 75%,#9aa4b526);
  --nav-glass:#ffffff26;--nav-edge:#ffffff80;--nav-shadow:inset 0 2px 1px -1px #fff,inset 1px 0 1px #fff,inset 0 -3px 3px -2px #47556b80,0 12px 32px -18px #00000080;
  --control-edge:#525e6d38;--control-shine:inset 0 2px 1px -1px #fff,inset 1px 0 1px #fff,inset 0 -3px 3px -2px #47556b66,0 4px 10px -7px #00000080;
  --optical-rim:linear-gradient(135deg,#fff 5%,#ffffff80 25%,#4e5c704d 47%,#ffffff1a 58%,#fff 78%,#52607166 100%);
}
:root[data-material=glass][data-theme=dark] {
  --panel-glass:#16161645;--control-glass:#ffffff08;--field-fill:var(--control-glass);
  --control-light:linear-gradient(145deg,#ffffff1a,#ffffff02 38%,#ffffff04 80%,#ffffff14);
  --nav-glass:#11111126;--nav-edge:#ffffff45;--nav-shadow:inset 0 2px 1px -1px #ffffffa3,inset 1px 0 1px #ffffff50,inset 0 -3px 3px -2px #000,0 12px 32px -18px #000;
  --optical-rim:linear-gradient(135deg,#ffffffa3,#ffffff14 30%,#00000070 48%,#ffffff0d 60%,#ffffff70 82%,#0006);
  --control-edge:#ffffff24;--control-shine:inset 0 2px 1px -1px #ffffff80,inset 1px 0 1px #ffffff30,inset 0 -3px 3px -2px #000,0 4px 10px -7px #000;
}
:root[data-material=glass] .content {background:transparent}
/* WebKit no desenfoca de forma consistente el fondo de un dialog nativo. */
:root[data-material=glass] body.modal-open #app {filter:blur(12px)}
:root[data-material=glass]:not([data-theme=dark]) dialog::backdrop{background:#ffffffd9}
:root[data-material=glass] :is(dialog,dialog.drawer,.login-box) {
  background:var(--panel-glass);border-color:var(--control-edge);
  box-shadow:var(--control-shine),0 18px 60px #00000026;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);isolation:isolate;
}
:root[data-material=glass] :is(.home-metric,.loan-row,.columns-browser,.calendar-panel,.btn,.icon-btn,.sheet-header>button,.home-item-symbol,.avatar,.theme-option,.checkbox,.form-preview,.confirm-track,.segmented,.folder-views,.search,.toolbar select,.field input,.field select,.field textarea) {
  background:var(--control-light),var(--control-glass);border-color:var(--control-edge);box-shadow:var(--control-shine);
}
:root[data-material=glass] .loan-row.is-overdue {--control-glass:color-mix(in srgb,#c15e50 12%,transparent)}
:root[data-material=glass] .loan-row.is-warning {--control-glass:color-mix(in srgb,#d7ad53 12%,transparent)}
:root[data-material=glass] .btn.primary {color:var(--ink);border-color:var(--control-edge)}
:root[data-material=glass] :is(.tabs,.tabs>.selection-pill,.mobile-filter select,.browser-filters>summary){background:var(--control-light),var(--control-glass);border-color:var(--control-edge);box-shadow:var(--control-shine)}
:root[data-material=glass] .tabs:has(>.selection-pill)>button{background:transparent;box-shadow:none;border-color:transparent}
:root[data-material=glass] .tabs .pill-selected-label,:root[data-material=glass] .tabs button.active{color:var(--ink)}
:root[data-material=glass] .sidebar{isolation:isolate;border-color:var(--control-edge);box-shadow:var(--control-shine);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-material=glass] .sidebar>.nav::after{display:none}
:root[data-material=glass] .confirm-track input {background:transparent;box-shadow:none}
:root[data-material=glass] .field select option {background:var(--bg);color:var(--ink)}
:root[data-material=glass] .field [aria-invalid=true] {border-color:var(--danger)}
:root[data-material=glass] .sheet-header {background:transparent}
:root[data-material=glass] .sheet-header::before {background:var(--canvas);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
:root[data-material=glass] .form-actions>.btn {background:transparent;box-shadow:none}
/* La lente afecta al fondo y al borde, nunca a las letras. */
:root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button,.home-metric,.loan-row,.form-preview,.confirm-track) {position:relative;isolation:isolate}
:root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button,.home-metric,.loan-row,.form-preview,.confirm-track,.sidebar,.sidebar>.nav)::after {
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:1;background:var(--optical-rim);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
:root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button)::before {
  content:"";position:absolute;inset:0;padding:6px;border-radius:inherit;pointer-events:none;z-index:-1;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:url(#scb-lens) blur(.5px);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px) {
  .sidebar {border:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .sidebar>.nav {background:var(--nav-glass);border-color:var(--nav-edge);box-shadow:var(--nav-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  :root[data-material=glass] .sidebar{box-shadow:none;isolation:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-material=glass] .sidebar::after{display:none}
  :root[data-material=glass] .sidebar>.nav{isolation:isolate;background:var(--control-light),color-mix(in srgb,var(--canvas) 68%,transparent);border-color:var(--control-edge);box-shadow:var(--control-shine);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  :root[data-material=glass] .sidebar>.nav::after{display:block;padding:1.5px}
  .content {border-radius:22px}
  .home-metric {border-radius:18px;box-shadow:none}
  .material-options {gap:12px}
  .material-option {padding:6px;gap:8px;border-radius:18px}
  .material-sample {padding:10px;gap:8px;border-radius:14px}
  .material-sample>svg {width:20px;height:20px}
}
.glass-refraction{position:absolute;inset:1px;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;filter:url(#scb-lens) blur(8px);opacity:.6}
.sidebar>.nav>.glass-refraction{opacity:.18}
:root:not([data-material=glass]) .glass-refraction{display:none}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .glass-refraction{display:none}
  .sidebar,.sidebar>.nav {background:var(--side);backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-material=glass] :is(.sidebar,.sidebar>.nav){background:var(--side);backdrop-filter:none;-webkit-backdrop-filter:none}
  .selection-pill,.nav>.selection-pill {background:var(--soft);backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-material=glass] {--panel-glass:var(--paper);--control-glass:var(--soft);--control-light:linear-gradient(var(--soft),var(--soft));--control-edge:var(--line);--control-shine:none}
  :root[data-material=glass] :is(dialog,dialog.drawer,.login-box,.sheet-header::before) {backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-material=glass] body.modal-open #app {filter:none}
  :root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button,.home-metric,.loan-row,.form-preview,.confirm-track,.sidebar,.sidebar>.nav)::after,:root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button)::before {display:none}
  :root[data-material=glass] :is(.loan-row.is-overdue,.loan-row.is-warning) {--control-glass:var(--soft)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass-refraction{display:none}
  .sidebar,.sidebar>.nav {background:var(--side)}
  :root[data-material=glass] :is(.sidebar,.sidebar>.nav){background:var(--side)}
  :root[data-material=glass] {--panel-glass:var(--paper);--control-glass:var(--soft);--control-light:linear-gradient(var(--soft),var(--soft));--control-shine:none}
  :root[data-material=glass] body.modal-open #app {filter:none}
  :root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button,.home-metric,.loan-row,.form-preview,.confirm-track,.sidebar,.sidebar>.nav)::after,:root[data-material=glass] :is(.btn,.icon-btn,.sheet-header>button)::before {display:none}
  :root[data-material=glass] :is(.loan-row.is-overdue,.loan-row.is-warning) {--control-glass:var(--soft)}
}
@media(prefers-contrast:more) {
  .sidebar,.sidebar>.nav,.home-metric,.material-options {border-color:var(--ink);box-shadow:none}
}

@media(prefers-reduced-motion:no-preference) {
  :root:not([data-input=keyboard]) .material-option {transition:border-color 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) .material-label .theme-check {transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) :is(.text-btn,.icon-btn,.court-result,.brand-home,.theme-preview,.checkbox input,.calendar .day-number) {transition:transform 140ms var(--ease-out),opacity 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) :is(.text-btn,.icon-btn,.court-result,.brand-home):not(:disabled):active {transform:scale(.97)}
  :root:not([data-input=keyboard]) .theme-option:active .theme-preview {transform:scale(.985)}
  :root:not([data-input=keyboard]) .checkbox:active input {transform:scale(.92)}
  :root:not([data-input=keyboard]) .calendar button:active .day-number {transform:scale(.92)}
  :root:not([data-input=keyboard]) .material-option .material-preview {transition:transform 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) .material-option:active .material-preview {transform:scale(.98)}
  :root:not([data-input=keyboard]) .search>svg {opacity:.65;transition:opacity 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) .search:focus-within>svg {opacity:1}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  :root:not([data-input=keyboard]) :is(.home-item,.notification-row)>svg:last-child {transition:transform 140ms var(--ease-out)}
  :root:not([data-input=keyboard]) :is(.home-item,.notification-row):hover>svg:last-child {transform:translateX(2px)}
}

/* Finder para todos los archivos; Material cambia solo el panel. */
:root {
  --file-matter-top:#cdd4df;--file-matter-bottom:#939dab;--file-back:#727e90;
  --file-case-top:#ffe398;--file-case-bottom:#e7b94b;--file-case-back:#bd8d25;
  --file-paper:#fcfcfa;--file-paper-back:#dce0e3;--file-page:#fff;
  --file-edge:#52545e42;--file-detail:#969ca6;--file-solid:var(--file-matter-bottom);--file-shadow:#00000012;
  --folder-opening:-12deg;
}
:root[data-theme=dark] {
  --file-matter-top:#c5ccd6;--file-matter-bottom:#8e99aa;--file-back:#677487;
  --file-case-top:#f8dc8a;--file-case-bottom:#d9aa3e;--file-case-back:#ac7e1e;
  --file-paper:#f1f2ef;--file-paper-back:#bec5cc;--file-page:#f8f8fa;
  --file-edge:#ffffff30;--file-detail:#a1a7b0;--file-shadow:#00000030;
}
.file-materials {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.file-solid-top {stop-color:var(--file-matter-top)}
.file-solid-bottom {stop-color:var(--file-matter-bottom)}
.case-solid-top {stop-color:var(--file-case-top)}
.case-solid-bottom {stop-color:var(--file-case-bottom)}
.case-art {--file-back:var(--file-case-back);--file-solid:var(--file-case-bottom)}
:root[data-theme] .folder-art .folder-back {fill:var(--file-back);stroke:none}
:root .folder-art .folder-paper {fill:var(--file-paper);stroke:#0000000d;stroke-width:.6}
:root .folder-art .folder-paper-back {fill:var(--file-paper-back)}
:root[data-theme] .folder-art .folder-front {fill:url(#scb-folder-solid);stroke:var(--file-edge);stroke-width:.65}
:root[data-theme] .case-art .folder-front {fill:url(#scb-case-solid)}
.folder-cover,.folder-paper {transform-box:fill-box;transform-origin:center bottom}
.file-glint {fill:none;stroke:url(#scb-file-rim);stroke-width:.9;stroke-linecap:round}
:root .document-symbol>.document-art {fill:none;stroke:none;width:32px;height:36px}
.document-art .document-page {fill:var(--file-page);stroke:#d7d8dd;stroke-width:.6}
.document-art .document-fold {fill:#e6e7eb;stroke:#d1d2d8;stroke-width:.6}
.document-art .document-lines {fill:none;stroke:var(--file-detail);stroke-width:1.8;stroke-linecap:round}
.folder-open .folder-art {width:96px;height:80px;filter:none}
.folders:not(.list) .folder-open {gap:12px;padding:16px 6px;min-height:158px}
.folder-item .more-btn {top:-12px;right:0;border-radius:50%}
.folder-item .more-btn svg {stroke-width:2.5}
.folders.list .folder-open .folder-art {width:52px;height:46px}
.browser-column .folder-symbol .folder-art {width:36px;height:32px;filter:none}
:root .document-tile .document-symbol>.document-art {width:76px;height:82px}
:root .browser-column .document-symbol>.document-art {width:30px;height:34px}
.folder-symbol>.notification-dot {top:16%;right:3px}
.document-symbol>.notification-dot {top:6%;right:5%}
.file-control:focus-visible>:is(.folder-symbol,.document-symbol),:where(.browser-column .row.selected)>.folder-symbol {border-radius:12px}
@media(hover:hover) and (pointer:fine) {
  .file-control:hover>:is(.folder-symbol,.document-symbol) {border-radius:12px}
  .folder-item .more-btn:hover {background:var(--soft)}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  :root:not([data-input=keyboard]) .folder-art :is(.folder-cover,.folder-paper) {transition:transform 180ms var(--ease-out)}
  :root:not([data-input=keyboard]) .file-control:hover .folder-cover {transform:perspective(240px) rotateX(var(--folder-opening))}
  :root:not([data-input=keyboard]) .file-control:hover .folder-paper {transform:translateY(-3px)}
  :root:not([data-input=keyboard]) .file-control:hover .folder-paper-back {transform:translateY(-4px)}
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px) {
  .folder-open .folder-art {width:76px;height:64px}
  .folders:not(.list) .folder-open {min-height:142px;gap:9px;padding:12px 2px}
  :root .document-tile .document-symbol>.document-art {width:58px;height:68px}
  .folder-item .more-btn {top:-16px;right:-5px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root[data-theme] .folder-art .folder-front {fill:var(--file-solid);stroke:var(--ink)}
  :root .document-art .document-page {stroke:var(--ink)}
  :root :is(.folder-art,.document-symbol>.document-art) {filter:none}
  .file-glint {display:none}
}