/**
 * LAYOUT-OVERRIDE.CSS - Override Final del Layout del Editor
 * Ajedrez de Silicio - Editor de Posiciones
 * 
 * Estilos de override final para el layout del editor.
 * Migrado desde edicion.html (bloque <style> final, líneas 506-540)
 * 
 * IMPORTANTE: Este archivo debe cargarse DESPUÉS de editor.css para mantener la prioridad.
 */

/* Override para layout del editor - Sobrescribir board.css */
/* SOLO APLICAR EN DESKTOP/TABLET (NO en móviles) */
/* NOTA: Estos estilos se sobrescriben en pantallas 32:9 (ver media query más abajo) */
@media (min-width: 769px) {
    .chess-layout {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        width: 100vw !important;
        height: 100dvh !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    .chess-container {
        display: flex !important;
        grid-column: unset !important;
        grid-row: unset !important;
        justify-content: center !important;
        align-items: center !important;
    }
******************************************************+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    -
    .controls-container { 
        align-items: stretch !important; 
        grid-column: unset !important;
        grid-row: unset !important;
        width: 480px !important;
    }

    .editor-header { 
        justify-content: center !important; 
    }

    .editor-content { 
        align-items: stretch !important; 
        width: 100% !important; 
        padding-left: 8px !important; 
        padding-right: 8px !important; 
    }

    .editor-section { 
        width: 100% !important; 
        margin-left: 0 !important; 
        margin-right: 0 !important; 
        padding-left: 20px !important; 
        padding-right: 20px !important; 
        box-sizing: border-box !important; 
    }

    .piece-grid { 
        justify-items: center !important; 
        margin: 0 !important; 
        width: 100% !important; 
    }

    .action-buttons { 
        width: 100% !important; 
        margin: 0 !important; 
    }

    .fen-controls, 
    .control-group { 
        width: 100% !important; 
    }

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

/* ===== PANTALLAS 32:9 (ULTRA-WIDE HORIZONTALES) ===== */
@media (min-width: 1500px) and (max-height: 600px) and (orientation: landscape) {
    /* Variables para las 3 columnas - Nueva distribución */
    :root {
        --col-piezas-w: 200px !important; /* Columna 1 y 2: Piezas Blancas y Negras (más estrechas para que quepan lado a lado) */
        --col-acciones-w: 220px !important; /* Columna 3: Acciones */
        --col-fen-w: calc(var(--col-piezas-w) * 2 + var(--col-gap)) !important; /* Configuración FEN ocupa 2 columnas */
        --col-gap: 16px !important; /* Gap entre columnas */
        --panel-w-editor-total: calc(var(--col-piezas-w) * 2 + var(--col-acciones-w) + var(--col-gap) * 2 + 32px) !important; /* 2 columnas de piezas + acciones + gaps + padding */
    }
    
    /* Logo: reposicionar relativo a .chess-layout, no a .chess-container */
    html body .chess-layout .editor-logo,
    body .chess-layout .editor-logo,
    .chess-layout .editor-logo,
    html body .editor-logo,
    body .editor-logo,
    .editor-logo {
        position: fixed !important; /* Fixed para que sea relativo al viewport, no al contenedor */
        top: 20px !important;
        left: 20px !important;
        z-index: 1000 !important;
    }
    
    html body .chess-layout .editor-logo img,
    body .chess-layout .editor-logo img,
    .chess-layout .editor-logo img,
    html body .editor-logo img,
    body .editor-logo img,
    .editor-logo img {
        height: 70px !important;
        width: auto !important;
    }

    /* Layout principal: grid de 2 columnas para distribución inteligente - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout,
    body .chess-layout,
    .chess-layout {
        display: grid !important;
        grid-template-columns: 1fr var(--panel-w-editor-total) !important; /* Columna 1: tablero (flexible), Columna 2: panel (ancho fijo) */
        grid-template-rows: 1fr !important;
        gap: 0 !important; /* Sin gap, el espacio se maneja en el grid */
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important; /* Sin padding, el logo usa fixed */
        box-sizing: border-box !important;
        justify-content: unset !important; /* Anular justify-content de flex */
        align-items: unset !important; /* Anular align-items de flex */
        flex-direction: unset !important; /* Anular flex-direction */
    }

    /* Contenedor del tablero: ocupar su columna del grid y centrar el tablero - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .chess-container,
    body .chess-layout .chess-container,
    .chess-layout .chess-container,
    html body .chess-container,
    body .chess-container,
    .chess-container {
        grid-column: 1 !important; /* Primera columna del grid */
        grid-row: 1 !important;
        width: 100% !important; /* Ocupar toda su columna del grid */
        max-width: none !important; /* Sin límite de ancho */
        height: 100% !important; /* Ocupar toda la altura */
        display: flex !important;
        justify-content: center !important; /* Centrar el tablero horizontalmente */
        align-items: center !important; /* Centrar el tablero verticalmente */
        position: relative !important;
        flex: unset !important; /* Anular flex de otros estilos */
        min-width: unset !important;
    }

    /* Panel de edición: segunda columna del grid, ancho fijo y visible - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container,
    body .chess-layout .controls-container,
    .chess-layout .controls-container,
    html body .controls-container,
    body .controls-container,
    .controls-container {
        grid-column: 2 !important; /* Segunda columna del grid principal */
        grid-row: 1 !important;
        width: 100% !important; /* Ocupar toda su columna del grid */
        min-width: var(--panel-w-editor-total) !important;
        max-width: var(--panel-w-editor-total) !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        align-items: stretch !important;
        height: 100% !important; /* Ocupar toda la altura del grid */
        max-height: 100vh !important;
        background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
        border-left: 3px solid #d4af37 !important;
        border-radius: 8px !important;
        box-shadow: -8px 0 24px rgba(212, 175, 55, 0.15) !important;
        flex: unset !important; /* Anular flex de otros estilos */
    }

    /* Contenido del editor: grid de 3 columnas con filas explícitas - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content,
    body .chess-layout .controls-container .editor-content,
    .chess-layout .controls-container .editor-content,
    html body .controls-container .editor-content,
    body .controls-container .editor-content,
    .controls-container .editor-content,
    html body .editor-content,
    body .editor-content,
    .editor-content {
        display: grid !important; /* CRÍTICO: Grid, no flex */
        grid-template-columns: var(--col-piezas-w) var(--col-piezas-w) var(--col-acciones-w) !important; /* 3 columnas: Piezas Blancas, Piezas Negras, Acciones */
        grid-template-rows: auto auto !important; /* 2 filas explícitas */
        column-gap: var(--col-gap) !important;
        row-gap: 12px !important;
        padding: 12px !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        align-content: start !important;
        align-items: start !important; /* Alinear al inicio para que las columnas se vean */
        width: 100% !important;
        flex-direction: unset !important; /* Anular flex-direction de otros estilos */
        box-sizing: border-box !important;
        /* Anular explícitamente cualquier estilo flex que pueda interferir */
        justify-content: unset !important;
        justify-items: unset !important;
        grid-auto-flow: row !important; /* Flujo por filas */
    }

    /* FILA 1: Piezas Blancas (col 1), Piezas Negras (col 2), Acciones (col 3) - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .editor-content > .editor-section:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important; /* Primera fila, primera columna */
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .editor-content > .editor-section:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important; /* Primera fila, segunda columna (al lado de Piezas Blancas) */
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .editor-content > .editor-section:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important; /* Primera fila, tercera columna */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FILA 2: Configuración FEN (col 1 y 2, span 2 columnas), Exportación (col 3) - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .editor-content > .editor-section:nth-child(4) {
        grid-column: 1 / span 2 !important; /* Ocupa columnas 1 y 2 */
        grid-row: 2 !important; /* Segunda fila */
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .editor-content > .editor-section:nth-child(5) {
        grid-column: 3 !important;
        grid-row: 2 !important; /* Segunda fila, tercera columna */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Secciones más compactas - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content .editor-section,
    body .chess-layout .controls-container .editor-content .editor-section,
    .chess-layout .controls-container .editor-content .editor-section,
    html body .controls-container .editor-content .editor-section,
    body .controls-container .editor-content .editor-section,
    .controls-container .editor-content .editor-section,
    html body .editor-content .editor-section,
    body .editor-content .editor-section,
    .editor-content .editor-section,
    .editor-section {
        padding: 12px !important;
        margin-bottom: 0 !important; /* Sin margen inferior, el gap del grid lo maneja */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(212, 175, 55, 0.15) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    }

    html body .chess-layout .controls-container .editor-content .editor-section h4,
    body .chess-layout .controls-container .editor-content .editor-section h4,
    .chess-layout .controls-container .editor-content .editor-section h4,
    html body .controls-container .editor-content .editor-section h4,
    body .controls-container .editor-content .editor-section h4,
    .controls-container .editor-content .editor-section h4,
    html body .editor-content .editor-section h4,
    body .editor-content .editor-section h4,
    .editor-content .editor-section h4,
    .editor-section h4 {
        font-size: 0.95rem !important;
        margin-bottom: 10px !important;
        padding-left: 8px !important;
        color: #f4d03f !important;
        font-weight: 600 !important;
    }
    
    /* Header del editor - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-header,
    body .chess-layout .controls-container .editor-header,
    .chess-layout .controls-container .editor-header,
    html body .controls-container .editor-header,
    body .controls-container .editor-header,
    .controls-container .editor-header,
    html body .editor-header,
    body .editor-header,
    .editor-header {
        padding: 16px 20px !important;
        border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
        background: linear-gradient(135deg, #2a2410 0%, #1a1a1a 100%) !important;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1) !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    html body .chess-layout .controls-container .editor-header h3,
    body .chess-layout .controls-container .editor-header h3,
    .chess-layout .controls-container .editor-header h3,
    html body .controls-container .editor-header h3,
    body .controls-container .editor-header h3,
    .controls-container .editor-header h3,
    html body .editor-header h3,
    body .editor-header h3,
    .editor-header h3 {
        margin: 0 !important;
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: #f4d03f !important;
        text-shadow: 0 2px 8px rgba(212, 175, 55, 0.5), 0 0 20px rgba(244, 208, 63, 0.3) !important;
        letter-spacing: 1px !important;
    }

    /* Grid de piezas: 3 columnas - Mayor especificidad */
    body .chess-layout .controls-container .piece-grid,
    .chess-layout .controls-container .piece-grid,
    .controls-container .piece-grid,
    .piece-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 4px !important;
    }

    body .chess-layout .controls-container .piece-item,
    .chess-layout .controls-container .piece-item,
    .controls-container .piece-item,
    .piece-item {
        min-height: 44px !important;
        padding: 6px !important;
    }

    body .chess-layout .controls-container .piece-item img,
    .chess-layout .controls-container .piece-item img,
    .piece-item img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Botones de acción: 2 columnas (grid 2x2) - Mayor especificidad */
    body .chess-layout .controls-container .action-buttons,
    .chess-layout .controls-container .action-buttons,
    .controls-container .action-buttons,
    .action-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    body .chess-layout .controls-container .action-btn,
    .chess-layout .controls-container .action-btn,
    .controls-container .action-btn,
    .action-btn {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        gap: 6px !important;
    }

    /* Controles FEN: más compactos - Mayor especificidad */
    body .chess-layout .controls-container .fen-controls,
    .chess-layout .controls-container .fen-controls,
    .controls-container .fen-controls,
    .fen-controls {
        gap: 10px !important;
    }

    body .chess-layout .controls-container .control-group,
    .chess-layout .controls-container .control-group,
    .controls-container .control-group,
    .control-group {
        gap: 6px !important;
    }

    body .chess-layout .controls-container .control-group label,
    .chess-layout .controls-container .control-group label,
    .control-group label {
        font-size: 0.8rem !important;
    }

    body .chess-layout .controls-container .control-group select,
    body .chess-layout .controls-container .control-group input,
    .chess-layout .controls-container .control-group select,
    .chess-layout .controls-container .control-group input,
    .control-group select,
    .control-group input {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Footer: ancho completo, botones en fila - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-actions,
    body .chess-layout .controls-container .editor-actions,
    .chess-layout .controls-container .editor-actions,
    html body .controls-container .editor-actions,
    body .controls-container .editor-actions,
    .controls-container .editor-actions,
    html body .editor-actions,
    body .editor-actions,
    .editor-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 16px 20px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        background: linear-gradient(180deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 1) 100%) !important;
    }
}

