/**
 * App móvil — texto y controles más grandes.
 * Solo @media (max-width: 767px) + body.app-shell → escritorio sin cambios.
 */

@media (max-width: 767px) {
    html:has(body.app-shell) {
        font-size: 18px;
    }

    body.app-shell .app-player-zone {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.app-shell .app-scroll {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.app-shell .app-brand-name {
        font-size: 1.15rem;
    }

    body.app-shell .app-brand-tagline {
        font-size: 0.68rem;
    }

    body.app-shell .app-brand-emoji.musquitoo-logo-img {
        width: 44px !important;
        height: 44px !important;
    }

    body.app-shell .app-focus-toggle,
    body.app-shell .app-shortcuts-open {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    body.app-shell .toolbar-select,
    body.app-shell .theme-select,
    body.app-shell .lang-select {
        min-height: 44px;
        max-width: none;
        min-width: 4.5rem;
        padding: 8px 12px;
        font-size: 0.88rem;
    }

    body.app-shell .timer {
        font-size: 2.85rem;
    }

    body.app-shell #currentPlay {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    body.app-shell .progress-touch {
        height: 10px;
    }

    body.app-shell .main-controls .fa-4x {
        font-size: 3.5em;
    }

    body.app-shell .btn-play-main {
        min-width: 80px;
        min-height: 80px;
    }

    body.app-shell .btn-transport {
        min-width: 52px;
        min-height: 52px;
    }

    body.app-shell .btn-apply-manual,
    body.app-shell .btn-loop,
    body.app-shell .btn-action {
        min-height: 52px;
        font-size: 1rem;
        padding: 12px 16px;
    }

    body.app-shell .gestion-playlist small,
    body.app-shell .loop-master-container small {
        font-size: 0.82rem;
    }

    body.app-shell .control-hint {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    body.app-shell .practice-flow-strip {
        gap: 8px;
        padding-bottom: 14px;
    }

    body.app-shell .flow-step {
        min-width: 80px;
        padding: 12px 10px;
    }

    body.app-shell .flow-step-num {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    body.app-shell .flow-step-label {
        font-size: 0.72rem;
    }

    body.app-shell .zone-header-text h2 {
        font-size: 1.2rem;
    }

    body.app-shell .zone-header small {
        font-size: 0.82rem;
    }

    body.app-shell .dash-card-value {
        font-size: 1.5rem;
    }

    body.app-shell .dash-card-label {
        font-size: 0.72rem;
    }

    body.app-shell .btn-lista-tab {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.92rem;
    }

    body.app-shell .playlist-container {
        max-height: min(48vh, 340px);
    }

    body.app-shell .app-scroll .gestion-playlist,
    body.app-shell .app-scroll .loop-master-container,
    body.app-shell .app-scroll .library-section,
    body.app-shell .app-scroll .library-section-panel {
        padding: 18px;
    }

    body.app-shell .app-features-map summary {
        font-size: 0.95rem;
    }

    body.app-shell .app-feature-link {
        font-size: 0.88rem;
        padding: 12px 14px;
        min-height: 48px;
    }

    body.app-shell .practice-stats-line {
        font-size: 0.9rem;
    }

    body.app-shell #canvas-wave {
        max-height: 80px;
    }

    body.app-shell .library-card-title {
        font-size: 1rem;
    }

    body.app-shell .library-card-meta {
        font-size: 0.82rem;
    }
}

/* Teléfonos muy estrechos: un poco más de aire sin encoger texto */
@media (max-width: 380px) {
    body.app-shell .flow-step {
        min-width: 72px;
    }

    body.app-shell .app-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: center;
        flex-wrap: wrap;
    }
}