/*
 * WORKBENCH V3 — interfaz oficial, reversible con ?ui=legacy
 *
 * Esta hoja se carga al final y solo modifica la interfaz cuando
 * html[data-workbench="v3"] está activo. El tablero, SilicioBoard, sus SVG,
 * coordenadas y capas de dibujo quedan fuera de cualquier transformación.
 */

.workbench-command-bar,
.workbench-status-bar,
.workbench-tabs,
.workbench-rail-label,
.workbench-rail-personalization,
.workbench-module-heading,
.workbench-motor-empty,
.workbench-training-pane,
.workbench-book-empty,
.workbench-persistent-module {
    display: none;
}

/* El wrapper no altera el flujo legacy ni móvil; V3 le da layout dentro de su media query. */
.workbench-book-pane {
    display: contents;
}

@media (min-width: 769px) {
    html[data-workbench="v3"] {
        --workbench-surface: color-mix(in srgb, var(--theme-bg-secondary) 94%, transparent);
        --workbench-surface-strong: color-mix(in srgb, var(--theme-bg-tertiary) 88%, var(--theme-bg-primary));
        --workbench-surface-soft: color-mix(in srgb, var(--theme-bg-tertiary) 62%, transparent);
        --workbench-border: color-mix(in srgb, var(--theme-border) 82%, transparent);
        --workbench-border-strong: color-mix(in srgb, var(--theme-accent-primary) 48%, var(--theme-border));
        --workbench-accent-soft: color-mix(in srgb, var(--theme-accent-primary) 14%, transparent);
        --workbench-accent-medium: color-mix(in srgb, var(--theme-accent-primary) 26%, transparent);
        --workbench-shadow: 0 16px 42px color-mix(in srgb, var(--theme-shadow) 70%, transparent);
        --workbench-radius-lg: 14px;
        --workbench-radius-md: 10px;
        --workbench-radius-sm: 8px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) {
        background: var(--theme-bg-primary);
    }

    html[data-workbench="v3"] body .chess-layout {
        background: var(--theme-bg-primary) !important;
    }

    html[data-workbench="v3"] body .icons-sidebar,
    html[data-workbench="v3"] body .controls-container {
        background: var(--workbench-surface) !important;
        border-color: var(--workbench-border) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-border) 40%, transparent);
    }

    html[data-workbench="v3"] body .controls-container {
        min-width: 0 !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    html[data-workbench="v3"] body .workbench-tabs {
        grid-area: workbench-tabs;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-width: 0;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-md);
        background: var(--workbench-surface-soft);
        overflow: hidden;
    }

    html[data-workbench="v3"] body .workbench-tab {
        position: relative;
        min-width: 0;
        min-height: 44px;
        padding: 9px 7px;
        border: 0;
        border-right: 1px solid var(--workbench-border);
        background: transparent;
        color: var(--theme-text-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.15;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-tab:last-child {
        border-right: 0;
    }

    html[data-workbench="v3"] body .workbench-tab[aria-selected="true"] {
        color: var(--theme-accent-primary);
        background: var(--workbench-accent-soft);
        box-shadow: inset 0 -2px 0 var(--theme-accent-primary);
    }

    html[data-workbench="v3"] body .workbench-tab:focus-visible,
    html[data-workbench="v3"] body .workbench-command-button:focus-visible,
    html[data-workbench="v3"] body .workbench-rail-action:focus-visible,
    html[data-workbench="v3"] body .workbench-pane-action:focus-visible,
    html[data-workbench="v3"] body .workbench-training-action:focus-visible,
    html[data-workbench="v3"] body .workbench-persistent-module:focus-visible,
    html[data-workbench="v3"] body .workbench-status-button:focus-visible,
    html[data-workbench="v3"] body #workbenchPgnPane .pgn-toolbar-btn:focus-visible,
    html[data-workbench="v3"] body .navigation-buttons-redesigned .nav-button:focus-visible,
    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-button:focus-visible,
    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-input:focus-visible {
        outline: 2px solid var(--theme-accent-primary);
        outline-offset: -2px;
        box-shadow: 0 0 0 2px var(--theme-shadow-glow) !important;
    }

    html[data-workbench="v3"] body .controls-container > #workbenchGamePane,
    html[data-workbench="v3"] body .controls-container > #workbenchPgnPane,
    html[data-workbench="v3"] body .controls-container > #stockfish-panel,
    html[data-workbench="v3"] body .controls-container > #workbenchMotorEmpty,
    html[data-workbench="v3"] body .controls-container > #workbenchTrainingPane {
        grid-area: workbench-pane !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
    }

    html[data-workbench="v3"] body .controls-container > #workbenchGamePane,
    html[data-workbench="v3"] body .controls-container > #workbenchPgnPane,
    html[data-workbench="v3"] body .controls-container > #stockfish-panel,
    html[data-workbench="v3"] body .controls-container > #workbenchMotorEmpty,
    html[data-workbench="v3"] body .controls-container > #workbenchTrainingPane {
        display: none !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="game"] > #workbenchGamePane {
        display: grid !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="pgn"] > #workbenchPgnPane {
        display: flex !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] > #workbenchPgnPane {
        display: flex !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="engine"][data-engine-active="true"] > #stockfish-panel:not(.hidden) {
        display: block !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="engine"][data-engine-active="false"] > #workbenchMotorEmpty {
        display: flex !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="training"] > #workbenchTrainingPane {
        display: flex !important;
    }

    html[data-workbench="v3"] body #workbenchGamePane {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start;
        gap: 8px !important;
        padding: 10px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-lg);
        background: var(--workbench-surface-soft);
        overflow-y: auto;
    }

    html[data-workbench="v3"] body #workbenchGamePane > .button {
        min-width: 0 !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 9px !important;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-sm) !important;
        background: var(--workbench-surface-strong) !important;
        color: var(--theme-text-secondary) !important;
        box-shadow: none !important;
    }

    html[data-workbench="v3"] body #workbenchGamePane > .button.button-paint-mode--active,
    html[data-workbench="v3"] body #workbenchGamePane > .button.active {
        color: var(--theme-accent-primary) !important;
        border-color: var(--workbench-border-strong) !important;
        background: var(--workbench-accent-soft) !important;
    }

    html[data-workbench="v3"] body #workbenchPgnPane {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-lg);
        background: var(--workbench-surface-soft) !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body .workbench-module-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: 0 0 auto;
        padding: 10px 12px;
        border-bottom: 1px solid var(--workbench-border);
    }

    html[data-workbench="v3"] body .workbench-module-heading h2 {
        margin: 0;
        color: var(--theme-text-secondary);
        font-size: 15px;
        font-weight: 650;
        line-height: 1.2;
    }

    html[data-workbench="v3"] body .workbench-pane-kicker {
        margin: 0 0 2px;
        color: var(--theme-text-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.12em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    html[data-workbench="v3"] body .workbench-pane-action {
        min-height: 36px;
        padding: 8px 12px;
        border: 1px solid var(--workbench-border-strong);
        border-radius: var(--workbench-radius-sm);
        background: var(--workbench-accent-soft);
        color: var(--theme-accent-primary);
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-pane-action--quiet {
        background: transparent;
    }

    html[data-workbench="v3"] body .workbench-pgn-heading-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
    }

    html[data-workbench="v3"] body .workbench-voice-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        min-height: 44px;
        padding: 8px 10px;
        background: var(--workbench-accent-soft);
        white-space: nowrap;
    }

    html[data-workbench="v3"] body .workbench-beta-badge {
        padding: 2px 5px;
        border: 1px solid var(--workbench-border-strong);
        border-radius: 999px;
        background: var(--workbench-accent-medium);
        color: var(--theme-accent-primary);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    html[data-workbench="v3"] body #workbenchPgnPane > #pgn-metadata,
    html[data-workbench="v3"] body #workbenchPgnPane > .workbench-book-pane > .opening-explorer-panel,
    html[data-workbench="v3"] body #workbenchPgnPane > .opening-explorer-container {
        flex: 0 0 auto;
        margin: 8px 10px 0;
    }

    html[data-workbench="v3"] body .workbench-book-pane {
        display: none;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchBookPane {
        display: flex;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchPgnPane > .workbench-pgn-heading,
    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchPgnPane > #pgn-metadata,
    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchPgnPane > #pgn-viewer,
    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchPgnPane > .pgn-toolbar {
        display: none !important;
    }

    html[data-workbench="v3"] body .controls-container:not([data-workbench-tab="book"]) #opening-explorer-panel.visible {
        display: none !important;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchBookPane > .workbench-book-empty {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
        padding: clamp(18px, 4vw, 34px);
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-md);
        background:
            linear-gradient(145deg, var(--workbench-accent-soft), transparent 58%),
            var(--workbench-surface-strong);
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchBookPane > .opening-explorer-panel.visible ~ .workbench-book-empty {
        display: none;
    }

    html[data-workbench="v3"] body .workbench-book-empty h2 {
        max-width: 28ch;
        margin: 2px 0 8px;
        color: var(--theme-text-secondary);
        font-size: clamp(16px, 2vw, 20px);
        line-height: 1.25;
    }

    html[data-workbench="v3"] body .workbench-book-empty > p:not(.workbench-pane-kicker) {
        max-width: 46ch;
        margin: 0 0 18px;
        color: var(--theme-text-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    html[data-workbench="v3"] body .controls-container[data-workbench-tab="book"] #workbenchBookPane > .opening-explorer-panel.visible {
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100%;
        min-width: 0;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: hidden;
    }

    html[data-workbench="v3"] body #workbenchBookPane .explorer-header {
        min-height: 52px;
        padding: 9px 12px;
        border-bottom-color: var(--workbench-border);
        background: var(--workbench-surface-strong);
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body #workbenchBookPane .explorer-badge {
        border: 1px solid var(--workbench-border-strong);
        background: var(--workbench-accent-medium);
        color: var(--theme-accent-primary);
    }

    html[data-workbench="v3"] body #workbenchBookPane .explorer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--workbench-radius-sm);
    }

    html[data-workbench="v3"] body #workbenchBookPane .explorer-table-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        background: color-mix(in srgb, var(--theme-bg-primary) 74%, transparent);
    }

    html[data-workbench="v3"] body #workbenchBookPane .explorer-table tr[role="button"]:focus-visible,
    html[data-workbench="v3"] body #workbenchBookPane .explorer-close:focus-visible {
        outline: 2px solid var(--theme-accent-primary);
        outline-offset: -2px;
        box-shadow: 0 0 0 2px var(--theme-shadow-glow);
    }

    html[data-workbench="v3"] body #workbenchPgnPane > #pgn-viewer {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 8px 10px 0;
        padding: 11px 12px;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-md) !important;
        background: color-mix(in srgb, var(--theme-bg-primary) 76%, transparent) !important;
        box-shadow: inset 0 1px 8px color-mix(in srgb, var(--theme-shadow) 54%, transparent) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable;
    }

    html[data-workbench="v3"] body #workbenchPgnPane > .pgn-toolbar {
        flex: 0 0 auto;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
        grid-auto-rows: 44px;
        gap: 6px !important;
        margin: 8px 10px 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html[data-workbench="v3"] body #workbenchPgnPane .pgn-toolbar-btn {
        width: 100% !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px;
        padding: 6px 4px !important;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-sm) !important;
        background: var(--workbench-surface-strong) !important;
        color: var(--theme-text-secondary) !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body #workbenchPgnPane > .pgn-toolbar > #pgnToolbarVoice {
        display: none !important;
    }

    html[data-workbench="v3"] body #workbenchPgnPane .pgn-toolbar-btn:disabled,
    html[data-workbench="v3"] body #workbenchPgnPane .pgn-toolbar-btn[aria-disabled="true"] {
        opacity: 0.58 !important;
        cursor: not-allowed !important;
        border-color: var(--workbench-border) !important;
        background: color-mix(in srgb, var(--workbench-surface-strong) 68%, var(--theme-bg-primary)) !important;
        color: var(--theme-text-muted) !important;
        box-shadow: none !important;
    }

    html[data-workbench="v3"] body #stockfish-panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-lg) !important;
        background: var(--workbench-surface-soft) !important;
        overflow: auto !important;
    }

    /*
     * Stockfish calcula su altura mientras el panel puede estar oculto por las
     * pestañas del Workbench. En V3 el contenedor exterior ya administra el
     * scroll, por lo que el contenido activo no debe conservar un max-height
     * transitorio de 0 px al mostrarse por primera vez.
     */
    html[data-workbench="v3"] body
    .controls-container > #stockfish-panel:not(.hidden) > .stockfish-content {
        max-height: none !important;
    }

    html[data-workbench="v3"] body .workbench-motor-empty,
    html[data-workbench="v3"] body .workbench-training-pane {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 18px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-lg);
        background: var(--workbench-surface-soft);
        overflow: auto;
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body .workbench-motor-empty h2 {
        margin: 3px 0 8px;
        color: var(--theme-text-secondary);
        font-size: 18px;
    }

    html[data-workbench="v3"] body .workbench-motor-empty p:not(.workbench-pane-kicker) {
        margin: 0 0 16px;
        color: var(--theme-text-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    html[data-workbench="v3"] body .workbench-motor-empty .workbench-pane-action {
        align-self: flex-start;
    }

    html[data-workbench="v3"] body .workbench-training-pane {
        justify-content: flex-start;
        padding: 0;
    }

    html[data-workbench="v3"] body .workbench-training-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    html[data-workbench="v3"] body .workbench-training-action {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        min-height: 72px;
        padding: 11px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-md);
        background: var(--workbench-surface-strong);
        color: var(--theme-text-secondary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-training-action strong {
        color: inherit;
        font-size: 12px;
    }

    html[data-workbench="v3"] body .workbench-training-action span {
        margin-top: 3px;
        color: var(--theme-text-muted);
        font-size: 10px;
        line-height: 1.3;
    }

    html[data-workbench="v3"] body .workbench-training-action.is-active {
        border-color: var(--workbench-border-strong);
        background: var(--workbench-accent-soft);
        color: var(--theme-accent-primary);
    }

    html[data-workbench="v3"] body .workbench-status-chip {
        flex: 0 0 auto;
        padding: 5px 8px;
        border: 1px solid var(--workbench-border);
        border-radius: 999px;
        color: var(--theme-text-muted);
        font-size: 10px;
        font-weight: 650;
    }

    html[data-workbench="v3"] body .workbench-status-chip.is-active {
        border-color: var(--workbench-border-strong);
        background: var(--workbench-accent-soft);
        color: var(--theme-accent-primary);
    }

    html[data-workbench="v3"] body .navigation-section {
        grid-area: workbench-navigation !important;
        margin: 0 !important;
        padding: 7px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-md);
        background: var(--workbench-surface-soft);
    }

    /* La navegación vive junto al borde inferior del escritorio. El panel de
       reproducción se abre hacia arriba para no quedar detrás de la barra de
       personalización ni fuera de la ventana en portátiles de poca altura. */
    html[data-workbench="v3"] body:not([data-tablet-fix])
    .navigation-section .replay-controls-panel {
        top: auto;
        bottom: calc(100% + 8px);
        z-index: 1300;
        max-height: calc(100dvh - 32px);
        background: color-mix(in srgb, var(--theme-bg-secondary) 96%, var(--theme-bg-primary));
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: workbenchReplaySlideUp 0.2s ease-out;
    }

    @keyframes workbenchReplaySlideUp {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    html[data-workbench="v3"] body .navigation-buttons-redesigned {
        gap: 5px !important;
    }

    html[data-workbench="v3"] body .navigation-buttons-redesigned .nav-button {
        min-width: 0 !important;
        min-height: 40px;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-sm) !important;
        background: var(--workbench-surface-strong) !important;
        color: var(--theme-text-secondary) !important;
        box-shadow: none !important;
    }

    html[data-workbench="v3"] body .workbench-persistent-module {
        align-items: center;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 8px;
        width: 100%;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-md);
        background: var(--workbench-surface-soft);
        color: var(--theme-text-secondary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-engine-summary {
        grid-area: workbench-engine-summary;
        display: none;
    }

    html[data-workbench="v3"] body
    .controls-container[data-engine-active="true"]:not([data-workbench-tab="engine"]) > .workbench-engine-summary {
        display: grid;
    }

    html[data-workbench="v3"] body .workbench-module-indicator,
    html[data-workbench="v3"] body .workbench-ready-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-text-muted);
        box-shadow: 0 0 10px color-mix(in srgb, var(--theme-text-muted) 55%, transparent);
    }

    html[data-workbench="v3"] body .workbench-engine-summary.is-active .workbench-module-indicator,
    html[data-workbench="v3"] body .workbench-ready-dot {
        background: var(--theme-accent-primary);
        box-shadow: 0 0 12px var(--theme-shadow-glow);
    }

    html[data-workbench="v3"] body .workbench-persistent-title {
        font-size: 12px;
        font-weight: 650;
    }

    html[data-workbench="v3"] body .workbench-persistent-state {
        min-width: 0;
        overflow: hidden;
        color: var(--theme-text-muted);
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-workbench="v3"] body .workbench-persistent-value {
        color: var(--theme-accent-primary);
        font-size: 11px;
        font-weight: 650;
    }

    html[data-workbench="v3"] body .fen-section {
        grid-area: workbench-fen !important;
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--workbench-border) !important;
        border-radius: var(--workbench-radius-md);
        background: var(--workbench-surface-soft) !important;
        overflow: hidden;
    }

    html[data-workbench="v3"] body .workbench-fen-heading {
        display: none;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 44px 44px !important;
        grid-template-rows: 44px !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0;
        padding: 6px !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        font-size: 10px !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-input {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0;
        height: 38px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border-color: var(--workbench-border) !important;
        background: color-mix(in srgb, var(--theme-bg-primary) 72%, transparent) !important;
        color: var(--theme-text-secondary) !important;
        box-sizing: border-box !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-button {
        grid-row: 1 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        border-color: var(--workbench-border) !important;
        background: var(--workbench-surface-strong) !important;
        color: var(--theme-text-secondary) !important;
        box-shadow: none !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel #loadFenBtn {
        grid-column: 3 !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel #copyFenBtn {
        grid-column: 4 !important;
    }

    html[data-workbench="v3"] body #mobilePgnFenPanel .fen-button .fen-text {
        display: none !important;
    }

    html[data-workbench="v3"] body [data-workbench-delegate][disabled],
    html[data-workbench="v3"] body [data-workbench-delegate][aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.58;
    }

    @media (hover: hover) and (pointer: fine) {
        html[data-workbench="v3"] body .workbench-tab:hover,
        html[data-workbench="v3"] body .workbench-command-button:hover,
        html[data-workbench="v3"] body .workbench-rail-action:hover,
        html[data-workbench="v3"] body .workbench-pane-action:hover,
        html[data-workbench="v3"] body .workbench-training-action:hover,
        html[data-workbench="v3"] body .workbench-persistent-module:hover,
        html[data-workbench="v3"] body .workbench-status-button:hover {
            border-color: var(--workbench-border-strong);
            color: var(--theme-accent-primary);
            background: var(--workbench-accent-soft);
        }
    }
}

