/* Oído Astuto · Explicaciones en "ideas" + gráficos */
.idea-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--soft);margin-bottom:8px}
.idea-top .saltear{background:none;border:0;color:var(--p);font-weight:700;font-size:13px;text-decoration:underline;white-space:nowrap}
.puntos{display:flex;gap:5px;margin-bottom:14px}
.puntos i{flex:1;height:6px;border-radius:99px;background:#ebe3f8;transition:background .2s}
.puntos i.ya{background:#c4a6fb}
.puntos i.ahora{background:var(--p)}
.idea{animation:ideaIn .28s ease}
.idea.atras{animation:ideaAtras .28s ease}
@keyframes ideaIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ideaAtras{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.idea h2{font-size:22px;font-weight:800;margin-bottom:10px}
.itexto p{font-size:16px;margin-bottom:10px}
.itexto p:last-child{margin-bottom:0}
.itexto b{color:var(--p)}
.igraf{margin:16px 0 6px}
.iaudio{margin-top:12px}
.iaudio .btn.isonando{background:var(--p);color:#fff}
.idea .cartelcasa{margin:16px 0 0}
.ideas-nav{display:flex;gap:10px}
.ideas-nav .btn{flex:1}
.ideas-nav .btn.grande{width:auto;flex:1.6;font-size:16px;padding:14px 10px;white-space:nowrap}
.ideas-nav .btn:disabled{opacity:.35;cursor:default}
.pie-g{font-size:12px;color:var(--soft);text-align:center;margin-top:6px}

/* SVG */
svg.g{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
svg.esc{max-width:480px;max-height:250px}
svg.tecl{max-width:340px}
.chips-g .grado small,.tabla-g .grado small{white-space:nowrap}
svg.solar{max-width:380px}
svg.contorno{max-width:320px}
.iej{margin-top:10px;text-align:center}
.iej .fila{margin-bottom:6px}
.iej .mini{margin:0}
.g g{transition:filter .12s}
.g .sonando{filter:drop-shadow(0 3px 7px rgba(31,16,51,.45)) brightness(1.12)}
.g .sonando rect,.g .sonando circle{stroke:#1f1033;stroke-width:3.5}

/* Chips */
.chips-g .fila{align-items:center;margin-bottom:8px}
.chips-g .fila:last-child{margin-bottom:0}
.rot-g{flex-basis:100%;text-align:center;font-size:12px;font-weight:700;color:var(--soft);letter-spacing:.03em;text-transform:uppercase;margin-bottom:-2px}
.fl-g{font-size:20px;font-weight:800;color:#b3a9c6}
.grado.dash{border-style:dashed;background:#fff}
.grado.chico{min-width:48px;padding:3px 6px}
.grado.chico b{font-size:16px}
.chips-g .grado{min-width:58px}

/* Funciones */
.func{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.func>div{border-top:4px solid var(--c);background:#faf5ff;border-radius:12px;padding:10px 4px;text-align:center}
.func h4{font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--c)}
.func .fila{gap:4px;margin:6px 0}
.func .grado{min-width:40px;padding:4px 5px;border-radius:10px}
.func .grado b{font-size:15px}
.func .grado small{font-size:10px}
.func p{font-size:12px;color:var(--soft);font-weight:600}

/* Tipos de acorde */
.tipos-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.tipos-g svg{max-width:150px}
.tipos-g h4{font-size:14px;margin-top:6px}
.tipos-g p{font-size:12px;color:var(--soft)}

/* Mapa de tonalidades */
.mapa-g{overflow-x:auto}
.mapa-g table{width:100%;border-collapse:separate;border-spacing:3px;font-size:13px;text-align:center}
.mapa-g th{font-family:'Poppins',sans-serif;color:#fff;border-radius:7px;padding:4px 2px}
.mapa-g tr th:first-child{background:none;color:var(--ink);font-family:'Inter',sans-serif;font-size:12px;white-space:nowrap;text-align:left}
.mapa-g td{border-bottom:3px solid;padding:4px 2px;font-weight:700;background:#faf5ff;border-radius:6px 6px 0 0}

/* Tabla */
.tabla-g{width:100%;border-collapse:collapse;font-size:14px}
.tabla-g th{text-align:left;font-size:12px;color:var(--soft);padding:4px 6px;border-bottom:2px solid var(--line)}
.tabla-g td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla-g td:first-child{width:64px}