:root{--bg:#f7f7f2;--panel:#ffffff;--card:#f4f3ee;--hov:#eae8df;--field:#f1f0ea;--hov2:#ebe9e1;--line:#e4e4de;--field2:#e7e5dd;--hov3:#e6e3d9;--border:#d9d9d1;--text:#17161b;--text2:#4a5666;--muted:#5b6575;--ph:#8a909c;--muted2:#7b8492;--brand:#1b1147;--brand-strong:#2e1d6e;--brand-ink:#fcfcfa;--accent:#f59148;--accent-strong:#d9702f;--accent-ink:#2a1103;--sel:#e7e2f6;--selText:#2e1d6e;--star:#e8882f;--danger:#b13a3a;--on-color:#fcfcfa;--c-folder:#6d5ce0;--c-home:#2e1d6e;--c-drive:#3d5f80;--c-shared:#4a6b45;--c-recent:#8a4257;--c-starred:#d9702f;--c-trash:#b13a3a;--k-doc:#3d5f80;--k-xls:#4a6b45;--k-ppt:#d9702f;--k-pdf:#b13a3a;--k-img:#8a4257;--k-zip:#6b6459;--k-other:#7b8492;--hovIcon:rgba(27,17,71,.07);--shadow:0 1px 3px rgba(23,22,27,.12)}
:root[data-theme="oscuro"]{--bg:#131120;--panel:#1a1829;--card:#221f35;--hov:#2e2a46;--field:#221f35;--hov2:#262238;--line:#2a2740;--field2:#322e4c;--hov3:#322e4c;--border:#4b4670;--text:#eceaf5;--text2:#c6c1dd;--muted:#a39ec0;--ph:#908ab0;--muted2:#8d87ad;--brand:#8b7bff;--brand-strong:#a699ff;--brand-ink:#14102b;--accent:#f59148;--accent-strong:#ffa663;--accent-ink:#2a1103;--sel:#332a63;--selText:#d6cdff;--star:#f8a860;--danger:#e06a6a;--on-color:#fcfcfa;--c-folder:#9b8cff;--c-home:#9b8cff;--c-drive:#7aa6cc;--c-shared:#86b87f;--c-recent:#d98ca3;--c-starred:#f8a860;--c-trash:#e08080;--k-doc:#5b86b0;--k-xls:#6a9463;--k-ppt:#e8894a;--k-pdf:#cf5a5a;--k-img:#b4657f;--k-zip:#8d8577;--k-other:#9a95b5;--hovIcon:rgba(255,255,255,.08);--shadow:0 1px 3px rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}
button{font:inherit}
input::placeholder{color:var(--ph)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--field2);border-radius:10px;border:2px solid var(--panel)}

.shell{height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr)}
header{display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 24px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:var(--brand-ink);flex:none}
.brand{font-size:21px;font-weight:500;letter-spacing:-0.01em}
.av{flex:none;border-radius:50%;display:grid;place-items:center;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--on-color)}
.icbtn{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center}
.icbtn:hover{background:var(--hovIcon)}
.body{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:0}
aside{display:flex;flex-direction:column;padding:8px 12px 16px;min-height:0;overflow:auto}
.pill{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 18px;border:0;border-radius:16px;background:var(--field);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;box-shadow:var(--shadow);align-self:flex-start;margin:0 0 8px 4px}
.pill:hover{background:var(--hov3)}
.pill.accent{background:var(--accent);color:var(--accent-ink);margin-bottom:16px}
.pill.accent:hover{background:var(--accent-strong)}
nav{display:flex;flex-direction:column;gap:2px}
.nav{display:flex;align-items:center;gap:16px;height:40px;padding:0 16px 0 18px;border:0;border-radius:20px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
.nav:hover{background:var(--hov2)}
.nav.on,.nav.on:hover{background:var(--sel);color:var(--selText);font-weight:600}
.sep{height:1px;background:var(--line);margin:8px 12px}
main{margin:0 16px 16px 0;background:var(--panel);border-radius:20px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.top{padding:20px 32px 16px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--line)}
.welcome{text-align:center;font-size:26px;padding-top:8px}
.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:22px}
.crumb{border:0;background:transparent;padding:4px 10px;border-radius:8px;font-size:22px;color:var(--muted);cursor:pointer}
.crumb:hover{background:var(--field);color:var(--text)}
.crumb.last{color:var(--text);cursor:default}
.crumb.last:hover{background:transparent}
.crumbs>span:first-child .crumb{margin-left:-10px}
.search{display:flex;align-items:center;gap:14px;height:48px;padding:0 20px;border-radius:24px;background:var(--field);width:100%;max-width:720px;align-self:center;cursor:text}
.search:focus-within{background:var(--field2)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px}
.chips{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:36px}
.chip{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;font-weight:500;cursor:pointer}
.chip:hover{background:var(--hov2)}
.chip.on{padding:0 14px 0 10px;border-color:transparent;background:var(--sel);color:var(--selText)}
.selbar{display:flex;align-items:center;gap:4px;min-height:36px;padding:0 6px 0 4px;border-radius:18px;background:var(--field);align-self:center;width:100%;max-width:720px}
.txtbtn{height:28px;padding:0 14px;border-radius:14px;border:0;background:transparent;color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap}
.txtbtn:hover{background:var(--hovIcon)}
.xbtn{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;flex:none}
.xbtn:hover{background:var(--hovIcon)}
.content{flex:1;overflow:auto;padding:12px 32px 32px}
.content.drag{outline:2px dashed var(--accent);outline-offset:-10px;border-radius:12px}
.sechead{display:flex;align-items:center;justify-content:space-between;height:48px;margin-top:8px}
.secbtn{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;border:0;border-radius:18px;background:transparent;color:var(--text);font-size:16px;font-weight:500;cursor:pointer}
.secbtn:hover{background:var(--hovIcon)}
.chev{transition:transform .15s}
.chev.closed{transform:rotate(-90deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.fcard{display:flex;align-items:center;gap:14px;height:56px;padding:0 16px;border-radius:12px;cursor:pointer;user-select:none;background:var(--card)}
.fcard:hover{background:var(--hov)}
.tile{border-radius:12px;background:var(--card);cursor:pointer;user-select:none;overflow:hidden}
.tile:hover{background:var(--hov)}
.fcard.on,.tile.on,.fcard.on:hover,.tile.on:hover{background:var(--sel)}
.badge{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:8px;font-weight:600;letter-spacing:.02em;color:var(--on-color)}
.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;flex:1;min-width:0}
.tilehead{display:flex;align-items:center;gap:12px;height:48px;padding:0 4px 0 14px}
.tilefoot{display:flex;align-items:center;gap:10px;padding:12px 14px}
.tilefoot span.act{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev{margin:0 10px;aspect-ratio:16/10;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:repeating-linear-gradient(135deg,var(--field) 0 8px,var(--hov2) 8px 16px)}
.prev img{width:100%;height:100%;object-fit:cover}
.prev span{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted2)}
.starbtn{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;color:var(--muted2)}
.starbtn:hover{background:var(--hovIcon)}
.starbtn.on{color:var(--star)}
.rows>div{display:grid;grid-template-columns:minmax(0,1fr) 160px 140px 90px 40px;gap:16px;align-items:center;height:48px;padding:0 12px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.rows .head{height:40px;font-size:13px;font-weight:500;color:var(--muted);cursor:default}
.rows .row:hover{background:var(--hov)}
.rows .row.on,.rows .row.on:hover{background:var(--sel);border-radius:8px}
.rows .cell{display:flex;align-items:center;gap:12px;min-width:0}
.rows .dim{color:var(--muted)}
.seg{display:flex;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.seg button{width:48px;height:32px;border:0;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--text)}
.seg button.on{background:var(--sel);color:var(--selText)}
.empty{padding:64px 0;text-align:center}
.empty b{display:block;font-size:18px;font-weight:500}
.empty span{font-size:14px;color:var(--muted)}
.storage{margin-top:auto;padding:16px 16px 0}
.storage .track{height:4px;border-radius:4px;background:var(--field2);overflow:hidden}
.storage .fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:4px}
.modal{margin:auto;border:0;padding:0;background:transparent;width:min(420px,calc(100vw - 32px));color:var(--text)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal[open]{animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal form{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 16px 48px rgba(0,0,0,.28)}
.modal h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-0.01em;overflow-wrap:anywhere}
.modal .note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.modal input{height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--border);background:var(--field);color:var(--text);font:inherit;outline:0}
.modal input:focus{border-color:var(--accent)}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.modal .txtbtn{height:40px;padding:0 18px;border-radius:12px}
.modal .primary{height:40px;padding:0 20px}
.modal .primary.danger{background:var(--danger);color:#fff}
.modal .primary:disabled{opacity:.45;cursor:default}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--line);padding:10px 18px;border-radius:12px;font-size:13px;z-index:9}
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:380px;background:var(--panel);border-radius:20px;padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.authcard input{height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--border);background:var(--field);color:var(--text);font:inherit;outline:0}
.authcard input:focus{border-color:var(--accent)}
.primary{height:44px;border:0;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-weight:600;cursor:pointer}
.primary:hover{background:var(--brand-strong)}
.err{color:var(--danger);font-size:13px;min-height:18px}
.modal select{height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:var(--field);color:var(--text);font:inherit;outline:0;cursor:pointer}
.modal select:focus{border-color:var(--accent)}
.pill:disabled{opacity:.45;cursor:default;box-shadow:none}
.pill:disabled:hover{background:var(--field)}
.pill.accent:disabled:hover{background:var(--accent)}

