/* ---------- Tuto ---------- */
.sub2{font-size:18px;margin:26px 0 10px}
.canciones{display:grid;gap:8px}
.cancion{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.cancion a{flex:1;min-width:0;display:flex;flex-direction:column}
.cancion small{color:var(--soft);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacio{color:var(--soft);font-size:15px;text-align:center;padding:2px 0}
.aviso{margin:0 0 12px;text-align:center;font-size:14px;color:var(--ok);background:var(--okbg);border-radius:12px;padding:8px}
.paso{display:flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;line-height:1.2;margin-bottom:6px}
.paso span{flex:0 0 30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center}
.tuto .link{display:block;margin:10px auto 0}
.tuto .tit{margin-bottom:10px}

/* Pasos arriba */
.pasos{display:flex;gap:4px;margin-bottom:14px}
.pasos button{flex:1;min-width:0;border:0;background:#ebe3f8;color:var(--soft);border-radius:10px;padding:7px 2px;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px}
.pasos button span{width:20px;height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.pasos button.ok{background:#f1e8ff;color:var(--p)}
.pasos button.act{background:var(--grad);color:#fff}
.pasos button.act span{color:var(--p)}
.pasos button:disabled{opacity:.5;cursor:default}

/* Chips de acordes elegidos */
.tchip{position:relative;cursor:pointer}
.tchip.suelto b{font-size:19px}
.tchip .quitar{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:#fff;color:var(--soft);font-size:11px;box-shadow:0 2px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}

/* Paso 1: notas */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 12px}
.slot{position:relative;min-height:58px;border:2px dashed #d9d0ea;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.slot small{font-size:12px;color:var(--soft);line-height:1.2}
.slot b{font-family:'Poppins',sans-serif;font-size:22px;color:var(--p)}
.slot.lleno{border-style:solid;border-color:#e3d4fd;background:#f6efff}
.slot.act{border-color:var(--p);box-shadow:0 0 0 3px #efe6ff}
.slot .xs{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--soft);font-size:11px;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.teclado{position:relative;display:flex;height:150px;margin:6px 0 12px;user-select:none;-webkit-user-select:none}
.tecla{border:0;padding:0;font:inherit;-webkit-tap-highlight-color:transparent}
.tecla.blanca{flex:1;background:#fff;border:1px solid #d9d0ea;border-radius:0 0 10px 10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:13px;font-weight:700;color:var(--soft)}
.tecla.negra{position:absolute;top:0;width:9%;height:60%;background:#241a35;border-radius:0 0 8px 8px;color:#cfc4e6;font-size:9px;line-height:1.15;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;z-index:2}
.tecla.sel.blanca{background:color-mix(in srgb,var(--p) 18%,#fff);border-color:var(--p);color:var(--p)}
.tecla.sel.negra{background:var(--p);color:#fff}
.tecla:active{filter:brightness(.92)}
.voz{display:flex;flex-direction:column;align-items:center;gap:8px}
.vozinfo{text-align:center}
.vnota{font-family:'Poppins',sans-serif;font-size:40px;font-weight:800;color:#f59e0b;line-height:1.1;text-align:center}
.vnota.ok{color:var(--ok)}
.no{color:var(--no);font-size:14px}
.o{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
.o::before,.o::after{content:"";flex:1;height:1px;background:var(--line)}
.mel{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.mel .barra{width:100%}
.melnotas{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;align-items:baseline;font-family:'Poppins',sans-serif;font-weight:800;color:var(--p);margin-bottom:4px}

/* Paso 2: botonera por filas */
.frow{border:1px solid var(--line);border-radius:16px;padding:10px;margin-top:10px}
.frow.lejos{opacity:.6}
.fhead{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:8px;gap:8px}
.cuenta{font-size:12px;font-weight:800;color:var(--ok);background:var(--okbg);padding:2px 8px;border-radius:99px;white-space:nowrap}
.fchips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ac{--c:#7c3aed;display:flex;flex-direction:column;align-items:center;line-height:1.1;border:2px solid color-mix(in srgb,var(--c) 40%,#fff);background:color-mix(in srgb,var(--c) 9%,#fff);border-radius:12px;padding:7px 2px;-webkit-tap-highlight-color:transparent;transition:transform .1s}
.ac b{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;color:var(--c)}
.ac small{font-size:11.5px;font-weight:700;color:var(--soft)}
.ac:active{transform:scale(.95)}
.ac.extra{border-style:dashed}
.ac.ult{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 35%,#fff);transform:translateY(-2px)}
.ac.va{background:var(--okbg);border-color:var(--ok)}
.ac.va small{color:var(--ok)}
.ac.va small::after{content:" ✓"}
.vabar{position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;gap:10px;background:var(--dark);color:#fff;border-radius:16px;padding:10px 10px 10px 16px;margin:0 0 14px;box-shadow:0 12px 30px -10px rgba(31,16,51,.6)}
.vabar span{flex:1;min-width:0;font-size:14px}
.vabar b{font-family:'Poppins',sans-serif;font-size:18px}
.vabar .btn{background:linear-gradient(135deg,#22c55e,#16a34a);white-space:nowrap}
.vabar .btn:disabled{background:#4b3d66;color:#b9b0d6}

/* Paso 3: tonalidades */
.tonos{display:grid;gap:8px;margin-top:8px}
.tono-f{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:14px;padding:10px}
.tono-f.elegida{border-color:var(--ok);background:var(--okbg)}
.casa{flex:0 0 42px;height:42px;border-radius:12px;border:0;background:#f1e8ff;font-size:20px;transition:transform .15s}
.casa.sonando{transform:scale(1.12);background:#e3d4fd}
.tono-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tono-t b{font-size:15px}
.tono-t small{color:var(--soft);font-size:12px}
.pbar{height:6px;border-radius:99px;background:#ebe3f8;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--grad)}
.btn.elegirT{padding:9px 12px;font-size:14px;min-width:68px}
.tono-f.elegida .btn.elegirT{background:var(--ok)}

/* Paso 4: cifrado */
.cifrado{background:#fcfaff;border:1px solid var(--line);border-radius:14px;padding:10px;margin:10px 0}
.parte{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p);margin:6px 0 4px}
.parte:not(:first-child){margin-top:14px;padding-top:10px;border-top:2px dashed #e3d4fd}
.verso{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 4px 4px 10px;border-radius:12px;margin-bottom:6px;border-left:3px solid #e3d4fd}
.verso.act{border-left-color:var(--p)}
.verso.act{background:#f1e8ff}
.hueco{min-height:52px;border:2px dashed #e3d4fd;border-radius:12px}
.verso.act .hueco:first-of-type,.verso.act .hueco:nth-child(1){border-color:var(--p2)}
.ccif{min-width:0;padding:6px 4px;cursor:pointer}
.ccif b{font-size:21px;color:var(--c)}
.ccif small{font-weight:700;color:var(--ink);font-size:12px}
.ccif.raro{border-style:dashed}
.cifrado.chico .ccif b{font-size:17px}
.ctrl{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;margin-bottom:6px}
.ctrl .btn{padding:11px 4px;font-size:14px}
.paleta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.paleta .grado{cursor:pointer}
.raros{background:#fffbeb;border-radius:12px;padding:10px 12px;margin:10px 0 12px;font-size:14px}
.raros p{margin-bottom:4px}
.raros a{color:var(--p);text-decoration:underline}
.transp{border-top:1px dashed var(--line);padding-top:12px;margin-top:10px}
.transp label{display:flex;align-items:center;gap:8px;justify-content:center;font-size:14px;font-weight:600;margin-bottom:10px;flex-wrap:wrap}
.transp select,.guardar input{font:inherit;font-size:15px;padding:8px 10px;border:1px solid #d9d0ea;border-radius:10px;background:#fff}
.guardar{display:flex;gap:8px;margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.guardar input{flex:1;min-width:0}

/* Paso 1 v3: grabar primero, piano para probar */
.paso.chico{font-size:16px}
.paso.chico span{background:#f1e8ff;font-size:16px}
.notabar{display:flex;align-items:center;gap:8px;background:#faf5ff;border-radius:14px;padding:8px 8px 8px 14px}
.notabar span{flex:1;min-width:0;font-size:14px}
.notabar b{font-family:'Poppins',sans-serif;font-size:18px;color:var(--p)}
.notabar #cantar{padding:10px 12px}
.notabar #elegir:disabled{opacity:.45}
.tecla.prob.blanca{background:#fff7e6;border-color:#f59e0b;color:#b45309}
.tecla.prob.negra{background:#f59e0b;color:#fff}
.tecla.sel.blanca{box-shadow:inset 0 -6px 0 var(--p)}
.elegidas{display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.nchip{position:relative;display:inline-flex;align-items:center;background:#f1e8ff;border:2px solid #e3d4fd;border-radius:12px;padding:6px 14px}
.nchip b{font-family:'Poppins',sans-serif;font-size:18px;color:var(--p)}
.nchip .xs{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:#fff;color:var(--soft);font-size:11px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.vok{font-size:14px;color:var(--ok);margin-top:6px}

/* Paso 3: tus acordes tocables */
.tusac{background:#faf5ff;border-radius:14px;padding:10px;margin:8px 0 10px}
.tusac .fila{margin-bottom:6px}

/* Paso 4 v3: capas, barra para agregar */
.capa{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin:14px 0 6px}
.paleta .grado.ult{box-shadow:0 0 0 3px var(--c);transform:translateY(-2px)}
.vabar.cif{margin-top:12px}
.vabar.cif #enter{background:#4b3d66;color:#fff;padding:12px 14px;font-size:18px;line-height:1}
.vabar.cif b{color:#fff}
.infoac{font-size:13px;color:var(--soft);text-align:center;min-height:4px;margin-bottom:6px}
.infoac a{color:var(--p);text-decoration:underline}
.ccif.largo b{font-size:16px}
.usando{font-size:13px;background:#faf5ff;border-radius:10px;padding:6px 10px;margin:6px 0 2px;text-align:center}
.link.inline{display:inline;margin:0;font-size:13px}
.pregunta{border:2px solid var(--p2);background:#fcfaff}
.roles{display:grid;gap:8px;margin-top:8px}
.rol{text-align:left;background:#faf5ff;border:2px solid transparent;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column}
.rol b{font-size:16px}
.rol small{color:var(--soft);font-size:13px}
.rol:hover{border-color:#c4a6fb}

/* Instructivo (demo guiada) */
.instr{border-color:#e3d4fd;background:#faf5ff}
.instr .botones{display:flex;gap:8px}
.instr .botones .btn{flex:1}
.verinstr{display:block;text-align:center;margin:12px auto 0}
.pantalla.demo{padding-bottom:calc(var(--dh,200px) + 24px)}
.pantalla.demo .vabar{bottom:calc(var(--dh,200px) + 10px)}
.demo-burbuja{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;z-index:40;background:var(--dark);color:#fff;border-radius:20px 20px 0 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -12px 34px rgba(31,16,51,.45)}
.demo-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#cfc4e6}
.demo-salir{background:none;border:0;color:#cfc4e6;font-size:12px;text-decoration:underline}
.demo-barra{height:4px;background:#3d3260;border-radius:4px;margin:8px 0 10px;overflow:hidden}
.demo-barra i{display:block;height:100%;background:#f5b301;border-radius:4px;transition:width .3s}
.demo-tit{font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;line-height:1.2;margin:0 0 4px}
.demo-txt{font-size:14.5px;line-height:1.4;color:#ebe5f7;margin:0 0 12px}
.demo-txt small{color:#b9b0d6}
.demo-btns{display:flex;gap:8px}
.demo-btns .btn{flex:1}
.demo-btns .btn.sec{flex:0 0 auto}
.demo-velo{position:fixed;inset:0;z-index:30;background:rgba(20,10,35,.62)}
.demo-foco{z-index:35 !important;outline:3px solid #f5b301;outline-offset:3px;border-radius:12px;animation:demoFoco 1.3s ease-in-out infinite}
.demo-foco:not(.vabar){position:relative}
.demo-fondo{background-color:#fff;box-shadow:0 0 0 6px #fff;outline-offset:8px}
.demo-txt a{color:#f5b301}
@keyframes demoFoco{50%{outline-color:rgba(245,179,1,.35)}}

/* Acordes de paso (½) */
.par{display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:0}
.ccif.medio{padding:6px 1px}
.ccif.medio b{font-size:16px}
.ccif.medio small{font-size:10.5px}
.vabar.cif #medio{background:#4b3d66;color:#fff;padding:12px 11px;font-size:16px;line-height:1}
.vabar.cif #medio.on{background:#f5b301;color:#1f1033}