/**
 * EDITOR WORKSPACE V2
 * Capa visual final y aislada para alinear edicion.html con tablero.html.
 */

:root {
    --editor-surface: var(--theme-bg-secondary, #111411);
    --editor-surface-raised: var(--theme-bg-tertiary, #1b201b);
    --editor-canvas: var(--theme-bg-primary, #080a08);
    --editor-border: var(--theme-border, rgba(212, 175, 55, 0.24));
    --editor-accent: var(--theme-accent-primary, #d4af37);
    --editor-accent-secondary: var(--theme-accent-secondary, #c79b2b);
    --editor-text: var(--theme-text-primary, #f5f1e7);
    --editor-text-secondary: var(--theme-text-secondary, #c7c4ba);
    --editor-text-muted: var(--theme-text-muted, #898b84);
    --editor-input: var(--theme-input-bg, rgba(0, 0, 0, 0.32));
    --editor-input-border: var(--theme-input-border, rgba(212, 175, 55, 0.34));
    --editor-focus: color-mix(in srgb, var(--editor-accent) 62%, white 38%);
    --editor-danger: #ef5c69;
    --editor-success: #5fcf98;
    --editor-warning: #e7b84c;
    --editor-radius: 16px;
    --editor-radius-small: 10px;
    --editor-header-height: 68px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-width: 0;
    min-height: 100%;
    background: var(--editor-canvas) !important;
    color: var(--editor-text) !important;
}

body {
    margin: 0 !important;
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

[hidden] {
    display: none !important;
}

.editor-workbench {
    width: 100%;
    min-height: 100dvh;
    background: var(--editor-canvas);
}

.editor-commandbar {
    position: relative;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    align-items: center;
    min-height: var(--editor-header-height);
    padding: 8px 18px;
    border-bottom: 1px solid var(--editor-border);
    background: var(--editor-surface) !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--editor-canvas) 78%, transparent);
}

.editor-commandbar__brand {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-width: 0;
    gap: 11px;
    color: var(--editor-text);
    text-decoration: none;
}

.editor-commandbar__brand img {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    object-fit: contain;
}

.editor-commandbar__brand span {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.editor-commandbar__brand strong {
    color: var(--editor-accent);
    font-size: 0.88rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.editor-commandbar__brand small {
    margin-top: 4px;
    color: var(--editor-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.editor-commandbar__status {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--editor-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--editor-surface-raised) 84%, transparent);
    color: var(--editor-text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.editor-commandbar__status::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-success, #68c78c);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-success, #68c78c) 48%, transparent);
}

.editor-commandbar__status[data-state="changed"]::before {
    background: var(--editor-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--editor-accent) 48%, transparent);
}

.editor-commandbar__actions {
    justify-self: end;
    display: flex;
    gap: 8px;
}

.command-btn,
.editor-actions button,
.modal-actions button {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--editor-input-border) !important;
    border-radius: var(--editor-radius-small) !important;
    background: var(--editor-accent) !important;
    color: var(--theme-button-text-hover, #080908) !important;
    font: 600 0.76rem/1 Poppins, sans-serif !important;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.command-btn--secondary,
.editor-actions .cancel-btn,
.modal-actions .cancel-btn {
    background: var(--editor-surface-raised) !important;
    color: var(--editor-text) !important;
}

.command-btn:hover,
.editor-actions button:hover,
.modal-actions button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.command-btn:focus-visible,
.editor-workbench button:focus-visible,
.editor-workbench select:focus-visible,
.editor-workbench input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--editor-focus) !important;
    outline-offset: 2px;
}

.chess-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 440px) !important;
    align-items: stretch !important;
    width: 100% !important;
    height: calc(100dvh - var(--editor-header-height)) !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--editor-canvas) !important;
}

.chess-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 18px !important;
    background: var(--editor-canvas) !important;
}

.chess-container #board {
    width: min(calc(100dvh - var(--editor-header-height) - 36px), calc(100vw - 490px)) !important;
    height: min(calc(100dvh - var(--editor-header-height) - 36px), calc(100vw - 490px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 !important;
    border: 1px solid color-mix(in srgb, var(--editor-accent) 40%, transparent) !important;
    border-radius: 14px !important;
    box-shadow: var(--silicio-board-frame) !important;
    overflow: hidden !important;
}

.controls-container {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 12px 12px 12px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: var(--editor-radius) !important;
    background: var(--editor-surface) !important;
    box-shadow: 0 18px 50px color-mix(in srgb, var(--editor-canvas) 72%, transparent) !important;
    overflow: hidden !important;
}

.editor-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 17px 18px 14px !important;
    border-bottom: 1px solid var(--editor-border) !important;
    background: var(--editor-surface) !important;
}

.editor-kicker,
.modal-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--editor-accent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.editor-header h1,
.editor-header h3 {
    margin: 0 !important;
    color: var(--editor-text) !important;
    font-size: 1.22rem !important;
    line-height: 1.15 !important;
}

.editor-header p {
    margin: 6px 0 0 !important;
    color: var(--editor-text-muted) !important;
    font-size: 0.7rem !important;
    line-height: 1.45;
}

.editor-appearance {
    display: grid;
    justify-items: end;
    gap: 5px;
    min-width: 0;
}

.editor-appearance span {
    display: block;
    max-width: 150px;
    padding: 4px 8px;
    border: 1px solid var(--editor-border);
    border-radius: 999px;
    color: var(--editor-text-secondary);
    font-size: 0.58rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    background: var(--editor-surface) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-color: color-mix(in srgb, var(--editor-accent) 50%, transparent) transparent;
}

.editor-section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: 12px !important;
    background: var(--editor-surface-raised) !important;
    box-shadow: none !important;
}

/* El pintado comparte estilos globales con el editor; neutralizar su rojo fijo. */
.custom-spinner-btn {
    color: var(--editor-accent) !important;
}

.custom-spinner-btn svg polygon {
    fill: currentColor !important;
    transition: fill 150ms ease;
}

.custom-spinner-btn:hover,
.custom-spinner-btn:focus-visible {
    color: color-mix(in srgb, var(--editor-accent) 74%, var(--editor-text) 26%) !important;
}

.custom-spinner-btn:active {
    background: color-mix(in srgb, var(--editor-accent) 14%, transparent) !important;
}

.editor-section h4 {
    margin: 0 0 10px !important;
    color: var(--editor-text-secondary) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.editor-section--actions,
.editor-section--history,
.editor-section--transform,
.editor-section--position,
.editor-section--fen,
.editor-section--diagnostics,
.editor-section--export {
    grid-column: 1 / -1;
}

.piece-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
}

.piece-item,
.piece-tool {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 43px !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--editor-canvas) 54%, transparent) !important;
    box-shadow: none !important;
}

.piece-item:hover,
.piece-tool:hover,
.piece-item.selected,
.piece-tool.active {
    border-color: var(--editor-accent) !important;
    background: color-mix(in srgb, var(--editor-accent) 16%, var(--editor-canvas)) !important;
}

.piece-item img,
.piece-tool img {
    width: 88% !important;
    height: 88% !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
}

.piece-tool img {
    width: 58% !important;
    height: 58% !important;
    filter: none !important;
}

.action-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.action-btn,
.export-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--editor-input-border) !important;
    border-radius: 9px !important;
    background: var(--editor-input) !important;
    color: var(--editor-text) !important;
    font: 600 0.66rem/1.2 Poppins, sans-serif !important;
    box-shadow: none !important;
}

