/* Tokens de color/tipografía en assets/design-tokens.css.
     Estos alias solo traducen los nombres locales usados en este
     archivo a los tokens compartidos; no declaran valores nuevos. */
  :root{
    --bg: var(--void);
    --panel-a: var(--panel);
    --panel-b: var(--void-2);
    --border: var(--panel-border);
    --text: var(--ink);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family: var(--font-body);
    min-height:100vh;
    position:relative;
    padding:32px 20px 80px;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(124,92,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124,92,255,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
    z-index:0;
  }
  .wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;}

  .kicker{
    font-family: var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--holo-b);
    margin-bottom:10px;
  }
  h1{
    font-family: var(--font-display);
    font-weight:700;
    font-size:clamp(32px,6vw,52px);
    line-height:1;
    margin:0 0 8px;
    letter-spacing:0.02em;
  }
  h1 .holo{
    background: var(--holo-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .subtitle{
    color:var(--muted);
    font-size:14.5px;
    max-width:560px;
    margin-bottom:32px;
    line-height:1.5;
  }

  /* Mode toggle */
  .mode-toggle{
    display:flex;
    gap:2px;
    background:var(--panel-b);
    border:1px solid var(--border);
    width:fit-content;
    margin-bottom:28px;
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }
  .mode-btn{
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    background:transparent;
    color:var(--muted);
    border:none;
    padding:12px 22px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .mode-btn.active{
    color:var(--bg);
    background:linear-gradient(90deg,var(--holo-a),var(--holo-b));
  }
  .mode-btn:not(.active):hover{ color:var(--text); }

  /* Panels */
  .panel{
    background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
    border:1px solid var(--border);
    padding:22px;
    margin-bottom:20px;
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    position:relative;
  }
  .panel-title{
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .panel-title .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--holo-b);
    box-shadow:0 0 8px var(--holo-b);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .panel-title .dot{animation:none;} }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  /* Dropzone */
  .dropzone{
    border:1.5px dashed var(--border);
    padding:40px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--holo-b);
    background:rgba(41,224,214,0.04);
  }
  .dropzone svg{ stroke:var(--muted); margin-bottom:10px; }
  .dropzone .dz-title{
    font-family: var(--font-display);
    font-weight:600;
    font-size:16px;
    margin-bottom:4px;
  }
  .dropzone .dz-sub{
    font-family: var(--font-mono);
    font-size:10px;
    letter-spacing:0.08em;
    color:var(--muted);
    text-transform:uppercase;
  }

  /* Controls grid */
  .ctrl-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
  }
  .field label{
    display:block;
    font-family: var(--font-mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  select, input[type="number"], input[type="text"]{
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    font-family: var(--font-body);
    font-size:13px;
    padding:9px 10px;
    outline:none;
    transition:border-color .15s ease;
  }
  select:focus, input:focus{ border-color:var(--holo-b); }
  .field-row{ display:flex; gap:10px; align-items:center; }
  .export-opts{
    border-top:1px solid var(--border);
    margin-top:20px;
    padding-top:4px;
  }

  /* File slot card */
  .slot{
    position:relative;
    background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
    border:1px solid var(--border);
    padding:18px 18px 18px 20px;
    margin-bottom:14px;
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    transition:box-shadow .15s ease, border-color .15s ease;
    --rarity:#29b6f0;
  }
  .slot::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:3px;
    background:var(--rarity);
    box-shadow:0 0 10px var(--rarity);
  }
  .slot::after{
    content:"";
    position:absolute;
    top:0;right:0;
    width:16px;height:16px;
    border-top:1px solid var(--rarity);
    border-right:1px solid var(--rarity);
  }
  .slot .corner-bl{
    position:absolute;
    bottom:0;left:6px;
    width:16px;height:16px;
    border-bottom:1px solid var(--rarity);
    border-left:1px solid var(--rarity);
  }
  .slot:hover{
    border-color:var(--rarity);
    box-shadow:-4px 0 20px -6px var(--rarity);
  }

  .slot-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .slot-icon{
    width:42px;height:42px;
    flex:0 0 42px;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb, var(--rarity) 14%, transparent);
    border-radius:6px;
  }
  .slot-icon svg{ stroke:var(--rarity); }
  .slot-meta{ flex:1; min-width:0; }
  .slot-tag{
    font-family: var(--font-mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--rarity);
    margin-bottom:2px;
  }
  .slot-name{
    font-family: var(--font-display);
    font-weight:600;
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .slot-name-input{
    font-family: var(--font-display);
    font-weight:600;
    font-size:15px;
    color:var(--text);
    background:transparent;
    border:none;
    border-bottom:1px solid transparent;
    padding:2px 0;
    width:100%;
    outline:none;
    transition:border-color .15s ease;
  }
  .slot-name-input:hover{ border-bottom-color:var(--border); }
  .slot-name-input:focus{ border-bottom-color:var(--rarity); }
  .slot-remove{
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    width:30px;height:30px;
    cursor:pointer;
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s ease;
  }
  .slot-remove:hover{ border-color:#ff5c7c; color:#ff5c7c; }

  .waveform-wrap{
    position:relative;
    margin-bottom:12px;
    background:var(--bg);
    border:1px solid var(--border);
  }
  canvas.wave{
    display:block;
    width:100%;
    height:100px;
    cursor:default;
  }
  .trim-handle{
    position:absolute;
    top:0;bottom:0;
    width:10px;
    margin-left:-5px;
    cursor:ew-resize;
    z-index:3;
  }
  .trim-handle::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:4px;
    width:2px;
    background:var(--rarity);
    box-shadow:0 0 6px var(--rarity);
  }
  .trim-handle::after{
    content:"";
    position:absolute;
    top:-2px;left:0;
    width:10px;height:10px;
    background:var(--rarity);
    clip-path:polygon(50% 0,100% 100%,0 100%);
  }
  .trim-shade{
    position:absolute;
    top:0;bottom:0;
    background:rgba(10,11,15,0.72);
    z-index:2;
    pointer-events:none;
  }
  .playhead{
    position:absolute;
    top:0;bottom:0;
    width:2px;
    margin-left:-1px;
    background:#fff;
    box-shadow:0 0 8px #fff, 0 0 2px #fff;
    z-index:4;
    pointer-events:none;
    display:none;
  }
  .playhead::before{
    content:"";
    position:absolute;
    top:-1px;left:50%;
    width:8px;height:8px;
    transform:translateX(-50%);
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 6px #fff;
  }

  .slot-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
    font-family: var(--font-mono);
  }
  .mini-field{ flex:1; min-width:110px; }
  .mini-field label{
    display:block;
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
  }
  .mini-field input{
    padding:7px 8px;
    font-size:12px;
  }

  .play-btn{
    background:transparent;
    border:1px solid var(--rarity);
    color:var(--rarity);
    width:34px;height:34px;
    flex:0 0 auto;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s ease;
  }
  .play-btn:hover{ background:color-mix(in srgb, var(--rarity) 16%, transparent); }

  .override-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    font-family: var(--font-mono);
    font-size:9px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    cursor:pointer;
    user-select:none;
    margin-top:10px;
  }
  .override-toggle input{ accent-color:var(--holo-b); width:13px;height:13px; }

  /* Process button */
  .process-bar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:16px;
    margin-top:8px;
  }
  .status-text{
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--muted);
  }
  .btn-holo{
    font-family: var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--bg);
    background:linear-gradient(90deg,var(--holo-a),var(--holo-b));
    border:none;
    padding:14px 28px;
    cursor:pointer;
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition:filter .15s ease, transform .15s ease;
    display:flex;align-items:center;gap:10px;
  }
  .btn-holo:hover{ filter:brightness(1.1); transform:translateX(2px); }
  .btn-holo:disabled{ opacity:.4; cursor:not-allowed; filter:none; transform:none; }

  .empty-msg{
    color:var(--muted);
    font-size:13px;
    text-align:center;
    padding:20px;
  }

  footer{
    text-align:center;
    color:var(--muted);
    font-family: var(--font-mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:40px;
  }

  input[type="file"]{ display:none; }

  @media (max-width:640px){
    .slot-row{ flex-direction:column; align-items:stretch; }
    .mini-field{ min-width:0; }
  }