body{--phonicscore-opensheetmusicdisplay__loading-spinner-color: #eb6101}.wp-block-phonicscore-opensheetmusicdisplay{padding:2px;min-height:100px;max-width:100%;overflow-x:hidden;overflow-y:auto}.phonicscore-opensheetmusicdisplay__render-block{margin-left:auto;margin-right:auto}.hide{display:none !important}.phonicscore-opensheetmusicdisplay__loading-spinner{margin:100px auto;font-size:25px;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;animation:spinner 1500ms infinite linear;box-shadow:#eb6101 1.5em 0 0 0,#eb6101 1.1em 1.1em 0 0,#eb6101 0 1.5em 0 0,#eb6101 -1.1em 1.1em 0 0,#eb6101 -1.5em 0 0 0,#eb6101 -1.1em -1.1em 0 0,#eb6101 0 -1.5em 0 0,#eb6101 1.1em -1.1em 0 0}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes load-animation{0%,100%{box-shadow:0em -2.6em 0em 0em #eb6101,1.8em -1.8em 0 0em rgba(235,97,1,.2),2.5em 0em 0 0em rgba(235,97,1,.2),1.75em 1.75em 0 0em rgba(235,97,1,.2),0em 2.5em 0 0em rgba(235,97,1,.2),-1.8em 1.8em 0 0em rgba(235,97,1,.2),-2.6em 0em 0 0em rgba(235,97,1,.5),-1.8em -1.8em 0 0em rgba(235,97,1,.7)}12.5%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.7),1.8em -1.8em 0 0em #eb6101,2.5em 0em 0 0em rgba(235,97,1,.2),1.75em 1.75em 0 0em rgba(235,97,1,.2),0em 2.5em 0 0em rgba(235,97,1,.2),-1.8em 1.8em 0 0em rgba(235,97,1,.2),-2.6em 0em 0 0em rgba(235,97,1,.2),-1.8em -1.8em 0 0em rgba(235,97,1,.5)}25%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.5),1.8em -1.8em 0 0em rgba(235,97,1,.7),2.5em 0em 0 0em #eb6101,1.75em 1.75em 0 0em rgba(235,97,1,.2),0em 2.5em 0 0em rgba(235,97,1,.2),-1.8em 1.8em 0 0em rgba(235,97,1,.2),-2.6em 0em 0 0em rgba(235,97,1,.2),-1.8em -1.8em 0 0em rgba(235,97,1,.2)}37.5%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.2),1.8em -1.8em 0 0em rgba(235,97,1,.5),2.5em 0em 0 0em rgba(235,97,1,.7),1.75em 1.75em 0 0em #eb6101,0em 2.5em 0 0em rgba(235,97,1,.2),-1.8em 1.8em 0 0em rgba(235,97,1,.2),-2.6em 0em 0 0em rgba(235,97,1,.2),-1.8em -1.8em 0 0em rgba(235,97,1,.2)}50%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.2),1.8em -1.8em 0 0em rgba(235,97,1,.2),2.5em 0em 0 0em rgba(235,97,1,.5),1.75em 1.75em 0 0em rgba(235,97,1,.7),0em 2.5em 0 0em #eb6101,-1.8em 1.8em 0 0em rgba(235,97,1,.2),-2.6em 0em 0 0em rgba(235,97,1,.2),-1.8em -1.8em 0 0em rgba(235,97,1,.2)}62.5%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.2),1.8em -1.8em 0 0em rgba(235,97,1,.2),2.5em 0em 0 0em rgba(235,97,1,.2),1.75em 1.75em 0 0em rgba(235,97,1,.5),0em 2.5em 0 0em rgba(235,97,1,.7),-1.8em 1.8em 0 0em #eb6101,-2.6em 0em 0 0em rgba(235,97,1,.2),-1.8em -1.8em 0 0em rgba(235,97,1,.2)}75%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.2),1.8em -1.8em 0 0em rgba(235,97,1,.2),2.5em 0em 0 0em rgba(235,97,1,.2),1.75em 1.75em 0 0em rgba(235,97,1,.2),0em 2.5em 0 0em rgba(235,97,1,.5),-1.8em 1.8em 0 0em rgba(235,97,1,.7),-2.6em 0em 0 0em #eb6101,-1.8em -1.8em 0 0em rgba(235,97,1,.2)}87.5%{box-shadow:0em -2.6em 0em 0em rgba(235,97,1,.2),1.8em -1.8em 0 0em rgba(235,97,1,.2),2.5em 0em 0 0em rgba(235,97,1,.2),1.75em 1.75em 0 0em rgba(235,97,1,.2),0em 2.5em 0 0em rgba(235,97,1,.2),-1.8em 1.8em 0 0em rgba(235,97,1,.5),-2.6em 0em 0 0em rgba(235,97,1,.7),-1.8em -1.8em 0 0em #eb6101}}

/* Puente interno de reproducción: los controles nativos permanecen en el DOM
   para EM Feedback, pero no se muestran al alumno. */
.em-osmd-bridge-controls {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* EM Feedback 3.0.22.3: panel de inicio compacto y visible.
   La altura inicial queda limitada para que el botón siempre aparezca sin scroll,
   independientemente de la cantidad de compases. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated {
    position: relative;
    min-height: clamp(300px, 52vh, 390px);
    max-height: clamp(320px, 58vh, 430px);
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 48%, #ffffff 100%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}

/* OSMD puede medir y renderizar normalmente, pero la partitura queda como una
   vista previa muy sutil hasta que el alumno inicia. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated
.phonicscore-opensheetmusicdisplay__render-block {
    opacity: 0.10;
    filter: blur(1.2px);
    transform: scale(1.01);
    transform-origin: top center;
    transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}

/* Oculta los controles que EM Feedback agrega detrás del panel de inicio. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started)
> :not(.em-start-gate-overlay):not(.em-start-flow-overlay):not(.phonicscore-opensheetmusicdisplay__render-block):not(.phonicscore-opensheetmusicdisplay__loading-spinner):not(code) {
    opacity: 0 !important;
    pointer-events: none !important;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated.em-started {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated.em-started
.phonicscore-opensheetmusicdisplay__render-block {
    opacity: 1;
    filter: none;
    transform: none;
}

.em-start-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: clamp(18px, 4vw, 34px);
    color: #0f172a;
    text-align: center;
    background: rgba(248, 250, 252, 0.78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}


/* Overlays auxiliares del flujo inicial (por ejemplo, orientación). Deben seguir
   recibiendo eventos aunque el resto de controles permanezca oculto. */
.em-start-flow-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.em-start-gate-card {
    width: min(100%, 390px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: clamp(24px, 5vw, 34px);
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
}

.em-start-gate-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 18px;
    color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #dbeafe;
}

.em-start-gate-icon span {
    display: block;
    font-size: 31px;
    line-height: 1;
    transform: translateY(-1px);
}

.em-start-gate-overlay:not(.is-ready) .em-start-gate-icon {
    animation: em-start-pulse 1.25s ease-in-out infinite;
}

.em-start-gate-overlay.is-ready .em-start-gate-icon {
    color: #166534;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}

.em-start-gate-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.em-start-gate-subtitle {
    max-width: 310px;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.em-start-gate-button {
    min-width: 148px;
    min-height: 46px;
    padding: 11px 22px;
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.em-start-gate-button:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34);
}

.em-start-gate-button:active:not(:disabled) {
    transform: translateY(0);
}

.em-start-gate-button:disabled {
    cursor: wait;
    color: #64748b;
    background: #e2e8f0;
    box-shadow: none;
}

.em-start-gate-button:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.58);
    outline-offset: 3px;
}

@keyframes em-start-pulse {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 600px) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-start-gated {
        min-height: 290px;
        max-height: min(420px, 64vh);
        border-radius: 14px;
    }

    .em-start-gate-card {
        width: min(100%, 340px);
        padding: 24px 20px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phonicscore-opensheetmusicdisplay__render-block,
    .em-start-gate-button,
    .em-start-gate-icon {
        transition: none !important;
        animation: none !important;
    }
}

/* EM Feedback 3.0.22.4 -------------------------------------------------------
   Corrige el salto lateral al cambiar de “Preparando” a “Listo” y mejora la
   vista previa de la partitura sin sacrificar legibilidad del CTA. */

/* El display nunca debe cambiar a flex: el grid mantiene la tarjeta centrada
   aunque JavaScript cambie el contenido interno. */
.em-start-gate-overlay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}

/* La tarjeta conserva una caja estable durante ambos estados. */
.em-start-gate-card {
    margin: auto;
    min-height: 264px;
    justify-content: center;
    transform: translateZ(0);
}

.em-start-gate-title {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-start-gate-subtitle {
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Durante la preparación la partitura sigue siendo discreta. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started)
.phonicscore-opensheetmusicdisplay__render-block {
    opacity: 0.14;
    filter: grayscale(0.75) contrast(0.92) blur(0.55px);
    transform: scale(1.005);
}

/* Cuando OSMD ya está listo, la vista previa gana definición. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:has(.em-start-gate-overlay.is-ready):not(.em-started)
.phonicscore-opensheetmusicdisplay__render-block {
    opacity: 0.32;
    filter: grayscale(0.35) contrast(0.94);
    transform: none;
}

.em-start-gate-overlay.is-ready {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.52), rgba(248, 250, 252, 0.64));
    -webkit-backdrop-filter: blur(0.7px);
    backdrop-filter: blur(0.7px);
}

/* Fallback para navegadores sin :has(): la clase de estado también suaviza
   el fondo, mientras la vista previa base permanece visible. */
@supports not selector(:has(*)) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started)
    .phonicscore-opensheetmusicdisplay__render-block {
        opacity: 0.24;
        filter: grayscale(0.45) contrast(0.94);
    }
}

@media (max-width: 600px) {
    .em-start-gate-card {
        min-height: 250px;
    }

    .em-start-gate-subtitle {
        min-height: 40px;
    }
}

/* EM Feedback 3.0.22.7 -------------------------------------------------------
   Barra responsive, controles contextuales, viewport independiente y zoom. */

.em-ux-host {
    --em-toolbar-bg: rgba(255, 255, 255, 0.97);
    --em-toolbar-border: #e2e8f0;
    --em-toolbar-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.em-ux-wrapper {
    z-index: 120;
}

.em-mode-nav {
    position: relative;
    padding-right: 48px;
}

.em-mode-nav .em-mode-nav-button,
.em-mode-nav .em-more-toggle {
    min-height: 40px;
    white-space: nowrap;
}

.em-more-wrap {
    position: relative;
    display: none;
}

.em-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10050;
    min-width: 245px;
    padding: 8px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20);
}

.em-more-menu[hidden] {
    display: none !important;
}

.em-more-menu .em-mode-btn {
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 6px;
}

.em-more-menu .em-mode-btn:last-child {
    margin-bottom: 0;
}

.em-more-toggle[data-active="true"] {
    background: #2563eb !important;
}

.em-context-toggle {
    display: none;
}