/* ===== MÓVILES EN ORIENTACIÓN VERTICAL (PORTRAIT) - Restaurar estilos correctos ===== */
/* IMPORTANTE: Esta media query solo aplica en portrait, no en landscape */
@media (max-width: 768px) and (orientation: portrait) {
    /* Asegurar que los estilos de editor.css se apliquen correctamente */
    html body .chess-layout,
    body .chess-layout,
    .chess-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    html body .chess-layout .chess-container,
    body .chess-layout .chess-container,
    .chess-layout .chess-container,
    html body .chess-container,
    body .chess-container,
    .chess-container {
        order: 0 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 8px !important;
        padding-bottom: 32px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
    
    /* Tablero: asegurar que sea cuadrado y se ajuste al viewport con márgenes adecuados */
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    html body .chess-container .board,
    body .chess-container .board,
    .chess-container .board,
    html body .board,
    body .board,
    .board {
        width: min(90vw, calc(100vh - 250px)) !important;
        height: min(90vw, calc(100vh - 250px)) !important;
        max-width: min(90vw, calc(100vh - 250px)) !important;
        max-height: min(90vw, calc(100vh - 250px)) !important;
        min-width: 280px !important;
        min-height: 280px !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Asegurar que SilicioBoard renderice correctamente */
    html body .chess-layout .chess-container .board silicio-board-surface,
    body .chess-layout .chess-container .board silicio-board-surface,
    .chess-layout .chess-container .board silicio-board-surface,
    html body .chess-container .board silicio-board-surface,
    body .chess-container .board silicio-board-surface,
    .chess-container .board silicio-board-surface,
    html body .board silicio-board-surface,
    body .board silicio-board-surface,
    .board silicio-board-surface {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html body .chess-layout .chess-container .board .silicio-board-host,
    body .chess-layout .chess-container .board .silicio-board-host,
    .chess-layout .chess-container .board .silicio-board-host,
    html body .chess-container .board .silicio-board-host,
    body .chess-container .board .silicio-board-host,
    .chess-container .board .silicio-board-host,
    html body .board .silicio-board-host,
    body .board .silicio-board-host,
    .board .silicio-board-host {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html body .chess-layout .controls-container,
    body .chess-layout .controls-container,
    .chess-layout .controls-container,
    html body .controls-container,
    body .controls-container,
    .controls-container {
        order: 1 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        border-left: none !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
    
    html body .editor-logo,
    body .editor-logo,
    .editor-logo {
        display: none !important;
    }
}

/* ===== MÓVILES PEQUEÑOS EN ORIENTACIÓN HORIZONTAL - Layout adaptado ===== */
/* Mismo layout que móviles grandes: panel ancho para paletas lado a lado */
/* Aplica solo a móviles pequeños (ancho <= 900px) en horizontal */
/* CRÍTICO: Esta regla debe ir ANTES de la regla general de móviles horizontales para que tenga prioridad */
@media (orientation: landscape) and (max-width: 900px) {
    /* Variables iguales a móviles grandes: paletas lado a lado */
    :root {
        --col-piezas-w: 180px !important; /* Igual que móviles grandes para que quepan lado a lado */
        --col-gap: 8px !important; /* Gap igual que móviles grandes */
        --panel-w-editor-total: calc(var(--col-piezas-w) * 2 + var(--col-gap) + 32px) !important;
    }
    
    /* Layout principal: grid de 2 columnas con panel ancho - EXACTAMENTE IGUAL QUE MÓVILES GRANDES */
    html body .chess-layout:not(:has(.icons-sidebar)),
    html body .chess-layout.no-icons,
    html body .chess-layout,
    body .chess-layout:not(:has(.icons-sidebar)),
    body .chess-layout.no-icons,
    body .chess-layout,
    .chess-layout:not(:has(.icons-sidebar)),
    .chess-layout.no-icons,
    .chess-layout {
        display: grid !important;
        /* Panel más ancho para aprovechar mejor el espacio: clamp(380px, 50vw, 450px) */
        grid-template-columns: 1fr clamp(380px, 50vw, 450px) !important;
        grid-template-rows: 1fr !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
        flex-direction: unset !important; /* CRÍTICO: Anular flex-direction: column de editor.css */
        box-sizing: border-box !important;
        padding-top: 0 !important;
        position: relative !important;
        gap: 4px !important; /* Gap reducido para aprovechar más espacio */
        padding: 0 4px !important; /* Padding reducido para aprovechar más espacio */
        width: 100vw !important;
        max-width: 100vw !important;
        justify-content: unset !important;
        align-items: unset !important;
        min-height: unset !important; /* Anular min-height de portrait */
        /* CRÍTICO: Anular estilos de flex que puedan interferir */
        flex-wrap: unset !important;
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout,
        body .chess-layout,
        .chess-layout {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout,
        body .chess-layout,
        .chess-layout {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Tablero: ocupar columna 1, ajustar tamaño - EXACTAMENTE IGUAL QUE MÓVILES GRANDES */
    html body .chess-layout .chess-container,
    body .chess-layout .chess-container,
    .chess-layout .chess-container,
    html body .chess-container,
    body .chess-container,
    .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: unset !important; /* CRÍTICO: Anular order: 0 de portrait */
        width: 100% !important;
        height: 100% !important;
        max-height: 100svh !important;
        padding: 0 !important; /* Sin padding para maximizar espacio del tablero */
        flex: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        /* CRÍTICO: Anular estilos de portrait que puedan interferir */
        flex-basis: unset !important;
        flex-grow: unset !important;
        flex-shrink: unset !important;
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .chess-container,
        body .chess-layout .chess-container,
        .chess-layout .chess-container {
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .chess-container,
        body .chess-layout .chess-container,
        .chess-layout .chess-container {
            max-height: 100vh !important;
        }
    }
    
    /* Tablero con tamaño ajustado para móviles pequeños horizontales */
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    html body .chess-container .board,
    body .chess-container .board,
    .chess-container .board,
    html body .board,
    body .board,
    .board {
        /* Panel más ancho: clamp(380px, 50vw, 450px) - Aprovechar mejor el espacio */
        width: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        height: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        max-width: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        max-height: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        min-width: 250px !important;
        min-height: 250px !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            height: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-width: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-height: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        }
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            height: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-width: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-height: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        }
    }
    
    /* Panel: columna 2 - FORZAR ANCHO CORRECTO - ANULAR TODOS LOS CONFLICTOS */
    html body .chess-layout .controls-container,
    body .chess-layout .controls-container,
    .chess-layout .controls-container,
    html body .controls-container,
    body .controls-container,
    .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: unset !important; /* CRÍTICO: Anular order: 1 de portrait */
        /* CRÍTICO: Forzar ancho fijo - NO usar 100% ni max-width que limiten */
        min-width: clamp(380px, 50vw, 450px) !important;
        width: clamp(380px, 50vw, 450px) !important;
        max-width: clamp(380px, 50vw, 450px) !important; /* CRÍTICO: Mismo valor para evitar limitaciones */
        height: 100svh !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        flex: unset !important;
        flex-basis: clamp(380px, 50vw, 450px) !important; /* Forzar en flex también */
        flex-grow: 0 !important; /* NO permitir que crezca */
        flex-shrink: 0 !important; /* NO permitir que se reduzca */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-top: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        min-height: unset !important;
        grid-area: unset !important;
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .controls-container,
        body .chess-layout .controls-container,
        .chess-layout .controls-container {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .controls-container,
        body .chess-layout .controls-container,
        .chess-layout .controls-container {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Header del editor - más compacto */
    html body .chess-layout .controls-container .editor-header,
    body .chess-layout .controls-container .editor-header,
    .chess-layout .controls-container .editor-header,
    html body .controls-container .editor-header,
    body .controls-container .editor-header,
    .controls-container .editor-header,
    .editor-header {
        padding: 8px 4px !important;
        margin: 0 !important;
    }
    
    html body .chess-layout .controls-container .editor-header h3,
    body .chess-layout .controls-container .editor-header h3,
    .chess-layout .controls-container .editor-header h3,
    html body .controls-container .editor-header h3,
    body .controls-container .editor-header h3,
    .controls-container .editor-header h3,
    .editor-header h3 {
        font-size: 0.95rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Contenido del editor: grid de 2 columnas - EXACTAMENTE IGUAL QUE MÓVILES GRANDES */
    html body .chess-layout .controls-container .editor-content,
    body .chess-layout .controls-container .editor-content,
    .chess-layout .controls-container .editor-content,
    html body .controls-container .editor-content,
    body .controls-container .editor-content,
    .controls-container .editor-content,
    html body .editor-content,
    body .editor-content,
    .editor-content {
        display: grid !important;
        /* CRÍTICO: Usar valores fijos en lugar de variables para asegurar que funcione */
        grid-template-columns: 180px 180px !important; /* 180px cada una, igual que móviles grandes */
        grid-template-rows: auto auto auto auto !important;
        column-gap: 8px !important; /* Gap igual que móviles grandes */
        row-gap: 8px !important;
        padding: 8px !important;
        flex: 0 0 auto !important; /* NO flex: 1, para que no ocupe todo el espacio */
        min-height: 0 !important;
        overflow-y: visible !important; /* NO overflow-y: auto, el scroll está en controls-container */
        overflow-x: hidden !important;
        align-content: start !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: unset !important;
        grid-auto-flow: row !important;
        box-sizing: border-box !important;
    }
    
    /* Secciones: distribuir en 2 columnas - EXACTAMENTE IGUAL QUE MÓVILES GRANDES */
    /* Piezas Blancas: Fila 1, Columna 1 */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .editor-content > .editor-section:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    /* Piezas Negras: Fila 1, Columna 2 */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .editor-content > .editor-section:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    
    /* Acciones: Fila 2, Columnas 1-2 (span 2) - Debajo de las paletas de piezas */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .editor-content > .editor-section:nth-child(3) {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Configuración FEN: Fila 3, Columnas 1-2 (span 2) */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .editor-content > .editor-section:nth-child(4) {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Exportación: Fila 4, Columnas 1-2 (span 2) */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .editor-content > .editor-section:nth-child(5) {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Secciones más compactas - EXACTAMENTE IGUAL QUE MÓVILES GRANDES */
    html body .chess-layout .controls-container .editor-content .editor-section,
    body .chess-layout .controls-container .editor-content .editor-section,
    .chess-layout .controls-container .editor-content .editor-section,
    html body .controls-container .editor-content .editor-section,
    body .controls-container .editor-content .editor-section,
    .controls-container .editor-content .editor-section,
    html body .editor-content .editor-section,
    body .editor-content .editor-section,
    .editor-content .editor-section,
    .editor-section {
        padding: 8px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que los botones de acciones sean visibles */
    html body .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    body .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    html body .controls-container .editor-content .editor-section .action-buttons,
    body .controls-container .editor-content .editor-section .action-buttons,
    .controls-container .editor-content .editor-section .action-buttons,
    .editor-section .action-buttons,
    .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important; /* Gap igual que móviles grandes */
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    html body .controls-container .editor-content .editor-section .action-buttons .action-btn,
    body .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .action-buttons .action-btn,
    .action-btn {
        width: 100% !important;
        min-height: 36px !important; /* Altura igual que móviles grandes */
        height: auto !important;
        padding: 8px 6px !important; /* Padding igual que móviles grandes */
        font-size: 11px !important; /* Fuente igual que móviles grandes */
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        line-height: 1.2 !important;
    }
    
    /* Botones Aplicar/Cancelar: al final del scroll, NO fijos - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-actions,
    body .chess-layout .controls-container .editor-actions,
    .chess-layout .controls-container .editor-actions,
    html body .controls-container .editor-actions,
    body .controls-container .editor-actions,
    .controls-container .editor-actions,
    html body .editor-actions,
    body .editor-actions,
    .editor-actions {
        position: relative !important; /* NO fixed, NO sticky - igual que móviles grandes */
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        padding: 12px 8px !important; /* Padding igual que móviles grandes */
        gap: 8px !important; /* Gap igual que móviles grandes */
        box-sizing: border-box !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        background: linear-gradient(180deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 1) 100%) !important;
        margin-top: 0 !important; /* NO margin-top: auto, está al final naturalmente */
        margin-bottom: 0 !important;
        bottom: unset !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        z-index: unset !important;
        /* CRÍTICO: Asegurar que NO esté fijo ni sticky */
        transform: none !important;
    }
    
    html body .chess-layout .controls-container .editor-actions .apply-btn,
    html body .chess-layout .controls-container .editor-actions .cancel-btn,
    body .chess-layout .controls-container .editor-actions .apply-btn,
    body .chess-layout .controls-container .editor-actions .cancel-btn,
    .chess-layout .controls-container .editor-actions .apply-btn,
    .chess-layout .controls-container .editor-actions .cancel-btn,
    .editor-actions .apply-btn,
    .editor-actions .cancel-btn {
        flex: 1 1 auto !important;
        padding: 10px 8px !important; /* Padding igual que móviles grandes */
        font-size: 12px !important; /* Fuente igual que móviles grandes */
    }
    
    /* Logo: ocultar - MÁXIMA ESPECIFICIDAD para anular todas las reglas */
    html body .chess-layout .editor-logo,
    body .chess-layout .editor-logo,
    .chess-layout .editor-logo,
    html body .editor-logo,
    body .editor-logo,
    .editor-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }
    
    html body .chess-layout .editor-logo img,
    body .chess-layout .editor-logo img,
    .chess-layout .editor-logo img,
    html body .editor-logo img,
    body .editor-logo img,
    .editor-logo img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ===== MÓVILES EN ORIENTACIÓN HORIZONTAL - Layout similar a 32:9 ===== */
/* Excluir móviles pequeños (<=900px) que tienen su propia regla */
@media (max-width: 768px) and (orientation: landscape) and (min-width: 668px) {
    /* Variables para las 2 columnas - Similar a 32:9 pero adaptado para móviles */
    :root {
        --col-piezas-w: 180px !important; /* Columna 1 y 2: Piezas Blancas y Negras */
        --col-gap: 8px !important; /* Gap entre columnas */
        --panel-w-editor-total: calc(var(--col-piezas-w) * 2 + var(--col-gap) + 32px) !important;
    }
    
    /* Layout principal: grid de 2 columnas (Tablero | Panel Editor) - MÁXIMA ESPECIFICIDAD */
    /* CRÍTICO: Anular TODOS los estilos de portrait, desktop y editor.css */
    /* Esta regla debe tener máxima especificidad para anular editor.css */
    html body .chess-layout:not(:has(.icons-sidebar)),
    html body .chess-layout.no-icons,
    html body .chess-layout,
    body .chess-layout:not(:has(.icons-sidebar)),
    body .chess-layout.no-icons,
    body .chess-layout,
    .chess-layout:not(:has(.icons-sidebar)),
    .chess-layout.no-icons,
    .chess-layout {
        display: grid !important;
        grid-template-columns: 1fr clamp(400px, 55vw, 500px) !important;
        grid-template-rows: 1fr !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
        flex-direction: unset !important; /* CRÍTICO: Anular flex-direction: column de editor.css */
        box-sizing: border-box !important;
        padding-top: 0 !important;
        position: relative !important;
        gap: 8px !important;
        padding: 0 8px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        justify-content: unset !important;
        align-items: unset !important;
        min-height: unset !important; /* Anular min-height de portrait */
        /* CRÍTICO: Anular estilos de flex que puedan interferir */
        flex-wrap: unset !important;
    }
    
    /* Preferir dvh si está disponible */
    @supports (height: 1dvh) {
        html body .chess-layout,
        body .chess-layout,
        .chess-layout {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
    
    /* Fallback para navegadores sin soporte svh */
    @supports not (height: 1svh) {
        html body .chess-layout,
        body .chess-layout,
        .chess-layout {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Tablero: ocupar columna 1, ajustar tamaño - MÁXIMA ESPECIFICIDAD */
    /* CRÍTICO: Anular TODOS los estilos de portrait y editor.css */
    html body .chess-layout .chess-container,
    body .chess-layout .chess-container,
    .chess-layout .chess-container,
    html body .chess-container,
    body .chess-container,
    .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: unset !important; /* CRÍTICO: Anular order: 0 de portrait */
        width: 100% !important;
        height: 100% !important;
        max-height: 100svh !important;
        padding: 0 !important; /* Sin padding para maximizar espacio del tablero */
        flex: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        /* CRÍTICO: Anular estilos de portrait que puedan interferir */
        flex-basis: unset !important;
        flex-grow: unset !important;
        flex-shrink: unset !important;
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .chess-container,
        body .chess-layout .chess-container,
        .chess-layout .chess-container {
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .chess-container,
        body .chess-layout .chess-container,
        .chess-layout .chess-container {
            max-height: 100vh !important;
        }
    }
    
    /* Tablero con tamaño ajustado para móviles horizontales */
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    html body .chess-container .board,
    body .chess-container .board,
    .chess-container .board,
    html body .board,
    body .board,
    .board {
        width: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        height: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        max-width: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        max-height: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        min-width: 250px !important;
        min-height: 250px !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            height: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            max-width: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            max-height: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        }
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            height: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            max-width: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
            max-height: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(400px, 55vw, 500px) - 32px))) !important;
        }
    }
    
    /* Panel: columna 2 - MÁXIMA ESPECIFICIDAD - Anular TODOS los estilos de portrait y editor.css */
    /* CRÍTICO: Esta regla debe anular completamente los estilos de portrait de editor.css */
    html body .chess-layout .controls-container,
    body .chess-layout .controls-container,
    .chess-layout .controls-container,
    html body .controls-container,
    body .controls-container,
    .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: unset !important; /* CRÍTICO: Anular order: 1 de portrait */
        width: 100% !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        flex: unset !important;
        display: flex !important; /* Asegurar que sea flex para el contenido interno */
        flex-direction: column !important;
        align-items: stretch !important; /* Asegurar que los hijos ocupen todo el ancho */
        border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-top: none !important; /* CRÍTICO: Anular border-top de portrait */
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        min-width: clamp(400px, 55vw, 500px) !important; /* CRÍTICO: Ancho mínimo para que quepan las paletas */
        max-width: 100% !important;
        min-height: unset !important; /* Anular min-height de portrait */
        /* CRÍTICO: Anular estilos de editor.css que puedan interferir */
        grid-area: unset !important;
        /* CRÍTICO: Anular estilos de portrait que fuerzan el panel abajo */
        flex-basis: unset !important;
        flex-grow: unset !important;
        flex-shrink: unset !important;
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .controls-container,
        body .chess-layout .controls-container,
        .chess-layout .controls-container {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .controls-container,
        body .chess-layout .controls-container,
        .chess-layout .controls-container {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Contenido del editor: grid de 2 columnas - Similar a 32:9 - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content,
    body .chess-layout .controls-container .editor-content,
    .chess-layout .controls-container .editor-content,
    html body .controls-container .editor-content,
    body .controls-container .editor-content,
    .controls-container .editor-content,
    html body .editor-content,
    body .editor-content,
    .editor-content {
        display: grid !important;
        /* CRÍTICO: Usar valores fijos en lugar de variables para asegurar que funcione */
        grid-template-columns: 180px 180px !important; /* 180px cada una, igual que móviles pequeños */
        grid-template-rows: auto auto auto auto !important;
        column-gap: 8px !important; /* Gap igual que móviles pequeños */
        row-gap: 8px !important;
        padding: 8px !important;
        flex: 0 0 auto !important; /* NO flex: 1, para que no ocupe todo el espacio */
        min-height: 0 !important;
        overflow-y: visible !important; /* NO overflow-y: auto, el scroll está en controls-container */
        overflow-x: hidden !important;
        align-content: start !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: unset !important;
        grid-auto-flow: row !important;
        box-sizing: border-box !important;
    }
    
    /* Secciones: distribuir en 3 columnas - Similar a 32:9 - MÁXIMA ESPECIFICIDAD */
    /* Piezas Blancas: Fila 1, Columna 1 */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(1),
    .editor-content > .editor-section:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    /* Piezas Negras: Fila 1, Columna 2 */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(2),
    .editor-content > .editor-section:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    
    /* Acciones: Fila 2, Columnas 1-2 (span 2) - Debajo de las paletas de piezas */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(3),
    .editor-content > .editor-section:nth-child(3) {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Configuración FEN: Fila 3, Columnas 1-2 (span 2) */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(4),
    .editor-content > .editor-section:nth-child(4) {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Exportación: Fila 4, Columnas 1-2 (span 2) */
    html body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    body .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .chess-layout .controls-container .editor-content > .editor-section:nth-child(5),
    .editor-content > .editor-section:nth-child(5) {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Secciones más compactas - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-content .editor-section,
    body .chess-layout .controls-container .editor-content .editor-section,
    .chess-layout .controls-container .editor-content .editor-section,
    html body .controls-container .editor-content .editor-section,
    body .controls-container .editor-content .editor-section,
    .controls-container .editor-content .editor-section,
    html body .editor-content .editor-section,
    body .editor-content .editor-section,
    .editor-content .editor-section,
    .editor-section {
        padding: 8px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que los botones de acciones sean visibles */
    html body .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    body .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    .chess-layout .controls-container .editor-content .editor-section .action-buttons,
    html body .controls-container .editor-content .editor-section .action-buttons,
    body .controls-container .editor-content .editor-section .action-buttons,
    .controls-container .editor-content .editor-section .action-buttons,
    .editor-section .action-buttons,
    .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn,
    html body .controls-container .editor-content .editor-section .action-buttons .action-btn,
    body .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .controls-container .editor-content .editor-section .action-buttons .action-btn,
    .action-buttons .action-btn,
    .action-btn {
        width: 100% !important;
        min-height: 36px !important; /* Altura mínima fija para todos los botones */
        height: auto !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important; /* Flex para alinear contenido interno */
        align-items: center !important; /* Centrar verticalmente */
        justify-content: center !important; /* Centrar horizontalmente */
        box-sizing: border-box !important;
        line-height: 1.2 !important; /* Controlar altura de línea */
    }
    
    /* Asegurar que el span dentro del botón no afecte la altura */
    html body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    body .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    .chess-layout .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    html body .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    body .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    .controls-container .editor-content .editor-section .action-buttons .action-btn span,
    .action-buttons .action-btn span,
    .action-btn span {
        display: inline-block !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
        margin-right: 4px !important;
    }
    
    /* Botones Aplicar/Cancelar: al final del scroll, NO fijos - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-actions,
    body .chess-layout .controls-container .editor-actions,
    .chess-layout .controls-container .editor-actions,
    html body .controls-container .editor-actions,
    body .controls-container .editor-actions,
    .controls-container .editor-actions,
    html body .editor-actions,
    body .editor-actions,
    .editor-actions {
        position: relative !important; /* NO fixed, NO sticky */
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        padding: 12px 8px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        background: linear-gradient(180deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 1) 100%) !important;
        margin-top: 0 !important; /* NO margin-top: auto, está al final naturalmente */
        margin-bottom: 0 !important;
        bottom: unset !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        z-index: unset !important;
        /* CRÍTICO: Asegurar que NO esté fijo ni sticky */
        transform: none !important;
    }
    
    html body .chess-layout .controls-container .editor-actions .apply-btn,
    html body .chess-layout .controls-container .editor-actions .cancel-btn,
    body .chess-layout .controls-container .editor-actions .apply-btn,
    body .chess-layout .controls-container .editor-actions .cancel-btn,
    .chess-layout .controls-container .editor-actions .apply-btn,
    .chess-layout .controls-container .editor-actions .cancel-btn,
    .editor-actions .apply-btn,
    .editor-actions .cancel-btn {
        flex: 1 1 auto !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
    
    /* Logo: ocultar en móviles horizontales - MÁXIMA ESPECIFICIDAD */
    html body .editor-logo,
    body .editor-logo,
    .editor-logo {
        display: none !important; /* Ocultar en móviles horizontales para ahorrar espacio */
    }
}

/* ===== REGLAS FINALES CON MÁXIMA PRIORIDAD - MÓVILES PEQUEÑOS HORIZONTALES ===== */
/* Estas reglas se aplican AL FINAL para tener máxima prioridad sobre todas las demás */
/* Usar múltiples condiciones para asegurar que se aplique */
@media (orientation: landscape) and (max-width: 900px),
       (max-width: 900px) and (orientation: landscape),
       (max-height: 500px) and (orientation: landscape) {
    /* Logo: FORZAR OCULTAMIENTO - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .editor-logo,
    body .chess-layout .editor-logo,
    .chess-layout .editor-logo,
    html body .editor-logo,
    body .editor-logo,
    .editor-logo,
    div.editor-logo,
    div.chess-layout div.editor-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }
    
    html body .chess-layout .editor-logo img,
    body .chess-layout .editor-logo img,
    .chess-layout .editor-logo img,
    html body .editor-logo img,
    body .editor-logo img,
    .editor-logo img,
    div.editor-logo img,
    div.editor-logo a,
    div.editor-logo a img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Layout principal: FORZAR grid de 2 columnas - SOBRESCRIBIR board.css */
    html body .chess-layout,
    body .chess-layout,
    .chess-layout {
        display: grid !important;
        grid-template-columns: 1fr clamp(380px, 50vw, 450px) !important; /* Panel más ancho SOLO en móviles pequeños */
        grid-template-rows: 1fr !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
        flex-direction: unset !important;
        box-sizing: border-box !important;
        padding-top: 0 !important;
        position: relative !important;
        gap: 4px !important; /* Gap reducido para aprovechar más espacio */
        padding: 0 4px !important; /* Padding reducido para aprovechar más espacio */
        width: 100vw !important;
        max-width: 100vw !important;
        justify-content: unset !important;
        align-items: unset !important;
        min-height: unset !important;
        flex-wrap: unset !important;
    }
    
    /* Tablero: ajustar tamaño con panel más ancho */
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    html body .chess-container .board,
    body .chess-container .board,
    .chess-container .board,
    html body .board,
    body .board,
    .board {
        width: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        height: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        max-width: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        max-height: max(250px, min(calc(100svh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        min-width: 250px !important;
        min-height: 250px !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    @supports not (height: 1svh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            height: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-width: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-height: max(250px, min(calc(100vh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        }
    }
    
    @supports (height: 1dvh) {
        html body .chess-layout .chess-container .board,
        body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        html body .chess-container .board,
        body .chess-container .board,
        .chess-container .board,
        html body .board,
        body .board,
        .board {
            width: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            height: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-width: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
            max-height: max(250px, min(calc(100dvh - 20px), calc(100vw - clamp(380px, 50vw, 450px) - 12px))) !important;
        }
    }
    
    /* Panel: FORZAR ancho correcto y posición - SOBRESCRIBIR board.css - MÁXIMA PRIORIDAD */
    /* CRÍTICO: Usar selectores con máxima especificidad para sobrescribir TODO */
    html body .chess-layout .controls-container,
    html body .chess-layout:not(:has(.icons-sidebar)) .controls-container,
    html body .chess-layout.no-icons .controls-container,
    body .chess-layout .controls-container,
    body .chess-layout:not(:has(.icons-sidebar)) .controls-container,
    body .chess-layout.no-icons .controls-container,
    .chess-layout .controls-container,
    .chess-layout:not(:has(.icons-sidebar)) .controls-container,
    .chess-layout.no-icons .controls-container,
    html body .controls-container,
    body .controls-container,
    .controls-container,
    div.controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: unset !important;
        /* CRÍTICO: Forzar ancho fijo - NO usar 100% ni max-width que limiten */
        min-width: clamp(380px, 50vw, 450px) !important;
        width: clamp(380px, 50vw, 450px) !important;
        max-width: clamp(380px, 50vw, 450px) !important; /* CRÍTICO: Mismo valor para evitar limitaciones */
        height: 100svh !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        flex: unset !important;
        flex-basis: clamp(380px, 50vw, 450px) !important; /* Forzar en flex también */
        flex-grow: 0 !important; /* NO permitir que crezca */
        flex-shrink: 0 !important; /* NO permitir que se reduzca */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-top: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        min-height: unset !important;
        grid-area: unset !important;
    }
    
    /* Botones: FORZAR position relative y tamaño correcto - MÁXIMA ESPECIFICIDAD */
    html body .chess-layout .controls-container .editor-actions,
    body .chess-layout .controls-container .editor-actions,
    .chess-layout .controls-container .editor-actions,
    html body .controls-container .editor-actions,
    body .controls-container .editor-actions,
    .controls-container .editor-actions,
    html body .editor-actions,
    body .editor-actions,
    .editor-actions,
    div.editor-actions {
        position: relative !important;
        bottom: unset !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        transform: none !important;
        z-index: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        padding: 12px 8px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        background: linear-gradient(180deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 1) 100%) !important;
    }
    
    html body .chess-layout .controls-container .editor-actions .apply-btn,
    html body .chess-layout .controls-container .editor-actions .cancel-btn,
    body .chess-layout .controls-container .editor-actions .apply-btn,
    body .chess-layout .controls-container .editor-actions .cancel-btn,
    .chess-layout .controls-container .editor-actions .apply-btn,
    .chess-layout .controls-container .editor-actions .cancel-btn,
    .editor-actions .apply-btn,
    .editor-actions .cancel-btn {
        flex: 1 1 auto !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
    
    /* Grid de paletas: FORZAR distribución correcta */
    html body .chess-layout .controls-container .editor-content,
    body .chess-layout .controls-container .editor-content,
    .chess-layout .controls-container .editor-content,
    html body .controls-container .editor-content,
    body .controls-container .editor-content,
    .controls-container .editor-content,
    html body .editor-content,
    body .editor-content,
    .editor-content {
        display: grid !important;
        grid-template-columns: calc(50% - 4px) calc(50% - 4px) !important; /* Usar porcentajes para que se ajuste al ancho disponible */
        grid-template-rows: auto auto auto auto !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        padding: 8px !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        align-content: start !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: unset !important;
        grid-auto-flow: row !important;
        box-sizing: border-box !important;
    }
    
    /* Asegurar que las piezas no se desborden de sus contenedores */
    html body .chess-layout .controls-container .editor-content .piece-grid,
    body .chess-layout .controls-container .editor-content .piece-grid,
    .chess-layout .controls-container .editor-content .piece-grid,
    html body .controls-container .editor-content .piece-grid,
    body .controls-container .editor-content .piece-grid,
    .controls-container .editor-content .piece-grid,
    html body .editor-content .piece-grid,
    body .editor-content .piece-grid,
    .editor-content .piece-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Asegurar que las piezas individuales no se desborden */
    html body .chess-layout .controls-container .editor-content .piece-grid .piece,
    body .chess-layout .controls-container .editor-content .piece-grid .piece,
    .chess-layout .controls-container .editor-content .piece-grid .piece,
    html body .controls-container .editor-content .piece-grid .piece,
    body .controls-container .editor-content .piece-grid .piece,
    .controls-container .editor-content .piece-grid .piece,
    html body .editor-content .piece-grid .piece,
    body .editor-content .piece-grid .piece,
    .editor-content .piece-grid .piece {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

S