:root{
  --bg:#0a0a0a;--pane:#0e0e0e;--line:#222;--line2:#333;
  --text:#ececec;--dim:#8c8c8c;--faint:#5a5a5a;
  --warn:#ffb000;--bad:#ff5a4a;--ok:#57d38c;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bar:44px;--head:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:13px/1.35 var(--ui);overflow:hidden;
  display:grid;grid-template-rows:var(--bar) minmax(0,1fr);height:100vh;height:100dvh}
button,label{font:inherit;color:inherit}
[hidden]{display:none!important}

/* barra superior */
.bar{display:flex;align-items:center;gap:14px;padding:0 12px 0 14px;border-bottom:1px solid var(--line);min-width:0}
.mark{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--mono);letter-spacing:.22em;flex:none}
.pal{width:5px;height:20px;border-radius:1px;
  background:linear-gradient(to top,#000 0,#2a00d8 14%,#0048ff 28%,#00e0ff 42%,#00ff5a 50%,#d8ff00 62%,#ff9a00 80%,#ff0000 100%)}
.fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;
  color:var(--dim);font-size:12.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 13px;border-radius:5px;
  border:1px solid var(--line2);background:transparent;cursor:pointer;font-weight:550;font-size:12.5px;white-space:nowrap;
  position:relative;overflow:hidden;flex:none;user-select:none}
.btn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;width:100%;height:100%}
.btn.primary{background:#f2f2f2;color:#000;border-color:#f2f2f2}
.btn.primary:hover{background:#fff}
.btn.big{height:40px;padding:0 26px;font-size:14px}
.btn:focus-within{outline:2px solid #fff;outline-offset:2px}

/* dos mitades */
main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
.pane{display:grid;grid-template-rows:var(--head) minmax(0,1fr);min-width:0;min-height:0;container-type:inline-size}
.pane.spek{background:#000;border-right:1px solid var(--line)}
.pane.info{background:var(--pane)}
.phead{display:flex;align-items:center;gap:8px;padding:0 8px 0 10px;border-bottom:1px solid var(--line);min-width:0}
.sp{flex:1}
.acts{display:flex;gap:2px;flex:none;margin-left:auto}

.seg{display:flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden;flex:none}
.seg button{background:none;border:0;height:24px;padding:0 9px;font-size:11.5px;color:var(--dim);cursor:pointer;border-left:1px solid var(--line2)}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--text)}
.seg button.on{background:#1f1f1f;color:var(--text)}
.step{display:flex;align-items:center;border:1px solid var(--line2);border-radius:5px;height:26px;flex:none}
.step button{background:none;border:0;width:24px;height:24px;color:var(--dim);cursor:pointer;font-size:14px;line-height:1}
.step button:hover{color:var(--text)}
.step span{font:11.5px var(--mono);min-width:58px;text-align:center;color:var(--text)}
.readout{flex:1;min-width:0;font:11.5px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:right;padding-right:4px}
.ib{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:5px;border:1px solid transparent;
  background:none;color:var(--text);cursor:pointer;font-size:11.5px;font-weight:550;letter-spacing:.02em}
.ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ib:hover:not(:disabled){border-color:var(--line2);background:#161616}
.ib:disabled{color:var(--faint);cursor:default}
.ib.done{color:var(--ok)}
button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* espectrograma */
.stage{position:relative;min-width:0;min-height:0;overflow:hidden}
.stage canvas{position:absolute;left:0;top:0;display:block}
#ov{pointer-events:none}
#cv{touch-action:none}
.prog{position:absolute;left:0;right:0;top:0;height:2px;background:#161616}
.prog i{display:block;height:100%;width:0;background:#fff;transition:width .12s linear}
.prog.busy i{width:35%!important;animation:busy 1.1s ease-in-out infinite}
@keyframes busy{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
.status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:12px var(--mono);color:var(--dim);
  text-align:center;max-width:80%;pointer-events:none}
.status.err{color:var(--bad)}

/* información */
.body{overflow:auto;-webkit-overflow-scrolling:touch;min-height:0;padding:0 0 28px;overscroll-behavior:contain}
.empty{height:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px}
.hint{color:var(--dim);font-size:12.5px}
.fmts{color:var(--faint);font:10.5px var(--mono);letter-spacing:.06em;margin-top:10px;text-align:center}
.sec{padding:0 14px}
.sec h2{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:18px 0 8px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.sec h2 small{font:inherit;letter-spacing:.06em;color:var(--faint);text-transform:none;margin-left:auto}
.kv{display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr);column-gap:14px;padding:5px 0;border-bottom:1px solid #181818}
.kv dt{color:var(--dim)}
.kv dd{font:12px/1.45 var(--mono);overflow-wrap:anywhere;user-select:text}
.kv dd small{color:var(--dim);font:inherit}
.flags{list-style:none;padding:10px 0 2px;display:grid;gap:6px}
.flags li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:9px;align-items:baseline;font-size:12.5px}
.flags li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--faint);transform:translateY(0)}
.flags li.warn::before{background:var(--warn)}
.flags li.bad::before{background:var(--bad)}
.flags li.ok::before{background:var(--ok)}
.flags li.warn b{color:var(--warn)}
.flags li.bad b{color:var(--bad)}
.flags b{font-weight:600}
.flags span{color:var(--dim)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 18px}
.cell{padding:8px 0;border-bottom:1px solid #181818;min-width:0}
.cell .l{color:var(--dim);font-size:11.5px}
.cell .v{font:14px/1.3 var(--mono);margin-top:1px;white-space:nowrap}
.cell .v small{font-size:11px;color:var(--dim)}
.cell .v.warn{color:var(--warn)}
.pending{color:var(--faint);font:12px var(--mono);padding:12px 0}
#text{font:11.5px/1.5 var(--mono);padding:12px 14px;white-space:pre;color:var(--text);user-select:text;tab-size:4}

/* pantalla completa, arrastre, aviso */
.full{position:fixed;inset:0;background:#000;z-index:20}
.full canvas{position:absolute;left:0;top:0}
.full .close{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);border-color:var(--line2);width:34px;height:34px;justify-content:center;padding:0}
.dropveil{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;
  pointer-events:none;border:1px solid #fff}
.dropveil div{font:600 13px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;background:#f2f2f2;color:#000;
  padding:7px 14px;border-radius:5px;font-size:12.5px;font-weight:550;max-width:calc(100vw - 24px);text-align:center}
.toast.err{background:var(--bad);color:#000}

/* teléfono en vertical: arriba el espectrograma, abajo la información */
@media (max-width:820px) and (orientation:portrait),(max-width:560px){
  main{grid-template-columns:none;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .pane.spek{border-right:0;border-bottom:1px solid var(--line)}
  .bar{gap:10px}
}
/* según el ancho real de cada mitad, no el de la pantalla */
@container (max-width:600px){
  .readout{display:none}
}
@container (max-width:470px){
  .ib span{display:none}
  .ib{padding:0 7px}
  .seg button{padding:0 8px}
  .step span{min-width:54px}
}
@container (max-width:372px){
  .seg button{padding:0 6px;font-size:11px}
  .step span{min-width:50px;font-size:11px}
  .step button{width:20px}
  .ib{padding:0 5px}
}
@media (max-height:420px) and (orientation:landscape){
  :root{--bar:36px;--head:34px}
}

body.nofile #openBtn{display:none}
@media (hover:none){.hint{display:none}}

/* tags (productor, fechas, comentarios, software…) resaltados sobre lo técnico */
.kv.tag dt{color:var(--text)}
.kv.tag dd{color:#fff;font-weight:600}
.kv.tag{box-shadow:inset 2px 0 0 #fff;padding-left:9px;margin-left:-11px}
.kv.ck{grid-template-columns:64px minmax(0,1fr)}
.kv.ck dt{font:12px/1.45 var(--mono);color:var(--text);white-space:pre}
.ct{color:var(--dim);margin-top:2px}

/* 2026-10-12 movimiento (kit /_fx/): barrido al terminar el análisis, velo, avisos y paneles */
@media (prefers-reduced-motion: no-preference){
  .stage.scan::after{content:"";position:absolute;top:0;bottom:0;left:0;width:90px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 60%,rgba(255,255,255,.75) 98%,transparent);
    animation:spScan .9s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes spScan{from{transform:translateX(-90px)}to{transform:translateX(100vw);opacity:0}}
  .dropveil:not([hidden]){animation:fx-fade .15s ease-out}
  .dropveil:not([hidden]) div{animation:spPulse 1s ease-in-out infinite alternate}
  @keyframes spPulse{to{scale:1.06;letter-spacing:.22em}}
  .toast:not([hidden]){animation:spToast .2s cubic-bezier(.2,.7,.2,1)}
  @keyframes spToast{from{opacity:0;translate:0 10px}}
  .full:not([hidden]){animation:fx-fade .2s ease-out}
  .status:not([hidden]){animation:fx-fade .2s ease-out}
  .empty .btn.big{animation:spBreath 2.6s ease-in-out infinite}
  @keyframes spBreath{50%{box-shadow:0 0 0 7px rgba(255,255,255,.06)}}
  .seg button,.ib{transition:background .15s,color .15s,border-color .15s,scale .12s}
  .mark .pal{animation:spPal 6s linear infinite}
  @keyframes spPal{50%{filter:hue-rotate(40deg) brightness(1.15)}}
}