.em-context-advanced {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.em-practice-advanced {
    flex: 1 1 auto;
}

/* Viewport propio de la partitura. */
.em-score-viewport {
    position: relative;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Zoom flotante: fuera del overlay inicial y visible al comenzar. */
.em-zoom-controls {
    position: sticky;
    right: 16px;
    bottom: 14px;
    z-index: 180;
    display: none;
    width: max-content;
    margin: -58px 16px 14px auto;
    padding: 6px;
    gap: 4px;
    align-items: center;
    border: 1px solid rgba(203, 213, 225, 0.96);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.em-started > .em-zoom-controls {
    display: flex;
}

.em-zoom-controls button {
    min-width: 40px;
    min-height: 40px;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.em-zoom-controls button:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.em-zoom-value {
    min-width: 62px !important;
    font-variant-numeric: tabular-nums;
}

.em-zoom-fit {
    color: #1d4ed8 !important;
}

.em-score-viewport.em-pinching {
    cursor: zoom-in;
}

/* Fullscreen: barra fija arriba y partitura usando todo el espacio restante. */
.em-ux-host:fullscreen,
.em-ux-host:-webkit-full-screen,
.em-ux-host.em-is-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #fff !important;
}

.em-ux-host:fullscreen > .em-wrapper,
.em-ux-host:-webkit-full-screen > .em-wrapper,
.em-ux-host.em-is-fullscreen > .em-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 !important;
    padding: 10px 58px 10px 16px !important;
    border-bottom: 1px solid var(--em-toolbar-border);
    background: var(--em-toolbar-bg);
    box-shadow: var(--em-toolbar-shadow);
}

.em-ux-host:fullscreen > .em-score-viewport,
.em-ux-host:-webkit-full-screen > .em-score-viewport,
.em-ux-host.em-is-fullscreen > .em-score-viewport {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    overflow: auto !important;
    padding: 16px 18px 72px;
    box-sizing: border-box;
}

.em-ux-host:fullscreen > .em-zoom-controls,
.em-ux-host:-webkit-full-screen > .em-zoom-controls,
.em-ux-host.em-is-fullscreen > .em-zoom-controls {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    margin: 0;
}

/* Vista compacta: una fila de modos, paneles secundarios plegables. */
.em-compact-ui .em-wrapper,
.em-compact-ui.em-wrapper {
    font-size: 14px;
}

.em-compact-ui .em-toolbar {
    gap: 7px !important;
}

.em-compact-ui .em-mode-nav {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: visible;
}

.em-compact-ui .em-mode-nav > .em-mode-btn,
.em-compact-ui .em-more-toggle {
    min-height: 38px;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    font-size: 13px;
}

.em-compact-ui .em-mode-nav > .em-mode-btn {
    flex: 0 1 auto;
}

.em-compact-ui .em-more-wrap {
    display: block;
}

.em-compact-ui .em-mode-container {
    margin-top: 4px !important;
    padding-top: 8px !important;
    gap: 6px !important;
}

.em-compact-ui .em-mode-container > .em-row {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px !important;
    overflow: visible;
}

.em-compact-ui .em-mode-container .em-btn {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.em-compact-ui .em-context-toggle {
    display: inline-flex;
    margin-left: auto;
}

.em-compact-ui .em-context-advanced {
    display: none !important;
    position: absolute;
    top: calc(100% + 7px);
    right: 10px;
    left: 10px;
    z-index: 10040;
    padding: 12px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20);
}

.em-compact-ui .em-context-advanced.is-open {
    display: flex !important;
}

.em-compact-ui #em-identify-container,
.em-compact-ui #em-practice-container {
    position: relative;
}

.em-compact-ui .em-identify-advanced {
    justify-content: flex-end !important;
}

.em-compact-ui .em-practice-advanced {
    flex-direction: column;
    align-items: stretch;
}

.em-compact-ui .em-practice-advanced label {
    display: grid !important;
    grid-template-columns: minmax(120px, auto) minmax(130px, 1fr) 48px;
    width: 100%;
    gap: 8px;
    align-items: center;
}

.em-compact-ui .em-practice-advanced input[type="range"] {
    width: 100% !important;
}

.em-compact-ui .em-bubbles {
    margin-top: 5px !important;
    padding: 3px 2px 5px;
    scroll-snap-type: x proximity;
}

.em-compact-ui .em-bubble {
    flex: 0 0 auto;
    padding: 5px 9px !important;
    scroll-snap-align: center;
}

@media (max-width: 680px), (max-height: 500px) {
    .em-ux-host:fullscreen > .em-wrapper,
    .em-ux-host:-webkit-full-screen > .em-wrapper,
    .em-ux-host.em-is-fullscreen > .em-wrapper {
        padding: 7px 8px !important;
    }

    .em-compact-ui .em-mode-nav > .em-mode-btn,
    .em-compact-ui .em-more-toggle {
        padding: 6px 8px !important;
        font-size: 12px;
    }

    .em-compact-ui #em-help,
    .em-compact-ui #em-repeat {
        padding-inline: 8px;
    }

    .em-compact-ui .em-progress {
        height: 6px !important;
        margin-top: 4px !important;
    }

    .em-ux-host:fullscreen > .em-score-viewport,
    .em-ux-host:-webkit-full-screen > .em-score-viewport,
    .em-ux-host.em-is-fullscreen > .em-score-viewport {
        padding: 8px 8px 66px;
    }

    .em-zoom-controls {
        right: 8px;
        bottom: 8px;
        padding: 4px;
        border-radius: 12px;
    }

    .em-zoom-controls button {
        min-width: 36px;
        min-height: 36px;
        padding: 5px 8px;
        font-size: 13px;
    }

    .em-zoom-fit {
        font-size: 0 !important;
    }

    .em-zoom-fit::after {
        content: '↔';
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-more-menu,
    .em-context-advanced,
    .em-zoom-controls {
        transition: none !important;
    }
}


/* EM Feedback 3.0.22.8 -------------------------------------------------------
   En móvil horizontal se muestran los cinco modos directamente. Se elimina el
   botón “Más”; si el ancho es excepcionalmente reducido, la navegación puede
   desplazarse horizontalmente sin ocultar ninguna función. */

.em-compact-ui .em-mode-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.em-compact-ui .em-mode-nav > .em-mode-btn {
    flex: 0 0 auto !important;
}

.em-compact-ui .em-more-wrap {
    display: none !important;
}

@media (max-width: 680px), (max-height: 500px) {
    .em-compact-ui .em-mode-nav {
        gap: 5px !important;
        padding-bottom: 3px;
    }

    .em-compact-ui .em-mode-nav > .em-mode-btn {
        min-height: 36px;
        padding: 6px 8px !important;
        font-size: 12px;
        letter-spacing: -0.01em;
    }
}


/* EM Feedback 3.0.22.9 -------------------------------------------------------
   Acabado visual premium y detección responsive más precisa.
   Los botones “Opciones” y “Controles” existen solo en dispositivos compactos. */

.em-ux-host {
    --em-brand-500: #356df3;
    --em-brand-600: #2457db;
    --em-brand-700: #1d46b8;
    --em-ink-950: #0b1220;
    --em-ink-700: #334155;
    --em-ink-500: #64748b;
    --em-line: #dbe4f0;
    --em-surface: #ffffff;
    --em-surface-soft: #f5f8fc;
    --em-success: #059669;
    --em-danger: #dc2626;
    --em-shadow-sm: 0 5px 16px rgba(15, 23, 42, 0.08);
    --em-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.13);
}

/* En escritorio los controles secundarios ya están visibles: nunca mostrar
   botones redundantes aunque otra regla o el atributo hidden sea sobreescrito. */
.em-ux-host:not(.em-compact-ui) .em-context-toggle,
.em-ux-host .em-context-toggle[hidden] {
    display: none !important;
}

.em-ux-host:not(.em-compact-ui) .em-context-advanced {
    display: flex !important;
}

.em-ux-host .em-wrapper {
    color: var(--em-ink-950);
    border: 1px solid rgba(219, 228, 240, 0.92) !important;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.98)) !important;
    box-shadow: var(--em-shadow-sm) !important;
}

/* Navegación de modos: superficie ligera, menos bloques negros y mejor jerarquía. */
.em-ux-host .em-mode-nav {
    display: flex;
    align-items: center;
    gap: 6px !important;
    width: fit-content;
    max-width: 100%;
    padding: 5px 52px 5px 5px;
    border: 1px solid #e4eaf3;
    border-radius: 15px;
    background: #f1f5f9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.em-ux-host .em-wrapper .em-mode-nav .em-mode-btn {
    min-height: 42px;
    padding: 9px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #334155 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em;
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.em-ux-host .em-wrapper .em-mode-nav .em-mode-btn:hover {
    color: #0f172a !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
    transform: translateY(-1px);
}

.em-ux-host .em-wrapper .em-mode-nav .em-mode-btn[data-active="true"] {
    color: #fff !important;
    border-color: rgba(255,255,255,.24) !important;
    background: linear-gradient(135deg, var(--em-brand-500), var(--em-brand-600)) !important;
    box-shadow: 0 8px 20px rgba(37, 87, 219, .28) !important;
}

/* Botones generales con profundidad y estados accesibles. */
.em-ux-host .em-wrapper .em-btn.em-polished-button {
    min-height: 42px;
    padding: 9px 14px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #172033, #0d1526) !important;
    box-shadow: 0 6px 15px rgba(15, 23, 42, .16) !important;
    font-weight: 720 !important;
    letter-spacing: -0.01em;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.em-ux-host .em-wrapper .em-btn.em-polished-button:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(15, 23, 42, .21) !important;
}

.em-ux-host .em-wrapper .em-btn.em-polished-button:active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

.em-ux-host .em-wrapper .em-btn.em-polished-button:focus-visible,
.em-ux-host .em-zoom-controls button:focus-visible,
.em-ux-host input:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .48) !important;
    outline-offset: 2px;
}

.em-ux-host .em-wrapper #em-help.em-action-success {
    border-color: rgba(5, 150, 105, .22) !important;
    background: linear-gradient(180deg, #10b981, #059669) !important;
    box-shadow: 0 7px 18px rgba(5, 150, 105, .22) !important;
}

.em-ux-host .em-wrapper #em-record.em-action-danger,
.em-ux-host .em-wrapper #em-record[data-recording="true"] {
    border-color: rgba(220, 38, 38, .20) !important;
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
    box-shadow: 0 7px 18px rgba(220, 38, 38, .22) !important;
}

.em-ux-host .em-wrapper .em-transport-button {
    min-width: 46px;
    justify-content: center;
    padding-inline: 12px !important;
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 7px 17px rgba(37, 99, 235, .24) !important;
}

/* Panel contextual: visualmente conectado al modo activo. */
.em-ux-host .em-mode-container {
    margin-top: 10px !important;
    padding: 12px !important;
    border: 1px solid #e4eaf3 !important;
    border-radius: 15px;
    background: rgba(248, 250, 252, .88);
}

.em-ux-host .em-context-advanced {
    gap: 10px !important;
}

/* Tarjetas de sliders. */
.em-ux-host .em-control-card {
    display: grid !important;
    grid-template-columns: auto minmax(96px, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    color: var(--em-ink-700);
    background: #fff;
    box-shadow: 0 3px 10px rgba(15,23,42,.055);
    font-size: 13px;
    font-weight: 650;
}

.em-ux-host .em-control-card > span {
    min-width: 44px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 4px 7px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-variant-numeric: tabular-nums;
    text-align: center !important;
}

/* Sliders modernos con progreso visible. */
.em-ux-host input[type="range"].em-polished-range {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: min(240px, 28vw) !important;
    height: 7px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        var(--em-brand-500) 0 var(--em-range-progress, 50%),
        #dbe5f1 var(--em-range-progress, 50%) 100%
    ) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
    cursor: pointer;
}

.em-ux-host input[type="range"].em-polished-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--em-brand-500);
    box-shadow: 0 3px 9px rgba(37, 87, 219, .34);
    transition: transform .15s ease, box-shadow .15s ease;
}

.em-ux-host input[type="range"].em-polished-range:hover::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(37, 87, 219, .42);
}

.em-ux-host input[type="range"].em-polished-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--em-brand-500);
    box-shadow: 0 3px 9px rgba(37, 87, 219, .34);
}

/* Afinación y frecuencia como instrumentos, no como inputs genéricos. */
.em-ux-host input[type="number"].em-polished-number {
    width: 76px !important;
    min-height: 42px;
    padding: 8px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 11px !important;
    color: #0f172a;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.em-ux-host .em-frequency-card {
    min-width: 96px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15,23,42,.05);
}

.em-ux-host .em-frequency-card #em-freq-display {
    border: 0 !important;
    background: #f1f5f9 !important;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Selector de mano segmentado. */
.em-ux-host .em-segmented-control {
    display: inline-flex !important;
    gap: 3px;
    padding: 4px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #eef2f7;
}

.em-ux-host .em-segmented-control label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 9px;
    color: #64748b;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.em-ux-host .em-segmented-control input {
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

.em-ux-host .em-segmented-control label:has(input:checked) {
    color: #1d4ed8;
    background: #fff;
    box-shadow: 0 3px 8px rgba(15,23,42,.10);
}

/* Progreso y burbujas con color consistente. */
.em-ux-host .em-progress {
    height: 7px !important;
    border: 1px solid #e7edf5;
    background: #edf2f7 !important;
}

.em-ux-host .em-progress-fill {
    background: linear-gradient(90deg, #10b981, #22c55e) !important;
}

.em-ux-host .em-bubble {
    border-color: #dde5ef !important;
    color: #475569;
    box-shadow: 0 2px 7px rgba(15,23,42,.04);
    transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}

.em-ux-host .em-bubble.step {
    color: #1d4ed8;
    border-color: #8fb0ff !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.12);
    transform: translateY(-1px);
}

/* Zoom estilo glass, integrado con el nuevo sistema visual. */
.em-ux-host .em-zoom-controls {
    border-color: rgba(203,213,225,.82);
    border-radius: 16px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 14px 34px rgba(15,23,42,.16);
}

.em-ux-host .em-zoom-controls button {
    border-radius: 11px;
    color: #334155;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.em-ux-host .em-zoom-controls button:hover {
    color: #1d4ed8;
    background: #eff6ff;
    transform: translateY(-1px);
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-ux-host .em-wrapper {
        border-radius: 14px;
    }

    .em-ux-host .em-mode-nav {
        width: 100%;
        padding: 4px 46px 4px 4px;
        border-radius: 13px;
    }

    .em-ux-host .em-wrapper .em-mode-nav .em-mode-btn {
        min-height: 36px;
        padding: 6px 9px !important;
        border-radius: 9px !important;
        font-size: 12px;
    }

    .em-ux-host .em-mode-container {
        padding: 9px !important;
        border-radius: 12px;
    }

    .em-ux-host .em-control-card {
        grid-template-columns: minmax(108px, auto) minmax(120px, 1fr) 46px;
        min-height: 46px;
        padding: 6px 8px;
    }

    .em-ux-host input[type="range"].em-polished-range {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-ux-host *,
    .em-ux-host *::before,
    .em-ux-host *::after {
        scroll-behavior: auto !important;
    }
}

/* EM Feedback 3.0.22.10 ------------------------------------------------------
   Compactación adicional para celular: menos altura en barras y botones,
   textos abreviados y paneles más livianos para que la partitura gane espacio. */

.em-compact-ui .em-toolbar {
    gap: 5px !important;
}

.em-compact-ui .em-mode-nav {
    padding: 3px 42px 3px 3px !important;
    border-radius: 12px !important;
    gap: 4px !important;
}

.em-compact-ui .em-mode-nav > .em-mode-btn {
    min-height: 34px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
    letter-spacing: -0.015em;
}

.em-compact-ui .em-mode-container {
    margin-top: 6px !important;
    padding: 7px !important;
    border-radius: 11px !important;
}

.em-compact-ui .em-mode-container > .em-row {
    gap: 5px !important;
}

.em-compact-ui .em-wrapper .em-btn.em-polished-button {
    min-height: 36px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .14) !important;
}

.em-compact-ui #em-toggle {
    max-width: 158px;
}

.em-compact-ui #em-help,
.em-compact-ui #em-repeat,
.em-compact-ui #em-record {
    padding-inline: 10px !important;
}

.em-compact-ui .em-context-toggle {
    min-width: 36px;
    padding: 6px 10px !important;
    font-size: 0 !important;
    margin-left: auto;
}

.em-compact-ui .em-context-toggle::before {
    content: '⚙';
    font-size: 16px;
    line-height: 1;
}

.em-compact-ui .em-context-advanced {
    top: calc(100% + 5px);
    left: 6px;
    right: 6px;
    padding: 10px;
    border-radius: 12px;
}

.em-compact-ui .em-bubbles {
    margin-top: 3px !important;
    padding: 2px 0 4px !important;
}

.em-compact-ui .em-bubble {
    min-height: 30px;
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
}

.em-compact-ui .em-progress {
    height: 5px !important;
    margin-top: 2px !important;
}

.em-compact-ui .em-zoom-controls {
    padding: 4px !important;
    border-radius: 14px !important;
}

.em-compact-ui .em-zoom-controls button {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 7px !important;
    font-size: 12px !important;
}

.em-compact-ui .em-zoom-value {
    min-width: 56px !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-compact-ui .em-wrapper {
        border-radius: 12px !important;
    }

    .em-compact-ui .em-mode-nav {
        width: 100%;
    }

    .em-compact-ui .em-control-card {
        min-height: 42px !important;
        padding: 5px 7px !important;
        grid-template-columns: minmax(96px, auto) minmax(104px, 1fr) 42px !important;
        gap: 7px !important;
    }

    .em-compact-ui input[type="number"].em-polished-number {
        width: 64px !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }
}

/* EM Feedback 3.0.22.11 ------------------------------------------------------
   Modo enfoque móvil + drawers inferiores. Mantiene la interfaz completa
   disponible, pero permite liberar casi toda la altura para la partitura. */