/* Tablet vertical: conserva el flujo apilado existente y moderniza solo el panel. */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .controls-container {
        display: grid !important;
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(420px, auto) auto auto !important;
        gap: 10px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-top-color: var(--workbench-border) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container[data-engine-active="true"]:not([data-workbench-tab="engine"]) {
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-engine-summary"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(420px, auto) auto auto auto !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchPgnPane {
        min-height: 520px !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchGamePane,
    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchTrainingPane,
    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchMotorEmpty {
        min-height: 360px !important;
    }
}

/* Tablet horizontal: respeta exactamente los anchos y tamaño inline del arreglo JS. */
@media (min-width: 769px) and (orientation: landscape) {
    html[data-workbench="v3"] body[data-tablet-fix] .chess-layout > .controls-container {
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        gap: 6px !important;
        padding: 6px !important;
        overflow-y: auto !important;
    }

    html[data-workbench="v3"] body[data-tablet-fix]
    .chess-layout > .controls-container[data-engine-active="true"]:not([data-workbench-tab="engine"]) {
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-engine-summary"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    }

    html[data-workbench="v3"] body[data-tablet-fix] .workbench-tab,
    html[data-workbench="v3"] body[data-tablet-fix] .workbench-pane-action,
    html[data-workbench="v3"] body[data-tablet-fix] .workbench-persistent-module,
    html[data-workbench="v3"] body[data-tablet-fix] #workbenchGamePane > .button,
    html[data-workbench="v3"] body[data-tablet-fix] .navigation-buttons-redesigned .nav-button,
    html[data-workbench="v3"] body[data-tablet-fix] #workbenchPgnPane .pgn-toolbar-btn,
    html[data-workbench="v3"] body[data-tablet-fix] .fen-section .fen-button {
        min-height: 44px;
    }

    html[data-workbench="v3"] body[data-tablet-fix] .workbench-tab {
        padding-inline: 3px;
        font-size: 10px;
    }

    html[data-workbench="v3"] body[data-tablet-fix] .workbench-module-heading {
        padding: 7px 9px;
    }

    html[data-workbench="v3"] body[data-tablet-fix] #workbenchPgnPane > #pgn-viewer {
        margin: 6px 7px 0;
        padding: 8px;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    html[data-workbench="v3"] body[data-tablet-fix] #workbenchPgnPane > .pgn-toolbar {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        margin: 6px 7px 7px !important;
    }

    html[data-workbench="v3"] body[data-tablet-fix] #workbenchPgnPane .pgn-toolbar-label,
    html[data-workbench="v3"] body[data-tablet-fix] .workbench-fen-heading {
        display: none;
    }

    html[data-workbench="v3"] body[data-tablet-fix] .workbench-persistent-module {
        padding: 6px 8px;
    }

    html[data-workbench="v3"] body[data-tablet-fix]
    .chess-layout > .controls-container > .fen-section {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-workbench="v3"] body[data-tablet-fix]
    .chess-layout > .controls-container > .icon-buttons-mobile {
        display: none !important;
    }
}

/* Ventana estrecha de escritorio: evita mezclar el layout móvil con el tablet. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout {
        --icons-sidebar-w: 72px;
        --panel-w-desktop: 320px;
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) var(--panel-w-desktop) !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .icons-sidebar {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: var(--icons-sidebar-w) !important;
        max-width: var(--icons-sidebar-w) !important;
        height: 100% !important;
        max-height: 100dvh !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .chess-container {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .chess-container .board,
    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .chess-container #board.board {
        --workbench-board-size-base: min(90dvh, calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w) - 16px));
        --workbench-board-size: calc(var(--workbench-board-size-base) * var(--board-zoom-factor));
        width: var(--workbench-board-size) !important;
        height: var(--workbench-board-size) !important;
        max-width: var(--workbench-board-size) !important;
        max-height: var(--workbench-board-size) !important;
        min-width: calc(280px * var(--board-zoom-factor)) !important;
        min-height: calc(280px * var(--board-zoom-factor)) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container {
        display: grid !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        width: var(--panel-w-desktop) !important;
        max-width: var(--panel-w-desktop) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container[data-engine-active="true"]:not([data-workbench-tab="engine"]) {
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-engine-summary"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .mobile-header,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .icon-buttons-mobile,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .mobile-pgn-fen-backdrop {
        display: none !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container > .fen-section {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Escritorio y portátil: panel modular compacto, sin alterar el tablero. */
@media (min-width: 1025px) {
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) minmax(320px, var(--panel-w-desktop)) !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .icons-sidebar {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: var(--icons-sidebar-w) !important;
        max-width: var(--icons-sidebar-w) !important;
        height: 100% !important;
        max-height: 100dvh !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 8px 16px 20px !important;
        overflow: visible !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container .board,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container #board.board {
        --workbench-board-size-base: min(90dvh, calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w) - 32px));
        --workbench-board-size: calc(var(--workbench-board-size-base) * var(--board-zoom-factor));
        width: var(--workbench-board-size) !important;
        height: var(--workbench-board-size) !important;
        max-width: var(--workbench-board-size) !important;
        max-height: var(--workbench-board-size) !important;
        min-width: calc(320px * var(--board-zoom-factor)) !important;
        min-height: calc(320px * var(--board-zoom-factor)) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .controls-container {
        display: grid !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        width: var(--panel-w-desktop) !important;
        max-width: var(--panel-w-desktop) !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container[data-engine-active="true"]:not([data-workbench-tab="engine"]) {
        grid-template-areas:
            "workbench-tabs"
            "workbench-pane"
            "workbench-navigation"
            "workbench-engine-summary"
            "workbench-fen" !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix])
    .chess-layout > .controls-container > .fen-section {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .controls-container > .icon-buttons-mobile,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .mobile-pgn-fen-backdrop {
        display: none !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar #blindTrainingBtn {
        margin-top: 8px !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar #contextMenuTriggerBtn-desktop {
        margin-top: auto !important;
    }
}

