/* Cierre de la cascada de las dos estaciones nativas. No cambia reglas de juego. */
html[data-responsive-workspace="v2"] {
    --editor-success: #65d7a0;
}
html[data-responsive-workspace="v2"][data-theme="light-matrix"] {
    --editor-success: #147149;
    --studio-success: #147149;
    --editor-warning: #805b00;
    --studio-warning: #805b00;
    --editor-danger: #b32638;
    --studio-danger: #b32638;
    --studio-text-muted: #49616d;
}
html[data-responsive-workspace="v2"][data-theme="light-matrix"] .editor-actions .apply-btn:not(:disabled) { color: #fff !important; }
html[data-responsive-workspace="v2"] .editor-piece-dock #editorHistoryStep { color: var(--theme-text-secondary) !important; font-size: 11px !important; }
html[data-responsive-workspace="v2"] .annotation-move-chip { color: var(--theme-text-primary) !important; }
html[data-responsive-workspace="v2"] #settingsMotionGroup [aria-checked="true"] { color: var(--theme-text-primary) !important; }
html[data-responsive-workspace="v2"][data-theme="light-matrix"] #annotationModalOverlay { --annotation-danger: #b32638; }
html[data-responsive-workspace="v2"] .editor-diagnostics__status {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* La posición y sus coordenadas comparten un ancho seguro y centrado. */
@media (max-width: 768px), (max-width: 1180px) and (orientation: portrait) {
    html[data-responsive-workspace="v2"] body .chess-container .play-surface {
        max-width: calc(100vw - 48px) !important;
    }
    html[data-responsive-workspace="v2"] body .chess-container #board.board {
        min-width: 0 !important;
        min-height: 0 !important;
    }
    html[data-responsive-workspace="v2"] body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        padding-inline: 24px !important;
        align-items: center !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: center !important;
        justify-items: center !important;
    }
    html[data-responsive-workspace="v2"] body .editor-workbench .chess-layout > .chess-container .editor-board-stage.editor-board-stage,
    html[data-responsive-workspace="v2"] body .editor-workbench .chess-layout > .chess-container .portrait-palette-slot.portrait-palette-slot,
    html[data-responsive-workspace="v2"] body .editor-workbench .chess-layout > .chess-container .mobile-editor-context.mobile-editor-context {
        margin-inline: auto !important;
        max-width: min(820px, calc(100vw - 48px)) !important;
    }
    html[data-responsive-workspace="v2"] .mobile-palette-tools button {
        min-height: 44px !important;
    }
}
/* Teléfonos muy estrechos: todas las piezas y las cuatro herramientas deben
   seguir dentro de la paleta. Los nombres accesibles de cada pieza permanecen. */
@media (max-width: 340px) and (orientation: portrait) {
    html[data-responsive-workspace="v2"] body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .portrait-palette-host .editor-section--palette {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html[data-responsive-workspace="v2"] body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .editor-section--palette > h4 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
    }
    html[data-responsive-workspace="v2"] body .editor-workbench .portrait-palette-slot .mobile-palette-tools > button {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 3px !important;
    }
}
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html[data-responsive-workspace="v2"] body .chess-layout > .chess-container {
        --tablet-portrait-board-base: min(calc(100vw - 48px), calc(100svh - 190px));
    }
    html[data-responsive-workspace="v2"] .mobile-workspace[data-mobile-workspace-tab="pgn"][data-mobile-workspace-size="compact"] #pgn-viewer {
        height: clamp(280px, 32dvh, 420px) !important;
        min-height: 280px !important;
    }
}

/* En baja altura se revela la caja de herramientas a petición, también fuera
   de una vista previa. El contenido PGN conserva el desplazamiento propio. */
@media (min-width: 769px) and (orientation: landscape) and (max-height: 900px),
       (min-width: 1181px) and (max-height: 900px) {
    html[data-responsive-workspace="v2"] #workbenchPgnPane > #positionGamePreviewTools:not([hidden]) {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin: 6px 8px 8px;
        padding: 8px 10px;
        border: 1px solid var(--theme-border);
        border-radius: 9px;
        background: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
        font: 600 12px/1.3 Poppins, sans-serif;
    }
    html[data-responsive-workspace="v2"] #positionGamePreviewTools[aria-expanded="true"] svg { transform: rotate(180deg); }
    html[data-responsive-workspace="v2"] #workbenchPgnPane > #positionGamePreviewTools[aria-expanded="false"] ~ #pgnToolbar { display: none !important; }
    html[data-responsive-workspace="v2"] #workbenchPgnPane > #pgnToolbar {
        flex: 0 0 auto !important;
        max-height: 112px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    html[data-responsive-workspace="v2"] #workbenchPgnPane:has(> #positionGamePreviewTools[aria-expanded="false"]) #pgn-metadata .pgn-meta-info {
        display: none !important;
    }
    html[data-responsive-workspace="v2"] #workbenchPgnPane:has(> #positionGamePreviewTools[aria-expanded="false"]) #pgn-metadata .pgn-meta-players {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.45;
    }
    html[data-responsive-workspace="v2"] #workbenchPgnPane > #pgn-metadata {
        flex: 0 0 auto !important;
        max-height: 160px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Controles utilizables con el dedo sin forzar que el catálogo se recorte. */