.action-btn.active,
.action-btn:hover,
.export-btn:hover {
    border-color: var(--editor-accent) !important;
    color: var(--editor-accent) !important;
}

.editor-feature-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.editor-feature-heading h4 {
    min-width: 0 !important;
    margin: 0 !important;
}

#editorHistoryStep {
    flex: 0 0 auto !important;
    color: var(--editor-text-muted) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.editor-history-actions,
.editor-transform-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 10px !important;
}

.editor-feature-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--editor-input-border) !important;
    border-radius: 9px !important;
    background: var(--editor-input) !important;
    color: var(--editor-text) !important;
    font: 600 0.64rem/1.2 Poppins, sans-serif !important;
    cursor: pointer !important;
}

.editor-feature-btn:hover:not(:disabled),
.editor-feature-btn:focus-visible {
    border-color: var(--editor-accent) !important;
    color: var(--editor-accent) !important;
}

.editor-feature-btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}

.editor-feature-btn img {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(73%) sepia(48%) saturate(656%) hue-rotate(4deg) brightness(94%) contrast(89%) !important;
}

.editor-transform-note {
    display: block !important;
    margin-top: 7px !important;
    color: var(--editor-text-muted) !important;
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.editor-section--diagnostics {
    display: grid !important;
    gap: 10px !important;
}

.editor-diagnostics__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.editor-diagnostics__head > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.editor-diagnostics__kicker {
    color: var(--editor-accent) !important;
    font-size: 0.57rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

.editor-diagnostics__head h4 {
    margin: 0 !important;
    color: var(--editor-text) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.editor-diagnostics__status {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: 999px !important;
    background: var(--editor-surface-raised) !important;
    color: var(--editor-text-secondary) !important;
    font-size: 0.57rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.editor-diagnostics__status[data-state="ready"] {
    border-color: color-mix(in srgb, var(--editor-success) 58%, transparent) !important;
    background: color-mix(in srgb, var(--editor-success) 12%, transparent) !important;
    color: var(--editor-success) !important;
}

.editor-diagnostics__status[data-state="warning"] {
    border-color: color-mix(in srgb, var(--editor-warning) 58%, transparent) !important;
    background: color-mix(in srgb, var(--editor-warning) 12%, transparent) !important;
    color: var(--editor-warning) !important;
}

.editor-diagnostics__status[data-state="error"] {
    border-color: color-mix(in srgb, var(--editor-danger) 58%, transparent) !important;
    background: color-mix(in srgb, var(--editor-danger) 12%, transparent) !important;
    color: var(--editor-danger) !important;
}

.editor-diagnostics__list {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.editor-diagnostics__list li {
    position: relative !important;
    margin: 0 !important;
    padding-left: 15px !important;
    color: var(--editor-text-secondary) !important;
    font-size: 0.64rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.editor-diagnostics__list li::before {
    content: "";
    position: absolute !important;
    top: 0.5em !important;
    left: 1px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--editor-text-muted) !important;
}

.editor-diagnostics__list li[data-level="ok"]::before {
    background: var(--editor-success) !important;
}

.editor-diagnostics__list li[data-level="warning"]::before {
    background: var(--editor-warning) !important;
}

.editor-diagnostics__list li[data-level="error"]::before {
    background: var(--editor-danger) !important;
}

.editor-section--position {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

.editor-section--position h4 {
    margin: 0 !important;
}

.control-group,
.fen-controls {
    min-width: 0 !important;
}

.control-group--turn {
    display: grid !important;
    grid-template-columns: auto minmax(118px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

.control-group label,
.control-label,
.castling-label {
    color: var(--editor-text-secondary) !important;
    font-size: 0.68rem !important;
}

.editor-workbench select,
.editor-workbench input[type="text"],
.editor-workbench input[type="number"] {
    width: 100% !important;
    min-height: 38px !important;
    border: 1px solid var(--editor-input-border) !important;
    border-radius: 8px !important;
    background: var(--editor-input) !important;
    color: var(--editor-text) !important;
    font: 500 0.7rem/1.3 Poppins, sans-serif !important;
}

.editor-section--fen {
    padding: 0 !important;
    overflow: hidden;
}

.editor-section--fen summary {
    display: grid;
    gap: 3px;
    padding: 12px;
    cursor: pointer;
}

.editor-section--fen summary span {
    color: var(--editor-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.editor-section--fen summary small {
    color: var(--editor-text-muted);
    font-size: 0.62rem;
}

.editor-section--fen .fen-controls {
    display: grid !important;
    gap: 10px !important;
    padding: 0 12px 12px !important;
    border-top: 1px solid var(--editor-border);
}

.editor-section--fen .control-group {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-top: 10px !important;
}

.castling-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

.castling-row {
    display: grid !important;
    grid-template-columns: minmax(58px, 0.7fr) repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.castling-row .castling-label,
.castling-row .castling-option {
    min-width: 0 !important;
    margin: 0 !important;
}

.castling-row .castling-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.editor-section--export {
    display: none !important;
}

.editor-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: auto !important;
    padding: 12px !important;
    border-top: 1px solid var(--editor-border) !important;
    background: var(--editor-surface) !important;
}

.editor-actions__context {
    display: none !important;
}

.editor-actions button {
    width: 100% !important;
}

html body .editor-workbench .chess-layout .controls-container .editor-actions .apply-btn {
    border-color: color-mix(in srgb, var(--editor-accent) 70%, white 30%) !important;
    background: var(--editor-accent) !important;
    color: var(--theme-button-text-hover, #090a09) !important;
}

html body .editor-workbench .chess-layout .controls-container .editor-actions .apply-btn:disabled {
    border-color: color-mix(in srgb, var(--editor-danger) 54%, var(--editor-border)) !important;
    background: color-mix(in srgb, var(--editor-danger) 10%, var(--editor-surface-raised)) !important;
    color: var(--editor-danger) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

html body .editor-workbench .chess-layout .controls-container .editor-content .action-btn,
html body .editor-workbench .chess-layout .controls-container .editor-content .export-btn {
    background-color: var(--editor-input) !important;
    background-image: none !important;
}

html body .editor-workbench .chess-layout .controls-container .editor-actions {
    padding: 12px !important;
    border-top: 1px solid var(--editor-border) !important;
    background-color: var(--editor-surface) !important;
    background-image: none !important;
}

html body .editor-workbench .chess-layout .controls-container .editor-actions .cancel-btn {
    border-color: var(--editor-input-border) !important;
    background-color: var(--editor-surface-raised) !important;
    background-image: none !important;
    color: var(--editor-text) !important;
}

.editor-logo {
    display: none !important;
}

.portrait-palette-slot {
    min-width: 0;
}

.validation-modal,
.apply-modal,
.exit-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: color-mix(in srgb, var(--editor-canvas) 82%, transparent) !important;
    backdrop-filter: blur(10px);
}

.validation-modal .modal-content,
.apply-modal .apply-modal-content,
.exit-modal .exit-modal-content {
    width: min(430px, 100%) !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: 18px !important;
    background: var(--theme-modal-bg, var(--editor-surface)) !important;
    color: var(--editor-text) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42) !important;
}

.validation-modal h2,
.apply-modal h2,
.exit-modal h2 {
    margin: 0 0 10px !important;
    color: var(--editor-text) !important;
    font-size: 1.24rem !important;
    line-height: 1.25 !important;
}

.modal-message,
.exit-modal p,
#cerrarManualMsg {
    color: var(--editor-text-secondary) !important;
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
}

.modal-message p {
    position: relative;
    margin: 8px 0 !important;
    padding-left: 16px;
}

.modal-message p::before {
    content: "";
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--editor-accent);
}

.modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

/* Cierre de especificidad sobre la capa histórica del editor. */
@media (min-width: 1181px) {
    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        --editor-panel-width: 440px;
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--editor-panel-width) !important;
        width: 100% !important;
        height: calc(100dvh - var(--editor-header-height)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--editor-header-height)) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        width: 100% !important;
        height: 100% !important;
        padding: 18px !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container #board.board {
        width: min(calc(100dvh - var(--editor-header-height) - 36px), calc(100vw - var(--editor-panel-width) - 36px)) !important;
        height: min(calc(100dvh - var(--editor-header-height) - 36px), calc(100vw - var(--editor-panel-width) - 36px)) !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 12px 12px 12px 0 !important;
        border: 1px solid var(--editor-border) !important;
        border-radius: var(--editor-radius) !important;
    }
}

.mobile-palette-tools,
.mobile-editor-context,
.mobile-sheet-handle,
.mobile-sheet-close,
.mobile-editor-tabs,
.mobile-editor-backdrop,
.mobile-editor-commandbar,
.mobile-editor-scroll-clearance,
.mobile-editor-toast {
    display: none;
}

@media (max-width: 1180px) and (orientation: landscape) {
    :root {
        --editor-header-height: 60px;
    }

    .editor-commandbar {
        grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
        padding-inline: 12px;
    }

    .editor-commandbar__brand img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .chess-layout {
        grid-template-columns: minmax(0, 1fr) minmax(355px, 39vw) !important;
    }

    .chess-container {
        padding: 12px !important;
    }

    .chess-container #board {
        width: min(calc(100dvh - var(--editor-header-height) - 24px), calc(61vw - 24px)) !important;
        height: min(calc(100dvh - var(--editor-header-height) - 24px), calc(61vw - 24px)) !important;
    }

    .controls-container {
        margin: 8px 8px 8px 0 !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: calc(100dvh - var(--editor-header-height)) !important;
        max-height: calc(100dvh - var(--editor-header-height)) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        height: 100% !important;
        padding: 12px !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container #board.board {
        width: min(calc(100dvh - var(--editor-header-height) - 24px), calc(61vw - 24px)) !important;
        height: min(calc(100dvh - var(--editor-header-height) - 24px), calc(61vw - 24px)) !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        height: calc(100dvh - var(--editor-header-height) - 16px) !important;
        max-height: calc(100dvh - var(--editor-header-height) - 16px) !important;
        margin: 8px 8px 8px 0 !important;
        border: 1px solid var(--editor-border) !important;
        border-radius: var(--editor-radius) !important;
        overflow: hidden !important;
    }

    .editor-header {
        padding: 12px 14px !important;
    }

    .editor-content {
        gap: 8px !important;
        padding: 9px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable;
    }

    .editor-section {
        padding: 9px !important;
    }
}

@media (max-width: 1180px) and (orientation: portrait) {
    :root {
        --editor-header-height: 62px;
    }

    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .editor-commandbar {
        position: sticky;
        top: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: var(--editor-header-height);
        padding: 7px 10px;
    }

    .editor-commandbar__brand {
        gap: 8px;
    }

    .editor-commandbar__brand img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .editor-commandbar__brand strong {
        font-size: 0.72rem;
    }

    .editor-commandbar__brand small,
    .editor-commandbar__status {
        display: none;
    }

    .editor-commandbar__actions {
        gap: 6px;
    }

    .command-btn {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 0.66rem !important;
    }

    .chess-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - var(--editor-header-height)) !important;
        overflow: visible !important;
    }

    .chess-container {
        display: grid !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 6px 14px !important;
    }

    .portrait-palette-slot {
        display: grid !important;
        gap: 6px;
        width: min(100%, 720px) !important;
        margin: 0 auto 8px !important;
        padding: 7px !important;
        border: 1px solid var(--editor-border) !important;
        border-radius: 12px !important;
        background: var(--editor-surface) !important;
    }

    .portrait-palette-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .portrait-palette-switch button {
        min-height: 32px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--editor-text-muted);
        font: 700 0.64rem/1 Poppins, sans-serif;
        cursor: pointer;
    }

    .portrait-palette-switch button[aria-selected="true"] {
        border-color: var(--editor-input-border);
        background: color-mix(in srgb, var(--editor-accent) 15%, var(--editor-canvas));
        color: var(--editor-accent);
    }

    .portrait-palette-host {
        min-width: 0;
    }

    .portrait-palette-host .editor-section--palette {
        display: block !important;
        width: 100% !important;
        padding: 6px !important;
        border: 0 !important;
        background: transparent !important;
    }

    .portrait-palette-host .editor-section--palette > h4 {
        display: none !important;
    }

    .portrait-palette-host .piece-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .portrait-palette-host .piece-item,
    .portrait-palette-host .piece-tool {
        min-height: 0 !important;
    }

    .chess-container #board {
        grid-row: 2;
        width: min(calc(100vw - 12px), 720px) !important;
        height: min(calc(100vw - 12px), 720px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: none !important;
    }

    .controls-container {
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        width: calc(100% - 12px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 6px 10px !important;
        overflow: visible !important;
    }

    .editor-header {
        padding: 14px !important;
    }

    .editor-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    .editor-content > .editor-section--palette {
        display: none !important;
    }

    .editor-section--actions,
    .editor-section--position,
    .editor-section--fen {
        grid-column: auto;
    }

    .editor-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 25;
        padding: 9px !important;
        box-shadow: 0 -10px 24px color-mix(in srgb, var(--editor-canvas) 72%, transparent) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - var(--editor-header-height)) !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        display: grid !important;
        grid-template-rows: auto auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 6px 14px !important;
    }

    html body .editor-workbench .chess-layout > .chess-container .portrait-palette-slot.portrait-palette-slot {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: min(calc(100vw - 12px), 820px) !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto 8px !important;
        padding: 7px !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-switch {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-host {
        display: block !important;
        width: 100% !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-host .editor-section--palette[hidden] {
        display: none !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-host .editor-section--palette:not([hidden]) {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-host .piece-grid {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        width: 100% !important;
        height: auto !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-slot-palette-color="white"] .piece-item,
    html body .editor-workbench .portrait-palette-slot[data-slot-palette-color="white"] .piece-tool {
        border-color: var(--silicio-palette-white-border) !important;
        background: var(--silicio-palette-white-bg) !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-slot-palette-color="black"] .piece-item {
        border-color: var(--silicio-palette-black-border) !important;
        background: var(--silicio-palette-black-bg) !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-slot-palette-color="black"] .piece-tool {
        border-color: var(--silicio-palette-white-border) !important;
        background: var(--silicio-palette-white-bg) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container #board.board {
        width: min(calc(100vw - 12px), 820px) !important;
        height: min(calc(100vw - 12px), 820px) !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 6px 10px !important;
        overflow: visible !important;
    }
}

@media (max-width: 1180px) and (orientation: portrait) {
    .editor-commandbar__brand strong {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #exportCaptureTop {
        display: none;
    }

    .editor-content > .editor-section--export {
        display: block !important;
    }

    .editor-section--export .export-row,
    .editor-section--export .export-btn {
        width: 100% !important;
    }

    .chess-container #board {
        border-radius: 10px !important;
    }

    .editor-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .editor-header p {
        display: none;
    }

    .editor-appearance span {
        max-width: 120px;
        font-size: 0.54rem;
    }

    .action-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .control-group--turn {
        grid-template-columns: 1fr !important;
    }

    .castling-grid {
        grid-template-columns: 1fr !important;
    }

    .validation-modal .modal-content,
    .apply-modal .apply-modal-content,
    .exit-modal .exit-modal-content {
        padding: 20px !important;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    :root {
        --editor-header-height: 48px;
    }

    .editor-commandbar__brand img {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .editor-commandbar__brand small,
    .editor-commandbar__status {
        display: none;
    }

    .command-btn {
        min-height: 34px;
        padding: 7px 10px;
    }

    .editor-header p,
    .editor-appearance {
        display: none;
    }

    .editor-header {
        padding: 9px 12px !important;
    }
}

/* Teléfonos en horizontal: marco suficiente para coordenadas externas. */
@media (max-width: 980px) and (max-height: 600px) and (orientation: landscape) {
    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        overflow: visible !important;
    }

    .editor-board-stage {
        display: grid;
        place-items: center;
        overflow: visible !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container #board.board {
        width: min(calc(100dvh - var(--editor-header-height) - 48px), calc(61vw - 24px)) !important;
        height: min(calc(100dvh - var(--editor-header-height) - 48px), calc(61vw - 24px)) !important;
        overflow: visible !important;
    }

    html body:not([data-tablet-fix]) .editor-workbench #board.board coords coord {
        color: var(--theme-coords-color, var(--editor-accent)) !important;
        text-shadow: var(--theme-coords-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.72)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .command-btn,
    .editor-actions button,
    .modal-actions button {
        transition: none;
    }
}

/* Móvil y tableta vertical: catálogo dual, inspector como panel y acciones persistentes. */
@media (max-width: 1180px) and (orientation: portrait) {
    :root {
        --editor-header-height: 52px;
    }

    html,
    body {
        overflow-x: hidden !important;
        scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }

    body.mobile-editor-sheet-open {
        overflow: hidden !important;
    }

    .editor-commandbar {
        min-height: var(--editor-header-height) !important;
        padding: 5px 8px !important;
    }

    .editor-commandbar__brand img {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .editor-commandbar__brand strong {
        max-width: 170px;
    }

    .editor-commandbar__actions .command-btn {
        min-width: 44px !important;
        min-height: 42px !important;
        padding: 7px 9px !important;
        font-size: 0.7rem !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)),
    .chess-layout {
        min-height: 0 !important;
        padding-bottom: 10px !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container,
    .chess-container {
        grid-template-rows: auto auto auto !important;
        align-content: start !important;
        padding: 7px 6px 8px !important;
    }

    .editor-board-stage {
        display: grid;
        place-items: start center;
        width: 100%;
        padding-bottom: 22px;
        overflow: visible !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container #board.board {
        width: min(calc(100vw - 36px), 820px) !important;
        height: min(calc(100vw - 36px), 820px) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: visible !important;
    }

    html body:not([data-tablet-fix]) .editor-workbench #board.board coords.files {
        bottom: -19px !important;
    }

    html body:not([data-tablet-fix]) .editor-workbench #board.board coords.ranks {
        left: -18px !important;
    }

    html body:not([data-tablet-fix]) .editor-workbench #board.board coords coord {
        color: var(--theme-coords-color, var(--editor-accent)) !important;
        text-shadow: var(--theme-coords-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.72)) !important;
    }

    html body .editor-workbench .chess-layout > .chess-container .portrait-palette-slot.portrait-palette-slot,
    .portrait-palette-slot {
        gap: 7px !important;
        margin-bottom: 7px !important;
        padding: 7px !important;
        border-radius: 13px !important;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-switch,
    .portrait-palette-switch {
        display: none !important;
    }

    .mobile-palette-tools {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .mobile-palette-tools button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 44px;
        padding: 6px 5px;
        border: 1px solid var(--editor-input-border);
        border-radius: 9px;
        background: var(--editor-input);
        color: var(--editor-text-secondary);
        font: 700 0.72rem/1 Poppins, sans-serif;
    }

    .mobile-palette-tools button.active,
    .mobile-palette-tools button[aria-pressed="true"] {
        border-color: var(--editor-accent);
        background: color-mix(in srgb, var(--editor-accent) 8%, var(--editor-input));
        color: var(--editor-accent);
    }

    html[data-theme="light-matrix"] .mobile-palette-tools button[aria-pressed="true"],
    html[data-theme="rose-matrix"] .mobile-palette-tools button[aria-pressed="true"] {
        color: color-mix(in srgb, var(--editor-accent) 30%, var(--editor-text));
    }

    .mobile-palette-tools .editor-tool-icon {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        background: currentColor;
        -webkit-mask: var(--editor-tool-mask) center / contain no-repeat;
        mask: var(--editor-tool-mask) center / contain no-repeat;
    }

    .mobile-palette-tools .editor-tool-icon--pointer {
        --editor-tool-mask: url('../../img/editor-tools/mouse-pointer-2.svg');
    }

    .mobile-palette-tools .editor-tool-icon--eraser {
        --editor-tool-mask: url('../../img/editor-tools/eraser.svg');
    }

    .mobile-palette-tools .editor-size-icon {
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        border: 1.8px solid currentColor;
        border-radius: 4px;
        background: transparent;
    }

    .mobile-palette-tools .editor-size-icon::before,
    .mobile-palette-tools .editor-size-icon--in::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 1.8px;
        border-radius: 999px;
        background: currentColor;
        transform: translate(-50%, -50%);
    }

    .mobile-palette-tools .editor-size-icon--in::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .mobile-palette-tools button:disabled {
        cursor: not-allowed;
        opacity: 0.42;
        filter: saturate(0.65);
    }

    .mobile-palette-tools button:focus-visible {
        border-color: var(--editor-accent);
        outline: 2px solid color-mix(in srgb, var(--editor-accent) 62%, transparent);
        outline-offset: 2px;
    }

    html body .editor-workbench .portrait-palette-slot .portrait-palette-host,
    .portrait-palette-host {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .portrait-palette-host .editor-section--palette,
    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .portrait-palette-host .editor-section--palette[hidden] {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 2px !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .editor-section--palette > h4 {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
        white-space: normal !important;
        color: var(--editor-text-muted) !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.02em !important;
        text-align: center;
        text-transform: none !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .piece-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .portrait-palette-tool {
        display: none !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] .piece-item {
        min-height: 44px !important;
        padding: 3px !important;
        border-color: var(--silicio-palette-white-border) !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] [data-palette-color="white"] .piece-item {
        background: var(--silicio-palette-white-bg) !important;
    }

    html body .editor-workbench .portrait-palette-slot[data-palette-mode="dual"] [data-palette-color="black"] .piece-item {
        border-color: var(--silicio-palette-black-border) !important;
        background: var(--silicio-palette-black-bg) !important;
    }

    .mobile-editor-context {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        width: min(calc(100vw - 12px), 820px);
        margin: 7px auto 0;
        scroll-margin-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .mobile-editor-context > span,
    .mobile-editor-context > button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 46px;
        padding: 7px 11px;
        border: 1px solid var(--editor-border);
        border-radius: 11px;
        background: var(--editor-surface-raised);
        color: var(--editor-text);
        font-family: Poppins, sans-serif;
        text-align: left;
    }

    .mobile-editor-context small {
        color: var(--editor-text-muted);
        font-size: 0.68rem;
        font-weight: 600;
    }

    .mobile-editor-context strong {
        color: var(--editor-accent);
        font-size: 0.72rem;
    }

    #mobileEditorDiagnostics[data-state="error"] strong {
        color: var(--editor-danger);
    }

    #mobileEditorDiagnostics[data-state="warning"] strong {
        color: var(--editor-warning, #e6b84a);
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container,
    .controls-container {
        position: fixed !important;
        inset: auto 0 calc(64px + env(safe-area-inset-bottom)) 0 !important;
        z-index: 272 !important;
        display: grid !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
        width: 100% !important;
        height: auto !important;
        max-height: min(72dvh, 650px, calc(100dvh - 76px)) !important;
        margin: 0 !important;
        border-width: 1px 0 0 !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -24px 70px color-mix(in srgb, #000 62%, transparent) !important;
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
        transition: transform 220ms ease, opacity 180ms ease, visibility 220ms;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container[data-mobile-open="true"],
    .controls-container[data-mobile-open="true"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-sheet-handle {
        display: block !important;
        width: 42px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--editor-text-muted) 55%, transparent);
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container > .editor-header.editor-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        justify-content: stretch !important;
        padding: 8px 12px 10px !important;
    }

    .controls-container .editor-header p,
    .controls-container .editor-appearance {
        display: none !important;
    }

    .controls-container .editor-header h1 {
        font-size: 1rem !important;
    }

    .controls-container .editor-kicker {
        margin-bottom: 2px;
        font-size: 0.6rem;
    }

    html body .editor-workbench .controls-container .editor-header button.mobile-sheet-close {
        display: grid !important;
        place-items: center;
        justify-self: end !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        padding: 0;
        border: 1px solid var(--editor-input-border);
        border-radius: 11px;
        background: var(--editor-input);
        color: var(--editor-text);
        font: 400 1.5rem/1 sans-serif;
    }

    .mobile-editor-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding: 7px 9px;
        border-bottom: 1px solid var(--editor-border);
        background: var(--editor-surface);
    }

    .mobile-editor-tabs button {
        min-height: 44px;
        padding: 6px;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent;
        color: var(--editor-text-muted);
        font: 700 0.7rem/1 Poppins, sans-serif;
    }

    .mobile-editor-tabs button[aria-selected="true"] {
        border-color: var(--editor-input-border);
        background: color-mix(in srgb, var(--editor-accent) 14%, var(--editor-input));
        color: var(--editor-accent);
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container > .editor-content.editor-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 9px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 9px 9px 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .controls-container[data-mobile-tab="position"] .editor-section--history,
    .controls-container[data-mobile-tab="position"] .editor-section--transform,
    .controls-container[data-mobile-tab="position"] .editor-section--fen,
    .controls-container[data-mobile-tab="position"] .editor-section--export,
    .controls-container[data-mobile-tab="transform"] .editor-section--actions,
    .controls-container[data-mobile-tab="transform"] .editor-section--position,
    .controls-container[data-mobile-tab="transform"] .editor-section--diagnostics,
    .controls-container[data-mobile-tab="transform"] .editor-section--fen,
    .controls-container[data-mobile-tab="transform"] .editor-section--export,
    .controls-container[data-mobile-tab="rules"] .editor-section--actions,
    .controls-container[data-mobile-tab="rules"] .editor-section--history,
    .controls-container[data-mobile-tab="rules"] .editor-section--transform,
    .controls-container[data-mobile-tab="rules"] .editor-section--position,
    .controls-container[data-mobile-tab="rules"] .editor-section--diagnostics {
        display: none !important;
    }

    .controls-container[data-mobile-tab="rules"] .editor-section--fen,
    .controls-container[data-mobile-tab="rules"] .editor-section--export {
        display: block !important;
    }

    .controls-container .editor-section h4,
    .controls-container .editor-section summary,
    .controls-container .editor-feature-heading span,
    .controls-container .editor-transform-note,
    .controls-container label,
    .controls-container .control-label {
        font-size: 0.72rem !important;
    }

    .controls-container .action-btn,
    .controls-container .editor-feature-btn,
    .controls-container .export-btn,
    .controls-container select,
    .controls-container input,
    .controls-container .castling-option {
        min-height: 44px !important;
        font-size: 0.74rem !important;
    }

    .custom-spinner-inside,
    .custom-spinner-btn {
        min-width: 44px !important;
    }

    .custom-spinner-btn {
        min-height: 22px !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container > .editor-actions.editor-actions {
        display: none !important;
    }

    .mobile-editor-backdrop {
        position: fixed;
        inset: 0;
        z-index: 260;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: color-mix(in srgb, #000 58%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms;
    }

    body.mobile-editor-sheet-open .mobile-editor-backdrop {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-editor-scroll-clearance {
        display: block !important;
        width: 100%;
        height: calc(82px + env(safe-area-inset-bottom));
        flex: 0 0 calc(82px + env(safe-area-inset-bottom));
        pointer-events: none;
    }

    .mobile-editor-commandbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 280;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        min-height: calc(64px + env(safe-area-inset-bottom));
        padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid color-mix(in srgb, var(--editor-accent) 38%, var(--editor-border));
        background: color-mix(in srgb, var(--editor-surface) 96%, transparent);
        box-shadow: 0 -12px 30px color-mix(in srgb, #000 42%, transparent), 0 -1px 0 color-mix(in srgb, var(--editor-accent) 15%, transparent);
        backdrop-filter: blur(18px);
    }

    .mobile-editor-commandbar button {
        display: grid;
        grid-template-rows: 21px auto;
        place-items: center;
        gap: 3px;
        min-width: 0;
        min-height: 50px;
        padding: 5px 3px;
        border: 1px solid color-mix(in srgb, var(--editor-accent) 30%, var(--editor-input-border));
        border-radius: 10px;
        background: color-mix(in srgb, var(--editor-surface-raised) 84%, var(--editor-canvas));
        color: var(--editor-text);
        font: 700 0.62rem/1 Poppins, sans-serif;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
    }

    .mobile-command-icon {
        display: block;
        width: 20px;
        height: 20px;
        background: var(--editor-accent);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--editor-accent) 24%, transparent));
    }

    html[data-theme="rose-matrix"] .mobile-command-icon {
        background: #ff69b4;
    }

    .mobile-command-icon--undo {
        -webkit-mask-image: url("../../tablero/svg/undo.svg");
        mask-image: url("../../tablero/svg/undo.svg");
    }

    .mobile-command-icon--redo {
        -webkit-mask-image: url("../../tablero/svg/redo.svg");
        mask-image: url("../../tablero/svg/redo.svg");
    }

    .mobile-command-icon--tools {
        -webkit-mask-image: url("../../tablero/svg/ajustes.svg");
        mask-image: url("../../tablero/svg/ajustes.svg");
    }

    .mobile-command-icon--apply {
        -webkit-mask-image: url("../../tablero/svg/jugarposicion.svg");
        mask-image: url("../../tablero/svg/jugarposicion.svg");
    }

    .mobile-editor-commandbar button:not(:disabled):active,
    .mobile-editor-commandbar button[aria-expanded="true"] {
        border-color: var(--editor-accent);
        background: color-mix(in srgb, var(--editor-accent) 14%, var(--editor-surface-raised));
        color: var(--editor-text);
    }

    .mobile-editor-commandbar button:disabled {
        opacity: 0.62;
    }

    .mobile-editor-commandbar .mobile-editor-commandbar__primary {
        border-color: color-mix(in srgb, var(--editor-accent) 72%, white 28%);
        background: var(--editor-accent);
        color: #07100d;
        box-shadow: 0 5px 16px color-mix(in srgb, var(--editor-accent) 28%, transparent), inset 0 1px 0 color-mix(in srgb, white 26%, transparent);
    }

    .mobile-editor-commandbar .mobile-editor-commandbar__primary .mobile-command-icon {
        background: currentColor;
        filter: none;
    }

    html[data-theme="light-matrix"] .mobile-editor-commandbar .mobile-editor-commandbar__primary {
        color: #ffffff;
    }

    .mobile-editor-commandbar .mobile-editor-commandbar__primary[data-state="review"] {
        border-color: color-mix(in srgb, var(--editor-danger) 64%, white 16%);
        background: color-mix(in srgb, var(--editor-danger) 18%, var(--editor-input));
        color: var(--editor-danger);
        box-shadow: none;
    }

    .mobile-editor-toast {
        position: fixed;
        left: 50%;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 310;
        display: block;
        max-width: calc(100vw - 32px);
        padding: 10px 14px;
        border: 1px solid color-mix(in srgb, var(--editor-accent) 60%, var(--editor-border));
        border-radius: 999px;
        background: var(--editor-surface-raised);
        color: var(--editor-text);
        box-shadow: 0 14px 36px color-mix(in srgb, #000 48%, transparent);
        font: 600 0.72rem/1.3 Poppins, sans-serif;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 12px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    }

    .mobile-editor-toast[data-visible="true"] {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

/* Tablet vertical: tablero, coordenadas y paletas forman una sola huella.
   Se recupera el tamaño seguro del diseño responsive y se impide que los
   contenedores de ancho viewport ignoren el carril reservado a los números. */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar))
        > .chess-container.chess-container {
        padding-left: 24px !important;
        padding-right: 6px !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar))
        > .chess-container.chess-container #board.board {
        width: var(--editor-portrait-board-size) !important;
        height: var(--editor-portrait-board-size) !important;
        max-width: var(--editor-portrait-board-size) !important;
        max-height: var(--editor-portrait-board-size) !important;
    }

    html body .editor-workbench .chess-layout > .chess-container
        .editor-board-stage.editor-board-stage,
    html body .editor-workbench .chess-layout > .chess-container
        .portrait-palette-slot.portrait-palette-slot,
    html body .editor-workbench .chess-layout > .chess-container
        .mobile-editor-context.mobile-editor-context {
        width: 100% !important;
        max-width: 820px !important;
    }
}

/* Tamaño personalizable: conserva como máximo la geometría segura existente. */
@media (max-width: 768px) and (orientation: portrait) {
    html body .editor-workbench .chess-layout > .chess-container
        .editor-board-stage.editor-board-stage {
        width: min(calc(100vw - 36px), 820px) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar))
        > .chess-container.chess-container #board.board {
        width: var(--editor-portrait-user-size, 100%) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html body .editor-workbench .chess-layout > .chess-container
        .editor-board-stage.editor-board-stage {
        width: var(--editor-portrait-board-size) !important;
    }

    html body .editor-workbench > .chess-layout.chess-layout:not(:has(.icons-sidebar))
        > .chess-container.chess-container #board.board {
        width: var(--editor-portrait-user-size, 100%) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .mobile-palette-tools {
        gap: 4px;
    }

    .mobile-palette-tools button {
        gap: 4px;
        min-height: 42px;
        padding-inline: 3px;
        font-size: 0.63rem;
    }

    .mobile-palette-tools .editor-tool-icon,
    .mobile-palette-tools .editor-size-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}