:root{
  --bg:#03070d;
  --panel:#07111d;
  --panel2:#0a1726;
  --line:#193047;
  --text:#eaf4ff;
  --muted:#91a3b9;
  --green:#20e070;
  --blue:#1aa3ff;
  --yellow:#ffd21a;
  --purple:#a844ff;
  --orange:#ff8d22;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at top,#0b1827,#03070d 48%,#010309);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
.app{width:min(100%,980px);margin:0 auto;padding:8px}
.top{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px;background:rgba(3,10,17,.96)}
.hamb{font-size:30px;color:#dce8f5}
h1{margin:0;color:var(--green);font-size:25px}
p{margin:4px 0;color:var(--muted)}
select,button,input{background:#081423;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px}
button{cursor:pointer}
button.active,.active{background:#119747!important;color:#fff!important;box-shadow:0 0 18px rgba(32,224,112,.25)}
.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(8,19,32,.98),rgba(3,9,16,.98));border-radius:14px;padding:14px;margin:10px 0;box-shadow:0 16px 45px rgba(0,0,0,.3)}
.audioCard{display:grid;grid-template-columns:1fr 1.7fr;gap:12px;align-items:center}
.fileBox input{width:100%;margin:8px 0}
#processBtn{width:100%;background:#125bba;font-weight:bold}
#wave{width:100%;border-radius:12px;background:#030910}
#status{grid-column:1/-1;color:#a9bbce;font-family:monospace}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.control{margin:0;min-height:150px}
.speedRow{display:grid;grid-template-columns:50px 1fr 50px;gap:8px;align-items:center;margin:10px 0}
.speedRow strong{text-align:center;color:var(--green);font-size:36px}
.control input[type=range]{width:100%;accent-color:var(--green)}
.minmax{display:flex;justify-content:space-between;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr}
.timeInputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.switch{display:flex;gap:8px;align-items:center;color:#c9d7e7}
.countBtns{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sectionHead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sectionHead h2{margin:0;font-size:17px}
.stage{height:440px;position:relative;overflow:hidden;border-radius:13px;background:#03070d;border:1px solid #102336}
#guitarBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
#stageSvg{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
#noteLayer{position:absolute;inset:0;z-index:40;pointer-events:none}
.marker{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;text-shadow:0 1px 3px #000;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 18px currentColor,0 0 30px currentColor}
.marker.doubtful{border-style:dashed;opacity:.75}
.tech-picado{background:var(--blue);color:var(--blue)}
.tech-bordón{background:var(--green);color:var(--green)}
.tech-arpegio{background:var(--purple);color:var(--purple)}
.tech-rasgueo{background:#ff164a;color:#ff164a}
.tech-trémolo,.tech-tremolo{background:var(--yellow);color:var(--yellow)}
.tech-ligado{background:var(--orange);color:var(--orange)}
.tech-nota{background:#d9dde4;color:#d9dde4}
.pima{position:absolute;right:3.4%;top:35%;z-index:45;display:grid;gap:9px}
.pima div{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0d4f86;border:2px solid #49b9ff;color:#dff4ff;font-weight:bold;box-shadow:0 0 14px rgba(0,150,255,.65)}
.pima div.on{background:#0af;box-shadow:0 0 24px #14aaff,0 0 40px #14aaff}
.stringNames{position:absolute;left:4%;bottom:18%;z-index:45;display:grid;gap:6px;font-weight:bold}
.stringNames span{height:18px;color:#dceaff}
.readout{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.readout div{border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;background:#06111e}
.readout small{display:block;color:var(--muted)}
.readout b{font-size:18px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:8px}
.tabs button{border:0;background:transparent;color:#9fb1c5;border-radius:0}
#tabCanvas,#timeline{width:100%;display:block;background:#02070d;border:1px solid var(--line);border-radius:8px;margin:8px 0}
.transport{display:grid;grid-template-columns:auto auto 44px 56px 44px 44px 44px 1fr 120px;gap:10px;align-items:center}
.transport b:first-child{color:var(--green);font-size:24px}
.play{background:var(--green);border-radius:50%;height:56px}
.tempo{font-size:12px;color:#c8d7e8}
.tempo b{color:var(--green)}
.bottom{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 0}
.bottom button{border:0;border-radius:0;background:#06111e;color:#8fa3b9;padding:14px}
@media(max-width:760px){
  .app{padding:4px}
  .top{grid-template-columns:auto 1fr auto}
  .top select{max-width:135px}
  .top .icon{display:none}
  h1{font-size:20px}
  .audioCard{grid-template-columns:1fr}
  .controls{grid-template-columns:1fr 1fr}
  .stage{height:360px}
  .readout{grid-template-columns:repeat(3,1fr)}
  .transport{grid-template-columns:1fr 42px 56px 42px 42px 42px;gap:6px}
  .transport .tempo,.transport input[type=range],#duration{display:none}
}

/* FLAMENCO_TAB_V8_DP_VISUAL_OVERRIDE */
.stage,
.guitar-stage,
.fretboard-stage,
#stage,
#stage3d {
  min-height: 560px !important;
  height: clamp(560px, 72vh, 860px) !important;
}

@media (max-width: 760px) {
  .stage,
  .guitar-stage,
  .fretboard-stage,
  #stage,
  #stage3d {
    min-height: 500px !important;
    height: 62vh !important;
  }

  .main-grid,
  .app-grid,
  .layout,
  main {
    gap: 8px !important;
  }
}

/* El objetivo V8 es que mande la guitarra, no los botones. */
.controls,
.top-controls,
.panel-controls {
  max-height: 38vh;
  overflow: auto;
}