@media (min-width: 1440px) and (max-height: 700px) and (orientation: landscape) {
    /* El rótulo PGN ya está en la pestaña; sus acciones y datos siguen
       disponibles al desplegar, sin consumir permanentemente la lectura. */
    html[data-responsive-workspace="v2"] #workbenchPgnPane:has(> #positionGamePreviewTools[aria-expanded="false"]) > .workbench-pgn-heading,
    html[data-responsive-workspace="v2"] #workbenchPgnPane:has(> #positionGamePreviewTools[aria-expanded="false"]) > #pgn-metadata {
        display: none !important;
    }
    html[data-responsive-workspace="v2"][data-workbench="v3"] body .chess-layout .chess-container #board.board {
        --compact-board-cap: min(calc(100dvh - var(--workbench-tablet-header, 54px) - var(--workbench-tablet-footer, 42px) - 48px), calc(100vw - 680px));
        width: min(var(--compact-board-cap), calc(var(--compact-board-cap) * var(--board-zoom-factor, 1))) !important;
        height: min(var(--compact-board-cap), calc(var(--compact-board-cap) * var(--board-zoom-factor, 1))) !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
}
@media (min-width: 769px) and (orientation: landscape) and (pointer: coarse) {
    html[data-responsive-workspace="v2"] { --studio-dock-width: 248px; }
    html[data-responsive-workspace="v2"] .editor-piece-dock {
        height: calc(100dvh - var(--studio-header-height) - 32px) !important;
        padding-bottom: 18px !important;
    }
    html[data-responsive-workspace="v2"] .editor-piece-dock button,
    html[data-responsive-workspace="v2"] .editor-piece-dock .piece-item {
        min-height: 44px !important;
    }
    html[data-responsive-workspace="v2"] .editor-piece-dock .piece-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html[data-responsive-workspace="v2"] .editor-piece-dock__palette { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html[data-responsive-workspace="v2"] body .editor-piece-dock .editor-feature-btn.editor-feature-btn { min-height: 44px !important; font-size: 11px !important; }
    html[data-responsive-workspace="v2"] .editor-piece-dock__palette h4 { white-space: normal !important; }
}

/* Dos diagramas visibles incluso en un carril estrecho. El cálculo de la
   altura lo realiza ResizeObserver; FEN y acciones nunca invaden las coords. */
html[data-responsive-workspace="v2"] .desktop-compare-card { align-items: stretch; }
html[data-responsive-workspace="v2"] .desktop-compare-board {
    width: min(100%, var(--compare-board-fit, 100%));
    flex: 0 0 auto;
    margin-inline: auto;
}
html[data-responsive-workspace="v2"] .desktop-compare-fen-row { flex: 0 0 auto; margin-top: 26px; }
html[data-responsive-workspace="v2"] .desktop-compare-actions { margin-top: 10px; padding-top: 10px; }
html[data-responsive-workspace="v2"] .desktop-compare-window .desktop-compare-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-responsive-workspace="v2"] .desktop-compare-actions button { line-height: 1.3; }

html[data-responsive-workspace="v2"] #promotionDialog .promotion-dialog__close,
html[data-responsive-workspace="v2"] #promotionDialog .promotion-dialog__close:hover,
html[data-responsive-workspace="v2"] #promotionDialog .promotion-dialog__close:focus-visible {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
}
html[data-responsive-workspace="v2"] #promotionDialog::before {
    content: 'Coronar peón';
    padding-right: 42px;
    text-align: left;
    font-size: 14px !important;
    letter-spacing: .08em;
}
html[data-responsive-workspace="v2"] #promotionDialog .promotion-piece__label { font-size: 11px; }
@media (pointer: coarse) {
    html[data-responsive-workspace="v2"] #promotionDialog .promotion-dialog__close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-responsive-workspace="v2"] .promotion-dialog,
    html[data-responsive-workspace="v2"] .promotion-dialog * {
        animation: none !important;
        transition: none !important;
    }
}