/**
 * SILICIO POSITION STUDIO
 * Capa de escritorio para edicion.html y tabletas horizontales.
 * En vertical, las tabletas conservan la experiencia móvil.
 */

:root {
    --studio-header-height: 64px;
    --studio-board-size: min(calc(100dvh - 112px), calc(100vw - 748px), 780px);
    --studio-dock-width: 264px;
    --studio-panel-width: 420px;
    --studio-gap: 12px;
    --studio-canvas: var(--theme-bg-primary, #090b0a);
    --studio-surface: var(--theme-bg-secondary, #151816);
    --studio-surface-raised: var(--theme-bg-tertiary, #202420);
    --studio-surface-soft: color-mix(in srgb, var(--studio-surface-raised) 72%, var(--studio-canvas));
    --studio-border: var(--theme-border, rgba(212, 175, 55, 0.24));
    --studio-border-strong: color-mix(in srgb, var(--theme-accent-primary, #d4af37) 48%, transparent);
    --studio-accent: var(--theme-accent-primary, #d4af37);
    --studio-accent-soft: color-mix(in srgb, var(--studio-accent) 15%, transparent);
    --studio-text: var(--theme-text-primary, #f4f1e8);
    --studio-text-secondary: var(--theme-text-secondary, #c7c4ba);
    --studio-text-muted: var(--theme-text-muted, #92978f);
    --studio-input: var(--theme-input-bg, #0d100e);
    --studio-input-border: var(--theme-input-border, rgba(212, 175, 55, 0.3));
    --studio-focus: color-mix(in srgb, var(--studio-accent) 68%, white 32%);
    --studio-danger: #ef5c69;
    --studio-success: #5fcf98;
    --studio-warning: #e7b84c;
    --studio-radius-large: 18px;
    --studio-radius: 12px;
    --studio-radius-small: 9px;
    --studio-shadow: 0 18px 54px color-mix(in srgb, black 45%, transparent);
}

html[data-theme="light-matrix"] {
    --studio-canvas: #e8eef1;
    --studio-surface: #f8fafb;
    --studio-surface-raised: #ffffff;
    --studio-surface-soft: #edf2f4;
    --studio-border: rgba(35, 65, 78, 0.2);
    --studio-border-strong: rgba(28, 112, 139, 0.38);
    --studio-text: #172d37;
    --studio-text-secondary: #38515d;
    --studio-text-muted: #647b85;
    --studio-input: #ffffff;
    --studio-input-border: rgba(35, 65, 78, 0.28);
    --studio-shadow: 0 18px 45px rgba(43, 68, 78, 0.16);
}

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

body {
    position: static !important;
    inset: auto !important;
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body * {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.editor-workbench {
    position: relative !important;
    display: grid !important;
    grid-template-rows: var(--studio-header-height) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--studio-canvas) !important;
}

/* Barra superior */
.editor-commandbar {
    position: relative !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: var(--studio-header-height) !important;
    padding: 7px 18px !important;
    gap: 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--studio-border) !important;
    background: var(--studio-surface) !important;
    box-shadow: 0 8px 28px color-mix(in srgb, black 20%, transparent) !important;
}

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

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

.editor-commandbar__brand span {
    display: grid !important;
    line-height: 1.1 !important;
}

.editor-commandbar__brand strong {
    color: var(--studio-accent) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

.editor-commandbar__brand small {
    margin-top: 4px !important;
    color: var(--studio-text-muted) !important;
    font-size: 0.69rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
}

.editor-commandbar__status {
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 999px !important;
    background: var(--studio-surface-soft) !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.editor-commandbar__status[data-state="changed"] {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    color: var(--studio-text) !important;
}

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

.editor-commandbar #cancelEditTop {
    display: none !important;
}

.command-btn {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--studio-input-border) !important;
    border-radius: var(--studio-radius-small) !important;
    background: var(--studio-surface-raised) !important;
    color: var(--studio-text) !important;
    font: 600 0.75rem/1 Poppins, sans-serif !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease !important;
}

.command-btn:hover {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    transform: translateY(-1px) !important;
}

/* Estación de trabajo */
html body .editor-workbench > .chess-layout {
    position: relative !important;
    z-index: auto !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: var(--studio-board-size) var(--studio-dock-width) var(--studio-panel-width) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: calc(100dvh - var(--studio-header-height)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    gap: var(--studio-gap) !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    background: var(--studio-canvas) !important;
    transform: none !important;
}

html body .editor-workbench .chess-layout > .chess-container {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-items: center !important;
    width: var(--studio-board-size) !important;
    height: var(--studio-board-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.editor-board-stage {
    position: relative !important;
    width: var(--studio-board-size) !important;
    height: var(--studio-board-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 1px solid var(--studio-border-strong) !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--studio-surface) 82%, transparent) !important;
    box-shadow: var(--silicio-board-frame, var(--studio-shadow)) !important;
}

html body .editor-workbench .chess-layout .chess-container #board,
html body .editor-workbench .chess-layout .chess-container #board.silicio-board-host {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transform: none !important;
    aspect-ratio: 1 !important;
}

html body .editor-workbench #board silicio-board-surface {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
}

.board.pieza-seleccionada,
.board.pieza-seleccionada silicio-board-surface {
    cursor: none !important;
}

.board silicio-board-surface.borrador-activo,
.board.borrador-activo silicio-board-surface {
    cursor: crosshair !important;
}

.board .move-dest,
.board .selected,
.board .last-move {
    box-shadow: none !important;
    background-image: none !important;
}

html body .editor-workbench #board silicio-board-surface square.move-dest,
html body .editor-workbench #board silicio-board-surface square.selected,
html body .editor-workbench #board silicio-board-surface square.last-move {
    background: none !important;
    background-color: transparent !important;
}

/* Dock de piezas y herramientas */
.editor-piece-dock {
    position: relative !important;
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-auto-rows: max-content !important;
    grid-template-rows: none !important;
    align-content: start !important;
    align-self: center !important;
    width: var(--studio-dock-width) !important;
    height: min(calc(100dvh - var(--studio-header-height) - 32px), max(var(--studio-board-size), 620px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 13px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scroll-padding-block: 14px;
    border: 1px solid var(--studio-border) !important;
    border-radius: var(--studio-radius-large) !important;
    background: var(--studio-surface) !important;
    box-shadow: var(--studio-shadow) !important;
}

.editor-piece-dock[hidden] {
    display: none !important;
}

.editor-piece-dock__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--studio-border) !important;
}

.editor-piece-dock__kicker,
.editor-kicker,
.editor-actions__context span,
.editor-piece-dock__status span,
.modal-kicker {
    color: var(--studio-accent) !important;
    font-size: 0.61rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.editor-piece-dock__head strong {
    color: var(--studio-text) !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
}

.editor-piece-dock__head small {
    overflow: hidden !important;
    color: var(--studio-text-muted) !important;
    font-size: 0.61rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.editor-piece-dock__switch {
    display: none !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 3px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: var(--studio-radius-small) !important;
    background: var(--studio-input) !important;
}

.editor-piece-dock__switch button {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--studio-text-muted) !important;
    font: 600 0.58rem/1 Poppins, sans-serif !important;
    cursor: pointer !important;
}

.editor-piece-dock__switch button[aria-selected="true"] {
    background: var(--studio-accent) !important;
    color: color-mix(in srgb, var(--studio-accent) 12%, black 88%) !important;
}

.editor-piece-dock__palette {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.editor-piece-dock .editor-section--palette {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 8px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 11px !important;
    background: var(--studio-surface-soft) !important;
    box-shadow: none !important;
}

.editor-piece-dock .editor-section--palette[hidden] {
    display: none !important;
}

.editor-piece-dock .editor-section--palette > h4 {
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.59rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

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

.editor-piece-dock .piece-item,
.editor-piece-dock .piece-tool {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 9px !important;
    background: var(--studio-surface-raised) !important;
    color: var(--studio-text) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease !important;
}

.editor-piece-dock .piece-grid > .portrait-palette-tool {
    display: none !important;
}

.editor-piece-dock [data-palette-color="white"] .piece-item:not(.selected) {
    background: var(--silicio-palette-white-bg) !important;
    border-color: var(--silicio-palette-white-border) !important;
}

.editor-piece-dock [data-palette-color="black"] .piece-item:not(.selected) {
    background: var(--silicio-palette-black-bg) !important;
    border-color: var(--silicio-palette-black-border) !important;
}

.editor-piece-dock [data-palette-color="white"] .piece-item img {
    filter: contrast(1.04) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.38)) !important;
}

.editor-piece-dock [data-palette-color="black"] .piece-item img {
    filter: contrast(1.08) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) !important;
}

.editor-piece-dock .piece-item:hover,
.editor-piece-dock .piece-tool:hover {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    transform: translateY(-1px) !important;
}

.editor-piece-dock .piece-item.selected,
.editor-piece-dock .piece-tool.active {
    border-color: var(--studio-accent) !important;
    background: var(--studio-accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--studio-accent) !important;
}

.editor-piece-dock .piece-item img,
.editor-piece-dock .piece-tool img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.editor-piece-dock__move {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 10px !important;
    background: var(--studio-input) !important;
    color: var(--studio-text-secondary) !important;
    font: 600 0.68rem/1.2 Poppins, sans-serif !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
}

.editor-piece-dock__move img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.editor-piece-dock__move:hover,
.editor-piece-dock__move.active,
.editor-piece-dock__move[aria-pressed="true"] {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    color: var(--studio-text) !important;
}

.editor-piece-dock__actions {
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 11px !important;
    background: var(--studio-surface-soft) !important;
}

.editor-piece-dock .editor-section--actions {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.editor-piece-dock .editor-section--actions h4 {
    margin: 0 !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
}

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

.editor-piece-dock .action-btn {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 5px 2px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 8px !important;
    background: var(--studio-input) !important;
    color: var(--studio-text-secondary) !important;
    font: 600 0.59rem/1.1 Poppins, sans-serif !important;
    cursor: pointer !important;
    transition: border-color 140ms ease, background-color 140ms ease !important;
}

.editor-piece-dock .action-btn:hover,
.editor-piece-dock .action-btn.active {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    color: var(--studio-text) !important;
}

.editor-piece-dock__history,
.editor-piece-dock__transform {
    min-width: 0 !important;
}

.editor-piece-dock .editor-section--history,
.editor-piece-dock .editor-section--transform {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 11px !important;
    background: var(--studio-surface-soft) !important;
}

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

.editor-piece-dock .editor-feature-heading h4 {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

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

.editor-piece-dock .editor-history-actions,
.editor-piece-dock .editor-transform-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.editor-piece-dock .editor-feature-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 5px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 8px !important;
    background: var(--studio-input) !important;
    color: var(--studio-text-secondary) !important;
    font: 600 0.6rem/1.15 Poppins, sans-serif !important;
    cursor: pointer !important;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
}

.editor-piece-dock .editor-feature-btn img {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !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-piece-dock .editor-feature-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.editor-piece-dock .editor-feature-btn:hover:not(:disabled),
.editor-piece-dock .editor-feature-btn:focus-visible {
    border-color: var(--studio-border-strong) !important;
    background: var(--studio-accent-soft) !important;
    color: var(--studio-text) !important;
}

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

.editor-piece-dock .editor-transform-note {
    display: block !important;
    margin: -1px 0 0 !important;
    color: var(--studio-text-muted) !important;
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.editor-piece-dock__transform {
    align-self: start !important;
}

.editor-piece-dock__status {
    align-self: end !important;
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding-top: 9px !important;
    border-top: 1px solid var(--studio-border) !important;
}

.editor-piece-dock__status strong {
    overflow: hidden !important;
    color: var(--studio-text) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
}

/* Inspector */
html body .editor-workbench .chess-layout > .controls-container {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: none !important;
    align-self: center !important;
    width: var(--studio-panel-width) !important;
    height: var(--studio-board-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: var(--studio-radius-large) !important;
    background: var(--studio-surface) !important;
    box-shadow: var(--studio-shadow) !important;
    transform: none !important;
}

.editor-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 17px 18px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--studio-border) !important;
    border-radius: 0 !important;
    background: var(--studio-surface) !important;
    box-shadow: none !important;
    text-align: left !important;
}

.editor-header h1,
.editor-header h3 {
    margin: 5px 0 4px !important;
    color: var(--studio-text) !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}

.editor-header p {
    max-width: 250px !important;
    margin: 0 !important;
    color: var(--studio-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.editor-appearance {
    display: grid !important;
    justify-items: end !important;
    gap: 5px !important;
    max-width: 118px !important;
}

.editor-appearance span {
    display: block !important;
    max-width: 118px !important;
    overflow: hidden !important;
    padding: 4px 7px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 999px !important;
    background: var(--studio-surface-soft) !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.editor-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--studio-border-strong) transparent !important;
    background: var(--studio-surface) !important;
}

.editor-content::-webkit-scrollbar {
    width: 7px !important;
}

.editor-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.editor-content::-webkit-scrollbar-thumb {
    border: 2px solid var(--studio-surface) !important;
    border-radius: 999px !important;
    background: var(--studio-border-strong) !important;
}

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

.editor-content .editor-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--studio-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.editor-section--diagnostics {
    display: grid !important;
    gap: 11px !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(--studio-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(--studio-text) !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.editor-diagnostics__status {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 999px !important;
    background: var(--studio-surface-soft) !important;
    color: var(--studio-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(--studio-success) 58%, transparent) !important;
    background: color-mix(in srgb, var(--studio-success) 12%, transparent) !important;
    color: var(--studio-success) !important;
}

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

.editor-diagnostics__status[data-state="error"] {
    border-color: color-mix(in srgb, var(--studio-danger) 58%, transparent) !important;
    background: color-mix(in srgb, var(--studio-danger) 12%, transparent) !important;
    color: var(--studio-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(--studio-text-secondary) !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

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

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

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

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

.editor-section--position {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.55fr) minmax(0, 1.45fr) !important;
    align-items: center !important;
    gap: 14px !important;
}

.editor-section--position h4 {
    margin: 0 !important;
    color: var(--studio-text) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
}

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

.control-group--turn label {
    color: var(--studio-text-muted) !important;
    font-size: 0.69rem !important;
    font-weight: 500 !important;
}

.editor-section--fen {
    display: block !important;
}

.editor-section--fen > summary {
    position: relative !important;
    display: grid !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 32px 0 0 !important;
    color: var(--studio-text) !important;
    cursor: pointer !important;
    list-style: none !important;
}

.editor-section--fen > summary::-webkit-details-marker {
    display: none !important;
}

.editor-section--fen > summary::after {
    content: "Abrir";
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    min-width: 48px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 8px !important;
    background: var(--studio-surface-soft) !important;
    color: var(--studio-accent) !important;
    font-size: 0.57rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.editor-section--fen[open] > summary::after {
    content: "Cerrar";
}

.editor-section--fen > summary span {
    color: var(--studio-text) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
}

.editor-section--fen > summary small {
    color: var(--studio-text-muted) !important;
    font-size: 0.66rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

.fen-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--studio-border) !important;
}

.fen-controls .control-group {
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.control-group--castling,
.control-group--fen {
    grid-column: 1 / -1 !important;
}

.control-group label,
.control-label,
.castling-label,
.fen-label {
    margin: 0 !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.controls-container select,
.controls-container input[type="text"],
.controls-container input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    border: 1px solid var(--studio-input-border) !important;
    border-radius: var(--studio-radius-small) !important;
    outline: 0 !important;
    background: var(--studio-input) !important;
    color: var(--studio-text) !important;
    font: 500 0.74rem/1.2 Poppins, sans-serif !important;
    box-shadow: none !important;
}

#fenInput {
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 0.72rem !important;
}

.controls-container select:focus,
.controls-container input:focus {
    border-color: var(--studio-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-focus) 18%, transparent) !important;
}

#fenInput[aria-invalid="true"] {
    border-color: var(--studio-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-danger) 18%, transparent) !important;
}

.input-number-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.input-number-wrapper input {
    padding-right: 42px !important;
    appearance: textfield !important;
}

.input-number-wrapper input::-webkit-inner-spin-button,
.input-number-wrapper input::-webkit-outer-spin-button {
    margin: 0 !important;
    appearance: none !important;
}

.custom-spinner-inside {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    bottom: 1px !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    width: 34px !important;
    overflow: hidden !important;
    border-left: 1px solid var(--studio-input-border) !important;
    border-radius: 0 8px 8px 0 !important;
}

.custom-spinner-btn {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--studio-surface-soft) !important;
    cursor: pointer !important;
    color: var(--studio-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(--studio-accent) 74%, var(--studio-text) 26%) !important;
}

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

.custom-spinner-btn + .custom-spinner-btn {
    border-top: 1px solid var(--studio-input-border) !important;
}

.custom-spinner-btn:hover {
    background: var(--studio-accent-soft) !important;
}

.castling-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.castling-row {
    display: grid !important;
    grid-template-columns: minmax(64px, 0.72fr) repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: var(--studio-radius-small) !important;
    background: var(--studio-surface-soft) !important;
}

.castling-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.69rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.castling-option input[type="checkbox"] {
    position: relative !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    margin: 0 !important;
    accent-color: var(--studio-accent) !important;
    cursor: pointer !important;
}

.editor-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(142px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-top: 1px solid var(--studio-border) !important;
    background: var(--studio-surface) !important;
    box-shadow: none !important;
}

.editor-actions__context {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.editor-actions__context strong {
    overflow: hidden !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.editor-actions button,
.modal-actions button {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--studio-input-border) !important;
    border-radius: var(--studio-radius-small) !important;
    font: 600 0.75rem/1 Poppins, sans-serif !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease !important;
}

.editor-actions .apply-btn,
.modal-actions .apply-btn {
    border-color: var(--studio-accent) !important;
    background: var(--studio-accent) !important;
    color: color-mix(in srgb, var(--studio-accent) 12%, black 88%) !important;
}

.editor-actions .apply-btn:disabled {
    border-color: color-mix(in srgb, var(--studio-danger) 54%, var(--studio-border)) !important;
    background: color-mix(in srgb, var(--studio-danger) 10%, var(--studio-surface-raised)) !important;
    color: var(--studio-danger) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
}

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

.editor-actions button:hover,
.modal-actions button:hover {
    border-color: var(--studio-border-strong) !important;
    transform: translateY(-1px) !important;
}

/* Modales y utilidades funcionales que antes dependían de editor.css */
.validation-modal,
.apply-modal,
.exit-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(8px) !important;
}

.validation-modal .modal-content,
.apply-modal .apply-modal-content,
.exit-modal .exit-modal-content {
    display: grid !important;
    gap: 15px !important;
    width: min(440px, calc(100vw - 48px)) !important;
    max-height: min(650px, calc(100dvh - 48px)) !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: auto !important;
    border: 1px solid var(--studio-border-strong) !important;
    border-radius: var(--studio-radius-large) !important;
    background: var(--studio-surface) !important;
    color: var(--studio-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48) !important;
    text-align: left !important;
}

.validation-modal h2,
.apply-modal h2,
.exit-modal h2 {
    margin: 0 !important;
    color: var(--studio-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.exit-modal p,
.modal-message,
#validationMessage {
    margin: 0 !important;
    color: var(--studio-text-secondary) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

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

#cerrarManualMsg {
    display: none;
    color: var(--studio-text-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
}

#floatingTooltip {
    position: fixed !important;
    z-index: 12000 !important;
    display: none;
    max-width: 240px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 8px !important;
    background: var(--studio-surface-raised) !important;
    color: var(--studio-text) !important;
    font-size: 0.7rem !important;
    pointer-events: none !important;
    opacity: 0;
    box-shadow: var(--studio-shadow) !important;
    transition: opacity 120ms ease, transform 120ms ease !important;
}

.cursor-pieza,
#cursorPieza {
    position: fixed !important;
    z-index: 9000 !important;
    display: none;
    width: 38px !important;
    height: 38px !important;
    pointer-events: none !important;
    opacity: 0.82 !important;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5)) !important;
}

.cursor-pieza img,
#cursorPieza img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.editor-workbench button:focus-visible,
.editor-workbench select:focus-visible,
.editor-workbench input:focus-visible,
.editor-workbench summary:focus-visible,
.editor-workbench a:focus-visible,
.validation-modal button:focus-visible,
.apply-modal button:focus-visible,
.exit-modal button:focus-visible {
    outline: 2px solid var(--studio-focus) !important;
    outline-offset: 2px !important;
}

/* La tableta horizontal conserva el mismo estudio con densidad adaptable. */
@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    :root {
        --studio-header-height: clamp(54px, 7dvh, 60px);
        --studio-dock-width: clamp(160px, 20vw, 226px);
        --studio-panel-width: clamp(238px, 29vw, 374px);
        --studio-gap: clamp(5px, 0.7vw, 8px);
        --studio-board-size: min(
            calc(100dvh - var(--studio-header-height) - 28px),
            calc(100vw - var(--studio-dock-width) - var(--studio-panel-width) - var(--studio-gap) - var(--studio-gap) - 32px),
            620px
        );
    }

    html body .editor-workbench > .chess-layout {
        padding: 8px 8px 8px 24px !important;
    }

    .editor-piece-dock {
        grid-template-rows: none !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 6px !important;
        padding: 8px 8px 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scroll-padding-bottom: 18px;
        scrollbar-width: thin;
    }

    .editor-piece-dock__head small {
        display: none !important;
    }

    .editor-piece-dock__palette {
        gap: 6px !important;
    }

    .editor-piece-dock .editor-section--palette {
        gap: 5px !important;
        padding: 7px 6px !important;
    }

    .editor-piece-dock .piece-grid {
        gap: 4px !important;
    }

    .editor-piece-dock .piece-item,
    .editor-piece-dock .piece-tool {
        height: 38px !important;
        min-height: 38px !important;
    }

    .editor-piece-dock .piece-item img,
    .editor-piece-dock .piece-tool img {
        max-width: 29px !important;
        max-height: 29px !important;
    }

    .editor-piece-dock__actions {
        padding: 7px !important;
    }

    .editor-piece-dock .editor-section--history,
    .editor-piece-dock .editor-section--transform {
        gap: 5px !important;
        padding: 7px !important;
    }

    .editor-piece-dock .editor-transform-actions {
        gap: 5px !important;
    }

    .editor-piece-dock .editor-section--transform .editor-feature-btn {
        min-height: 32px !important;
        padding-block: 4px !important;
        font-size: 0.56rem !important;
    }

    .editor-piece-dock .editor-section--transform .editor-feature-btn span {
        overflow: visible !important;
        line-height: 1.05 !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .editor-piece-dock .editor-section--transform .editor-transform-note {
        display: none !important;
    }

    .editor-piece-dock__transform {
        margin-bottom: 2px !important;
    }

    .editor-piece-dock__status {
        display: none !important;
    }

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

@media (min-width: 1280px) and (max-width: 1499px) {
    :root {
        --studio-board-size: min(calc(100dvh - 112px), calc(100vw - 708px), 720px);
        --studio-dock-width: 248px;
        --studio-panel-width: 400px;
        --studio-gap: 10px;
    }

    .editor-piece-dock__status {
        display: none !important;
    }
}

/* Escritorios bajos: conserva la estación sin introducir el layout móvil. */
@media (max-height: 720px) and (min-width: 769px) and (orientation: landscape) {
    :root {
        --studio-header-height: 56px;
    }

    .editor-commandbar {
        padding-block: 5px !important;
    }

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

    .editor-piece-dock {
        gap: 7px !important;
        padding: 9px !important;
    }

    .editor-piece-dock .piece-grid {
        gap: 5px !important;
    }

    .editor-piece-dock .piece-item,
    .editor-piece-dock .piece-tool {
        height: 32px !important;
        min-height: 32px !important;
    }

    .editor-piece-dock .piece-item img,
    .editor-piece-dock .piece-tool img {
        max-width: 25px !important;
        max-height: 25px !important;
    }

    .editor-piece-dock__move {
        min-height: 34px !important;
        padding-block: 4px !important;
    }

    .editor-piece-dock .action-btn {
        min-height: 30px !important;
    }

    .editor-piece-dock__status {
        display: none !important;
    }

    .editor-piece-dock .editor-section--history,
    .editor-piece-dock .editor-section--transform {
        gap: 5px !important;
        padding: 7px !important;
    }

    .editor-piece-dock .editor-feature-btn {
        min-height: 28px !important;
        padding-block: 4px !important;
    }

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

    .editor-header p {
        display: none !important;
    }

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

    .editor-content .editor-section {
        padding-block: 13px !important;
    }

    .editor-actions {
        min-height: 64px !important;
        padding: 9px 10px !important;
    }
}

/* Tabletas horizontales grandes con poca altura útil (incluye 12").
   El bloque final debe cerrar con aire sin exigir desplazar el catálogo. */
@media (min-width: 1181px) and (max-width: 1600px) and (max-height: 760px) and (orientation: landscape) {
    .editor-piece-dock {
        gap: 6px !important;
        padding: 8px 9px 13px !important;
    }

    .editor-piece-dock .editor-section--history,
    .editor-piece-dock .editor-section--transform {
        gap: 4px !important;
        padding: 6px !important;
    }

    .editor-piece-dock .editor-transform-actions {
        gap: 5px !important;
    }

    .editor-piece-dock .editor-section--transform .editor-feature-btn {
        min-height: 27px !important;
        padding-block: 3px !important;
        font-size: 0.56rem !important;
    }

    .editor-piece-dock .editor-section--transform .editor-transform-note {
        display: none !important;
    }

    .editor-piece-dock__transform {
        margin-bottom: 6px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editor-workbench *,
    .validation-modal *,
    .apply-modal *,
    .exit-modal * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
@media (min-width: 1181px),
       (min-width: 769px) and (orientation: landscape) {
    .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 !important;
    }
}