:root{
  --bg:#0b0d10; --panel:#0f141a; --panel-2:#0c1116; --text:#e8f0f7; --muted:#9fb3c8;
  --brand:#00fff8; --brand-2:#67fff9; --border:#18212a; --ok:#23d366; --shadow:0 14px 40px rgba(0,0,0,.35);
  --sun-1:#ffe7a1; --sun-2:#ffcc55; --sun-3:#ff9e3d; --sun-4:rgba(255,120,0,.60);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#090c10);color:var(--text);font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto}

.container{max-width:1152px;margin:0 auto;padding:0 18px}
.stack{display:grid;gap:18px;margin:18px auto}
.row{display:flex;gap:10px}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.spacer{flex:1 1 auto}

/* Header */
.app-header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(11,13,16,.7);border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:12px;padding:12px 0}
.logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--brand);
  background:radial-gradient(circle at 30% 30%, var(--brand), transparent 60%),linear-gradient(135deg,#0a2a2a,#0a0f14);
  box-shadow:0 0 0 1px #0aa,0 0 24px rgba(0,255,248,.25) inset;font-family:'Bebas Neue', cursive;font-size:20px}
.brand-text strong{font:700 16px/1 Inter}
.brand-text span{display:block;color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px}

/* Card */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);padding:16px}
.card h2{margin:0}
.folder-info{margin-top:8px;padding:10px 12px;background:#0a0f14;border:1px dashed var(--border);border-radius:12px}
.hidden{display:none}
.help{color:var(--muted);font-size:12px}

/* Dropzone */
.dropzone{
  margin-top:10px;border:1px dashed #0aa;border-radius:14px;padding:18px;
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#0a1217;transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dropzone .dz-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#0b2c2c,#081417);border:1px solid #0aa;color:var(--brand);font-weight:700;font-size:20px}
.dropzone .dz-text{flex:1 1 auto;min-width:240px}
.dropzone.dragover{background:#0e1a21;box-shadow:inset 0 0 0 1px rgba(0,255,248,.2); transform:scale(1.01)}
.dropzone .btn{white-space:nowrap}

/* Overlay drag */
.overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:28px;
  background:radial-gradient(1200px 1200px at center, rgba(0,255,248,.12), rgba(0,0,0,.75));
  backdrop-filter: blur(6px) saturate(1.1);
  z-index:9999; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.overlay:not(.hidden){opacity:1}
.overlay .overlay-text{display:grid;gap:6px;text-align:center}
.overlay .overlay-text .big{font-size:22px;font-weight:700;letter-spacing:.3px}
.overlay .overlay-text .small{color:var(--muted);font-size:13px}
.sun-wrap{position:relative;width:160px;height:160px;display:grid;place-items:center}
.sun-core{
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--sun-1) 0%, var(--sun-2) 35%, var(--sun-3) 75%, var(--sun-4) 100%);
  box-shadow:0 0 40px rgba(255,200,80,.35), 0 0 0 1px rgba(255,200,80,.35) inset;
  animation:pulse 1.6s ease-in-out infinite;
}
.sun-ring{position:absolute;border-radius:50%;border:2px solid rgba(255,200,80,.35)}
.sun-ring.ring1{width:120px;height:120px;animation:spin 8s linear infinite}
.sun-ring.ring2{width:140px;height:140px;animation:spin 10s linear infinite reverse}
.sun-ring.ring3{width:160px;height:160px;animation:spin 12s linear infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Step + controls */
.step{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#07191a;border:1px solid #0aa;color:var(--brand);font-weight:700}
.btn{appearance:none;border:1px solid var(--border);background:#0d161c;color:var(--text);
  padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;transition:box-shadow .15s ease, background .15s ease, transform .08s ease}
.btn:hover{box-shadow:0 0 0 1px var(--brand),0 0 18px rgba(0,255,248,.12) inset}
.btn:active{transform:translateY(1px)}
.btn.primary{border-color:#0aa;background:linear-gradient(180deg,#0b2c2c,#081417)}
.btn.primary.pulse{animation:glow .9s ease-in-out 1}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,200,80,.0)}30%{box-shadow:0 0 0 8px rgba(255,200,80,.18)}100%{box-shadow:0 0 0 0 rgba(255,200,80,.0)}}
.btn.sm{padding:8px 10px;border-radius:10px}

.input{width:100%;background:#0a0f14;border:1px solid var(--border);border-radius:12px;color:#fff;padding:10px 12px;outline:none}
.input:focus{box-shadow:0 0 0 2px rgba(255,200,80,.18)}
.field{display:grid;gap:6px}
.field.small{min-width:220px}
.muted{color:var(--muted)}

/* Preview (sin scroll extra en el barrido) */
.preview.code{
  width:100%; min-height:380px; max-height:560px;
  overflow:auto; background:#0a0f14; border:1px solid var(--border);
  border-radius:12px; color:#d6e3f0; font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:relative; contain: paint;
  overscroll-behavior: contain;
}
.preview.code code{ white-space:pre-wrap; word-break:break-word; }
.preview.building::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-top-left-radius:12px; border-top-right-radius:12px;
  background:linear-gradient(90deg, transparent, var(--sun-2), var(--sun-3), transparent);
  background-size:200% 100%; animation:shine-line 1.4s linear infinite;
}
/* ocultar scroll solo durante el flash */
.preview.shine{ overflow:hidden; }
.preview.shine::after{
  content:""; position:absolute; left:-40%; width:40%;
  top:0; bottom:0; pointer-events:none;
  background:linear-gradient(75deg, rgba(255,255,255,.00), rgba(255,255,255,.10), rgba(255,255,255,.00));
  transform:skewX(-12deg); animation:flashSweep .7s ease forwards;
}
@keyframes shine-line{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes flashSweep{to{left:120%}}

/* ——— Scrollbar bonito del PREVIEW ——— */
.preview.code::-webkit-scrollbar{width:12px}
.preview.code::-webkit-scrollbar-track{
  background:#0a0f14;border-left:1px solid var(--border);border-radius:10px
}
.preview.code::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,204,85,.35),rgba(255,158,61,.25));
  border:3px solid #0a0f14;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,200,80,.35)
}
.preview.code::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(255,204,85,.55),rgba(255,158,61,.35))
}
/* Firefox */
.preview.code{scrollbar-width:thin;scrollbar-color:rgba(255,204,85,.45) #0a0f14}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* Árbol */
.tree{list-style:none;margin:0;padding:8px 10px;border:1px solid var(--border);border-radius:12px;max-height:540px;overflow:auto;background:#0b1016}
.tree::-webkit-scrollbar{width:12px}
.tree::-webkit-scrollbar-track{background:#0b1016;border-left:1px solid var(--border);border-radius:10px}
.tree::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,255,248,.35),rgba(0,255,248,.18));
  border:3px solid #0b1016;border-radius:10px;box-shadow:inset 0 0 0 1px #0aa;
}
.tree::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(0,255,248,.55),rgba(0,255,248,.28))}
.tree{scrollbar-width:thin;scrollbar-color:#0aa #0b1016}
.tree ul{list-style:none;margin:0 0 0 22px;padding-left:18px;position:relative}
.tree ul::before{content:"";position:absolute;left:10px;top:0;bottom:0;border-left:1px dashed #1c2732}
.tree li{position:relative;margin:2px 0}
.tree li::before{content:"";position:absolute;left:10px;top:1.1em;width:12px;border-top:1px dashed #1c2732}
.row-item, summary{
  display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:10px;align-items:center;
  padding:6px 8px;border-radius:10px;transition:background .15s ease, box-shadow .15s ease;
  position:relative;
}
.row-item::before, summary::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:0px; border-radius:6px;
  background:linear-gradient(180deg,var(--sun-2),var(--sun-3)); transition:width .15s ease;
}
.row-item:hover::before, summary:hover::before{ width:3px }
.row-item:hover, summary:hover{
  background:linear-gradient(180deg,#101922,#0d151c);
  box-shadow:inset 0 0 0 1px rgba(0,255,248,.08);
}
summary{cursor:pointer} summary::-webkit-details-marker{display:none}

/* Caret + iconos */
.caret{display:inline-block;width:16px;text-align:center;color:#7aa6b0;transition:transform .15s ease;transform-origin:center}
details[open] > summary .caret{transform:rotate(90deg)}
.ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;position:relative}
.ico.folder{background:linear-gradient(180deg,#0a2a2a,#081417);border:1px solid #0aa}
.ico.folder svg{width:16px;height:16px;stroke:#00fff8;fill:none;stroke-width:1.8}
.ico.file{border:1px solid color-mix(in srgb, var(--c,#b7c9db),transparent 70%);
  background:linear-gradient(180deg,color-mix(in srgb, var(--c,#b7c9db),transparent 88%),color-mix(in srgb, var(--c,#b7c9db),transparent 94%))}
.ico.file svg{width:16px;height:16px;stroke:var(--c,#b7c9db);fill:none;stroke-width:1.6}
.ico.file svg .badge{fill:color-mix(in srgb, var(--c,#b7c9db),transparent 85%);stroke:color-mix(in srgb, var(--c,#b7c9db),transparent 55%)}

/* Texto y etiquetas */
.name{font-weight:600}
.path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d6e3f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.size{color:var(--muted);font-size:12px}
.tag{border:1px solid var(--border);padding:2px 6px;border-radius:999px;font-size:11px;color:#b1c2d3}

/* Footer + toast */
.app-footer{padding:18px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted)}
.heart{color:#ff7aa5}
.toast{position:fixed;right:16px;bottom:16px;min-width:200px;max-width:70ch;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#0a1a1a;color:#fff;box-shadow:var(--shadow);display:none;overflow:hidden}
.toast::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--sun-2),var(--sun-3));}
.toast.show{display:block}

/* Extensiones (colores) */
.ext-js{--c:#f7df1e} .ext-ts{--c:#3178c6} .ext-react{--c:#61dafb} .ext-html{--c:#e44d26}
.ext-css{--c:#2965f1} .ext-scss{--c:#c76494} .ext-json{--c:#cbcb41} .ext-md{--c:#b0b0b0}
.ext-yaml{--c:#6e8bff} .ext-xml{--c:#f26363} .ext-php{--c:#4f5b93} .ext-py{--c:#3776ab}
.ext-rb{--c:#cc0000} .ext-java{--c:#f89820} .ext-go{--c:#00add8} .ext-rs{--c:#dea584}
.ext-sql{--c:#e38c00} .ext-vue{--c:#41b883} .ext-svelte{--c:#ff3e00} .ext-astro{--c:#ffcc66}
.ext-sh{--c:#8bc34a} .ext-git{--c:#f05033} .ext-txt{--c:#b7c9db} .ext-pdf{--c:#e74c3c}