/* ---------- cajón lateral (móvil) ---------- */
.userchip{display:flex;align-items:center;gap:9px;padding:3px 14px 3px 3px;border-radius:20px;background:var(--field);max-width:230px}
.whoami{font-size:13px;font-weight:500;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menubtn{display:none}
.drawer{margin:0;border:0;padding:0;background:var(--bg);color:var(--text);
        width:276px;max-width:85vw;height:100dvh;max-height:100dvh}
.drawer::backdrop{background:rgba(0,0,0,.45)}
.drawer[open]{animation:slidein .16s ease-out}
@keyframes slidein{from{transform:translateX(-100%)}}
.drawer aside{height:100dvh;padding-top:52px}
.drawerclose{position:absolute;top:8px;right:8px;z-index:1}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .menubtn{display:grid}
  .body{grid-template-columns:minmax(0,1fr)}
  .body>aside{display:none}
  main{margin:0 8px 8px}
  .top{padding:14px 16px 12px;gap:12px}
  .content{padding:12px 16px 24px}
  .welcome{font-size:22px}
  .crumbs,.crumb{font-size:18px}
  /* filas sin envolver: se desplazan en horizontal */
  .chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scroll-padding:0 16px}
  .selbar{overflow-x:auto}
  .chips>*,.selbar>*{flex:none}
  .selbar .nm{max-width:45vw}
  .chips::-webkit-scrollbar,.selbar::-webkit-scrollbar{display:none}
  .chips,.selbar{scrollbar-width:none}
  /* lista: fuera Propietario y Tamaño */
  .rows>div{grid-template-columns:minmax(0,1fr) 110px 40px;gap:12px}
  .rows>div>:nth-child(2),.rows>div>:nth-child(4){display:none}
}

/* ---------- teléfono ---------- */
@media (max-width:560px){
  header{padding:0 8px 0 10px}
  .brand{font-size:18px}
  .userchip{padding:0;background:transparent}
  .whoami{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .welcome{font-size:20px}
  .crumbs,.crumb{font-size:17px}
  .search{height:44px;padding:0 16px;gap:10px}
  .search input{font-size:16px}  /* menos de 16px hace zoom en iOS */
  .content{padding:8px 12px 24px}
  .top{padding:12px 12px 10px}
  /* lista: solo nombre y estrella */
  .rows>div{grid-template-columns:minmax(0,1fr) 40px}
  .rows>div>:nth-child(3){display:none}
  .tilehead{height:44px;padding:0 2px 0 10px;gap:8px}
  .tilefoot{padding:10px}
  .prev{margin:0 8px}
}
.welcome b{font-weight:500;color:var(--accent-strong)}