/* Extracted from index.html */
#files-view{
--pp-bg:#0a0913;--pp-surface:#13121d;--pp-surface-2:#191826;
--pp-border:rgba(255,255,255,.07);--pp-border-strong:rgba(255,255,255,.14);
--pp-fg:#f5f3ff;--pp-muted:#a1a1aa;--pp-muted-2:#71717a;
--pp-primary:#8b5cf6;--pp-primary-2:#6366f1;--pp-primary-3:#6d28d9;
--pp-primary-glow:rgba(139,92,246,.55);--pp-accent:#e9d5ff;
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(99,102,241,.10),transparent 55%),var(--pp-bg);
color:var(--pp-fg);min-height:100vh;
}
#files-view .files-container{padding:0;display:block}
/* HERO */
#files-view .pp-hero{padding:18px 22px 6px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
#files-view .pp-hero h1{
margin:10px 0 0;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.02em;
background:linear-gradient(135deg,#fff 0%,#c4b5fd 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#files-view .pp-hero p{margin:6px 0 0;color:var(--pp-muted);font-size:13.5px;max-width: 100%;line-height:1.55}
#files-view .pp-badge{
display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.30);
color:var(--pp-accent);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
#files-view .pp-badge .pp-dot{width:6px;height:6px;border-radius:50%;background:var(--pp-primary-2);box-shadow:0 0 8px var(--pp-primary-2)}
/* TOOLBAR PREMIUM */
#files-view .files-toolbar{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;padding:18px 22px 8px}
#files-view .files-toolbar{grid-template-columns:1fr}#files-view .ftool-btn.primary-tool{grid-column:auto}
#files-view .ftool-btn{
position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
gap:14px;min-height:152px;padding:18px 18px 16px;border-radius:18px;cursor:pointer;
background:linear-gradient(180deg,var(--pp-surface-2) 0%,var(--pp-surface) 100%);
border:1px solid var(--pp-border);overflow:hidden;isolation:isolate;
transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease;
font-family:inherit;color:var(--pp-fg);text-align:left;
}
#files-view .ftool-btn::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
#files-view .ftool-btn::after{
content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent 70%);
opacity:0;transitionãopacity .3s ease;z-index:-1;
}
#files-view .ftool-btn:hover{transform:translateY(-3px);border-color:var(--pp-primary);box-shadow:0 18px 40px -22px rgba(139,92,246,.5)}
#files-view .ftool-btn:hover::after{opacity:1}
#files-view .ftool-btn .pp-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.25);color:var(--pp-accent)}
#files-view .ftool-btn .pp-ico svg{width:20px;height:20px}
#files-view .ftool-btn .pp-title{font-size:15px;font-weight:700;color:var(--pp-fg);letter-spacing:-.01em}
#files-view .ftool-btn .pp-desc{font-size:12px;color:var(--pp-muted);line-height:1.45;margin-top:3px}
#files-view .ftool-btn .pp-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--pp-accent);letter-spacing:.02em}
#files-view .ftool-btn .pp-cta svg{width:14px;height:14px;transition:transform .25s ease}
#files-view .ftool-btn:hover .pp-cta svg{transform:translateX(3px)}
#files-view .ftool-btn.primary-tool{
background:radial-gradient(600px 200px at 0% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(135deg,#6d28d9 0%,#8b5cf6 55%,#6366f1 100%);
border-color:transparent;
box-shadow:0 18px 50px -16px var(--pp-primary-glow),0 1px 0 rgba(255,255,255,.22) inset;
}
#files-view .ftool-btn.primary-tool::before{background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 50%)}
#files-view .ftool-btn.primary-tool .pp-ico{background:#fff;border-color:rgba(255,255,255,.9);color:var(--pp-primary);width:52px;height:52px;border-radius:14px;box-shadow:0 8px 22px -8px rgba(0,0,0,.35)}
#files-view .ftool-btn.primary-tool .pp-ico svg{width:24px;height:24px;stroke:var(--pp-primary)}
#files-view .ftool-btn.primary-tool .pp-title{color:#fff;font-size:20px;font-weight:800}
#files-view .ftool-btn.primary-tool .pp-desc{color:rgba(255,255,255,.92);font-size:13px}
#files-view .ftool-btn.primary-tool .pp-cta{color:#fff;background:rgba(0,0,0,.28);padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
#files-view .ftool-btn.primary-tool .pp-tag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 10px;border-radius:999px;background:#fff;color:var(--pp-primary);border:1px solid rgba(255,255,255,.6);text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
#files-view .ftool-btn.primary-tool:hover{transform:translateY(-3px);box-shadow:0 26px 60px -16px var(--pp-primary-glow),0 1px 0 rgba(255,255,255,.28) inset}
#files-view .ftool-btn.primary-tool::after{display:none}
/* FILTROS — pills no estilo Organizadas */
#files-view #folder-type-filter{
display:flex;flex-wrap:wrap;gap:8px;padding:8px;margin:22px 22px 6px;
border:1px solid var(--pp-border);border-radius:14px;background:var(--pp-surface);
}
#files-view #folder-type-filter .ftype-btn{
padding:8px 14px;border-radius:10px;border:1px solid transparent;background:transparent;
color:var(--pp-muted);font-size:12.5px;font-weight:600;cursor:pointer;
transition:all .2s ease;display:inline-flex;align-items:center;gap:7px;font-family:inherit;
}
#files-view #folder-type-filter .ftype-btn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7}
#files-view #folder-type-filter .ftype-btn:hover{color:var(--pp-fg);background:rgba(255,255,255,.03)}
#files-view #folder-type-filter .ftype-btn.active{color:#fff;background:linear-gradient(135deg,var(--pp-primary),var(--pp-primary-2));box-shadow:0 6px 18px -6px var(--pp-primary-glow)}
/* SECTION TITLE */
#files-view .files-section-title{margin:22px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#files-view .files-section-title>span:first-child{font-size:13px;font-weight:600;color:var(--pp-muted);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
#files-view .files-section-title>span:first-child::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,var(--pp-primary),transparent)}
/* BREADCRUMB */
#files-view #files-breadcrumb{margin:18px 22px 0;font-size:12px;color:var(--pp-muted)}
#files-view #files-breadcrumb .file-back-btn{
display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;
background:var(--pp-surface);border:1px solid var(--pp-border);color:var(--pp-fg);
font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;
}
#files-view #files-breadcrumb .file-back-btn:hover{border-color:var(--pp-border-strong);background:var(--pp-surface-2)}
#files-view #files-crumb-name{color:var(--pp-accent)!important}
/* CONTAINER PRINCIPAL */
#files-view #files-main-content{padding:0 22px 22px}
/* Extracted from index.html */
#files-view{
--pp-bg:#0a0913;--pp-surface:#13121d;--pp-surface-2:#191826;
--pp-border:rgba(255,255,255,.07);--pp-border-strong:rgba(255,255,255,.14);
--pp-fg:#f5f3ff;--pp-muted:#a1a1aa;--pp-muted-2:#71717a;
--pp-primary:#8b5cf6;--pp-primary-2:#6366f1;--pp-primary-3:#6d28d9;
--pp-primary-glow:rgba(139,92,246,.55);--pp-accent:#e9d5ff;
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(99,102,241,.10),transparent 55%),var(--pp-bg);
color:var(--pp-fg);min-height:100vh;
}
#files-view .files-container{padding:0;display:block}
/* HERO */
#files-view .pp-hero{padding:18px 22px 6px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
#files-view .pp-hero h1{
margin:10px 0 0;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.02em;
background:linear-gradient(135deg,#fff 0%,#c4b5fd 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#files-view .pp-hero p{margin:6px 0 0;color:var(--pp-muted);font-size:13.5px;max-width: 100%;line-height:1.55}
#files-view .pp-badge{
display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.30);
color:var(--pp-accent);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
#files-view .pp-badge .pp-dot{width:6px;height:6px;border-radius:50%;background:var(--pp-primary-2);box-shadow:0 0 8px var(--pp-primary-2)}
/* TOOLBAR PREMIUM */
#files-view .files-toolbar{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;padding:18px 22px 8px}
#files-view .files-toolbar{grid-template-columns:1fr}#files-view .ftool-btn.primary-tool{grid-column:auto}
#files-view .ftool-btn{
position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
gap:14px;min-height:152px;padding:18px 18px 16px;border-radius:18px;cursor:pointer;
background:linear-gradient(180deg,var(--pp-surface-2) 0%,var(--pp-surface) 100%);
border:1px solid var(--pp-border);overflow:hidden;isolation:isolate;
transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease;
font-family:inherit;color:var(--pp-fg);text-align:left;
}
#files-view .ftool-btn::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
#files-view .ftool-btn::after{
content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent 70%);
opacity:0;transitionãopacity .3s ease;z-index:-1;
}
#files-view .ftool-btn:hover{transform:translateY(-3px);border-color:var(--pp-primary);box-shadow:0 18px 40px -22px rgba(139,92,246,.5)}
#files-view .ftool-btn:hover::after{opacity:1}
#files-view .ftool-btn .pp-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.25);color:var(--pp-accent)}
#files-view .ftool-btn .pp-ico svg{width:20px;height:20px}
#files-view .ftool-btn .pp-title{font-size:15px;font-weight:700;color:var(--pp-fg);letter-spacing:-.01em}
#files-view .ftool-btn .pp-desc{font-size:12px;color:var(--pp-muted);line-height:1.45;margin-top:3px}
#files-view .ftool-btn .pp-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--pp-accent);letter-spacing:.02em}
#files-view .ftool-btn .pp-cta svg{width:14px;height:14px;transition:transform .25s ease}
#files-view .ftool-btn:hover .pp-cta svg{transform:translateX(3px)}
#files-view .ftool-btn.primary-tool{
background:radial-gradient(600px 200px at 0% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(135deg,#6d28d9 0%,#8b5cf6 55%,#6366f1 100%);
border-color:transparent;
box-shadow:0 18px 50px -16px var(--pp-primary-glow),0 1px 0 rgba(255,255,255,.22) inset;
}
#files-view .ftool-btn.primary-tool::before{background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 50%)}
#files-view .ftool-btn.primary-tool .pp-ico{background:#fff;border-color:rgba(255,255,255,.9);color:var(--pp-primary);width:52px;height:52px;border-radius:14px;box-shadow:0 8px 22px -8px rgba(0,0,0,.35)}
#files-view .ftool-btn.primary-tool .pp-ico svg{width:24px;height:24px;stroke:var(--pp-primary)}
#files-view .ftool-btn.primary-tool .pp-title{color:#fff;font-size:20px;font-weight:800}
#files-view .ftool-btn.primary-tool .pp-desc{color:rgba(255,255,255,.92);font-size:13px}
#files-view .ftool-btn.primary-tool .pp-cta{color:#fff;background:rgba(0,0,0,.28);padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
#files-view .ftool-btn.primary-tool .pp-tag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 10px;border-radius:999px;background:#fff;color:var(--pp-primary);border:1px solid rgba(255,255,255,.6);text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
#files-view .ftool-btn.primary-tool:hover{transform:translateY(-3px);box-shadow:0 26px 60px -16px var(--pp-primary-glow),0 1px 0 rgba(255,255,255,.28) inset}
#files-view .ftool-btn.primary-tool::after{display:none}
/* FILTROS — pills no estilo Organizadas */
#files-view #folder-type-filter{
display:flex;flex-wrap:wrap;gap:8px;padding:8px;margin:22px 22px 6px;
border:1px solid var(--pp-border);border-radius:14px;background:var(--pp-surface);
}
#files-view #folder-type-filter .ftype-btn{
padding:8px 14px;border-radius:10px;border:1px solid transparent;background:transparent;
color:var(--pp-muted);font-size:12.5px;font-weight:600;cursor:pointer;
transition:all .2s ease;display:inline-flex;align-items:center;gap:7px;font-family:inherit;
}
#files-view #folder-type-filter .ftype-btn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7}
#files-view #folder-type-filter .ftype-btn:hover{color:var(--pp-fg);background:rgba(255,255,255,.03)}
#files-view #folder-type-filter .ftype-btn.active{color:#fff;background:linear-gradient(135deg,var(--pp-primary),var(--pp-primary-2));box-shadow:0 6px 18px -6px var(--pp-primary-glow)}
/* SECTION TITLE */
#files-view .files-section-title{margin:22px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#files-view .files-section-title>span:first-child{font-size:13px;font-weight:600;color:var(--pp-muted);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
#files-view .files-section-title>span:first-child::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,var(--pp-primary),transparent)}
/* BREADCRUMB */
#files-view #files-breadcrumb{margin:18px 22px 0;font-size:12px;color:var(--pp-muted)}
#files-view #files-breadcrumb .file-back-btn{
display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;
background:var(--pp-surface);border:1px solid var(--pp-border);color:var(--pp-fg);
font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;
}
#files-view #files-breadcrumb .file-back-btn:hover{border-color:var(--pp-border-strong);background:var(--pp-surface-2)}
#files-view #files-crumb-name{color:var(--pp-accent)!important}
/* CONTAINER PRINCIPAL */
#files-view #files-main-content{padding:0 22px 22px}
.files-container { overflow-y: auto !important; height: 100%; }