.em-context-scrim,
.em-focus-toggle {
    display: none;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-ux-host:fullscreen > .em-wrapper,
    .em-ux-host:-webkit-full-screen > .em-wrapper,
    .em-ux-host.em-is-fullscreen > .em-wrapper {
        position: relative;
        z-index: 10030;
        flex: 0 0 auto;
    }

    /* Opciones/Controles se convierten en drawer inferior. */
    .em-compact-ui .em-context-advanced {
        position: fixed !important;
        top: auto !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        z-index: 10120 !important;
        width: auto !important;
        max-height: min(72vh, 360px);
        overflow: auto;
        padding: 14px !important;
        border: 1px solid rgba(203, 213, 225, .92) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        transform: translateY(18px) scale(.985);
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }

    .em-compact-ui .em-context-advanced.is-open {
        display: flex !important;
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .em-context-scrim {
        position: fixed;
        inset: 0;
        z-index: 10110;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .36);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }

    .em-context-scrim.is-open:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
    }

    .em-context-scrim[hidden] {
        display: none !important;
    }

    /* Botón flotante para activar o salir del modo enfoque. */
    .em-focus-toggle {
        position: absolute;
        left: max(10px, env(safe-area-inset-left));
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 10070;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 38px;
        padding: 7px 12px;
        border: 1px solid rgba(203, 213, 225, .90);
        border-radius: 999px;
        color: #1e3a8a;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .em-focus-toggle:hover,
    .em-focus-toggle:focus-visible {
        color: #fff;
        background: linear-gradient(135deg, #356df3, #2457db);
        box-shadow: 0 14px 30px rgba(37, 87, 219, .28);
        transform: translateY(-1px);
    }

    .em-focus-toggle[hidden] {
        display: none !important;
    }

    .em-focus-icon {
        font-size: 15px;
        line-height: 1;
    }

    /* Estado enfoque: solo modo activo + salida. */
    .em-ux-host.em-score-focus > .em-wrapper,
    .em-ux-host .em-wrapper.em-score-focus {
        min-height: 48px !important;
        max-height: 54px !important;
        padding: 5px 46px 5px 6px !important;
        overflow: hidden !important;
        border-radius: 0 0 13px 13px !important;
        background: rgba(255, 255, 255, .94) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .12) !important;
    }

    .em-score-focus .em-toolbar {
        min-height: 38px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .em-score-focus .em-mode-nav {
        width: auto !important;
        max-width: calc(100% - 6px) !important;
        padding: 2px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn:not(.em-current-mode),
    .em-score-focus .em-more-wrap,
    .em-score-focus .em-mode-container,
    .em-score-focus .em-bubbles {
        display: none !important;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        display: inline-flex !important;
        min-height: 34px !important;
        padding: 5px 11px !important;
        pointer-events: none;
    }

    .em-score-focus .em-score-viewport {
        padding-top: 8px !important;
    }

    .em-score-focus .em-focus-toggle {
        color: #fff;
        border-color: rgba(255,255,255,.24);
        background: linear-gradient(135deg, #172033, #0d1526);
    }

    /* Zoom y enfoque no se superponen. */
    .em-focus-available .em-zoom-controls {
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .em-score-focus .em-zoom-controls {
        opacity: .90;
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-focus-toggle {
        min-height: 34px;
        padding: 5px 10px;
    }

    .em-focus-label {
        display: none;
    }

    .em-score-focus .em-focus-label {
        display: inline;
    }

    .em-score-focus .em-zoom-controls,
    .em-focus-available .em-zoom-controls {
        bottom: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-context-advanced,
    .em-context-scrim,
    .em-focus-toggle {
        transition: none !important;
    }
}

/* EM Feedback 3.0.22.13 ------------------------------------------------------
   Enfoque automático con controles esenciales dentro de la barra superior.
   Se elimina el botón manual Enfoque/Controles. */

.em-focus-toggle {
    display: none !important;
}

.em-focus-live-bar {
    display: none;
    min-width: 0;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-score-focus .em-mode-nav {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        flex: 0 0 auto;
        max-width: 126px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .em-score-focus .em-focus-live-bar {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }

    .em-focus-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 34px !important;
        padding: 5px 10px !important;
        border: 1px solid rgba(15, 23, 42, .08) !important;
        border-radius: 10px !important;
        color: #fff !important;
        background: linear-gradient(180deg, #172033, #0d1526) !important;
        box-shadow: 0 5px 13px rgba(15, 23, 42, .16) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap;
    }

    .em-focus-action.is-identify,
    .em-focus-action.is-autograde {
        background: linear-gradient(180deg, #ef4444, #dc2626) !important;
        box-shadow: 0 5px 13px rgba(220, 38, 38, .22) !important;
    }

    .em-focus-action.is-practice {
        background: linear-gradient(180deg, #356df3, #2457db) !important;
        box-shadow: 0 5px 13px rgba(37, 87, 219, .22) !important;
    }

    .em-focus-action.is-preparing,
    .em-focus-action:disabled {
        cursor: wait;
        color: #64748b !important;
        background: #e2e8f0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    .em-focus-notes {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 1px 3px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }

    .em-focus-notes::-webkit-scrollbar {
        display: none;
    }

    .em-focus-notes[hidden] {
        display: none !important;
    }

    .em-focus-notes .em-bubble {
        flex: 0 0 auto;
        min-height: 28px !important;
        padding: 4px 8px !important;
        border: 1px solid #dde5ef !important;
        border-radius: 999px !important;
        color: #475569;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .em-focus-notes .em-bubble.step,
    .em-focus-notes .em-bubble.active,
    .em-focus-notes .em-bubble[aria-current="true"] {
        color: #1d4ed8 !important;
        border-color: #8fb0ff !important;
        background: #eff6ff !important;
        box-shadow: 0 4px 10px rgba(37, 99, 235, .14);
    }

    /* Ya no se reserva espacio inferior para un botón manual de enfoque. */
    .em-focus-available .em-zoom-controls,
    .em-score-focus .em-zoom-controls {
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        max-width: 112px;
        padding-inline: 9px !important;
    }

    .em-focus-action {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .em-focus-notes .em-bubble {
        min-height: 26px !important;
        padding: 3px 7px !important;
        font-size: 10.5px !important;
    }
}

/* EM Feedback 3.0.22.14 ------------------------------------------------------
   Controles visibles en móvil y controles esenciales dentro del modo enfoque.
   El countdown se promueve al contenedor fullscreen para cubrir toda la pantalla. */

/* Los botones Opciones/Controles ya no son necesarios: los controles aparecen
   directamente tanto en escritorio como en móvil horizontal. */
.em-ux-host .em-context-toggle {
    display: none !important;
}

.em-compact-ui .em-context-advanced.em-inline-context {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.em-compact-ui .em-identify-advanced.em-inline-context {
    align-items: center;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-left: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.em-compact-ui .em-identify-advanced.em-inline-context::-webkit-scrollbar,
.em-compact-ui .em-practice-advanced.em-inline-context::-webkit-scrollbar {
    display: none;
}

.em-compact-ui .em-identify-advanced .em-segmented-control {
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 9px;
}

.em-compact-ui .em-identify-advanced .em-segmented-control label {
    min-height: 29px;
    padding: 4px 7px;
    font-size: 11px;
}

.em-compact-ui .em-identify-advanced .em-a4-container,
.em-compact-ui .em-identify-advanced .em-frequency-card {
    flex: 0 0 auto;
}

.em-compact-ui .em-identify-advanced .em-inline {
    gap: 4px;
    font-size: 11px;
}

.em-compact-ui .em-identify-advanced input[type="number"].em-polished-number {
    width: 58px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
}

.em-compact-ui .em-identify-advanced .em-frequency-card {
    min-width: 78px;
    padding: 3px 5px;
    border-radius: 9px;
}

.em-compact-ui .em-identify-advanced .em-frequency-card > label {
    font-size: 9px;
}

.em-compact-ui .em-practice-advanced.em-inline-context {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.em-compact-ui .em-practice-advanced.em-inline-context .em-control-card {
    flex: 0 0 auto;
    grid-template-columns: auto minmax(72px, 100px) auto !important;
    min-height: 38px !important;
    padding: 4px 6px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
}

.em-compact-ui .em-practice-advanced.em-inline-context input[type="range"].em-polished-range {
    width: 92px !important;
}

.em-compact-ui .em-practice-advanced.em-inline-context .em-control-card > span {
    min-width: 36px !important;
    padding: 3px 5px;
    font-size: 10.5px;
}

/* Controles dentro de la barra de enfoque. */
.em-focus-frequency-slot,
.em-focus-practice-slot {
    display: none;
    min-width: 0;
}

.em-focus-frequency-slot[hidden],
.em-focus-practice-slot[hidden] {
    display: none !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-score-focus .em-focus-frequency-slot:not([hidden]) {
        display: flex;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .em-score-focus .em-focus-frequency-control {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px;
        min-width: 92px;
        padding: 3px 6px !important;
        border-radius: 9px !important;
        background: #fff !important;
    }

    .em-score-focus .em-focus-frequency-control > label {
        margin: 0;
        font-size: 9px;
        color: #64748b;
    }

    .em-score-focus .em-focus-frequency-control #em-freq-display {
        min-width: 58px;
        padding: 4px 5px !important;
        border-radius: 7px !important;
        font-size: 11px;
        white-space: nowrap;
    }

    .em-score-focus .em-focus-practice-slot:not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .em-score-focus .em-focus-practice-slot::-webkit-scrollbar {
        display: none;
    }

    .em-score-focus .em-focus-practice-controls {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: row !important;
        align-items: center;
        gap: 5px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card {
        display: grid !important;
        grid-template-columns: auto 76px auto !important;
        min-height: 32px !important;
        padding: 2px 5px !important;
        gap: 4px !important;
        border-radius: 9px !important;
        font-size: 9.5px !important;
        white-space: nowrap;
    }

    .em-score-focus .em-focus-practice-controls input[type="range"].em-polished-range {
        width: 76px !important;
        height: 5px !important;
    }

    .em-score-focus .em-focus-practice-controls input[type="range"].em-polished-range::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card > span {
        min-width: 32px !important;
        padding: 2px 4px !important;
        font-size: 9.5px;
    }

    .em-score-focus .em-focus-control-name {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* En práctica el ancho debe aprovecharse para los tres sliders. */
    .em-score-focus .em-focus-live-bar:has(.em-focus-practice-slot:not([hidden])) {
        overflow: hidden;
    }

    .em-score-focus .em-focus-live-bar:has(.em-focus-practice-slot:not([hidden])) .em-focus-notes,
    .em-score-focus .em-focus-live-bar:has(.em-focus-practice-slot:not([hidden])) .em-focus-frequency-slot {
        display: none !important;
    }
}

/* Countdown verdaderamente fullscreen. El nodo es movido por JS para ser hijo
   directo del contenedor OSMD en pantalla completa. */
.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50000 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, .28) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}

.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen #em-countdown-number {
    display: grid;
    place-items: center;
    min-width: 150px;
    min-height: 150px;
    padding: 24px 34px !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 28px !important;
    color: #fff;
    background: rgba(15, 23, 42, .84) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    font-size: clamp(64px, 16vw, 128px) !important;
    line-height: 1;
    text-align: center;
}

.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen #em-countdown-number:not(:empty) {
    animation: em-countdown-pop .28s ease-out;
}

@keyframes em-countdown-pop {
    from { transform: scale(.82); opacity: .2; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        max-width: 100px;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card {
        grid-template-columns: auto 62px auto !important;
    }

    .em-score-focus .em-focus-practice-controls input[type="range"].em-polished-range {
        width: 62px !important;
    }

    .em-ux-host > #em-countdown-overlay.em-countdown-fullscreen #em-countdown-number {
        min-width: 118px;
        min-height: 118px;
        padding: 18px 26px !important;
        border-radius: 22px !important;
    }
}

/* EM Feedback 3.0.22.15 ------------------------------------------------------
   Rediseño premium y compacto: mejor uso del ancho, menos altura consumida y
   layout horizontal real para sliders de práctica, tanto normal como enfoque. */

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    /* Marco general más limpio y compacto */
    .em-ux-host .em-wrapper {
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,247,251,.98)) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .09) !important;
    }

    .em-compact-ui .em-toolbar {
        gap: 3px !important;
        margin-bottom: 0 !important;
    }

    .em-compact-ui .em-mode-nav {
        width: calc(100% - 40px) !important;
        padding: 3px !important;
        border-radius: 13px !important;
        gap: 4px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.6) !important;
    }

    .em-compact-ui .em-mode-nav > .em-mode-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 34px !important;
        padding: 5px 6px !important;
        justify-content: center;
        font-size: 11px !important;
        line-height: 1.05;
    }

    .em-compact-ui .em-mode-container {
        margin-top: 5px !important;
        padding: 8px 9px !important;
        border-radius: 13px !important;
        background: rgba(248,250,252,.9) !important;
    }

    .em-compact-ui .em-mode-container > .em-row {
        gap: 6px !important;
        align-items: center !important;
    }

    .em-compact-ui .em-score-viewport {
        padding-top: 6px !important;
    }

    /* Botones más app-like */
    .em-compact-ui .em-wrapper .em-btn.em-polished-button {
        min-height: 34px !important;
        padding: 5px 10px !important;
        border-radius: 11px !important;
        font-size: 11.5px !important;
        box-shadow: 0 5px 13px rgba(15, 23, 42, .12) !important;
    }

    .em-compact-ui #em-toggle,
    .em-compact-ui #em-record {
        min-width: 88px;
        max-width: 112px;
    }

    .em-compact-ui #em-help,
    .em-compact-ui #em-repeat {
        min-width: 84px;
    }

    /* ===== IDENTIFICAR: misma fila, mejor balance ===== */
    .em-compact-ui #em-identify-container > .em-row {
        display: grid !important;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        align-items: center !important;
        gap: 6px !important;
    }

    .em-compact-ui .em-identify-advanced.em-inline-context {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-width: 0;
        margin-left: 0 !important;
        overflow: hidden !important;
    }

    .em-compact-ui .em-identify-advanced .em-segmented-control {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 280px;
        padding: 2px !important;
        border-radius: 10px !important;
    }

    .em-compact-ui .em-identify-advanced .em-segmented-control label {
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        flex: 1 1 0;
        justify-content: center;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container,
    .em-compact-ui .em-identify-advanced .em-frequency-card {
        flex: 0 0 auto;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container {
        min-width: 104px;
        padding: 4px 8px !important;
        border: 1px solid #e3e9f3;
        border-radius: 11px;
        background: rgba(255,255,255,.88);
        box-shadow: 0 2px 8px rgba(15,23,42,.04);
    }

    .em-compact-ui .em-identify-advanced .em-inline {
        align-items: center;
        gap: 6px;
        font-size: 11px;
    }

    .em-compact-ui .em-identify-advanced input[type="number"].em-polished-number {
        width: 72px !important;
        min-height: 34px !important;
        padding: 5px 7px !important;
    }

    .em-compact-ui .em-identify-advanced .em-frequency-card {
        min-width: 92px;
        padding: 4px 6px !important;
        border-radius: 11px !important;
    }

    .em-compact-ui .em-identify-advanced .em-frequency-card > label {
        font-size: 10px !important;
        line-height: 1.1;
    }

    /* ===== PRÁCTICA: sliders en fila ===== */
    .em-compact-ui #em-practice-container > .em-row {
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center !important;
        gap: 8px !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0;
        overflow: visible !important;
        margin-left: 4px;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-control-card {
        width: 100%;
        min-width: 0;
        min-height: 38px !important;
        padding: 4px 6px !important;
        gap: 5px !important;
        grid-template-columns: minmax(64px, auto) minmax(80px, 1fr) auto !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,.92) !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-focus-control-name {
        max-width: none;
        font-size: 11px;
        white-space: nowrap;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context input[type="range"].em-polished-range {
        width: 100% !important;
        min-width: 0 !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-control-card > span {
        min-width: 40px !important;
        padding: 3px 5px !important;
        font-size: 11px !important;
    }

    /* Burbujas y barra de progreso más compactas */
    .em-compact-ui .em-bubbles {
        margin-top: 4px !important;
        padding: 1px 0 2px !important;
    }

    .em-compact-ui .em-bubble {
        min-height: 28px !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    .em-compact-ui .em-progress {
        height: 5px !important;
        margin-top: 4px !important;
    }

    /* Zoom menos invasivo */
    .em-compact-ui .em-zoom-controls {
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        padding: 3px !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 26px rgba(15,23,42,.16) !important;
    }

    .em-compact-ui .em-zoom-controls button {
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 4px 6px !important;
        font-size: 11.5px !important;
    }

    .em-compact-ui .em-zoom-value {
        min-width: 52px !important;
    }

    /* ===== MODO ENFOQUE ===== */
    .em-score-focus > .em-wrapper,
    .em-score-focus.em-wrapper {
        min-height: 54px !important;
        max-height: none !important;
        padding: 4px 42px 4px 4px !important;
        border-radius: 0 0 14px 14px !important;
        overflow: visible !important;
    }

    .em-score-focus .em-toolbar {
        min-height: 0 !important;
        gap: 0 !important;
    }

    .em-score-focus .em-mode-nav {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2px !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        flex: 0 0 auto;
        max-width: 92px;
        min-height: 32px !important;
        padding: 5px 10px !important;
        justify-content: center;
    }

    .em-score-focus .em-focus-live-bar {
        display: flex !important;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 5px !important;
        overflow: hidden;
    }

    .em-score-focus .em-focus-action {
        min-height: 32px !important;
        padding: 5px 9px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        box-shadow: 0 4px 12px rgba(15,23,42,.14) !important;
    }

    .em-score-focus .em-focus-notes {
        gap: 4px !important;
        padding: 1px 0 2px !important;
    }

    .em-score-focus .em-focus-notes .em-bubble {
        min-height: 26px !important;
        padding: 3px 7px !important;
        font-size: 10.5px !important;
    }

    .em-score-focus .em-focus-frequency-control {
        min-width: 94px !important;
        padding: 3px 6px !important;
        border-radius: 10px !important;
    }

    .em-score-focus .em-focus-frequency-control > label {
        font-size: 9px !important;
    }

    .em-score-focus .em-focus-frequency-control #em-freq-display {
        min-width: 60px !important;
        font-size: 11px !important;
    }

    /* En práctica el live bar cambia a layout denso de 1 fila */
    .em-score-focus.em-focus-mode-practice .em-focus-live-bar,
    .em-ux-host.em-focus-mode-practice .em-focus-live-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 5px !important;
    }

    .em-score-focus .em-focus-practice-slot:not([hidden]) {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible !important;
    }

    .em-score-focus .em-focus-practice-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100%;
        gap: 5px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card {
        width: 100%;
        min-width: 0;
        min-height: 33px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
        grid-template-columns: minmax(52px, auto) minmax(70px, 1fr) auto !important;
        border-radius: 10px !important;
        font-size: 9.75px !important;
    }

    .em-score-focus .em-focus-practice-controls .em-focus-control-name {
        max-width: none !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    .em-score-focus .em-focus-practice-controls input[type="range"].em-polished-range {
        width: 100% !important;
        min-width: 0 !important;
        height: 5px !important;
    }

    .em-score-focus .em-focus-practice-controls input[type="range"].em-polished-range::-webkit-slider-thumb {
        width: 15px !important;
        height: 15px !important;
        border-width: 3px !important;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card > span {
        min-width: 34px !important;
        padding: 2px 4px !important;
        font-size: 9.5px !important;
    }

    .em-score-focus .em-score-viewport {
        padding-top: 8px !important;
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-compact-ui .em-mode-nav > .em-mode-btn {
        font-size: 10.5px !important;
        padding-inline: 5px !important;
    }

    .em-compact-ui #em-identify-container > .em-row {
        grid-template-columns: auto auto auto minmax(0, 1fr);
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-control-card {
        grid-template-columns: minmax(56px, auto) minmax(64px, 1fr) auto !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-focus-control-name,
    .em-score-focus .em-focus-practice-controls .em-focus-control-name {
        font-size: 9.5px !important;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        max-width: 84px !important;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card {
        grid-template-columns: minmax(48px, auto) minmax(60px, 1fr) auto !important;
    }
}

/* EM Feedback 3.0.22.16 ------------------------------------------------------
   Correcciones finales de distribución, overlays fullscreen y salida controlada
   del modo enfoque. */

/* Nunca mostrar la barra viva fuera del modo enfoque. Evita el Play fantasma
   en la navegación principal de Práctica. */
.em-ux-host:not(.em-score-focus) .em-focus-live-bar,
.em-ux-host:not(.em-score-focus) .em-focus-action,
.em-ux-host:not(.em-score-focus) .em-focus-practice-slot,
.em-ux-host:not(.em-score-focus) .em-focus-frequency-slot {
    display: none !important;
}

/* El separador heredado no debe ocupar una celda del grid de Práctica. */
.em-compact-ui #em-practice-container > .em-row > .em-sep {
    display: none !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    /* IDENTIFICAR: frecuencia con ancho fijo y opciones en una sola fila. */
    .em-compact-ui #em-identify-container > .em-row {
        display: grid !important;
        grid-template-columns: auto auto auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .em-compact-ui .em-identify-advanced.em-inline-context {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) 150px 112px !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100%;
        min-width: 0;
        overflow: visible !important;
    }

    .em-compact-ui .em-identify-advanced .em-segmented-control {
        width: 100%;
        max-width: none !important;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        box-sizing: border-box;
    }

    .em-compact-ui .em-identify-advanced .em-frequency-card {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        box-sizing: border-box;
    }

    .em-compact-ui .em-identify-advanced .em-frequency-card #em-freq-display {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* PRÁCTICA: dos botones compactos + tres sliders en una sola fila. */
    .em-compact-ui #em-practice-container > .em-row {
        display: grid !important;
        grid-template-columns: 42px 42px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .em-compact-ui #em-practice-container > .em-row > .em-transport-button {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        overflow: visible !important;
    }

    .em-compact-ui .em-practice-advanced.em-inline-context .em-control-card {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(68px, auto) minmax(74px, 1fr) auto !important;
    }

    /* El botón del modo activo se convierte en salida del enfoque. */
    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode {
        pointer-events: auto !important;
        cursor: pointer !important;
        font-size: 0 !important;
        min-width: 76px;
    }

    .em-score-focus .em-mode-nav > .em-mode-btn.em-current-mode::after {
        content: '← Salir';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    /* Práctica en enfoque: Play/Pausa + 3 sliders reales en una sola fila. */
    .em-score-focus.em-focus-mode-practice .em-focus-live-bar,
    .em-ux-host.em-score-focus.em-focus-mode-practice .em-focus-live-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 5px !important;
        width: 100%;
    }

    .em-score-focus .em-focus-practice-slot:not([hidden]) {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    .em-score-focus .em-focus-practice-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100%;
        min-width: 0;
        overflow: visible !important;
    }

    .em-score-focus .em-focus-practice-controls .em-control-card {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(52px, auto) minmax(62px, 1fr) auto !important;
    }
}

/* El conteo no debe desenfocar ni oscurecer la partitura. Solo el número ocupa
   una tarjeta central; el resto de la partitura permanece completamente nítido. */
.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen #em-countdown-number {
    color: #fff !important;
    background: rgba(15, 23, 42, .88) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .28) !important;
    pointer-events: none;
}

/* Resultados de Identificar y Autocalificación fuera del menú superior. */
.em-ux-host > #em-completion-overlay.em-completion-fullscreen,
.em-ux-host > #em-auto-grade-overlay.em-auto-grade-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50020 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}

/* Diálogo premium al terminar naturalmente el último compás de Práctica. */
.em-practice-end-dialog {
    position: absolute;
    inset: 0;
    z-index: 50030;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.em-practice-end-dialog[hidden] {
    display: none !important;
}

.em-practice-end-dialog.is-open {
    opacity: 1;
    visibility: visible;
}

.em-practice-end-card {
    width: min(92vw, 430px);
    padding: 26px;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 22px;
    color: #0f172a;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 26px 75px rgba(15, 23, 42, .28);
    text-align: center;
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
}

.em-practice-end-dialog.is-open .em-practice-end-card {
    transform: translateY(0) scale(1);
}

.em-practice-end-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 18px;
    color: #047857;
    background: #d1fae5;
    font-size: 30px;
    font-weight: 900;
}

.em-practice-end-card h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.2;
}

.em-practice-end-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.em-practice-end-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.em-practice-end-actions button {
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.em-practice-end-continue {
    color: #1d4ed8;
    background: #eff6ff;
}

.em-practice-end-exit {
    color: #fff;
    background: linear-gradient(135deg, #356df3, #2457db);
    box-shadow: 0 8px 20px rgba(37, 87, 219, .24);
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-practice-end-card {
        width: min(88vw, 520px);
        padding: 18px 22px;
    }

    .em-practice-end-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
        border-radius: 14px;
        font-size: 24px;
    }

    .em-practice-end-card h2 {
        font-size: 20px;
    }

    .em-practice-end-actions {
        margin-top: 14px;
    }
}

/* EM Feedback 3.0.22.17 ------------------------------------------------------
   A4 compacto, botón real de grabación dentro del enfoque, feedback visible y
   estados verdes inmediatos en Identificar. */

/* Estado correcto: verde incluso mientras la burbuja sigue siendo el paso actual. */
.em-ux-host .em-bubble.ok,
.em-ux-host .em-bubble.step.ok,
.em-score-focus .em-focus-notes .em-bubble.ok,
.em-score-focus .em-focus-notes .em-bubble.step.ok {
    color: #047857 !important;
    border-color: #6ee7b7 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .13) !important;
}

/* El mensaje Correcto/Error se mueve al host de fullscreen para no quedar
   recortado por la barra superior compacta. */
.em-ux-host > #em-feedback-overlay.em-feedback-floating {
    position: absolute !important;
    z-index: 50010 !important;
    pointer-events: none !important;
}

.em-focus-autograde-slot {
    display: none;
    min-width: 0;
}

.em-focus-action[hidden],
.em-focus-autograde-slot[hidden] {
    display: none !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    /* A4 deja de ocupar una tarjeta ancha. */
    .em-compact-ui .em-identify-advanced.em-inline-context {
        grid-template-columns: minmax(200px, 1fr) 96px 104px !important;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        padding: 3px 5px !important;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container .em-inline {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 4px !important;
    }

    .em-compact-ui .em-identify-advanced .em-a4-container input[type="number"].em-polished-number {
        width: 58px !important;
        min-width: 0 !important;
        min-height: 31px !important;
        padding: 4px 5px !important;
        font-size: 12px !important;
    }

    .em-compact-ui #em-autocalification-container .em-a4-container {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
    }

    .em-compact-ui #em-autocalification-container .em-a4-container .em-inline {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 4px !important;
        align-items: center;
    }

    .em-compact-ui #em-autocalification-container .em-a4-container input[type="number"] {
        width: 58px !important;
        min-height: 32px !important;
        padding: 4px 5px !important;
    }

    /* Autocalificación: usar el botón real, con su temporizador real. */
    .em-score-focus .em-focus-autograde-slot:not([hidden]) {
        display: flex !important;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    .em-score-focus .em-focus-autograde-slot #em-record.em-focus-record-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 132px;
        min-height: 32px !important;
        padding: 5px 10px !important;
        border-radius: 10px !important;
        white-space: nowrap;
        font-size: 11px !important;
        line-height: 1;
    }

    .em-score-focus .em-focus-autograde-slot #em-record.em-focus-record-button #em-timer {
        margin-left: 5px;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
    }

    .em-score-focus.em-focus-mode-autocalification .em-focus-live-bar,
    .em-ux-host.em-score-focus.em-focus-mode-autocalification .em-focus-live-bar {
        display: flex !important;
        align-items: center;
        min-width: 0;
        overflow: visible !important;
    }
}

/* EM Feedback 3.0.22.23 ------------------------------------------------------
   Indicador de fuente de entrada para Identificar: MIDI prioritario y
   micrófono como respaldo automático. */
.em-midi-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 30px;
    max-width: 230px;
    padding: 5px 10px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.em-midi-status.is-active {
    color: #087443;
    border-color: #86efac;
    background: linear-gradient(180deg, #ecfdf5, #dcfce7);
    box-shadow: 0 5px 14px rgba(16, 185, 129, .16);
}

.em-midi-status.is-requesting {
    color: #92400e;
    border-color: #fde68a;
    background: #fffbeb;
}

.em-midi-status.is-microphone {
    color: #526174;
    background: #f8fafc;
}

#em-identify-container > .em-row .em-midi-status-normal {
    margin-left: auto;
}

.em-midi-status-focus {
    display: none;
}

.em-score-focus.em-focus-mode-identify .em-midi-status-focus,
.em-ux-host.em-score-focus.em-focus-mode-identify .em-midi-status-focus {
    display: inline-flex;
    max-width: 150px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1280px) {
    .em-midi-status {
        min-height: 28px;
        max-width: 150px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .em-compact-ui #em-identify-container > .em-row .em-midi-status-normal {
        margin-left: 0;
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .em-midi-status {
        max-width: 120px;
        min-height: 26px;
        padding: 3px 7px;
        font-size: 9.5px;
    }
}

/* EM Feedback 3.0.22.24 ------------------------------------------------------
   Teclado virtual interactivo para el modo Identificar notas.
   Es una capa visual: la validación continúa dentro del módulo Identify. */
.em-virtual-keyboard {
    --em-vk-white: #ffffff;
    --em-vk-white-edge: #cbd5e1;
    --em-vk-black: #172033;
    --em-vk-black-edge: #050b16;
    --em-vk-target: #facc15;
    --em-vk-pressed: #3b82f6;
    --em-vk-correct: #22c55e;
    --em-vk-error: #ef4444;
    --em-vk-panel: #f8fafc;
    --em-vk-ink: #0f172a;
    --em-vk-muted: #64748b;
    --em-vk-white-height: 118px;
    --em-vk-black-height: 72px;
    --em-vk-min-white-width: 24px;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #dbe4f0;
    border-radius: 15px;
    color: var(--em-vk-ink);
    background: linear-gradient(180deg, #ffffff, var(--em-vk-panel));
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

.em-vk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 10px 8px 13px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
}

.em-vk-heading,
.em-vk-actions,
.em-vk-size-label,
.em-vk-legend,
.em-vk-legend span {
    display: flex;
    align-items: center;
}

.em-vk-heading {
    min-width: 0;
    gap: 9px;
    flex-wrap: wrap;
}

.em-vk-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.em-vk-source {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.em-vk-source.is-midi {
    color: #166534;
    background: #dcfce7;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}

.em-vk-source.is-microphone {
    color: #475569;
    background: #f1f5f9;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}

.em-vk-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 7px;
}

.em-vk-size-label {
    gap: 6px;
    color: var(--em-vk-muted);
    font-size: 11px;
    font-weight: 700;
}

.em-vk-size,
.em-vk-toggle {
    min-height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #1e293b;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.em-vk-size {
    max-width: 128px;
    padding: 5px 28px 5px 8px;
}

.em-vk-toggle {
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.em-vk-toggle:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
    background: #eff6ff;
    transform: translateY(-1px);
}

.em-vk-size:focus-visible,
.em-vk-toggle:focus-visible,
.em-vk-scroller:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.48);
    outline-offset: 2px;
}

.em-vk-collapse {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 220ms ease, opacity 180ms ease;
}

.em-vk-collapse-inner {
    min-height: 0;
    overflow: hidden;
}

.em-virtual-keyboard.is-collapsed .em-vk-header {
    border-bottom-color: transparent;
}

.em-virtual-keyboard.is-collapsed .em-vk-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
}

.em-vk-message {
    min-height: 20px;
    padding: 7px 12px 3px;
    color: var(--em-vk-muted);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}

.em-vk-scroller {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 10px 9px;
    box-sizing: border-box;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.em-vk-scroller::-webkit-scrollbar {
    height: 6px;
}

.em-vk-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.em-vk-scroller::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #94a3b8;
}

.em-vk-surface {
    --em-vk-white-count: 36;
    position: relative;
    width: max(100%, calc(var(--em-vk-white-count) * var(--em-vk-min-white-width)));
    height: var(--em-vk-white-height);
    min-width: calc(var(--em-vk-white-count) * var(--em-vk-min-white-width));
    border: 1px solid #94a3b8;
    border-radius: 8px;
    background: #d9e1eb;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.em-vk-white-keys,
.em-vk-black-keys {
    position: absolute;
    inset: 0;
}

.em-vk-white-keys {
    display: flex;
}

.em-piano-key {
    box-sizing: border-box;
    transition: background 90ms linear, box-shadow 90ms linear, transform 80ms ease;
}

.em-piano-key-white {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    border-right: 1px solid var(--em-vk-white-edge);
    background: linear-gradient(180deg, #ffffff 0%, var(--em-vk-white) 72%, #edf2f7 100%);
    box-shadow: inset 0 -6px 8px rgba(15, 23, 42, 0.055);
}

.em-piano-key-white:last-child {
    border-right: 0;
}

.em-piano-key-black {
    --em-vk-black-left: 0%;
    position: absolute;
    top: 0;
    left: var(--em-vk-black-left);
    z-index: 3;
    width: calc((100% / var(--em-vk-white-count)) * 0.66);
    height: var(--em-vk-black-height);
    border: 1px solid var(--em-vk-black-edge);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, #080f1e 0%, var(--em-vk-black) 45%, #050a14 100%);
    box-shadow: 0 5px 7px rgba(15, 23, 42, 0.38), inset 0 -5px 4px rgba(255, 255, 255, 0.04);
    transform: translateX(-50%);
}

.em-vk-note-label {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    color: #64748b;
    font-size: 9px;
    font-weight: 750;
    text-align: center;
    pointer-events: none;
}

/* Objetivo y tecla físicamente presionada conservan colores distintos. */
.em-piano-key-white.is-target {
    background: linear-gradient(180deg, #fef9c3, var(--em-vk-target));
    box-shadow: inset 0 0 0 2px rgba(202, 138, 4, 0.42), 0 0 13px rgba(250, 204, 21, 0.38);
}

.em-piano-key-black.is-target {
    background: linear-gradient(180deg, #fde047, #ca8a04);
    box-shadow: 0 5px 7px rgba(15, 23, 42, 0.28), 0 0 13px rgba(250, 204, 21, 0.52);
}

.em-piano-key-white.is-pressed {
    background: linear-gradient(180deg, #bfdbfe, var(--em-vk-pressed));
    box-shadow: inset 0 0 0 2px rgba(29, 78, 216, 0.48);
    transform: translateY(2px);
}

.em-piano-key-black.is-pressed {
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
    transform: translateX(-50%) translateY(2px);
}

/* Coincidencia visual parcial: no significa aún que el acorde esté validado. */
.em-piano-key-white.is-target.is-pressed {
    background: linear-gradient(135deg, var(--em-vk-target) 0 48%, var(--em-vk-pressed) 52% 100%);
}

.em-piano-key-black.is-target.is-pressed {
    background: linear-gradient(135deg, #eab308 0 48%, #2563eb 52% 100%);
}

/* El resultado validado tiene prioridad sobre objetivo/presionada. */
.em-piano-key.is-correct,
.em-piano-key.is-target.is-correct,
.em-piano-key.is-pressed.is-correct {
    background: linear-gradient(180deg, #86efac, var(--em-vk-correct)) !important;
    box-shadow: inset 0 0 0 2px rgba(21, 128, 61, 0.42), 0 0 15px rgba(34, 197, 94, 0.42) !important;
}

.em-piano-key.is-error,
.em-piano-key.is-target.is-error,
.em-piano-key.is-pressed.is-error {
    background: linear-gradient(180deg, #fca5a5, var(--em-vk-error)) !important;
    box-shadow: inset 0 0 0 2px rgba(185, 28, 28, 0.40), 0 0 14px rgba(239, 68, 68, 0.38) !important;
}

.em-vk-legend {
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    padding: 2px 10px 9px;
    color: var(--em-vk-muted);
    font-size: 10px;
    font-weight: 650;
}

.em-vk-legend span {
    gap: 5px;
}

.em-vk-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: #cbd5e1;
}

.em-vk-dot.is-target { background: var(--em-vk-target); }
.em-vk-dot.is-pressed { background: var(--em-vk-pressed); }
.em-vk-dot.is-correct { background: var(--em-vk-correct); }
.em-vk-dot.is-error { background: var(--em-vk-error); }

/* En fullscreen el teclado permanece dentro de la barra de controles y no
   altera el viewport independiente de la partitura. */
.em-ux-host:fullscreen .em-virtual-keyboard,
.em-ux-host:-webkit-full-screen .em-virtual-keyboard,
.em-ux-host.em-is-fullscreen .em-virtual-keyboard {
    margin-top: 7px;
}

@media (max-width: 900px), (pointer: coarse) {
    .em-virtual-keyboard {
        --em-vk-white-height: 98px;
        --em-vk-black-height: 60px;
        --em-vk-min-white-width: 25px;
    }

    .em-vk-scroller {
        padding-inline: 8px;
    }
}

@media (max-width: 600px) {
    .em-virtual-keyboard {
        --em-vk-white-height: 82px;
        --em-vk-black-height: 50px;
        --em-vk-min-white-width: 26px;
        border-radius: 12px;
    }

    .em-vk-header {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        padding: 8px;
    }

    .em-vk-heading,
    .em-vk-actions {
        width: 100%;
        justify-content: space-between;
    }

    .em-vk-size-label {
        flex: 1 1 auto;
    }

    .em-vk-size {
        flex: 1 1 auto;
        max-width: 150px;
    }

    .em-vk-toggle {
        flex: 0 0 auto;
    }

    .em-vk-message {
        padding-inline: 8px;
        font-size: 11px;
    }

    .em-vk-legend {
        gap: 5px 9px;
        font-size: 9px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .em-virtual-keyboard {
        --em-vk-white-height: 72px;
        --em-vk-black-height: 44px;
    }

    .em-vk-header {
        min-height: 40px;
        padding-block: 5px;
    }

    .em-vk-message,
    .em-vk-legend {
        display: none;
    }

    .em-vk-scroller {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-vk-collapse,
    .em-vk-toggle,
    .em-piano-key {
        transition: none !important;
    }
}

/* EM Feedback 3.0.22.25 ------------------------------------------------------
   Teclado virtual acoplado en la parte inferior del área de práctica.
   El componente es ahora hermano de la partitura, no hijo de la barra superior. */

.em-virtual-keyboard[hidden] {
    display: none !important;
}

.phonicscore-opensheetmusicdisplay__placeholder > .em-vk-bottom-dock {
    position: relative;
    z-index: 170;
    order: 30;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    box-sizing: border-box;
}

/* En la vista normal queda inmediatamente después de la partitura. */
.phonicscore-opensheetmusicdisplay__placeholder.em-started > .em-score-viewport + .em-vk-bottom-dock,
.phonicscore-opensheetmusicdisplay__placeholder.em-started > .phonicscore-opensheetmusicdisplay__render-block + .em-vk-bottom-dock {
    margin-top: 10px;
}

/* En fullscreen se reserva una franja inferior real. No se superpone sobre
   OSMD: el viewport usa el espacio central restante del layout flex. */
.em-ux-host:fullscreen > .em-wrapper,
.em-ux-host:-webkit-full-screen > .em-wrapper,
.em-ux-host.em-is-fullscreen > .em-wrapper {
    order: 10;
}

.em-ux-host:fullscreen > .em-score-viewport,
.em-ux-host:-webkit-full-screen > .em-score-viewport,
.em-ux-host.em-is-fullscreen > .em-score-viewport,
.em-ux-host:fullscreen > .phonicscore-opensheetmusicdisplay__render-block,
.em-ux-host:-webkit-full-screen > .phonicscore-opensheetmusicdisplay__render-block,
.em-ux-host.em-is-fullscreen > .phonicscore-opensheetmusicdisplay__render-block {
    order: 20;
    flex: 1 1 auto;
    min-height: 0;
}

.em-ux-host:fullscreen > .em-vk-bottom-dock,
.em-ux-host:-webkit-full-screen > .em-vk-bottom-dock,
.em-ux-host.em-is-fullscreen > .em-vk-bottom-dock {
    order: 30;
    flex: 0 0 auto;
    width: 100%;
    max-height: min(38vh, 230px);
    margin: 0 !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

/* La franja inferior puede desplazarse internamente en pantallas de poca
   altura, sin empujar ni ocultar la barra de controles superior. */
.em-ux-host:fullscreen > .em-vk-bottom-dock .em-vk-collapse-inner,
.em-ux-host:-webkit-full-screen > .em-vk-bottom-dock .em-vk-collapse-inner,
.em-ux-host.em-is-fullscreen > .em-vk-bottom-dock .em-vk-collapse-inner {
    max-height: calc(min(38vh, 230px) - 49px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* El zoom continúa flotando por encima de la esquina inferior derecha. */
.em-ux-host:fullscreen > .em-zoom-controls,
.em-ux-host:-webkit-full-screen > .em-zoom-controls,
.em-ux-host.em-is-fullscreen > .em-zoom-controls {
    z-index: 220;
}

@media (max-height: 620px) and (orientation: landscape) {
    .em-ux-host:fullscreen > .em-vk-bottom-dock,
    .em-ux-host:-webkit-full-screen > .em-vk-bottom-dock,
    .em-ux-host.em-is-fullscreen > .em-vk-bottom-dock {
        max-height: min(34vh, 150px);
    }

    .em-ux-host:fullscreen > .em-vk-bottom-dock .em-vk-collapse-inner,
    .em-ux-host:-webkit-full-screen > .em-vk-bottom-dock .em-vk-collapse-inner,
    .em-ux-host.em-is-fullscreen > .em-vk-bottom-dock .em-vk-collapse-inner {
        max-height: calc(min(34vh, 150px) - 40px);
    }
}

@media (max-width: 600px) {
    .phonicscore-opensheetmusicdisplay__placeholder > .em-vk-bottom-dock {
        margin-top: 7px;
    }

    .em-ux-host:fullscreen > .em-vk-bottom-dock,
    .em-ux-host:-webkit-full-screen > .em-vk-bottom-dock,
    .em-ux-host.em-is-fullscreen > .em-vk-bottom-dock {
        border-radius: 0;
    }
}

/* EM Feedback 3.0.22.26 ------------------------------------------------------
   App Shell unificado inspirado en el diseño móvil adjunto.
   La lógica musical permanece en los controles originales, que funcionan como
   fuente única de verdad detrás de esta fachada visual. */
.em-app-shell-v26 {
    --em-app-blue: #2563eb;
    --em-app-blue-soft: #eff6ff;
    --em-app-green: #059669;
    --em-app-green-soft: #ecfdf5;
    --em-app-purple: #7c3aed;
    --em-app-purple-soft: #f5f3ff;
    --em-app-red: #dc2626;
    --em-app-ink: #0f172a;
    --em-app-muted: #64748b;
    --em-app-line: #e2e8f0;
    --em-app-surface: #ffffff;
    --em-app-soft: #f8fafc;
    --em-app-shadow: 0 -5px 22px rgba(15, 23, 42, .08);
    position: relative;
    background: var(--em-app-soft) !important;
}

/* La interfaz histórica continúa viva para listeners, estado y módulos, pero
   deja de ocupar espacio visual. Sus overlays se trasladan al host por JS. */
.em-app-shell-v26 > .em-app-shell-legacy-ui {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
    box-shadow: none !important;
}

.em-app-shell-v26 > .em-zoom-controls,
.em-app-shell-v26 .em-focus-live-bar,
.em-app-shell-v26 .em-focus-toggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.em-app-shell-layer {
    position: relative;
    z-index: 500;
    order: 40;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    color: var(--em-app-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.em-app-shell-layer *,
.em-app-shell-layer *::before,
.em-app-shell-layer *::after {
    box-sizing: border-box;
}

.em-app-shell-layer button,
.em-app-shell-layer input,
.em-app-shell-layer select {
    font: inherit;
}

.em-app-shell-layer svg,
.em-app-rotate-overlay svg,
.em-app-rotate-content svg {
    display: block;
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-app-bottom-ui {
    width: 100%;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--em-app-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--em-app-shadow);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.em-app-progress-block {
    width: 100%;
    margin-bottom: 9px;
}

.em-app-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 0 2px 5px;
    color: #475569;
    font-size: 12px;
    line-height: 1.2;
}

.em-app-exercise-title {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-app-time-position {
    flex: 0 0 auto;
    color: var(--em-app-blue);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.em-app-progress-track {
    position: relative;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 999px;
    background: #f1f5f9;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.em-app-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, var(--em-app-blue));
    box-shadow: 0 0 10px rgba(37, 99, 235, .35);
    transition: width .22s ease;
}

.em-app-controls-scroller {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.em-app-controls-scroller::-webkit-scrollbar {
    display: none;
}

.em-app-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    padding: 1px 1px 2px;
}

.em-app-controls button {
    -webkit-tap-highlight-color: transparent;
}

.em-app-mode-selector,
.em-app-main-action,
.em-app-source-button,
.em-app-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 42px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.em-app-mode-selector:active,
.em-app-main-action:active,
.em-app-source-button:active,
.em-app-control:active {
    transform: scale(.96);
}

.em-app-mode-selector:focus-visible,
.em-app-main-action:focus-visible,
.em-app-source-button:focus-visible,
.em-app-control:focus-visible,
.em-app-shell-layer input:focus-visible,
.em-app-shell-layer select:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .48);
    outline-offset: 2px;
}

.em-app-mode-selector {
    gap: 7px;
    min-width: 164px;
    padding: 8px 13px;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    background: var(--em-app-blue-soft);
    box-shadow: 0 3px 9px rgba(15, 23, 42, .06);
    font-size: 13px;
    font-weight: 800;
}

.em-app-mode-selector.em-app-mode-practice {
    border-color: #a7f3d0;
    color: #047857;
    background: var(--em-app-green-soft);
}

.em-app-mode-selector.em-app-mode-autograde {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: var(--em-app-purple-soft);
}

.em-app-mode-icon,
.em-app-mode-caret,
.em-app-main-icon,
.em-app-source-icon {
    display: grid;
    place-items: center;
}

.em-app-mode-icon {
    font-size: 17px;
}

.em-app-mode-text {
    white-space: nowrap;
}

.em-app-mode-caret {
    margin-left: auto;
    font-size: 12px;
    opacity: .72;
}

.em-app-separator {
    flex: 0 0 auto;
    width: 1px;
    height: 25px;
    margin: 0 1px;
    background: var(--em-app-line);
}

.em-app-control {
    width: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--em-app-line);
    color: #526174;
    background: #f8fafc;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .055);
    font-size: 18px;
}

.em-app-control:hover:not(:disabled) {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.em-app-control:disabled,
.em-app-main-action:disabled {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
}

.em-app-main-action {
    gap: 7px;
    min-width: 116px;
    padding: 8px 18px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 7px 17px rgba(37, 99, 235, .28);
    font-size: 13px;
    font-weight: 850;
}

.em-app-main-action.em-app-main-practice {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 7px 17px rgba(5, 150, 105, .26);
}

.em-app-main-action.em-app-main-autograde {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 7px 17px rgba(220, 38, 38, .27);
}

.em-app-source-button {
    position: relative;
    gap: 7px;
    min-width: 112px;
    padding: 8px 13px;
    border: 1px solid #cbd5e1;
    color: #475569;
    background: #f8fafc;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .055);
    font-size: 12px;
    font-weight: 800;
}

.em-app-source-button.is-midi {
    border-color: #86efac;
    color: #047857;
    background: #ecfdf5;
}

.em-app-source-button.is-requesting {
    border-color: #fde68a;
    color: #92400e;
    background: #fffbeb;
}

.em-app-source-pulse {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8;
}

.em-app-source-button.is-midi .em-app-source-pulse {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .16);
}

.em-app-source-button.is-requesting .em-app-source-pulse {
    background: #f59e0b;
    animation: em-app-pulse 1.2s ease-in-out infinite;
}

.em-app-flex-spacer {
    flex: 1 1 24px;
    min-width: 12px;
}

.em-app-keyboard-toggle.is-active {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.em-app-zoom-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--em-app-line);
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .055);
}

.em-app-zoom-group .em-app-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.em-app-zoom-group .em-app-control + .em-app-control {
    border-left: 1px solid var(--em-app-line);
}

.em-app-close {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 650;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 50%;
    color: #475569;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.em-app-close[hidden] {
    display: none !important;
}

/* Modales y paneles --------------------------------------------------------- */
.em-app-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, .62);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity .2s ease;
}

.em-app-overlay[hidden] {
    display: none !important;
}

.em-app-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.em-app-modes-overlay {
    align-items: flex-end;
    padding: 0;
}

.em-app-sheet {
    width: 100%;
    max-height: 85%;
    padding: 0 18px max(24px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 55px rgba(15, 23, 42, .28);
    transform: translateY(105%);
    transition: transform .24s ease;
}

.em-app-overlay.is-open .em-app-sheet {
    transform: translateY(0);
}

.em-app-sheet-handle {
    width: 48px;
    height: 5px;
    margin: 12px auto 5px;
    border-radius: 999px;
    background: #dbe3ee;
}

.em-app-panel-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 10px 2px;
    border-bottom: 1px solid #f1f5f9;
}

.em-app-panel-heading h2 {
    flex: 1 1 auto;
    margin: 0;
    color: #1e293b;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.015em;
}

.em-app-panel-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
    cursor: pointer;
}

.em-app-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 0 2px;
}

.em-app-mode-card {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border: 2px solid #eef2f7;
    border-radius: 17px;
    color: #334155;
    background: #fff;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}

.em-app-mode-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.em-app-mode-card.is-active[data-mode="identify"] {
    color: #1d4ed8;
    border-color: #3b82f6;
    background: #eff6ff;
}

.em-app-mode-card.is-active[data-mode="practice"] {
    color: #047857;
    border-color: #10b981;
    background: #ecfdf5;
}

.em-app-mode-card.is-active[data-mode="autocalification"] {
    color: #6d28d9;
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.em-app-mode-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: currentColor;
    background: rgba(148, 163, 184, .12);
    font-size: 24px;
}

.em-app-mode-card strong {
    color: #334155;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}

.em-app-settings-overlay {
    justify-content: flex-end;
    padding: 0;
}

.em-app-settings-panel {
    width: min(86vw, 390px);
    height: 100%;
    background: #fff;
    box-shadow: -18px 0 55px rgba(15, 23, 42, .25);
    transform: translateX(105%);
    transition: transform .24s ease;
}

.em-app-overlay.is-open .em-app-settings-panel {
    transform: translateX(0);
}

.em-app-settings-panel > .em-app-panel-heading {
    padding: max(14px, env(safe-area-inset-top)) 18px 12px;
}

.em-app-settings-scroll {
    height: calc(100% - 66px);
    overflow-y: auto;
    padding: 18px 18px max(28px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
}

.em-app-setting-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.em-app-setting-section + .em-app-setting-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--em-app-line);
}

.em-app-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.em-app-setting[hidden],
.em-app-setting-section[hidden] {
    display: none !important;
}

.em-app-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #f1f5f9;
}

.em-app-segmented button {
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.em-app-segmented button.is-active {
    color: #1d4ed8;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}

.em-app-input-suffix {
    position: relative;
    display: block;
}

.em-app-input-suffix input,
.em-app-setting select,
.em-app-number-stepper input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    color: #334155;
    background: #f8fafc;
    outline: 0;
    font-weight: 700;
}

.em-app-input-suffix input {
    padding-right: 44px;
}

.em-app-input-suffix b {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #94a3b8;
    transform: translateY(-50%);
}

.em-app-setting-heading,
.em-app-range-setting > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.em-app-tempo-lock {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.em-app-number-stepper {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 7px;
}

.em-app-number-stepper button {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #526174;
    background: #f1f5f9;
    cursor: pointer;
}

.em-app-number-stepper input {
    text-align: center;
    font-size: 17px;
}

.em-app-number-stepper button:disabled,
.em-app-number-stepper input:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.em-app-range-setting output {
    color: var(--em-app-blue);
    font-size: 11px;
    font-weight: 850;
}

.em-app-range-setting output.is-overdrive {
    color: var(--em-app-red);
}

.em-app-range-setting input[type="range"] {
    --em-app-range-progress: 50%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--em-app-blue) 0 var(--em-app-range-progress), #dbe5f1 var(--em-app-range-progress) 100%);
    cursor: pointer;
}

.em-app-range-setting input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--em-app-blue);
    box-shadow: 0 3px 9px rgba(37, 99, 235, .34);
}

.em-app-range-setting input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--em-app-blue);
    box-shadow: 0 3px 9px rgba(37, 99, 235, .34);
}

.em-app-source-overlay {
    align-items: center;
    justify-content: center;
}

.em-app-source-panel {
    width: min(100%, 390px);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .32);
    transform: scale(.96);
    transition: transform .2s ease;
}

.em-app-overlay.is-open .em-app-source-panel {
    transform: scale(1);
}

.em-app-source-panel .em-app-panel-heading {
    padding: 12px 16px;
    background: #f8fafc;
}

.em-app-source-title-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #059669;
    background: #dcfce7;
    font-size: 20px;
}

.em-app-source-content {
    padding: 20px;
}

.em-app-source-description {
    margin: 0 0 16px;
    color: #526174;
    font-size: 13px;
    line-height: 1.6;
}

.em-app-midi-tip {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    color: #1e40af;
    background: #eff6ff;
}

.em-app-midi-tip > span {
    flex: 0 0 auto;
    font-size: 22px;
}

.em-app-midi-tip strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.em-app-midi-tip p {
    margin: 0;
    color: #1d4ed8;
    font-size: 11px;
    line-height: 1.5;
}

.em-app-source-understood {
    width: 100%;
    min-height: 43px;
    margin-top: 18px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #172033;
    cursor: pointer;
    font-weight: 800;
}

/* Teclado integrado al área central del nuevo diseño ----------------------- */
.em-app-shell-v26 > .em-vk-bottom-dock {
    order: 30;
    flex: 0 0 auto;
    margin: 0 !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
}

.em-app-shell-v26 .em-vk-header,
.em-app-shell-v26 .em-vk-message,
.em-app-shell-v26 .em-vk-legend {
    display: none !important;
}

.em-app-shell-v26 .em-vk-collapse-inner {
    max-height: none !important;
    overflow: visible !important;
}

.em-app-shell-v26 .em-vk-scroller {
    padding: 4px 8px 7px;
}

.em-app-shell-v26 .em-vk-surface {
    --em-vk-white-height: 104px;
    --em-vk-black-height: 64px;
    border-radius: 5px;
}

.em-app-shell-v26 > .em-score-viewport,
.em-app-shell-v26 > .phonicscore-opensheetmusicdisplay__render-block {
    order: 20;
    flex: 1 1 auto;
    min-height: 0;
}

/* Orientación vertical: reutiliza el overlay estable del botón Iniciar. */
.em-app-shell-v26 .em-rotate-overlay,
.em-app-shell-v26 [data-em-overlay="rotate"] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1200 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    color: #fff !important;
    background: #0f172a !important;
}

.em-app-rotate-content {
    max-width: 420px;
    text-align: center;
}

.em-app-rotate-icon {
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: #60a5fa;
    background: rgba(59, 130, 246, .14);
    font-size: 66px;
    animation: em-app-rotate-phone 2.5s ease-in-out infinite;
}

.em-app-rotate-content h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(25px, 4vw, 34px);
}

.em-app-rotate-content p {
    max-width: 390px;
    margin: 0 auto;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.55;
}

@keyframes em-app-pulse {
    0%, 100% { opacity: .55; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes em-app-rotate-phone {
    0%, 15% { transform: rotate(0); }
    45%, 55% { transform: rotate(-90deg); }
    85%, 100% { transform: rotate(0); }
}

/* Fullscreen --------------------------------------------------------------- */
.em-app-shell-v26:fullscreen,
.em-app-shell-v26:-webkit-full-screen,
.em-app-shell-v26.em-is-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.em-app-shell-v26:fullscreen > .em-app-shell-layer,
.em-app-shell-v26:-webkit-full-screen > .em-app-shell-layer,
.em-app-shell-v26.em-is-fullscreen > .em-app-shell-layer {
    order: 40;
    flex: 0 0 auto;
}

.em-app-shell-v26:fullscreen > .em-score-viewport,
.em-app-shell-v26:-webkit-full-screen > .em-score-viewport,
.em-app-shell-v26.em-is-fullscreen > .em-score-viewport,
.em-app-shell-v26:fullscreen > .phonicscore-opensheetmusicdisplay__render-block,
.em-app-shell-v26:-webkit-full-screen > .phonicscore-opensheetmusicdisplay__render-block,
.em-app-shell-v26.em-is-fullscreen > .phonicscore-opensheetmusicdisplay__render-block {
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    overflow: auto !important;
}

/* En página normal conserva una presentación compacta y no altera el tema. */
.em-app-shell-v26:not(:fullscreen):not(.em-is-fullscreen) > .em-app-shell-layer {
    margin-top: 0;
}

/* Pantallas bajas en horizontal -------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
    .em-app-bottom-ui {
        padding: 6px 9px max(7px, env(safe-area-inset-bottom));
    }

    .em-app-progress-block {
        margin-bottom: 5px;
    }

    .em-app-progress-meta {
        padding-bottom: 3px;
        font-size: 10px;
    }

    .em-app-progress-track {
        height: 5px;
    }

    .em-app-controls {
        gap: 6px;
    }

    .em-app-mode-selector,
    .em-app-main-action,
    .em-app-source-button,
    .em-app-control {
        min-height: 36px;
    }

    .em-app-control {
        width: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    .em-app-mode-selector {
        min-width: 145px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .em-app-main-action {
        min-width: 100px;
        padding: 6px 13px;
        font-size: 11px;
    }

    .em-app-source-button {
        min-width: 36px;
        width: 36px;
        padding: 0;
    }

    .em-app-source-text {
        display: none;
    }

    .em-app-shell-v26 .em-vk-surface {
        --em-vk-white-height: 66px;
        --em-vk-black-height: 40px;
    }

    .em-app-shell-v26 .em-vk-scroller {
        padding: 2px 5px 4px;
    }

    .em-app-mode-card {
        min-height: 82px;
        padding: 8px;
    }

    .em-app-mode-card-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
}

@media (max-width: 700px) {
    .em-app-bottom-ui {
        padding-inline: 8px;
    }

    .em-app-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .em-app-mode-selector {
        min-width: 148px;
    }

    .em-app-flex-spacer {
        min-width: 4px;
    }
}

@media (max-width: 480px) {
    .em-app-progress-meta {
        font-size: 10px;
    }

    .em-app-mode-selector {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    .em-app-mode-text,
    .em-app-mode-caret {
        display: none;
    }

    .em-app-source-button {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    .em-app-source-text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-app-shell-layer *,
    .em-app-rotate-icon {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* EM Feedback 3.0.22.27 -----------------------------------------------------
   Loop básico por compases para el Modo práctica. El rango se representa en
   la barra de progreso y los selectores permanecen compactos en horizontal. */

.em-app-progress-fill {
    position: relative;
    z-index: 2;
}

.em-app-loop-range {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    min-width: 3px;
    border-radius: 999px;
    background: rgba(16, 185, 129, .28);
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, .42);
    pointer-events: none;
}

.em-app-loop-range[hidden],
.em-app-loop-status[hidden],
.em-app-loop-tools[hidden] {
    display: none !important;
}

.em-app-loop-status {
    width: max-content;
    max-width: 100%;
    margin: 5px 0 0 2px;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-app-loop-tools {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    padding: 3px;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.em-app-loop-toggle,
.em-app-loop-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 36px;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    color: #526174;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.em-app-loop-toggle {
    gap: 5px;
    padding: 7px 10px;
}

.em-app-loop-clear {
    width: 36px;
    padding: 0;
}

.em-app-loop-toggle svg,
.em-app-loop-clear svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-app-loop-toggle:hover,
.em-app-loop-clear:hover {
    color: #047857;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.em-app-loop-toggle:active,
.em-app-loop-clear:active {
    transform: scale(.96);
}

.em-app-loop-toggle.is-active {
    color: #fff;
    border-color: #059669;
    background: linear-gradient(180deg, #10b981, #059669);
    box-shadow: 0 6px 15px rgba(5, 150, 105, .24);
}

.em-app-loop-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 3px 4px 3px 8px;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    color: #64748b;
    background: #fff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.em-app-loop-field select {
    width: auto;
    min-width: 84px;
    max-width: 112px;
    min-height: 28px;
    padding: 3px 22px 3px 8px;
    border: 0;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    cursor: pointer;
    outline: 0;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
}

@media (max-height: 520px) and (orientation: landscape) {
    .em-app-loop-tools {
        gap: 4px;
        padding: 2px;
    }

    .em-app-loop-toggle,
    .em-app-loop-clear,
    .em-app-loop-field {
        min-height: 32px;
    }

    .em-app-loop-toggle {
        width: 32px;
        padding: 0;
    }

    .em-app-loop-toggle span,
    .em-app-loop-field > span {
        display: none;
    }

    .em-app-loop-clear {
        width: 32px;
    }

    .em-app-loop-field {
        padding: 2px;
    }

    .em-app-loop-field select {
        min-width: 78px;
        max-width: 92px;
        min-height: 28px;
        padding-inline: 7px;
    }

    .em-app-loop-status {
        margin-top: 3px;
        padding: 2px 7px;
        font-size: 9px;
    }
}

@media (max-width: 560px) {
    .em-app-loop-toggle span,
    .em-app-loop-field > span {
        display: none;
    }

    .em-app-loop-toggle {
        width: 36px;
        padding: 0;
    }

    .em-app-loop-field {
        padding: 3px;
    }

    .em-app-loop-field select {
        min-width: 82px;
        max-width: 98px;
        padding-inline: 7px;
    }
}

/* EM Feedback 3.0.22.28 ------------------------------------------------------
   Focus visual y navegación por compases. También refuerza la limpieza visual
   del Loop cuando el usuario cambia de modo o abandona la pantalla completa. */

.em-app-loop-nav,
.em-app-loop-focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    color: #526174;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.em-app-loop-focus {
    width: auto;
    gap: 5px;
    padding: 7px 10px;
}

.em-app-loop-nav svg,
.em-app-loop-focus svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-app-loop-nav:hover:not(:disabled),
.em-app-loop-focus:hover:not(:disabled) {
    color: #047857;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.em-app-loop-nav:active:not(:disabled),
.em-app-loop-focus:active:not(:disabled) {
    transform: scale(.96);
}

.em-app-loop-focus.is-active {
    color: #fff;
    border-color: #059669;
    background: linear-gradient(180deg, #10b981, #059669);
    box-shadow: 0 6px 15px rgba(5, 150, 105, .24);
}

.em-app-loop-nav:disabled,
.em-app-loop-focus:disabled {
    cursor: not-allowed;
    opacity: .38;
    box-shadow: none;
}

.em-loop-focus-overlay {
    position: absolute;
    z-index: 95;
    top: 0;
    left: 0;
    display: block;
    max-width: none !important;
    overflow: visible;
    pointer-events: none;
}

.em-loop-focus-active > .em-score-viewport,
.em-loop-focus-active > .phonicscore-opensheetmusicdisplay__render-block {
    scroll-behavior: smooth;
}

.em-loop-focus-active .em-app-loop-status {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .12);
}

@media (max-height: 520px) and (orientation: landscape) {
    .em-app-loop-nav,
    .em-app-loop-focus {
        min-width: 32px;
        min-height: 32px;
    }

    .em-app-loop-focus {
        width: 32px;
        padding: 0;
    }

    .em-app-loop-focus span {
        display: none;
    }
}

@media (max-width: 700px) {
    .em-app-loop-focus {
        width: 36px;
        padding: 0;
    }

    .em-app-loop-focus span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-app-loop-nav,
    .em-app-loop-focus,
    .em-loop-focus-active > .em-score-viewport,
    .em-loop-focus-active > .phonicscore-opensheetmusicdisplay__render-block {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* EM Feedback 3.0.22.29 ------------------------------------------------------
   Nombres de notas y opciones tipo interruptor. */

.em-app-switch-setting {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.em-app-switch-setting > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.em-app-switch-setting b {
    color: #334155;
    font-size: 14px;
    line-height: 1.25;
}

.em-app-switch-setting small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.em-app-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.em-app-switch > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .25);
    transition: transform .18s ease;
}

.em-app-switch.is-active,
.em-app-switch[aria-checked="true"] {
    border-color: #2563eb;
    background: #3b82f6;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.em-app-switch.is-active > span,
.em-app-switch[aria-checked="true"] > span {
    transform: translateX(20px);
}

.em-app-switch:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .45);
    outline-offset: 2px;
}

.em-note-label-layer {
    position: absolute;
    z-index: 82;
    top: 0;
    left: 0;
    display: block;
    min-width: 100%;
    min-height: 100%;
    overflow: visible;
    pointer-events: none;
    contain: layout style;
}

.em-note-label-layer[hidden] {
    display: none !important;
}

.em-note-label {
    --em-note-label-row: 0;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 110px;
    min-height: 15px;
    padding: 1px 4px;
    border: 1px solid rgba(191, 219, 254, .9);
    border-radius: 5px;
    color: #1d4ed8;
    background: rgba(239, 246, 255, .94);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    transform: translate(-50%, calc(var(--em-note-label-row) * 14px));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.em-note-label[data-staff="left"] {
    color: #6d28d9;
    border-color: rgba(221, 214, 254, .92);
    background: rgba(245, 243, 255, .94);
}

.em-note-label.is-condensed {
    padding-inline: 2px;
    font-size: 8px;
    letter-spacing: -.02em;
}

.em-loop-focus-active .em-note-label-layer {
    z-index: 96;
}

@media (max-height: 520px) and (orientation: landscape) {
    .em-note-label {
        min-height: 13px;
        padding: 0 3px;
        font-size: 8px;
        transform: translate(-50%, calc(var(--em-note-label-row) * 12px));
    }

    .em-app-switch-setting small {
        display: none;
    }
}

@media print {
    .em-note-label-layer {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-app-switch,
    .em-app-switch > span {
        transition: none !important;
    }
}


/* EM Feedback 3.0.22.30 ------------------------------------------------------
   Plan de estudio: repeticiones, pausas y aumento gradual de BPM. */

.em-app-study-setting {
    gap: 7px;
}

.em-app-study-setting > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.em-app-study-setting b {
    color: #334155;
    font-size: 14px;
    line-height: 1.25;
}

.em-app-study-setting small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.em-app-tempo-target {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    color: #334155;
    background: #f8fafc;
    outline: 0;
    font-weight: 700;
}

.em-app-tempo-target:focus,
.em-app-study-setting select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}

.em-ux-host > #em-countdown-overlay.em-countdown-fullscreen #em-countdown-number.em-study-pause {
    min-width: 150px;
    padding: 18px 22px !important;
    white-space: nowrap;
    font-size: clamp(24px, 5vw, 42px) !important;
    line-height: 1.1 !important;
}

@media (max-height: 520px) {
    .em-app-settings-scroll {
        padding-top: 12px;
    }

    .em-app-setting-section {
        gap: 14px;
    }
}

/* EM Feedback 3.0.22.31 ------------------------------------------------------
   Barra de práctica compacta: Loop plegable y acceso directo al metrónomo.
   Todos los controles permanecen en una sola línea; si no caben, la barra
   conserva desplazamiento horizontal táctil sin crear una segunda fila. */

.em-app-controls-scroller {
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

.em-app-controls {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.em-app-controls > *,
.em-app-loop-tools,
.em-app-loop-options,
.em-app-metronome-button {
    flex-shrink: 0;
}

.em-app-loop-tools {
    flex-wrap: nowrap !important;
    overflow: visible;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.em-app-loop-tools:not(.is-expanded) {
    padding: 3px;
}

.em-app-loop-tools.is-expanded {
    border-color: #a7f3d0;
    background: #f0fdf4;
    box-shadow: 0 4px 13px rgba(5, 150, 105, .10);
}

.em-app-loop-options {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: none;
    opacity: 1;
    transform: translateX(0);
    animation: em-app-loop-options-enter .18s ease both;
}

.em-app-loop-options[hidden] {
    display: none !important;
}

@keyframes em-app-loop-options-enter {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.em-app-metronome-button {
    --em-app-beat-duration: .5s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .06);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    scroll-snap-align: nearest;
}

.em-app-metronome-button[hidden] {
    display: none !important;
}

.em-app-metronome-button:hover {
    color: #1e40af;
    border-color: #93c5fd;
    background: #dbeafe;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .16);
}

.em-app-metronome-button:active {
    transform: scale(.96);
}

.em-app-metronome-button:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .48);
    outline-offset: 2px;
}

.em-app-metronome-icon,
.em-app-metronome-lock {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.em-app-metronome-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 90%;
}

.em-app-metronome-button.is-playing .em-app-metronome-icon svg {
    animation: em-app-metronome-beat var(--em-app-beat-duration) ease-in-out infinite alternate;
}

@keyframes em-app-metronome-beat {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

.em-app-metronome-bpm {
    min-width: 24px;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    text-align: right;
}

.em-app-metronome-unit {
    color: #64748b;
    font-size: 9px;
    line-height: 1;
}

.em-app-metronome-lock svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-app-metronome-button.is-locked {
    color: #6d28d9;
    border-color: #ddd6fe;
    background: #f5f3ff;
}

.em-app-metronome-button.is-locked .em-app-metronome-unit {
    color: #7c3aed;
}

.em-app-tempo-setting {
    scroll-margin-top: 12px;
}

@media (max-height: 520px) and (orientation: landscape) {
    .em-app-loop-options {
        gap: 4px;
    }

    .em-app-metronome-button {
        min-height: 36px;
        padding: 5px 9px;
    }

    .em-app-metronome-icon svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 560px) {
    .em-app-loop-options {
        gap: 4px;
    }

    .em-app-metronome-button {
        min-height: 38px;
        padding-inline: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-app-loop-options,
    .em-app-metronome-button,
    .em-app-metronome-icon svg {
        animation: none !important;
        transition: none !important;
    }
}

/* EM Feedback 3.0.22.32 -----------------------------------------------------
   Barra de progreso interactiva, navegación por nota y ayuda de atajos. */

.em-app-progress-track {
    --em-app-progress-position: 0%;
    --em-app-seek-preview: 0%;
    height: 10px;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.em-app-progress-track::before {
    content: '';
    position: absolute;
    inset: -8px 0;
    border-radius: 999px;
}

.em-app-progress-track:hover,
.em-app-progress-track:focus-visible,
.em-app-progress-track.is-seeking {
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, .08),
        0 0 0 4px rgba(59, 130, 246, .12);
}

.em-app-progress-track:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .55);
    outline-offset: 4px;
}

.em-app-seek-preview {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--em-app-seek-preview);
    border-radius: inherit;
    background: rgba(14, 165, 233, .34);
    opacity: 0;
    pointer-events: none;
}

.em-app-progress-track.is-seeking .em-app-seek-preview {
    opacity: 1;
}

.em-app-progress-thumb {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: var(--em-app-progress-position);
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(30, 64, 175, .38);
    transform: translate(-50%, -50%);
    transition: left .18s ease, transform .15s ease, opacity .15s ease;
    pointer-events: none;
}

.em-app-progress-track:hover .em-app-progress-thumb,
.em-app-progress-track:focus-visible .em-app-progress-thumb,
.em-app-progress-track.is-seeking .em-app-progress-thumb {
    transform: translate(-50%, -50%) scale(1.12);
}

.em-app-progress-track.is-seeking .em-app-progress-fill,
.em-app-progress-track.is-seeking .em-app-progress-thumb {
    transition: none !important;
}

.em-app-navigation-toast {
    position: absolute;
    z-index: 10120;
    left: 50%;
    bottom: calc(100% + 12px);
    max-width: min(92vw, 420px);
    padding: 8px 13px;
    border: 1px solid rgba(51, 65, 85, .18);
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .9);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    transform: translate(-50%, 8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.em-app-navigation-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.em-app-navigation-toast[hidden] {
    display: none !important;
}

.em-app-shortcuts-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #334155;
}

.em-app-shortcuts-heading b {
    font-size: 14px;
}

.em-app-shortcuts-heading small {
    color: #64748b;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.4;
}

.em-app-shortcut-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.em-app-shortcut-list > div {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 10px;
    color: #475569;
    font-size: 11px;
    font-weight: 650;
}

.em-app-shortcut-list > div + div {
    border-top: 1px solid #e7edf4;
}

.em-app-shortcut-list > div > span {
    grid-column: 3;
    min-width: 0;
    text-align: right;
}

.em-app-shortcut-list kbd {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 26px;
    padding: 3px 7px;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 7px;
    color: #334155;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.em-app-shortcut-list > div:has(kbd:only-of-type) {
    grid-template-columns: auto minmax(0, 1fr);
}

.em-app-shortcut-list > div:has(kbd:only-of-type) > span {
    grid-column: 2;
}

@supports not selector(:has(*)) {
    .em-app-shortcut-list > div {
        grid-template-columns: auto auto minmax(0, 1fr);
    }
}

@media (max-height: 500px) {
    .em-app-progress-track {
        height: 9px;
    }

    .em-app-progress-thumb {
        width: 14px;
        height: 14px;
    }
}

/* EM Feedback 3.0.22.33 -------------------------------------------------------
   Vista horizontal continua + búsqueda pausada en la barra de progreso. */

/* El control rápido comparte el lenguaje visual de teclado y zoom. */
.em-app-view-toggle.is-active {
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
    background: #dbeafe !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .18) !important;
}

.em-app-view-toggle.is-loading svg {
    animation: em-score-view-spin 900ms linear infinite;
}

.em-app-score-view-setting > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.em-app-score-view-setting small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

/* Mientras OSMD vuelve a cargar el MusicXML, bloqueamos únicamente el área del
   ejercicio y mostramos una confirmación clara. */
.em-score-view-loading {
    position: absolute;
    inset: 0;
    z-index: 26000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-sizing: border-box;
    padding: 24px;
    color: #0f172a;
    text-align: center;
    background: rgba(248, 250, 252, .94);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.em-score-view-loading[hidden] {
    display: none !important;
}

.em-score-view-loading strong {
    font-size: 17px;
}

.em-score-view-loading small {
    color: #64748b;
    font-size: 12px;
}

.em-score-view-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: em-score-view-spin 800ms linear infinite;
}

@keyframes em-score-view-spin {
    to { transform: rotate(360deg); }
}

/* Vista horizontal: OSMD genera una sola staffline. El SVG conserva su ancho
   real y el viewport se convierte en una cinta desplazable. */
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-score-viewport {
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-score-viewport > svg,
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-score-viewport svg:first-of-type {
    display: block;
    max-width: none !important;
    flex: 0 0 auto;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.phonicscore-opensheetmusicdisplay__render-block {
    max-width: none !important;
}

/* En vista horizontal dejamos más aire por debajo para etiquetas y cursor,
   evitando que queden pegados a la barra inferior. */
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-started
.em-score-viewport {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-note-label-layer,
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-loop-focus-overlay {
    min-width: 100%;
}

/* El pulgar indica una acción de búsqueda. Al soltar siempre queda pausado. */
.em-app-progress-track {
    cursor: pointer;
}

.em-app-progress-track:active .em-app-progress-thumb,
.em-app-progress-track.is-seeking .em-app-progress-thumb {
    transform: translate(-50%, -50%) scale(1.16);
}

@media (max-height: 500px) {
    .em-score-view-loading {
        gap: 5px;
        padding: 12px;
    }
    .em-score-view-spinner {
        width: 28px;
        height: 28px;
    }
    .em-score-view-loading strong {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-app-view-toggle.is-loading svg,
    .em-score-view-spinner {
        animation-duration: 1600ms;
    }
    .phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
    .em-score-viewport {
        scroll-behavior: auto;
    }
}

/* EM Feedback 3.0.22.34 ------------------------------------------------------
   Tres modos de seguimiento para la vista horizontal continua. */
.em-app-cursor-follow-setting[hidden] {
    display: none !important;
}

.em-app-cursor-follow-setting small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-score-viewport {
    scroll-padding-inline: 15% 15%;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-center
.em-score-viewport {
    --em-horizontal-cursor-anchor: 50%;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-left
.em-score-viewport {
    --em-horizontal-cursor-anchor: 20%;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-page
.em-score-viewport {
    --em-horizontal-cursor-anchor: 15%;
    overscroll-behavior-x: contain;
}

@media (prefers-reduced-motion: reduce) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
    .em-score-viewport {
        scroll-behavior: auto !important;
    }
}


/* EM Feedback 3.0.22.36 -------------------------------------------------------
   Seguimiento horizontal estable en móvil, tablet y escritorio. */
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-center
.em-score-viewport,
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-left
.em-score-viewport {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal.em-cursor-follow-page
.em-score-viewport {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

/* El viewport explícito es el único dueño del desplazamiento horizontal. Los
   wrappers internos de OSMD conservan su ancho real sin crear scroll anidado. */
.phonicscore-opensheetmusicdisplay__placeholder.em-score-horizontal
.em-score-viewport [id^="osmdCanvasPage"] {
    overflow: visible !important;
}

/* EM Feedback 3.0.22.62 ------------------------------------------------------
   Selector de modo integrado en la pantalla "Listo para empezar". */
.em-start-mode-picker[hidden],
.em-start-gate-button[hidden] {
    display: none !important;
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
    width: min(100%, 760px);
    max-width: 760px;
    padding: clamp(20px, 3.2vw, 30px);
}

.em-start-mode-picker {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
}

/* Con Video lección hay cuatro opciones. En escritorio se presentan como una
   grilla 2×2 para mantener títulos y descripciones legibles. */
.em-start-mode-picker[data-mode-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.em-start-mode-option {
    min-width: 0;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.07);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.em-start-mode-option:hover:not(:disabled),
.em-start-mode-option:focus-visible {
    border-color: #60a5fa;
    background: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.14);
}

.em-start-mode-option:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.38);
    outline-offset: 2px;
}

.em-start-mode-option:disabled,
.em-start-mode-option.is-busy {
    opacity: 0.62;
    cursor: wait;
    transform: none;
}

.em-start-mode-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 22px;
    font-weight: 800;
}

.em-start-mode-video .em-start-mode-icon {
    color: #6d28d9;
    background: #f5f3ff;
}

.em-start-mode-practice .em-start-mode-icon {
    color: #166534;
    background: #ecfdf5;
}

.em-start-mode-autocalification .em-start-mode-icon {
    color: #7c2d12;
    background: #fff7ed;
}

.em-start-mode-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.em-start-mode-copy strong {
    font-size: 15px;
    line-height: 1.2;
}

.em-start-mode-copy small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 720px) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-start-gated {
        min-height: min(440px, 78vh);
        max-height: min(520px, 86vh);
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
        width: min(100%, 390px);
        max-height: calc(86vh - 30px);
        padding: 18px 16px;
        gap: 8px;
    }

    .em-start-mode-picker {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .em-start-mode-picker[data-mode-count="4"] {
        grid-template-columns: 1fr;
    }

    .em-start-mode-option {
        min-height: 62px;
        padding: 9px 11px;
    }

    .em-start-mode-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .em-start-mode-copy small {
        font-size: 11px;
    }
}

@media (max-height: 470px) and (orientation: landscape) {
    .em-start-gate-overlay.has-mode-picker .em-start-gate-card,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
        width: min(94vw, 780px);
        max-width: 780px;
        min-height: 0;
        padding: 12px 16px;
        gap: 6px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-icon,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-title,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-title {
        min-height: 24px;
        font-size: 20px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-subtitle,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-subtitle {
        min-height: 22px;
        margin-bottom: 2px;
    }

    .em-start-mode-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .em-start-mode-picker[data-mode-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .em-start-mode-option {
        min-height: 58px;
        padding: 8px 10px;
    }

    .em-start-mode-copy small {
        display: none;
    }
}

/* EM Feedback 3.0.22.63 ------------------------------------------------------
   Selector inicial compacto y sin recortes. Mantiene visible una mayor parte
   de la partitura detrás de la tarjeta, evita desbordes en móvil horizontal y
   conserva un scroll interno como último recurso en pantallas muy pequeñas. */
.phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started) {
    min-height: clamp(340px, 54vh, 420px);
    max-height: clamp(380px, 64vh, 480px);
}

.em-start-gate-overlay.has-mode-picker,
.em-start-gate-overlay:has(.em-start-mode-picker:not([hidden])) {
    padding: clamp(10px, 2vw, 18px);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.42), rgba(248, 250, 252, 0.54));
    -webkit-backdrop-filter: blur(0.45px);
    backdrop-filter: blur(0.45px);
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
    width: min(calc(100% - 8px), 760px);
    max-width: 760px;
    max-height: calc(100% - 4px);
    min-height: 0;
    padding: clamp(14px, 2.2vw, 20px);
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-icon,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0;
    border-radius: 14px;
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-icon span,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-icon span {
    font-size: 26px;
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-title,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-title {
    min-height: 26px;
    font-size: clamp(20px, 2.6vw, 23px);
}

.em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-subtitle,
.em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-subtitle {
    min-height: 24px;
    margin-bottom: 2px;
    line-height: 1.3;
}

.em-start-mode-picker,
.em-start-mode-picker[data-mode-count="4"] {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.em-start-mode-option {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    padding: 10px 12px;
    gap: 10px;
    overflow: hidden;
}

.em-start-mode-copy,
.em-start-mode-copy strong,
.em-start-mode-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.em-start-mode-copy strong {
    font-size: 14px;
}

.em-start-mode-copy small {
    font-size: 11.5px;
    line-height: 1.3;
}

@media (max-width: 720px) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started) {
        min-height: min(390px, 76vh);
        max-height: min(460px, 86vh);
    }

    .em-start-gate-overlay.has-mode-picker,
    .em-start-gate-overlay:has(.em-start-mode-picker:not([hidden])) {
        padding: 8px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
        width: calc(100% - 4px);
        max-width: 430px;
        max-height: calc(100% - 2px);
        padding: 12px;
        gap: 5px;
    }

    .em-start-mode-picker,
    .em-start-mode-picker[data-mode-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .em-start-mode-option {
        min-height: 58px;
        padding: 8px 9px;
        gap: 8px;
    }

    .em-start-mode-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .em-start-mode-copy strong {
        font-size: 13px;
        line-height: 1.15;
    }

    .em-start-mode-copy small {
        display: none;
    }

    .em-start-mode-picker:not([data-mode-count="4"]) .em-start-mode-option:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .phonicscore-opensheetmusicdisplay__placeholder.em-start-gated:not(.em-started) {
        min-height: min(330px, 88vh);
        max-height: min(420px, 94vh);
    }

    .em-start-gate-overlay.has-mode-picker,
    .em-start-gate-overlay:has(.em-start-mode-picker:not([hidden])) {
        padding: 6px 8px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) {
        width: min(calc(100% - 8px), 760px);
        max-width: 760px;
        max-height: calc(100% - 2px);
        padding: 9px 12px;
        gap: 3px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-icon,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-icon span,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-icon span {
        font-size: 22px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-title,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-title {
        min-height: 22px;
        font-size: 18px;
    }

    .em-start-gate-overlay.has-mode-picker .em-start-gate-card .em-start-gate-subtitle,
    .em-start-gate-card:has(.em-start-mode-picker:not([hidden])) .em-start-gate-subtitle {
        min-height: 18px;
        margin: 0;
        font-size: 12px;
    }

    .em-start-mode-picker,
    .em-start-mode-picker[data-mode-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .em-start-mode-option {
        min-height: 50px;
        padding: 6px 9px;
    }

    .em-start-mode-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .em-start-mode-copy strong {
        font-size: 13px;
        line-height: 1.1;
    }

    .em-start-mode-copy small {
        display: none;
    }
}

@media (max-width: 390px) {
    .em-start-mode-picker,
    .em-start-mode-picker[data-mode-count="4"] {
        grid-template-columns: 1fr;
    }

    .em-start-mode-picker:not([data-mode-count="4"]) .em-start-mode-option:last-child:nth-child(odd) {
        grid-column: auto;
    }
}


/* EM Feedback 3.0.22.64 ------------------------------------------------------
   Las reglas globales de algunos temas convierten en blanco el texto de todos
   los botones al hacer hover. El selector conserva contraste y añade estados
   inequívocos de botón sin afectar otros controles del sitio. */
.em-start-gate-overlay .em-start-mode-option,
.em-start-gate-overlay .em-start-mode-option:hover:not(:disabled),
.em-start-gate-overlay .em-start-mode-option:focus-visible,
.em-start-gate-overlay .em-start-mode-option:active {
    -webkit-appearance: none;
    appearance: none;
    color: #0f172a !important;
    text-decoration: none !important;
}

.em-start-gate-overlay .em-start-mode-option .em-start-mode-copy strong,
.em-start-gate-overlay .em-start-mode-option:hover:not(:disabled) .em-start-mode-copy strong,
.em-start-gate-overlay .em-start-mode-option:focus-visible .em-start-mode-copy strong,
.em-start-gate-overlay .em-start-mode-option:active .em-start-mode-copy strong {
    color: #0f172a !important;
}

.em-start-gate-overlay .em-start-mode-option .em-start-mode-copy small,
.em-start-gate-overlay .em-start-mode-option:hover:not(:disabled) .em-start-mode-copy small,
.em-start-gate-overlay .em-start-mode-option:focus-visible .em-start-mode-copy small,
.em-start-gate-overlay .em-start-mode-option:active .em-start-mode-copy small {
    color: #64748b !important;
}

.em-start-gate-overlay .em-start-mode-option:hover:not(:disabled),
.em-start-gate-overlay .em-start-mode-option:focus-visible {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.20) !important;
    transform: translateY(-2px) scale(1.01);
}

.em-start-gate-overlay .em-start-mode-option:hover:not(:disabled) .em-start-mode-icon,
.em-start-gate-overlay .em-start-mode-option:focus-visible .em-start-mode-icon {
    transform: scale(1.07);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.16);
}

.em-start-gate-overlay .em-start-mode-option:active:not(:disabled) {
    background: #dbeafe !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
    transform: translateY(0) scale(0.99);
}

.em-start-gate-overlay .em-start-mode-icon {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .em-start-gate-overlay .em-start-mode-option,
    .em-start-gate-overlay .em-start-mode-icon {
        transition: none !important;
    }
}