/* Workbench completo: misma arquitectura en escritorio y tableta horizontal. */
@media (min-width: 1440px),
       (min-width: 769px) and (max-width: 1439px) and (orientation: landscape) {
    html[data-workbench="v3"] body:not([data-tablet-fix]) {
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-command-bar {
        position: fixed;
        inset: 0 0 auto;
        z-index: 1250;
        display: grid;
        grid-template-columns: minmax(220px, 0.8fr) auto minmax(270px, 0.8fr);
        align-items: center;
        gap: 18px;
        height: 72px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--workbench-border);
        background: color-mix(in srgb, var(--theme-bg-primary) 96%, transparent);
        box-shadow: 0 8px 28px color-mix(in srgb, var(--theme-shadow) 60%, transparent);
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body .workbench-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: var(--theme-accent-primary);
        font-size: 14px;
        font-weight: 750;
        letter-spacing: 0.13em;
        text-decoration: none;
        text-transform: uppercase;
    }

    html[data-workbench="v3"] body .workbench-brand img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    html[data-workbench="v3"] body .workbench-command-actions,
    html[data-workbench="v3"] body .workbench-command-personalize {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    html[data-workbench="v3"] body .workbench-command-personalize {
        justify-self: end;
    }

    html[data-workbench="v3"] body .workbench-command-button {
        min-height: 42px;
        padding: 9px 13px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-sm);
        background: var(--workbench-surface-soft);
        color: var(--theme-text-secondary);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-command-button--primary {
        border-color: var(--workbench-border-strong);
        color: var(--theme-accent-primary);
        background: var(--workbench-accent-soft);
    }

    html[data-workbench="v3"] body .workbench-command-button--compact {
        padding-inline: 10px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-status-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 1250;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 54px;
        padding: 6px 18px;
        border-top: 1px solid var(--workbench-border);
        background: color-mix(in srgb, var(--theme-bg-primary) 96%, transparent);
        box-shadow: 0 -8px 24px color-mix(in srgb, var(--theme-shadow) 55%, transparent);
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body .workbench-ready-state,
    html[data-workbench="v3"] body .workbench-status-actions,
    html[data-workbench="v3"] body .workbench-status-button,
    html[data-workbench="v3"] body .workbench-board-swatches {
        display: flex;
        align-items: center;
    }

    html[data-workbench="v3"] body .workbench-ready-state {
        gap: 9px;
        color: var(--theme-text-muted);
        font-size: 12px;
    }

    html[data-workbench="v3"] body .workbench-status-actions {
        gap: 6px;
    }

    html[data-workbench="v3"] body .workbench-status-button {
        gap: 7px;
        min-height: 36px;
        padding: 7px 11px;
        border: 1px solid transparent;
        border-radius: var(--workbench-radius-sm);
        background: transparent;
        color: var(--theme-text-secondary);
        font: inherit;
        font-size: 11px;
        cursor: pointer;
    }

    html[data-workbench="v3"] body .workbench-status-button strong {
        color: var(--theme-text-secondary);
        font-size: 11px;
        font-weight: 650;
    }

    html[data-workbench="v3"] body .workbench-status-label {
        color: var(--theme-text-muted);
    }

    html[data-workbench="v3"] body .workbench-status-button--primary {
        border-color: var(--workbench-border);
        color: var(--theme-accent-primary);
    }

    html[data-workbench="v3"] body .workbench-board-swatches {
        gap: 3px;
    }

    html[data-workbench="v3"] body .workbench-board-swatch {
        width: 17px;
        height: 17px;
        border: 1px solid var(--workbench-border);
        border-radius: 50%;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout {
        --icons-sidebar-w: 126px;
        --panel-w-desktop: clamp(420px, 30vw, 520px);
        height: calc(100dvh - 126px) !important;
        min-height: 0 !important;
        margin-top: 72px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .icons-sidebar,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .controls-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container .board,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container #board.board {
        --workbench-board-size-base: min(78dvh, calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w) - 36px));
        --workbench-board-size: calc(var(--workbench-board-size-base) * var(--board-zoom-factor));
        width: var(--workbench-board-size) !important;
        height: var(--workbench-board-size) !important;
        max-width: var(--workbench-board-size) !important;
        max-height: var(--workbench-board-size) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchPgnPane .pgn-toolbar-btn {
        gap: 5px;
        padding-inline: 5px !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) #workbenchPgnPane .pgn-toolbar-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        font-size: 8px;
        line-height: 1;
        text-overflow: ellipsis;
        text-transform: none;
        white-space: nowrap;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar {
        justify-content: flex-start;
        padding: 10px 8px !important;
        border-right: 1px solid var(--workbench-border) !important;
        box-sizing: border-box;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .logo-container {
        display: none !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-buttons-container {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch;
        width: 100%;
        min-height: 0;
        gap: 5px !important;
        overflow-y: auto;
        scrollbar-width: none;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-buttons-container::-webkit-scrollbar {
        display: none;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-label {
        display: block;
        margin: 5px 2px 0;
        color: var(--theme-accent-primary);
        font-size: 9px;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-align: left;
        text-transform: uppercase;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-label--personalize {
        margin-top: 10px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-label--settings {
        margin-top: auto;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-button {
        align-self: center;
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        border-color: var(--workbench-border) !important;
        border-radius: var(--workbench-radius-md) !important;
        background: var(--workbench-surface-soft) !important;
        box-shadow: none !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-button.active {
        border-color: var(--workbench-border-strong) !important;
        background: var(--workbench-accent-soft) !important;
        color: var(--theme-accent-primary) !important;
        box-shadow: 0 0 18px var(--theme-shadow-glow) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-personalization {
        display: grid;
        gap: 4px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-action {
        min-height: 34px;
        padding: 6px 7px;
        border: 1px solid var(--workbench-border);
        border-radius: var(--workbench-radius-sm);
        background: transparent;
        color: var(--theme-text-secondary);
        font: inherit;
        font-size: 10px;
        text-align: left;
        cursor: pointer;
    }
}

/*
 * Tableta horizontal: no cambia de interfaz, solo reduce la densidad del
 * Workbench de escritorio para conservar tablero, rail y panel completos.
 */
@media (min-width: 769px) and (max-width: 1439px) and (orientation: landscape),
       (min-width: 1440px) and (max-height: 700px) and (orientation: landscape) {
    html[data-workbench="v3"] {
        --workbench-tablet-header: clamp(54px, 7dvh, 62px);
        --workbench-tablet-footer: clamp(42px, 5.6dvh, 48px);
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-command-bar {
        grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto;
        gap: 7px;
        height: var(--workbench-tablet-header);
        padding: 5px 8px;
    }

    html[data-workbench="v3"] body .workbench-brand {
        gap: 7px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    html[data-workbench="v3"] body .workbench-brand img {
        width: 38px;
        height: 38px;
    }

    html[data-workbench="v3"] body .workbench-command-actions,
    html[data-workbench="v3"] body .workbench-command-personalize {
        min-width: 0;
        gap: 4px;
    }

    html[data-workbench="v3"] body .workbench-command-actions {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    html[data-workbench="v3"] body .workbench-command-actions::-webkit-scrollbar {
        display: none;
    }

    html[data-workbench="v3"] body .workbench-command-button {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 7px 8px;
        border-radius: 7px;
        font-size: 9px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-status-bar {
        gap: 8px;
        height: var(--workbench-tablet-footer);
        padding: 4px 10px;
    }

    html[data-workbench="v3"] body .workbench-ready-state,
    html[data-workbench="v3"] body .workbench-status-button,
    html[data-workbench="v3"] body .workbench-status-button strong {
        font-size: 10px;
    }

    html[data-workbench="v3"] body .workbench-status-actions {
        min-width: 0;
        gap: 3px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-workbench="v3"] body .workbench-status-actions::-webkit-scrollbar {
        display: none;
    }

    html[data-workbench="v3"] body .workbench-status-button {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 7px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout {
        --icons-sidebar-w: clamp(94px, 10vw, 116px);
        --panel-w-desktop: clamp(300px, 32vw, 400px);
        height: calc(100dvh - var(--workbench-tablet-header) - var(--workbench-tablet-footer)) !important;
        margin-top: var(--workbench-tablet-header) !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .icons-sidebar,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .controls-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container {
        padding: 6px 10px 12px !important;
        overflow: hidden !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container .board,
    html[data-workbench="v3"] body:not([data-tablet-fix]) .chess-layout > .chess-container #board.board {
        --workbench-board-size-base: min(
            calc(100dvh - var(--workbench-tablet-header) - var(--workbench-tablet-footer) - 18px),
            calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w) - 24px)
        );
        --workbench-board-size: calc(var(--workbench-board-size-base) * var(--board-zoom-factor));
        width: var(--workbench-board-size) !important;
        height: var(--workbench-board-size) !important;
        max-width: var(--workbench-board-size) !important;
        max-height: var(--workbench-board-size) !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar {
        padding: 7px 6px !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-buttons-container {
        gap: 4px !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .icons-sidebar .icon-button {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-label {
        margin-top: 3px !important;
        font-size: 8px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-personalization {
        gap: 3px;
    }

    html[data-workbench="v3"] body:not([data-tablet-fix]) .workbench-rail-action {
        min-height: 30px;
        padding: 5px 6px;
        font-size: 9px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    html[data-workbench="v3"] body .workbench-brand span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    html[data-workbench="v3"] body .workbench-command-personalize .workbench-command-button {
        padding-inline: 6px;
    }
}

@media print {
    .workbench-command-bar,
    .workbench-status-bar,
    .workbench-tabs,
    .workbench-rail-label,
    .workbench-rail-personalization,
    .workbench-module-heading,
    .workbench-motor-empty,
    .workbench-training-pane,
    .workbench-persistent-module {
        display: none !important;
    }
}

/* Pantallas anchas y bajas: misma navegación de cinco pestañas, sin panel legacy. */
@media (min-width: 1500px) and (max-height: 600px) and (orientation: landscape) {
    html[data-workbench="v3"] body .workbench-tab { min-height: 40px; padding-block: 7px; }
}