/**
 * BOARD.CSS - Estilos del Tablero
 * Ajedrez de Silicio - Sistema Chessground + Chessops
 */

/* ===== VARIABLES CSS ===== */
:root {
    --panel-w-desktop: 480px;      /* Aumentado de 420px a 480px para mayor comodidad en el libro */
    --panel-w-editor:  480px;      /* edicion.html, se ajustará en tablet */
    --panel-w-tablet:  clamp(280px, 30vw, 340px); /* Reducido para dar más espacio al tablero */
    --panel-gap:       20px;
    --icons-sidebar-w: 90px;       /* Ancho de la barra de íconos (definido en icons-sidebar.css) */
    --coords-padding-inline: 32px; /* 24px izquierda + 8px derecha */
    --coords-padding-block:  32px; /* 8px superior + 24px inferior */
    --tablet-safe-block:     56px; /* margen adicional para barras del navegador */
    --board-zoom-factor: 1.0;      /* Factor de zoom del tablero (0.8, 0.9, 1.0, 1.1, 1.2) */
}

.social-export-speed-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  font-family: var(--font-main, 'Montserrat', 'Poppins', Arial, sans-serif);
}

.social-export-speed-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.social-export-speed-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.18), transparent 32%),
    radial-gradient(circle at 70% 80%, rgba(255, 51, 51, 0.14), transparent 38%),
    rgba(2, 5, 8, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
}

.social-export-speed-dialog {
  position: relative;
  width: min(520px, 100%);
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 16px;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(11, 16, 22, 0.97), rgba(5, 8, 12, 0.98)),
    linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(255, 51, 51, 0.08));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 44px rgba(212, 175, 55, 0.06),
    0 0 28px rgba(212, 175, 55, 0.16);
  color: #f7f7f2;
}

.social-export-speed-kicker {
  margin-bottom: 10px;
  color: #f7d36a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.social-export-speed-dialog h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.08;
}

.social-export-speed-dialog p {
  margin: 0 0 22px;
  color: rgba(229, 233, 242, 0.82);
  font-size: 0.98rem;
  line-height: 1.55;
}

.social-export-speed-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.social-export-speed-option {
  position: relative;
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 247, 251, 0.88);
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.social-export-speed-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.social-export-speed-option:hover,
.social-export-speed-option:focus-within {
  border-color: rgba(247, 211, 106, 0.58);
  transform: translateY(-2px);
}

.social-export-speed-option.is-selected {
  border-color: rgba(247, 211, 106, 0.95);
  background: linear-gradient(135deg, rgba(247, 211, 106, 0.18), rgba(255, 51, 51, 0.08));
  box-shadow: 0 0 0 1px rgba(247, 211, 106, 0.16), 0 16px 36px rgba(0, 0, 0, 0.28);
}

.social-export-speed-value {
  display: block;
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.social-export-speed-note {
  display: block;
  color: rgba(229, 233, 242, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.social-export-speed-option.is-selected .social-export-speed-note {
  color: #f7d36a;
}

.social-export-speed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.social-export-speed-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.social-export-speed-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 247, 251, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.social-export-speed-confirm {
  background: linear-gradient(135deg, #f7d36a, #ff3358);
  color: #07090d;
  box-shadow: 0 12px 30px rgba(255, 51, 88, 0.28);
}

@media (max-width: 540px) {
  .social-export-speed-modal {
    padding: 14px;
  }

  .social-export-speed-dialog {
    padding: 22px;
  }

  .social-export-speed-options {
    grid-template-columns: 1fr;
  }

  .social-export-speed-option {
    min-height: 72px;
  }

  .social-export-speed-actions {
    flex-direction: column-reverse;
  }

  .social-export-speed-actions button {
    width: 100%;
  }
}

/* ===== LAYOUT PRINCIPAL ===== */
.chess-layout {
    display: grid !important;
    grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) var(--panel-w-desktop);
    gap: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh; /* dvh evita recortes por barras */
    min-height: 100vh; /* Fallback para navegadores que no soportan dvh */
    padding: 0;
    margin: 0;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
    transition: background var(--transition-theme);
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== CONTENEDOR DEL TABLERO ===== */
.chess-container {
    display: flex !important;
    justify-content: center !important; /* Centrar el tablero horizontalmente */
    align-items: center !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    overflow: visible;
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== TABLERO CHESSGROUND ===== */
.board {
    /* el tablero SIEMPRE cuadrado y centrado */
    aspect-ratio: 1/1 !important;
    width: calc(900px * var(--board-zoom-factor)) !important;
    height: calc(900px * var(--board-zoom-factor)) !important;
    max-width: calc(900px * var(--board-zoom-factor)) !important;
    max-height: calc(900px * var(--board-zoom-factor)) !important;
    min-width: calc(320px * var(--board-zoom-factor)) !important;
    min-height: calc(320px * var(--board-zoom-factor)) !important;
    margin: 0 auto;
    display: block !important;
    position: relative;
    contain: layout style;  /* Optimización de rendering (removido 'size' para permitir zoom) */
    border-radius: var(--border-radius-lg);
    box-shadow: 
        0 20px 60px var(--theme-shadow),
        0 0 0 1px var(--theme-border),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    background: transparent;
    visibility: visible !important;
    opacity: 1 !important;
    /* Forzar que siempre sea cuadrado perfecto */
    box-sizing: border-box !important;
}

/* Personalización de Chessground */
.board cg-board {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: var(--border-radius-lg);
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
}

.board .cg-wrap {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Desactivar selección/callout táctil en el tablero para iOS */
.chess-container,
.chess-container * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* En tablets, bloquear scroll dentro del tablero pero permitirlo fuera */
@media (min-width: 769px) and (max-width: 1400px) {
    .chess-container,
    .board,
    #board {
        overscroll-behavior: contain !important; /* Evita que el scroll se propague desde el tablero */
    }
}

/* Casillas del tablero */
.board cg-board square.move-dest {
    background: radial-gradient(circle, var(--theme-shadow-glow) 25%, transparent 25%);
}

.board cg-board square.selected {
    background-color: var(--theme-shadow-glow) !important;
    opacity: 0.4;
}

.board cg-board square.last-move {
    background-color: var(--theme-shadow-glow) !important;
    opacity: 0.2;
}

/* ===== MODAL DE PROMOCIÓN ===== */
.promotion-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: var(--theme-modal-bg);
    border: 2px solid var(--theme-accent-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    min-width: 300px;
    box-shadow: 
        0 8px 32px var(--theme-shadow),
        0 0 60px var(--theme-shadow-glow);
    transition: all var(--transition-theme);
    animation: fadeInUp var(--transition-normal);
}

.promotion-content h3 {
    color: var(--theme-accent-primary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-size: 18px;
    font-weight: 600;
    transition: color var(--transition-theme);
}

.promotion-pieces {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.promotion-piece {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    background: var(--theme-input-bg);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.promotion-piece:hover {
    background: var(--theme-input-bg);
    border-color: var(--theme-accent-primary);
    transform: scale(1.1);
}

/* ===== OVERLAY ===== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    backdrop-filter: blur(4px);
}

/* ===== PANEL DE CONTROLES ===== */
.controls-container {
    display: grid;
    /* 5 filas: buttons, nav, stockfish, pgn, fen */
    grid-template-areas:
        "buttons"
        "nav"
        "sf"
        "pgn"
        "fen";
    grid-template-rows: auto auto auto 1fr auto;
    gap: 8px;
    padding: 20px 12px 12px 12px;
    background: var(--color-bg-medium);
    border-left: 1px solid rgba(212, 175, 55, 0.1);
    height: 100vh;
    overflow: visible;
    box-sizing: border-box;
}

/* Coloca cada hijo explícitamente en su área */
.pgn-buttons { grid-area: buttons; }
.navigation-section { grid-area: nav; }
#stockfish-panel { grid-area: sf; }
.pgn-section { grid-area: pgn; }
.fen-section { grid-area: fen; }

/* ===== BOTONES PRINCIPALES ===== */
.pgn-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.pgn-buttons .mobile-pgn-action {
    display: none !important;
}

.button {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-main);
}

@media (max-width: 768px), (max-height: 520px) and (orientation: landscape) {
    html body .chess-layout .controls-container .pgn-buttons .mobile-pgn-action,
    body .chess-layout .controls-container .pgn-buttons .mobile-pgn-action,
    .chess-layout .controls-container .pgn-buttons .mobile-pgn-action,
    .controls-container .pgn-buttons .mobile-pgn-action,
    .pgn-buttons .mobile-pgn-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #copyPgnMobileButton {
        order: 6 !important;
    }

    #pastePgnMobileButton {
        order: 4 !important;
    }

    #downloadPgnButton {
        order: 5 !important;
    }

    #borrarMarcas {
        order: 7 !important;
    }

    #editPositionBtn {
        order: 8 !important;
    }
}

.button:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.button:active {
    transform: translateY(0);
}

.button.button--danger {
    background: linear-gradient(145deg, #c50039 0%, #8b0028 100%) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 20px rgba(197, 0, 57, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.35);
}

.button.button--danger:hover {
    background: linear-gradient(145deg, #d40f45 0%, #9d0931 100%) !important;
    border-color: rgba(255, 208, 139, 0.8) !important;
    box-shadow:
        0 12px 26px rgba(197, 0, 57, 0.55),
        0 0 0 1px rgba(255, 208, 139, 0.6);
}

/* ===== SECCIÓN DE NAVEGACIÓN ===== */
.navigation-section {
    margin: var(--spacing-md) 0;
}

.navigation-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.nav-button {
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-sm);
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.nav-button:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.2);
}

.nav-icon {
    font-size: 18px;
    line-height: 1;
}

.nav-text {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SECCIÓN PGN ===== */
.pgn-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;        /* CRÍTICO: rompe herencia de minHeight que estrangula el 1fr */
    overflow: auto;       /* scroll interno si hace falta */
}

#pgn-viewer {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--theme-button-bg);
    color: var(--theme-text-secondary);
    padding: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    box-shadow: 
        inset 0 2px 8px var(--theme-shadow),
        0 4px 12px var(--theme-shadow);
    box-sizing: border-box;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent-primary) var(--theme-bg-primary);
    transition: all var(--transition-theme);
}

#pgn-viewer::-webkit-scrollbar {
    width: 8px;
}

#pgn-viewer::-webkit-scrollbar-track {
    background: var(--theme-bg-primary);
    border-radius: 10px;
    margin: 5px;
}

#pgn-viewer::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--theme-accent-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 10px;
    border: 2px solid var(--theme-bg-primary);
}

#pgn-viewer::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--theme-accent-primary) 100%);
    box-shadow: 0 0 8px var(--theme-shadow-glow);
}

/* ===== SECCIÓN FEN ===== */
.fen-section {
    width: 100%;
    position: relative; /* Para posicionar el overlay */
}

.fen-bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    box-shadow: 
        inset 0 2px 8px var(--theme-shadow),
        0 4px 12px var(--theme-shadow);
    box-sizing: border-box;
    transition: all var(--transition-theme);
}

.fen-label {
    color: var(--theme-accent-primary);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color var(--transition-theme);
}

.fen-input {
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--theme-text-secondary);
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
    transition: all var(--transition-normal);
    width: 100%;
}

.fen-input:focus {
    border-color: var(--theme-accent-primary);
    box-shadow: 0 0 0 2px var(--theme-shadow-glow);
    background: var(--theme-input-bg);
}

.fen-button {
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-accent-primary);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-width: 70px;
    justify-content: center;
}

.fen-button:hover:not(.disabled-by-other):not(:disabled) {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    color: var(--theme-button-text-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--theme-shadow);
}

/* Estado deshabilitado para botones FEN */
.fen-button.disabled-by-other,
.fen-button:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.2) !important;
}

.fen-button.disabled-by-other:hover,
.fen-button:disabled:hover {
    background: var(--theme-button-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-accent-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Estado deshabilitado para input FEN */
.fen-input.disabled-by-other,
.fen-input:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.2) !important;
}

.fen-button .fen-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-primary);
    transition: color var(--transition-theme);
}

/* Estilos para SVG personalizados en botones FEN */
.fen-button .fen-svg {
    width: 16px;
    height: 16px;
    display: block;
    transition: all var(--transition-theme);
    filter: drop-shadow(0 1px 2px var(--theme-shadow-glow));
}

/* Ajuste específico para Light Matrix: solo sombras negras, sin glow celeste */
[data-theme="light-matrix"] .fen-button .fen-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg {
    filter: drop-shadow(0 2px 4px var(--theme-shadow-glow));
    transform: scale(1.1);
}

/* Ajuste específico para Light Matrix: solo sombras negras en hover, sin glow celeste */
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transform: scale(1.1);
}

/* Ajuste específico para Light Matrix: ícono blanco en hover para mejor contraste */
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-icon {
    color: #ffffff !important;
}

[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg path,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg circle,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg rect,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg line,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg polygon,
[data-theme="light-matrix"] .fen-button:hover:not(.disabled-by-other):not(:disabled) .fen-svg g {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.fen-button:active:not(.disabled-by-other):not(:disabled) .fen-svg {
    transform: scale(0.95);
}

.fen-button .fen-text {
    font-size: 11px;
}



/* ===== RESPONSIVIDAD ===== */

/* Desktop ancho */
@media (min-width: 1025px) {
    .chess-layout {
        display: grid;
        grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) minmax(320px, var(--panel-w-desktop));
        gap: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .controls-container {
        overflow: visible; /* sin scroll lateral */
    }
    /* Botones de navegación: 6 columnas para incluir botón rotar */
    .navigation-buttons-redesigned {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 4px !important; /* Gap reducido para que quepan mejor */
    }
    
    .navigation-buttons-redesigned .nav-button {
        padding: 8px 4px !important; /* Padding reducido para que quepan 6 botones */
        font-size: 12px !important; /* Fuente ligeramente más pequeña */
    }
    /* tablero se limita por alto disponible o por ancho libre (restando panel+sidebar) */
    .board {
        /* preferimos el límite vertical del viewport */
        width: min(
            /* alto disponible menos paddings del panel */
            90vh,
            /* ancho disponible: viewport - panel - sidebar (sin gap porque grid tiene gap: 0) */
            calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
        );
    }

    @supports (height: 1svh) {
        .board {
            width: min(
                90svh,
                calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
            );
        }
    }
}

/* === TABLET LAYOUT (base) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .chess-layout {
        --tablet-sidebar-effective: var(--icons-sidebar-w);
        --tablet-panel-effective: var(--panel-w-tablet);
        display: grid !important;
        grid-template-columns: var(--tablet-sidebar-effective) minmax(0, 1fr) var(--tablet-panel-effective) !important;
        grid-template-rows: 1fr !important;
        column-gap: var(--panel-gap) !important;
        height: 100dvh !important;
        width: 100vw !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    .chess-layout > .icons-sidebar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    .chess-layout > .chess-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
        justify-self: center !important;
        align-self: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
    }

    .chess-layout > .controls-container {
        grid-column: 3 !important;
        grid-row: 1 !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        width: var(--tablet-panel-effective) !important;
        align-self: stretch !important;
    }

    .board {
        --available-width: calc(100vw - var(--tablet-sidebar-effective) - var(--tablet-panel-effective) - var(--panel-gap) - var(--coords-padding-inline));
        --available-height: calc(100dvh - var(--coords-padding-block) - var(--tablet-safe-block));
        --board-target: min(var(--available-width), var(--available-height));
        /* Aumentar tamaño del tablero: usar 82% de altura disponible en lugar de calcular */
        --board-size-base: clamp(320px, min(var(--available-width), 82dvh), 960px);
        --board-size: calc(var(--board-size-base) * var(--board-zoom-factor)) !important;

        width: var(--board-size) !important;
        height: var(--board-size) !important;
        max-width: var(--board-size) !important;
        max-height: var(--board-size) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        position: relative !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    @supports (height: 1svh) {
        .board {
            --available-height: calc(100svh - var(--coords-padding-block) - var(--tablet-safe-block));
            --board-target: min(var(--available-width), var(--available-height));
            /* Aumentar tamaño del tablero: usar 82% de altura disponible */
            --board-size-base: clamp(320px, min(var(--available-width), 82svh), 960px);
            --board-size: calc(var(--board-size-base) * var(--board-zoom-factor)) !important;
        }
    }
}

/* Móvil ≤768px (tu lógica previa, pero usando svh) */
@media (max-width: 768px) {
    /* Asegurar que body y html permitan scroll en móviles */
    html {
        overflow-y: auto !important;
        height: auto !important;
    }

    body {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
    }
    
    /* Asegurar que el botón flotante de ajustes sea visible en móviles pequeños */
    .context-menu-trigger-btn,
    #contextMenuTriggerBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        z-index: 30002 !important;
        pointer-events: auto !important;
    }

    /* Ocultar logo completamente en móviles */
    .logo-column {
        display: none !important;
    }
    
    .chess-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow-y: auto !important;
    }
    
    /* Tablero primero (order: 0) */
    .chess-container {
        order: 0 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 16px !important;   /* Espacio para coordenadas verticales (1-8) */
        padding-bottom: 20px !important; /* Espacio para coordenadas horizontales (a-h) - ajustado para igualar distancia visual */
        padding-right: 16px !important;  /* Padding simétrico para centrar el tablero */
        padding-top: 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;   /* Para posicionamiento absoluto de coordenadas */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;    /* Permitir que las coordenadas se vean fuera */
    }
    
    /* Controles después (order: 1) */
    .controls-container {
        order: 1 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        max-height: none !important;
    }
    
    .board {
        width: min(95vw, calc(100vh - 200px)) !important;
        height: auto !important; /* aspect-ratio mantiene el cuadrado */
        max-width: 100% !important;
    }
    
    /* Asegurar que en landscape se sobrescriba con los estilos específicos */
    @media (orientation: landscape) {
        /* Los estilos de landscape están más abajo con mayor especificidad */
    }

    @supports (height: 1svh) {
        .controls-container {
            max-height: none !important; /* Sin límite en móviles */
        }
        .board {
            width: min(95vw, calc(100svh - 200px)) !important;
        }
    }
    
    /* Asegurar que ChessGround respete dimensiones */
    .board cg-board {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Ocultar sidebar en móviles */
    .icons-sidebar {
        display: none !important;
    }
    
    /* Panel de controles sin altura fija */
    .controls-container {
        order: 1 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* Altura automática */
        min-height: auto !important; /* Sin mínimo */
        max-height: none !important; /* Sin máximo */
        overflow-y: visible !important; /* Sin scroll interno, todo fluye */
        border-left: none !important;
        border-top: 2px solid rgba(212, 175, 55, 0.2) !important;
        padding: 10px 8px !important; /* Padding reducido horizontalmente para más espacio */
        width: 100% !important;
    }
    
    /* Orden de elementos en móviles usando CSS Flexbox order */
    .pgn-buttons {
        order: 1 !important; /* Primero: botones principales */
        margin-bottom: 8px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    
    /* Barra de íconos móvil - orden 2 (después de botones principales) */
    .icon-buttons-mobile {
        order: 2 !important;
    }
    
    .pgn-buttons .button {
        grid-column: span 1 !important;
    }

    #resetButton { order: 1; }
    #editPositionBtn { order: 2; }
    #loadPgnButton { order: 3; }
    #downloadPgnButton { order: 4; }
    #toggleStockfishBtn { order: 5; }
    #borrarMarcas { order: 6; }
    #modoPintadoBtn { order: 7; }

    .pgn-buttons .button {
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .navigation-section {
        order: 3 !important; /* Tercero: navegación PGN (después de íconos) */
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Botones de navegación responsivos - optimizados para 6 botones en una fila */
    .navigation-buttons-redesigned {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* 6 columnas para incluir rotar */
        gap: 2px !important; /* Gap reducido para maximizar espacio */
        width: 100% !important;
        min-width: 0 !important;
    }

    .nav-button {
        padding: 7px 1px !important; /* Padding aún más reducido */
        font-size: 11px !important; /* Fuente más pequeña */
        min-width: 0 !important; /* Sin min-width que fuerce wrap */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-icon {
        font-size: 13px !important; /* Ícono más pequeño */
    }

    /* Ocultar textos en botones de navegación */
    .nav-text {
        display: none;
    }

    .fen-section {
        order: 4 !important; /* Cuarto: sección FEN (después de navegación) */
        margin-bottom: 12px !important;
        padding: 0 !important;
    }

    .fen-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .fen-label {
        font-size: 12px;
        min-width: auto;
    }

    .fen-input {
        flex: 1;
        min-width: 120px;
        padding: 8px;
        font-size: 11px;
    }

    .fen-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Ocultar texto de botones FEN en móviles muy pequeños */
    .fen-text {
        display: none;
    }

    .pgn-section {
        order: 5 !important; /* Quinto: zona PGN (al final) */
        max-height: 300px !important; /* Altura máxima para scroll interno */
        overflow-y: auto !important; /* Scroll interno solo en PGN */
        border: 1px solid var(--theme-border) !important;
        border-radius: 8px !important;
        padding: 8px !important;
        background: var(--theme-input-bg) !important;
    }

    /* Visor PGN con scroll */
    #pgn-viewer {
        max-height: 280px; /* Altura interna */
        overflow-y: auto;
        font-size: 13px;
        line-height: 1.6;
    }
    
    /* Ocultar toda la barra de herramientas PGN en móviles (vertical) */
    .pgn-toolbar {
        display: none !important;
    }
    
    /* Nota: Las coordenadas externas solo se aplican en landscape */
    /* Las reglas de coordenadas están en @media (min-width: 769px) para dispositivos mayores */
    /* y en @media (max-width: 768px) and (orientation: landscape) para móviles en landscape */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN WHITE */
    /* DOM: 8,7,6,5,4,3,2,1 → Visual: 1,2,3,4,5,6,7,8 */
    .board .cg-wrap coords.ranks coord:nth-child(1),
    .cg-wrap coords.ranks coord:nth-child(1),
    .board cg-wrap coords.ranks coord:nth-child(1),
    cg-wrap coords.ranks coord:nth-child(1) { order: 8; } /* 8 → posición 8 */
    
    .board .cg-wrap coords.ranks coord:nth-child(2),
    .cg-wrap coords.ranks coord:nth-child(2),
    .board cg-wrap coords.ranks coord:nth-child(2),
    cg-wrap coords.ranks coord:nth-child(2) { order: 7; } /* 7 → posición 7 */
    
    .board .cg-wrap coords.ranks coord:nth-child(3),
    .cg-wrap coords.ranks coord:nth-child(3),
    .board cg-wrap coords.ranks coord:nth-child(3),
    cg-wrap coords.ranks coord:nth-child(3) { order: 6; } /* 6 → posición 6 */
    
    .board .cg-wrap coords.ranks coord:nth-child(4),
    .cg-wrap coords.ranks coord:nth-child(4),
    .board cg-wrap coords.ranks coord:nth-child(4),
    cg-wrap coords.ranks coord:nth-child(4) { order: 5; } /* 5 → posición 5 */
    
    .board .cg-wrap coords.ranks coord:nth-child(5),
    .cg-wrap coords.ranks coord:nth-child(5),
    .board cg-wrap coords.ranks coord:nth-child(5),
    cg-wrap coords.ranks coord:nth-child(5) { order: 4; } /* 4 → posición 4 */
    
    .board .cg-wrap coords.ranks coord:nth-child(6),
    .cg-wrap coords.ranks coord:nth-child(6),
    .board cg-wrap coords.ranks coord:nth-child(6),
    cg-wrap coords.ranks coord:nth-child(6) { order: 3; } /* 3 → posición 3 */
    
    .board .cg-wrap coords.ranks coord:nth-child(7),
    .cg-wrap coords.ranks coord:nth-child(7),
    .board cg-wrap coords.ranks coord:nth-child(7),
    cg-wrap coords.ranks coord:nth-child(7) { order: 2; } /* 2 → posición 2 */
    
    .board .cg-wrap coords.ranks coord:nth-child(8),
    .cg-wrap coords.ranks coord:nth-child(8),
    .board cg-wrap coords.ranks coord:nth-child(8),
    cg-wrap coords.ranks coord:nth-child(8) { order: 1; } /* 1 → posición 1 */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS FILES - ORIENTACIÓN BLACK */
    /* DOM: a,b,c,d,e,f,g,h → Visual: h,g,f,e,d,c,b,a */
    .board .cg-wrap coords.files.black coord:nth-child(1),
    .cg-wrap coords.files.black coord:nth-child(1),
    .board cg-wrap coords.files.black coord:nth-child(1),
    cg-wrap coords.files.black coord:nth-child(1) { order: 8; } /* a → posición 8 (derecha) */
    
    .board .cg-wrap coords.files.black coord:nth-child(2),
    .cg-wrap coords.files.black coord:nth-child(2),
    .board cg-wrap coords.files.black coord:nth-child(2),
    cg-wrap coords.files.black coord:nth-child(2) { order: 7; } /* b → posición 7 */
    
    .board .cg-wrap coords.files.black coord:nth-child(3),
    .cg-wrap coords.files.black coord:nth-child(3),
    .board cg-wrap coords.files.black coord:nth-child(3),
    cg-wrap coords.files.black coord:nth-child(3) { order: 6; } /* c → posición 6 */
    
    .board .cg-wrap coords.files.black coord:nth-child(4),
    .cg-wrap coords.files.black coord:nth-child(4),
    .board cg-wrap coords.files.black coord:nth-child(4),
    cg-wrap coords.files.black coord:nth-child(4) { order: 5; } /* d → posición 5 */
    
    .board .cg-wrap coords.files.black coord:nth-child(5),
    .cg-wrap coords.files.black coord:nth-child(5),
    .board cg-wrap coords.files.black coord:nth-child(5),
    cg-wrap coords.files.black coord:nth-child(5) { order: 4; } /* e → posición 4 */
    
    .board .cg-wrap coords.files.black coord:nth-child(6),
    .cg-wrap coords.files.black coord:nth-child(6),
    .board cg-wrap coords.files.black coord:nth-child(6),
    cg-wrap coords.files.black coord:nth-child(6) { order: 3; } /* f → posición 3 */
    
    .board .cg-wrap coords.files.black coord:nth-child(7),
    .cg-wrap coords.files.black coord:nth-child(7),
    .board cg-wrap coords.files.black coord:nth-child(7),
    cg-wrap coords.files.black coord:nth-child(7) { order: 2; } /* g → posición 2 */
    
    .board .cg-wrap coords.files.black coord:nth-child(8),
    .cg-wrap coords.files.black coord:nth-child(8),
    .board cg-wrap coords.files.black coord:nth-child(8),
    cg-wrap coords.files.black coord:nth-child(8) { order: 1; } /* h → posición 1 (izquierda) */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN BLACK */
    /* DOM: 8,7,6,5,4,3,2,1 → Visual: 8,7,6,5,4,3,2,1 (orden natural para perspectiva negra) */
    .board .cg-wrap coords.ranks.black coord:nth-child(1),
    .cg-wrap coords.ranks.black coord:nth-child(1),
    .board cg-wrap coords.ranks.black coord:nth-child(1),
    cg-wrap coords.ranks.black coord:nth-child(1) { order: 1; } /* 8 → posición 1 (arriba) */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(2),
    .cg-wrap coords.ranks.black coord:nth-child(2),
    .board cg-wrap coords.ranks.black coord:nth-child(2),
    cg-wrap coords.ranks.black coord:nth-child(2) { order: 2; } /* 7 → posición 2 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(3),
    .cg-wrap coords.ranks.black coord:nth-child(3),
    .board cg-wrap coords.ranks.black coord:nth-child(3),
    cg-wrap coords.ranks.black coord:nth-child(3) { order: 3; } /* 6 → posición 3 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(4),
    .cg-wrap coords.ranks.black coord:nth-child(4),
    .board cg-wrap coords.ranks.black coord:nth-child(4),
    cg-wrap coords.ranks.black coord:nth-child(4) { order: 4; } /* 5 → posición 4 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(5),
    .cg-wrap coords.ranks.black coord:nth-child(5),
    .board cg-wrap coords.ranks.black coord:nth-child(5),
    cg-wrap coords.ranks.black coord:nth-child(5) { order: 5; } /* 4 → posición 5 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(6),
    .cg-wrap coords.ranks.black coord:nth-child(6),
    .board cg-wrap coords.ranks.black coord:nth-child(6),
    cg-wrap coords.ranks.black coord:nth-child(6) { order: 6; } /* 3 → posición 6 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(7),
    .cg-wrap coords.ranks.black coord:nth-child(7),
    .board cg-wrap coords.ranks.black coord:nth-child(7),
    cg-wrap coords.ranks.black coord:nth-child(7) { order: 7; } /* 2 → posición 7 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(8),
    .cg-wrap coords.ranks.black coord:nth-child(8),
    .board cg-wrap coords.ranks.black coord:nth-child(8),
    cg-wrap coords.ranks.black coord:nth-child(8) { order: 8; } /* 1 → posición 8 (abajo) */

    /* Scroll suave para mejor UX */
    html {
        scroll-behavior: smooth;
    }
}

/* Baja altura */
@media (max-height: 600px) {
    .board {
        width: min(calc(100vh - 64px), calc(100vw - 320px));
    }

    @supports (height: 1svh) {
        .board {
            width: min(calc(100svh - 64px), calc(100vw - 320px));
        }
    }
}

/* ===== COLORES PERSONALIZADOS DEL TABLERO ===== */
/* Colores idénticos a ajedrezdesilicio.html */
/* Usar el mismo enfoque que chessboard.js: sobrescribir el SVG con nuestros colores */
.board cg-board {
    background-color: #EEE4D1 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><g id="a"><g id="b"><g id="c"><g id="d"><rect width="1" height="1" id="e" fill="%23EEE4D1"/><use x="1" y="1" href="%23e"/><rect y="1" width="1" height="1" id="f" fill="%231a8e78"/><use x="1" y="-1" href="%23f"/></g><use x="2" href="%23d"/></g><use x="4" href="%23c"/></g><use y="2" href="%23b"/></g><use y="4" href="%23a"/></svg>') !important;
}

/* ===== COORDENADAS EXTERNAS - TODAS LAS PANTALLAS ===== */
/* Coordenadas posicionadas fuera del tablero para evitar desbordes */
/* Aplicado a TODOS los tamaños de pantalla, igual que en pantallas grandes */

/* CONTENEDOR: Padding para coordenadas externas y sin bordes/fondos visibles */
.chess-container {
    position: relative !important;   /* Para posicionamiento absoluto de coordenadas */
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* COORDENADAS EXTERNAS: Posicionamiento absoluto fuera del tablero */
/* Offset ajustado para que las letras tengan la misma distancia que los números */
.board .cg-wrap coords.files,
.cg-wrap coords.files,
.board cg-wrap coords.files,
cg-wrap coords.files {
    position: absolute !important;
    bottom: -20px !important;        /* Ajustado para igualar distancia visual de los números */
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important;
}

.board .cg-wrap coords.ranks,
.cg-wrap coords.ranks,
.board cg-wrap coords.ranks,
cg-wrap coords.ranks {
    position: absolute !important;
    left: -16px !important;          /* Acercado: a la izquierda del tablero */
    top: 0 !important;
    bottom: 0 !important;
    width: 16px !important;
    display: grid !important;
    grid-template-rows: repeat(8, 1fr) !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important;
}

/* Asegurar que .cg-wrap tenga position relative para coordenadas absolutas */
.board .cg-wrap,
.cg-wrap {
    position: relative !important;
}

/* Asegurar que el tablero permita que las coordenadas se vean fuera */
.board {
    overflow: visible !important;
}

/* Asegurar que los elementos coord individuales no tengan transforms que interfieran */
.board .cg-wrap coords.files coord,
.board .cg-wrap coords.ranks coord,
.cg-wrap coords.files coord,
.cg-wrap coords.ranks coord {
    transform: none !important;
    position: static !important;
}

/* COORDENADAS INDIVIDUALES: Estilo con colores del tema (aplicado globalmente) */
.board .cg-wrap coords coord,
.cg-wrap coords coord,
.board cg-wrap coords coord,
cg-wrap coords coord {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--theme-coords-color) !important;
    background: none !important;      /* Sin fondo */
    border-radius: 0 !important;      /* Sin bordes redondeados */
    padding: 0 !important;            /* Sin padding */
    min-width: auto !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: none !important;
    text-shadow: var(--theme-coords-text-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transition: color var(--transition-theme);
}

/* ===== COORDENADAS EXTERNAS - ESTILOS Y ORDENAMIENTO VISUAL (≥769px) ===== */
/* Estilos de coordenadas y ordenamiento visual para pantallas ≥769px */

@media (min-width: 769px) {
    /* Nota: Los estilos de coordenadas están aplicados globalmente arriba */
    /* Solo ajustes específicos para este breakpoint si son necesarios */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN WHITE */
    /* DOM: 8,7,6,5,4,3,2,1 → Visual: 1,2,3,4,5,6,7,8 */
    .board .cg-wrap coords.ranks coord:nth-child(1),
    .cg-wrap coords.ranks coord:nth-child(1),
    .board cg-wrap coords.ranks coord:nth-child(1),
    cg-wrap coords.ranks coord:nth-child(1) { order: 8; } /* 8 → posición 8 */
    
    .board .cg-wrap coords.ranks coord:nth-child(2),
    .cg-wrap coords.ranks coord:nth-child(2),
    .board cg-wrap coords.ranks coord:nth-child(2),
    cg-wrap coords.ranks coord:nth-child(2) { order: 7; } /* 7 → posición 7 */
    
    .board .cg-wrap coords.ranks coord:nth-child(3),
    .cg-wrap coords.ranks coord:nth-child(3),
    .board cg-wrap coords.ranks coord:nth-child(3),
    cg-wrap coords.ranks coord:nth-child(3) { order: 6; } /* 6 → posición 6 */
    
    .board .cg-wrap coords.ranks coord:nth-child(4),
    .cg-wrap coords.ranks coord:nth-child(4),
    .board cg-wrap coords.ranks coord:nth-child(4),
    cg-wrap coords.ranks coord:nth-child(4) { order: 5; } /* 5 → posición 5 */
    
    .board .cg-wrap coords.ranks coord:nth-child(5),
    .cg-wrap coords.ranks coord:nth-child(5),
    .board cg-wrap coords.ranks coord:nth-child(5),
    cg-wrap coords.ranks coord:nth-child(5) { order: 4; } /* 4 → posición 4 */
    
    .board .cg-wrap coords.ranks coord:nth-child(6),
    .cg-wrap coords.ranks coord:nth-child(6),
    .board cg-wrap coords.ranks coord:nth-child(6),
    cg-wrap coords.ranks coord:nth-child(6) { order: 3; } /* 3 → posición 3 */
    
    .board .cg-wrap coords.ranks coord:nth-child(7),
    .cg-wrap coords.ranks coord:nth-child(7),
    .board cg-wrap coords.ranks coord:nth-child(7),
    cg-wrap coords.ranks coord:nth-child(7) { order: 2; } /* 2 → posición 2 */
    
    .board .cg-wrap coords.ranks coord:nth-child(8),
    .cg-wrap coords.ranks coord:nth-child(8),
    .board cg-wrap coords.ranks coord:nth-child(8),
    cg-wrap coords.ranks coord:nth-child(8) { order: 1; } /* 1 → posición 1 */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS FILES - ORIENTACIÓN BLACK */
    /* DOM: a,b,c,d,e,f,g,h → Visual: h,g,f,e,d,c,b,a */
    .board .cg-wrap coords.files.black coord:nth-child(1),
    .cg-wrap coords.files.black coord:nth-child(1),
    .board cg-wrap coords.files.black coord:nth-child(1),
    cg-wrap coords.files.black coord:nth-child(1) { order: 8; } /* a → posición 8 (derecha) */
    
    .board .cg-wrap coords.files.black coord:nth-child(2),
    .cg-wrap coords.files.black coord:nth-child(2),
    .board cg-wrap coords.files.black coord:nth-child(2),
    cg-wrap coords.files.black coord:nth-child(2) { order: 7; } /* b → posición 7 */
    
    .board .cg-wrap coords.files.black coord:nth-child(3),
    .cg-wrap coords.files.black coord:nth-child(3),
    .board cg-wrap coords.files.black coord:nth-child(3),
    cg-wrap coords.files.black coord:nth-child(3) { order: 6; } /* c → posición 6 */
    
    .board .cg-wrap coords.files.black coord:nth-child(4),
    .cg-wrap coords.files.black coord:nth-child(4),
    .board cg-wrap coords.files.black coord:nth-child(4),
    cg-wrap coords.files.black coord:nth-child(4) { order: 5; } /* d → posición 5 */
    
    .board .cg-wrap coords.files.black coord:nth-child(5),
    .cg-wrap coords.files.black coord:nth-child(5),
    .board cg-wrap coords.files.black coord:nth-child(5),
    cg-wrap coords.files.black coord:nth-child(5) { order: 4; } /* e → posición 4 */
    
    .board .cg-wrap coords.files.black coord:nth-child(6),
    .cg-wrap coords.files.black coord:nth-child(6),
    .board cg-wrap coords.files.black coord:nth-child(6),
    cg-wrap coords.files.black coord:nth-child(6) { order: 3; } /* f → posición 3 */
    
    .board .cg-wrap coords.files.black coord:nth-child(7),
    .cg-wrap coords.files.black coord:nth-child(7),
    .board cg-wrap coords.files.black coord:nth-child(7),
    cg-wrap coords.files.black coord:nth-child(7) { order: 2; } /* g → posición 2 */
    
    .board .cg-wrap coords.files.black coord:nth-child(8),
    .cg-wrap coords.files.black coord:nth-child(8),
    .board cg-wrap coords.files.black coord:nth-child(8),
    cg-wrap coords.files.black coord:nth-child(8) { order: 1; } /* h → posición 1 (izquierda) */

    /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN BLACK */
    /* DOM: 8,7,6,5,4,3,2,1 → Visual: 8,7,6,5,4,3,2,1 (orden natural para perspectiva negra) */
    .board .cg-wrap coords.ranks.black coord:nth-child(1),
    .cg-wrap coords.ranks.black coord:nth-child(1),
    .board cg-wrap coords.ranks.black coord:nth-child(1),
    cg-wrap coords.ranks.black coord:nth-child(1) { order: 1; } /* 8 → posición 1 (arriba) */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(2),
    .cg-wrap coords.ranks.black coord:nth-child(2),
    .board cg-wrap coords.ranks.black coord:nth-child(2),
    cg-wrap coords.ranks.black coord:nth-child(2) { order: 2; } /* 7 → posición 2 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(3),
    .cg-wrap coords.ranks.black coord:nth-child(3),
    .board cg-wrap coords.ranks.black coord:nth-child(3),
    cg-wrap coords.ranks.black coord:nth-child(3) { order: 3; } /* 6 → posición 3 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(4),
    .cg-wrap coords.ranks.black coord:nth-child(4),
    .board cg-wrap coords.ranks.black coord:nth-child(4),
    cg-wrap coords.ranks.black coord:nth-child(4) { order: 4; } /* 5 → posición 4 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(5),
    .cg-wrap coords.ranks.black coord:nth-child(5),
    .board cg-wrap coords.ranks.black coord:nth-child(5),
    cg-wrap coords.ranks.black coord:nth-child(5) { order: 5; } /* 4 → posición 5 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(6),
    .cg-wrap coords.ranks.black coord:nth-child(6),
    .board cg-wrap coords.ranks.black coord:nth-child(6),
    cg-wrap coords.ranks.black coord:nth-child(6) { order: 6; } /* 3 → posición 6 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(7),
    .cg-wrap coords.ranks.black coord:nth-child(7),
    .board cg-wrap coords.ranks.black coord:nth-child(7),
    cg-wrap coords.ranks.black coord:nth-child(7) { order: 7; } /* 2 → posición 7 */
    
    .board .cg-wrap coords.ranks.black coord:nth-child(8),
    .cg-wrap coords.ranks.black coord:nth-child(8),
    .board cg-wrap coords.ranks.black coord:nth-child(8),
    cg-wrap coords.ranks.black coord:nth-child(8) { order: 8; } /* 1 → posición 8 (abajo) */

    /* El host del tablero no debe recortar las coords */
    .board,
    #board,
    cg-board {
        overflow: visible !important;
    }
}

/* ===== LAYOUT ESTABLE PARA DRAWING SYSTEM ===== */
#board {
    position: relative;
    width: 100%;
    max-width: 820px;
    aspect-ratio: 1 / 1; /* Cuadrado fiable */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#board > cg-board {
    position: absolute;
    inset: 0;
    width: 100%;
    background: transparent !important;
    height: 100%;
}

#board > svg.drawing-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    /* CRÍTICO: No usar width/height 100% porque pueden ser diferentes al cg-board
       Las dimensiones se establecen explícitamente en JavaScript (syncSvgDimensions) */
    pointer-events: none;
    z-index: 100 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    overflow: visible !important;
}

/* Pantallas muy grandes */
@media (min-width: 1920px) {
    .board {
        max-width: 1000px;
    }
}

/* ===== MÓVILES EN ORIENTACIÓN HORIZONTAL - Layout similar a 32:9 ===== */
/* EXCLUIR móviles pequeños horizontales (<=900px) que tienen su propia regla en editor.css */
/* CRÍTICO: Esta regla NO debe aplicarse a móviles pequeños (<=900px) */
@media (max-width: 768px) and (orientation: landscape) and (min-width: 901px) {
    /* Layout principal: grid de 3 columnas (Tablero | Controles | PGN) */
    /* Usar dvh si está disponible, luego svh, luego vh como fallback */
    .chess-layout {
        display: grid !important;
        grid-template-columns: auto clamp(240px, 32vw, 300px) clamp(200px, 28vw, 280px) !important; /* Panel de controles más ancho */
        grid-template-rows: 1fr !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important; /* Ocultar overflow del layout, pero permitir botón flotante */
        flex-direction: unset !important; /* Anular flex-direction de móviles verticales */
        box-sizing: border-box !important;
        padding-top: 0 !important; /* Sin padding superior para maximizar espacio */
        position: relative !important;
        gap: 4px !important; /* Reducir gap para acercar al tablero */
        padding: 0 4px !important;
    }

    /* Preferir dvh si está disponible */
    @supports (height: 1dvh) {
        .chess-layout {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    /* Fallback para navegadores sin soporte svh */
    @supports not (height: 1svh) {
        .chess-layout {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Tablero: ocupar columna 1, ajustar tamaño */
    .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: unset !important; /* Anular order de móviles verticales */
        width: 100% !important;
        height: 100% !important;
        padding-left: 16px !important;   /* Espacio para coordenadas verticales (1-8) */
        padding-bottom: 20px !important; /* Espacio para coordenadas horizontales (a-h) - ajustado para igualar distancia visual */
        padding-right: 16px !important;  /* Padding simétrico para centrar el tablero */
        padding-top: 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;   /* Para posicionamiento absoluto de coordenadas */
        max-height: 100svh !important;
        flex: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Centrar el tablero en su contenedor */
        overflow: visible !important;    /* Permitir que las coordenadas se vean fuera */
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    @supports (height: 1dvh) {
        .chess-container {
            max-height: 100dvh !important;
        }
    }

    @supports not (height: 1svh) {
        .chess-container {
            max-height: 100vh !important;
        }
    }
    
    /* Tablero con máxima especificidad para sobrescribir otros estilos */
    body .chess-layout .chess-container .board,
    html body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    .chess-container .board,
    #board.board,
    .board {
        /* Calcular tamaño considerando la barra superior del navegador móvil */
        /* Usar svh que excluye las barras del navegador + margen de seguridad superior muy generoso */
        /* Margen superior de 100px para asegurar que la barra de URL no tape las piezas negras */
        /* Usar el menor valor entre altura disponible y ancho disponible */
        /* Asegurar un tamaño mínimo de 250px para que el tablero sea visible */
        /* Considerar 3 columnas: tablero + controles + PGN */
        width: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
        height: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
        max-width: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
        max-height: max(250px, min(calc(100svh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !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;
    }

    /* Fallback para navegadores sin soporte svh - usar vh con margen muy grande */
    @supports not (height: 1svh) {
        body .chess-layout .chess-container .board,
        html body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        .chess-container .board,
        #board.board,
        .board {
            /* Con vh, necesitamos un margen muy grande porque incluye las barras del navegador */
            /* Considerar 3 columnas: tablero + controles + PGN */
            width: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            height: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            max-width: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            max-height: max(250px, min(calc(100vh - 140px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            min-width: 250px !important;
            min-height: 250px !important;
        }
    }

    /* Usar dvh (dynamic viewport height) si está disponible - mejor para móviles */
    @supports (height: 1dvh) {
        body .chess-layout .chess-container .board,
        html body .chess-layout .chess-container .board,
        .chess-layout .chess-container .board,
        .chess-container .board,
        #board.board,
        .board {
            /* dvh se ajusta dinámicamente cuando aparecen/desaparecen las barras del navegador */
            /* Considerar 3 columnas: tablero + controles + PGN */
            width: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            height: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            max-width: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            max-height: max(250px, min(calc(100dvh - 100px), calc(100vw - clamp(240px, 32vw, 300px) - clamp(200px, 28vw, 280px) - 16px))) !important;
            min-width: 250px !important;
            min-height: 250px !important;
        }
    }
    
    /* Asegurar que el tablero de Chessground sea visible */
    .board cg-board,
    .board .cg-wrap {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 250px !important;
        min-height: 250px !important;
    }
    
    /* Panel: columna 2, scroll vertical (sin PGN) */
    .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: unset !important; /* Anular order de móviles verticales */
        width: 100% !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        flex: unset !important;
        border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-right: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-top: none !important;
        box-sizing: border-box !important;
    }
    
    /* PGN: columna 3, posicionado de forma fija desde el viewport */
    /* Ocultar el PGN dentro del flujo normal de controls-container */
    .controls-container .pgn-section {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: clamp(180px, 25vw, 240px) !important;
        max-width: clamp(180px, 25vw, 240px) !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10 !important;
        background: var(--theme-bg-primary) !important;
        border-left: 2px solid var(--theme-border) !important;
        margin: 0 !important;
    }
    
    /* Mover la sección FEN desde controls-container al panel PGN (debajo del visor PGN) */
    .controls-container .fen-section {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        width: clamp(180px, 25vw, 240px) !important;
        max-width: clamp(180px, 25vw, 240px) !important;
        z-index: 11 !important;
        background: var(--theme-bg-primary) !important;
        border-left: 2px solid var(--theme-border) !important;
        border-top: 1px solid var(--theme-border) !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Ajustar el panel PGN para dejar espacio para la FEN en la parte inferior */
    .controls-container .pgn-section {
        padding-bottom: 60px !important; /* Espacio para la sección FEN */
    }
    
    @supports (height: 1dvh) {
        .controls-container .pgn-section {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
    
    @supports not (height: 1svh) {
        .controls-container .pgn-section {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Asegurar que el PGN tenga estilos compactos */
    .controls-container .pgn-section .pgn-metadata-compact {
        font-size: 11px !important;
        padding: 6px !important;
        margin-bottom: 6px !important;
    }
    
    .controls-container .pgn-section #pgn-viewer {
        font-size: 11px !important;
        line-height: 1.4 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    
    .controls-container .pgn-section .pgn-toolbar {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important;
        padding: 4px !important;
        margin-top: 6px !important;
    }
    
    .controls-container .pgn-section .pgn-toolbar-btn {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }
    
    .controls-container .pgn-section .pgn-toolbar-label {
        font-size: 9px !important;
    }
    
    /* Estilos para la sección FEN dentro del panel PGN */
    .controls-container .fen-section .fen-bar {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 !important;
    }
    
    .controls-container .fen-section .fen-label {
        font-size: 10px !important;
        min-width: auto !important;
    }
    
    .controls-container .fen-section .fen-input {
        font-size: 9px !important;
        padding: 4px 6px !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    
    .controls-container .fen-section .fen-button {
        padding: 4px 8px !important;
        font-size: 9px !important;
        flex: 1 1 auto !important;
    }
    
    @supports (height: 1dvh) {
        .controls-container {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    @supports not (height: 1svh) {
        .controls-container {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Invertir orden: primero navegación PGN, luego botones */
    .navigation-section {
        order: 1 !important; /* Primero: navegación PGN */
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
    
    .navigation-buttons-redesigned {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* 6 columnas para incluir rotar */
        gap: 2px !important; /* Gap reducido */
    }
    
    .nav-button {
        padding: 7px 1px !important; /* Padding reducido */
        font-size: 11px !important; /* Fuente más pequeña */
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-icon {
        font-size: 13px !important; /* Ícono más pequeño */
    }
    
    .nav-icon {
        font-size: 14px !important;
    }
    
    /* Botones después de la navegación */
    .pgn-buttons {
        order: 2 !important; /* Segundo: botones principales */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
        margin-top: 0 !important;
    }
    
    .pgn-buttons .button {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }
    
    .pgn-toolbar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        padding: 4px !important;
    }
    
    .pgn-toolbar-btn {
        padding: 6px 3px !important;
        font-size: 10px !important;
    }
    
    .pgn-toolbar-icon {
        font-size: 12px !important;
    }
    
    .pgn-toolbar-label {
        font-size: 9px !important;
    }
    
    /* Ocultar toda la barra de herramientas PGN en móviles horizontales */
    .controls-container .pgn-section .pgn-toolbar,
    .pgn-toolbar {
        display: none !important;
    }
    
    /* Secciones más compactas */
    .navigation-section {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .fen-section {
        margin-bottom: 8px !important;
        padding: 0 !important;
    }
    
    #pgn-viewer {
        max-height: 200px !important;
        font-size: 12px !important;
    }
    
    /* Ocultar sidebar en móviles horizontales también */
    .icons-sidebar {
        display: none !important;
    }
    
    .logo-column {
        display: none !important;
    }
    
    /* Asegurar que el botón flotante de ajustes sea visible en móviles landscape */
    html body .context-menu-trigger-btn,
    body .context-menu-trigger-btn,
    .context-menu-trigger-btn,
    html body #contextMenuTriggerBtn,
    body #contextMenuTriggerBtn,
    #contextMenuTriggerBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 30002 !important;
        pointer-events: auto !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* ===== PANTALLAS PEQUEÑAS EN LANDSCAPE (altura ≤900px, ancho ≥769px) ===== */
/* Se aplica a pantallas anchas pero bajas como iPhone 12/13/14 (1792x828) y similares */
/* MÁXIMA ESPECIFICIDAD para asegurar que se aplique */
/* NOTA: min-width: 769px evita solapamiento con móviles pequeños (≤768px) */
@media (max-height: 900px) and (min-width: 769px) and (orientation: landscape) {
    /* Asegurar que html y body no limiten el ancho */
    html,
    body {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Ocultar sidebar de iconos en este breakpoint para no robar espacio */
    html body .icons-sidebar,
    body .icons-sidebar,
    .icons-sidebar {
        display: none !important;
    }

    /* FORZAR posición fixed con máxima especificidad */
    html body .chess-layout,
    body .chess-layout,
    .chess-layout {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;

        display: grid !important;
        grid-template-columns: auto clamp(250px, 35vw, 320px) clamp(150px, 22vw, 200px) !important;
        grid-template-rows: 1fr !important;

        margin: 0 !important;
        padding: 0 4px !important;
        gap: 4px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 0 !important;
        
        /* Anular cualquier transform o translate que pueda estar aplicado */
        transform: none !important;
        translate: none !important;
    }

    /* Máxima especificidad para chess-container */
    html body .chess-layout .chess-container,
    body .chess-layout .chess-container,
    .chess-layout .chess-container,
    .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding-left: 16px !important;   /* Espacio para coordenadas verticales (1-8) */
        padding-bottom: 20px !important; /* Espacio para coordenadas horizontales (a-h) - ajustado para igualar distancia visual */
        padding-right: 16px !important;  /* Padding simétrico para centrar el tablero */
        padding-top: 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;  /* Tablero centrado horizontalmente */
        overflow: visible !important;    /* Permitir que las coordenadas se vean fuera */
        
        /* Anular cualquier transform o translate */
        transform: none !important;
        translate: none !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Máxima especificidad para el tablero */
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    .chess-container .board,
    #board.board,
    .board {
        /* Tamaño del tablero: como en el layout bueno, pero un poco más pequeño */
        width: max(
            220px,
            min(
                calc(100dvh - 80px),
                calc(100vw - clamp(250px, 35vw, 320px) - clamp(150px, 22vw, 200px) - 16px)
            )
        ) !important;

        height: max(
            220px,
            min(
                calc(100dvh - 80px),
                calc(100vw - clamp(250px, 35vw, 320px) - clamp(150px, 22vw, 200px) - 16px)
            )
        ) !important;

        min-width: 220px !important;
        min-height: 220px !important;
        aspect-ratio: 1 / 1 !important;

        margin: 0 !important;
        padding: 0 !important;
        
        /* Anular cualquier transform */
        transform: none !important;
        translate: none !important;
    }

    /* Panel de controles - máxima especificidad */
    html body .chess-layout .controls-container,
    body .chess-layout .controls-container,
    .chess-layout .controls-container,
    .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        
        /* Asegurar que ocupe toda su columna */
        box-sizing: border-box !important;
        border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-right: 2px solid rgba(212, 175, 55, 0.2) !important;
    }

    /* Panel PGN fijo a la derecha */
    html body .chess-layout .controls-container .pgn-section,
    body .chess-layout .controls-container .pgn-section,
    .chess-layout .controls-container .pgn-section,
    .controls-container .pgn-section {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: clamp(150px, 22vw, 200px) !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        padding: 6px !important;
        z-index: 10 !important;
        background: var(--theme-bg-primary) !important;
        border-left: 2px solid var(--theme-border) !important;
    }

    /* Barra FEN abajo a la derecha */
    html body .chess-layout .controls-container .fen-section,
    body .chess-layout .controls-container .fen-section,
    .chess-layout .controls-container .fen-section,
    .controls-container .fen-section {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        width: clamp(150px, 22vw, 200px) !important;
        padding: 5px 6px !important;
        z-index: 11 !important;
        background: var(--theme-bg-primary) !important;
        border-left: 2px solid var(--theme-border) !important;
        border-top: 1px solid var(--theme-border) !important;
    }

    /* Reorganizar FEN: barra completa arriba, botones abajo en fila separada */
    html body .chess-layout .controls-container .fen-section .fen-bar,
    body .chess-layout .controls-container .fen-section .fen-bar,
    .chess-layout .controls-container .fen-section .fen-bar,
    .controls-container .fen-section .fen-bar,
    .fen-section .fen-bar {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 6px !important;
    }

    /* Primera fila: label + input en la misma fila */
    html body .chess-layout .controls-container .fen-section .fen-bar .fen-label,
    body .chess-layout .controls-container .fen-section .fen-bar .fen-label,
    .chess-layout .controls-container .fen-section .fen-bar .fen-label,
    .controls-container .fen-section .fen-bar .fen-label,
    .fen-section .fen-bar .fen-label {
        grid-row: 1 !important;
        grid-column: 1 !important;
        display: block !important;
        width: auto !important;
        margin-right: 6px !important;
        margin-bottom: 0 !important;
        font-size: 9px !important;
        align-self: center !important;
    }

    html body .chess-layout .controls-container .fen-section .fen-bar .fen-input,
    body .chess-layout .controls-container .fen-section .fen-bar .fen-input,
    .chess-layout .controls-container .fen-section .fen-bar .fen-input,
    .controls-container .fen-section .fen-bar .fen-input,
    .fen-section .fen-bar .fen-input {
        grid-row: 1 !important;
        grid-column: 2 !important;
        width: 100% !important;
        font-size: 8px !important;
        padding: 4px 6px !important;
    }

    /* Segunda fila: botones en 2 columnas */
    html body .chess-layout .controls-container .fen-section .fen-bar .fen-button,
    body .chess-layout .controls-container .fen-section .fen-bar .fen-button,
    .chess-layout .controls-container .fen-section .fen-bar .fen-button,
    .controls-container .fen-section .fen-bar .fen-button,
    .fen-section .fen-bar .fen-button {
        grid-row: 2 !important;
        font-size: 8px !important;
        padding: 4px 6px !important;
    }

    html body .chess-layout .controls-container .fen-section .fen-bar .fen-button:first-of-type {
        grid-column: 1 !important;
    }

    html body .chess-layout .controls-container .fen-section .fen-bar .fen-button:last-of-type {
        grid-column: 2 !important;
    }

    /* Navegación - orden 1 */
    html body .chess-layout .controls-container .navigation-section,
    body .chess-layout .controls-container .navigation-section,
    .chess-layout .controls-container .navigation-section,
    .controls-container .navigation-section,
    .navigation-section {
        order: 1 !important;
        margin: 0 !important;
        margin-bottom: 6px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* Asegurar que los botones de navegación sean visibles y usen todo el espacio - 6 columnas */
    html body .chess-layout .controls-container .navigation-section .navigation-buttons-redesigned,
    body .chess-layout .controls-container .navigation-section .navigation-buttons-redesigned,
    .chess-layout .controls-container .navigation-section .navigation-buttons-redesigned,
    .controls-container .navigation-section .navigation-buttons-redesigned,
    .navigation-section .navigation-buttons-redesigned,
    .navigation-buttons-redesigned {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* 6 columnas para incluir rotar */
        gap: 2px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .chess-layout .controls-container .navigation-section .nav-button,
    body .chess-layout .controls-container .navigation-section .nav-button,
    .chess-layout .controls-container .navigation-section .nav-button,
    .controls-container .navigation-section .nav-button,
    .navigation-section .nav-button,
    .nav-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 5px 1px !important; /* Padding reducido */
        font-size: 9px !important; /* Fuente más pequeña */
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-button .nav-icon {
        font-size: 11px !important; /* Ícono más pequeño */
    }

    .nav-button .nav-text {
        font-size: 7px !important; /* Texto más pequeño */
    }

    /* Botones PGN - orden 2 */
    html body .chess-layout .controls-container .pgn-buttons,
    body .chess-layout .controls-container .pgn-buttons,
    .chess-layout .controls-container .pgn-buttons,
    .controls-container .pgn-buttons,
    .pgn-buttons {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        margin: 0 !important;
        margin-bottom: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* Asegurar que los botones dentro de pgn-buttons sean visibles */
    .pgn-buttons .button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    /* Botones de íconos móviles - orden 3 */
    html body .chess-layout .controls-container .icon-buttons-mobile,
    body .chess-layout .controls-container .icon-buttons-mobile,
    .chess-layout .controls-container .icon-buttons-mobile,
    .controls-container .icon-buttons-mobile,
    .icon-buttons-mobile {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 0 !important;
        margin-bottom: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* Asegurar que los icon-buttons sean visibles */
    .icon-buttons-mobile .icon-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
}

/* === TABLET LANDSCAPE PRIORITY === */
/* Tablets pequeñas/medianas (hasta 1279px) - Layout optimizado */
/* Tablets de 10" o más (1280px+) usan layout de desktop */
@media (min-width: 900px) and (max-width: 1279px) and (orientation: landscape) {
  .chess-layout {
    --tablet-sidebar-effective: var(--icons-sidebar-w);
    --tablet-panel-effective: clamp(280px, 29vw, 400px); /* Reducido para dar más espacio al tablero */
    display: grid !important;
    /* Usar minmax() en el panel para que pueda reducirse antes de causar overflow */
    grid-template-columns: var(--tablet-sidebar-effective) minmax(0, 1fr) minmax(min-content, var(--tablet-panel-effective)) !important;
    grid-template-rows: 1fr !important;
    column-gap: 16px !important; /* Reducido de 20px a 16px */
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important; /* Garantizar que nunca exceda el viewport */
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important; /* Sin padding en el layout para cálculo preciso */
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  .chess-layout > .icons-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .chess-layout > .chess-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    justify-self: center !important;
    align-self: center !important;
    padding-left: 16px !important;   /* Espacio para coordenadas verticales (1-8) */
    padding-bottom: 16px !important; /* Espacio para coordenadas horizontales (a-h) */
    padding-right: 16px !important;  /* Padding simétrico para centrar el tablero */
    padding-top: 8px !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  .chess-layout > .controls-container {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: var(--tablet-panel-effective) !important;
    max-height: calc(100dvh - 24px) !important;
    align-self: stretch !important;
    margin: 0 !important;
    overflow-y: auto !important;
  }

  @supports (height: 1svh) {
    .chess-layout > .controls-container {
      max-height: calc(100svh - 24px) !important;
    }
  }

  .board {
    --tablet-safe-block: 80px;
  }

  @supports (height: 1svh) {
    .board {
      --tablet-safe-block: 72px;
    }
  }

  .chess-layout.no-icons,
  body .chess-layout.no-icons {
    --tablet-sidebar-effective: 0px;
    --icons-sidebar-w: 0px;
  }

  /* Nota: Las coordenadas externas se manejan en @media (min-width: 769px) */
  /* El padding del contenedor ya está configurado arriba (líneas 2113-2116) */
}

/* === SUB-AJUSTE: Galaxy Tab S10 FE (1100-1280px landscape) === */
/* Optimización específica para tablets de ~11" en landscape (S10 FE) */
/* Garantiza que la suma de anchos + gaps <= 100vw para evitar overflow horizontal */
/* Estrategia: Reducir SOLO el panel, NO el tablero */
/* Tablets medianas (1100-1279px) - ajustes específicos antes de usar layout desktop */
@media (min-width: 1100px) and (max-width: 1279px) and (orientation: landscape) {
  :root {
    /* Panel ajustado: máximo 240px, mínimo 200px, preferencia 24vw */
    --panel-w: clamp(200px, 24vw, 240px) !important;
    /* Gap reducido pero no mínimo */
    --layout-gap: 12px !important;
  }

  .chess-layout {
    --tablet-sidebar-effective: var(--icons-sidebar-w);
    --tablet-panel-effective: var(--panel-w) !important;
    --layout-gap-tablet: var(--layout-gap) !important;
    column-gap: var(--layout-gap-tablet) !important;
    /* Grid con minmax(0, ...) para permitir compresión del panel sin forzar min-content */
    grid-template-columns: 
      var(--tablet-sidebar-effective) 
      minmax(0, 1fr) 
      minmax(0, var(--tablet-panel-effective)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Backup, pero la solución es geométrica */
  }

  .chess-layout.no-icons,
  body .chess-layout.no-icons {
    --tablet-sidebar-effective: 0px;
    --icons-sidebar-w: 0px;
  }

  /* NO TOCAR el contenedor del tablero - mantener su tamaño actual */
  .chess-layout > .chess-container {
    /* Mantener paddings actuales - NO reducir */
    /* El tablero ya está bien de tamaño */
    overflow: visible !important; /* Permitir que el tablero ampliado se vea completo */
  }

  /* Panel derecho: forzar que respete el ancho de su columna */
  .chess-layout > .controls-container {
    width: 100% !important;
    max-width: 100% !important; /* Respetar el ancho de la columna del grid */
    min-width: 0 !important; /* Permitir compresión si es necesario */
    max-height: calc(100dvh - 8px) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* El panel no debe crecer más que su columna */
    overflow-y: auto !important;
  }

  @supports (height: 1svh) {
    .chess-layout > .controls-container {
      max-height: calc(100svh - 8px) !important;
    }
  }

  /* Elementos internos del panel: deben respetar el ancho del contenedor */
  .chess-layout > .controls-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Botones principales: permitir wrap si es necesario */
  .chess-layout > .controls-container .pgn-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .chess-layout > .controls-container .button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Navegación: permitir wrap */
  .chess-layout > .controls-container .navigation-buttons-redesigned {
    display: flex !important;
    flex-wrap: wrap !important; /* Que los botones puedan pasar a otra fila */
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .chess-layout > .controls-container .navigation-buttons-redesigned .nav-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Secciones PGN y FEN */
  .chess-layout > .controls-container .pgn-section,
  .chess-layout > .controls-container .fen-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .chess-layout > .controls-container #pgn-viewer,
  .chess-layout > .controls-container .fen-bar,
  .chess-layout > .controls-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stockfish panel */
  .chess-layout > .controls-container #stockfish-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* === SUB-AJUSTE: Tablets medianas (1281-1400px landscape) === */
/* ELIMINADO: Desde 1280px en adelante se usa el layout completo de desktop */
/* Tablets de 10" o más (1280px+) tienen suficiente espacio para el layout completo */

/* === TABLETS GRANDES (1280px+ landscape) - Layout Desktop === */
/* Forzar layout completo de desktop para tablets de 10" o más en landscape */
/* Samsung Galaxy Tab S10 Plus (12.4"): 2800x1752px - debe usar layout desktop */
@media (min-width: 1280px) and (orientation: landscape) {
  /* Layout principal: Grid de 3 columnas como desktop */
  html body .chess-layout,
  body .chess-layout,
  .chess-layout {
    display: grid !important;
    grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) minmax(320px, var(--panel-w-desktop)) !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  /* Contenedor del tablero: centrado */
  html body .chess-layout .chess-container,
  body .chess-layout .chess-container,
  .chess-layout .chess-container,
  .chess-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding-left: 16px !important;
    padding-bottom: 20px !important;
    padding-right: 16px !important;
    padding-top: 8px !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Tablero: tamaño correcto como desktop */
  html body .chess-layout .chess-container .board,
  body .chess-layout .chess-container .board,
  .chess-layout .chess-container .board,
  .chess-container .board,
  #board.board,
  .board {
    width: min(
      90vh,
      calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
    ) !important;
    height: min(
      90vh,
      calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
    ) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  @supports (height: 1svh) {
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    .chess-container .board,
    #board.board,
    .board {
      width: min(
        90svh,
        calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
      ) !important;
      height: min(
        90svh,
        calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
      ) !important;
    }
  }

  @supports (height: 1dvh) {
    html body .chess-layout .chess-container .board,
    body .chess-layout .chess-container .board,
    .chess-layout .chess-container .board,
    .chess-container .board,
    #board.board,
    .board {
      width: min(
        90dvh,
        calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
      ) !important;
      height: min(
        90dvh,
        calc(100vw - var(--panel-w-desktop) - var(--icons-sidebar-w))
      ) !important;
    }
  }

  /* Panel de controles: Layout completo de desktop (grid con áreas) */
  html body .chess-layout .controls-container,
  body .chess-layout .controls-container,
  .chess-layout .controls-container,
  .controls-container {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-areas:
      "buttons"
      "nav"
      "sf"
      "pgn"
      "fen" !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    gap: 8px !important;
    padding: 20px 12px 12px 12px !important;
    background: var(--color-bg-medium) !important;
    border-left: 1px solid rgba(212, 175, 55, 0.1) !important;
    height: 100vh !important;
    overflow: visible !important;
    width: var(--panel-w-desktop) !important;
    max-width: var(--panel-w-desktop) !important;
    position: relative !important; /* NO fixed */
  }

  /* Restaurar áreas de grid para elementos del panel */
  .pgn-buttons { 
    grid-area: buttons !important; 
  }
  .navigation-section { 
    grid-area: nav !important; 
  }
  #stockfish-panel { 
    grid-area: sf !important; 
  }
  .pgn-section { 
    grid-area: pgn !important; 
  }
  .fen-section { 
    grid-area: fen !important; 
  }

  /* PGN Section: Restaurar layout normal de desktop (NO fixed) */
  html body .chess-layout .controls-container .pgn-section,
  body .chess-layout .controls-container .pgn-section,
  .chess-layout .controls-container .pgn-section,
  .controls-container .pgn-section,
  .pgn-section {
    position: static !important; /* NO fixed */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    max-height: none !important;
  }

  /* FEN Section: Restaurar layout normal de desktop (NO fixed) */
  html body .chess-layout .controls-container .fen-section,
  body .chess-layout .controls-container .fen-section,
  .chess-layout .controls-container .fen-section,
  .controls-container .fen-section,
  .fen-section {
    position: static !important; /* NO fixed */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    height: auto !important;
  }

  /* FEN Bar: Restaurar layout normal */
  html body .chess-layout .controls-container .fen-section .fen-bar,
  body .chess-layout .controls-container .fen-section .fen-bar,
  .chess-layout .controls-container .fen-section .fen-bar,
  .controls-container .fen-section .fen-bar,
  .fen-section .fen-bar {
    display: flex !important; /* NO grid */
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Botones de navegación: 6 columnas para incluir botón rotar */
  html body .chess-layout .controls-container .navigation-buttons-redesigned,
  body .chess-layout .controls-container .navigation-buttons-redesigned,
  .chess-layout .controls-container .navigation-buttons-redesigned,
  .controls-container .navigation-buttons-redesigned,
  .navigation-buttons-redesigned {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important; /* 6 columnas para incluir rotar */
    gap: 4px !important; /* Gap reducido para que quepan mejor */
  }

  html body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button,
  body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button,
  .chess-layout .controls-container .navigation-buttons-redesigned .nav-button,
  .controls-container .navigation-buttons-redesigned .nav-button,
  .nav-button {
    padding: 8px 4px !important; /* Padding reducido para que quepan 6 botones */
    font-size: 12px !important; /* Fuente ligeramente más pequeña */
  }

  html body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button .nav-icon,
  body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button .nav-icon,
  .nav-button .nav-icon {
    font-size: 18px !important;
  }

  html body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button .nav-text,
  body .chess-layout .controls-container .navigation-buttons-redesigned .nav-button .nav-text,
  .nav-button .nav-text {
    font-size: 11px !important;
    display: block !important; /* Mostrar texto como desktop */
  }

  /* Botones principales: Restaurar layout normal de desktop (grid 2 columnas) */
  html body .chess-layout .controls-container .pgn-buttons,
  body .chess-layout .controls-container .pgn-buttons,
  .chess-layout .controls-container .pgn-buttons,
  .controls-container .pgn-buttons,
  .pgn-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas como desktop */
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  html body .chess-layout .controls-container .pgn-buttons .button,
  body .chess-layout .controls-container .pgn-buttons .button,
  .chess-layout .controls-container .pgn-buttons .button,
  .controls-container .pgn-buttons .button,
  .pgn-buttons .button {
    padding: 12px 10px !important;
    font-size: 0.8rem !important;
    width: 100% !important;
    grid-column: span 1 !important;
  }

  /* PGN Viewer: Restaurar estilos de desktop */
  html body .chess-layout .controls-container .pgn-section #pgn-viewer,
  body .chess-layout .controls-container .pgn-section #pgn-viewer,
  .chess-layout .controls-container .pgn-section #pgn-viewer,
  .controls-container .pgn-section #pgn-viewer,
  .pgn-section #pgn-viewer,
  #pgn-viewer {
    width: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--theme-button-bg) !important;
    color: var(--theme-text-secondary) !important;
    padding: 12px !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
    box-shadow: 
      inset 0 2px 8px var(--theme-shadow),
      0 4px 12px var(--theme-shadow) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    min-height: 0 !important;
  }

  /* FEN Bar: Restaurar estilos de desktop */
  html body .chess-layout .controls-container .fen-section .fen-bar .fen-label,
  body .chess-layout .controls-container .fen-section .fen-bar .fen-label,
  .fen-section .fen-bar .fen-label,
  .fen-label {
    display: block !important;
    margin-bottom: 4px !important;
  }

  html body .chess-layout .controls-container .fen-section .fen-bar .fen-input,
  body .chess-layout .controls-container .fen-section .fen-bar .fen-input,
  .fen-section .fen-bar .fen-input,
  .fen-input {
    flex: 1 !important;
    width: 100% !important;
  }

  /* Asegurar que la sidebar sea visible */
  html body .chess-layout .icons-sidebar,
  body .chess-layout .icons-sidebar,
  .chess-layout .icons-sidebar,
  .icons-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ocultar icon-buttons-mobile en tablets grandes (usar sidebar) */
  html body .chess-layout .controls-container .icon-buttons-mobile,
  body .chess-layout .controls-container .icon-buttons-mobile,
  .chess-layout .controls-container .icon-buttons-mobile,
  .controls-container .icon-buttons-mobile,
  .icon-buttons-mobile {
    display: none !important;
  }
}


/* Botón Modo Pintado (solo móviles) */
/* CRÍTICO: Estado inactivo - DEBE ser igual que .pgn-buttons .button base */
/* MÁXIMA ESPECIFICIDAD para sobrescribir .pgn-buttons .button:hover de controls.css */
.pgn-buttons .button.button-paint-mode:not(.button-paint-mode--active),
.pgn-buttons .button.button-paint-mode:not(.button-paint-mode--active):not(:hover):not(:active):not(:focus),
.pgn-buttons .button.button-paint-mode:not(.button-paint-mode--active):not(:hover):not(:active):not(:focus):not(:visited),
.button-paint-mode:not(.button-paint-mode--active),
.button-paint-mode:not(.button-paint-mode--active):not(:hover):not(:active):not(:focus),
.button-paint-mode:not(.button-paint-mode--active):not(:hover):not(:active):not(:focus):not(:visited),
.button-paint-mode.force-normal-state:not(.button-paint-mode--active) {
    background: var(--theme-button-bg) !important;
    border: 1px solid var(--theme-border) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-button-text) !important;
    font-weight: 600 !important;
    transform: none !important;
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all var(--transition-theme);
}

/* CRÍTICO para móviles: Forzar estado normal en dispositivos táctiles */
@media (pointer: coarse) {
    .button-paint-mode.force-normal-state:not(.button-paint-mode--active) {
        background: var(--theme-button-bg) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-button-text) !important;
        transform: none !important;
        box-shadow: 
            0 4px 12px var(--theme-shadow),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }
    
    /* Prevenir que los estados hover/active se mantengan en móviles */
    .button-paint-mode:active:not(.button-paint-mode--active) {
        background: var(--theme-button-bg) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-button-text) !important;
        transform: none !important;
    }
}

/* CRÍTICO: Sobrescribir la regla .pgn-buttons .button:hover de controls.css cuando NO está activo */
.pgn-buttons .button.button-paint-mode:not(.button-paint-mode--active):not(:hover) {
    background: var(--theme-button-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-button-text) !important;
    transform: none !important;
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all var(--transition-theme);
}

/* Hover cuando está inactivo: igual que otros botones - Solo cuando realmente está en hover */
.pgn-buttons .button.button-paint-mode:not(.button-paint-mode--active):hover:not(.disabled-by-other):not(:disabled):not(:active),
.button-paint-mode:not(.button-paint-mode--active):hover:not(.disabled-by-other):not(:disabled):not(:active) {
    background: var(--theme-button-hover) !important;
    border-color: var(--theme-accent-primary) !important;
    transform: translateY(-2px) scale(1.02) !important;
    color: var(--theme-button-text-hover) !important;
    box-shadow: 
        0 6px 20px var(--theme-shadow),
        0 0 0 2px var(--theme-shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all var(--transition-theme);
}

/* Estado activo: igual que el hover de los demás botones */
.pgn-buttons .button.button-paint-mode.button-paint-mode--active,
.pgn-buttons .button.button-paint-mode--active,
.button-paint-mode.button-paint-mode--active,
.button-paint-mode--active {
    background: var(--theme-button-hover) !important;
    border-color: var(--theme-accent-primary) !important;
    color: var(--theme-button-text-hover) !important;
    font-weight: 600 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
        0 6px 20px var(--theme-shadow),
        0 0 0 2px var(--theme-shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all var(--transition-theme);
}

.pgn-buttons .button.button-paint-mode.button-paint-mode--active:hover,
.pgn-buttons .button.button-paint-mode--active:hover,
.button-paint-mode.button-paint-mode--active:hover,
.button-paint-mode--active:hover {
    background: var(--theme-button-hover) !important;
    border-color: var(--theme-accent-primary) !important;
    color: var(--theme-button-text-hover) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
        0 6px 20px var(--theme-shadow),
        0 0 0 2px var(--theme-shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all var(--transition-theme);
}

/* Ocultar en desktop (no táctil) */
@media (pointer: fine) {
    .button-paint-mode {
        display: none !important;
    }
}

/* Asegurar que el botón Activar Pintado sea visible en móviles */
@media (max-width: 768px) {
    #modoPintadoBtn {
        display: block !important;
        order: 9;
        grid-column: span 1 !important;
    }
}

/* Overlay para modo pintado */
.paint-mode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 200; /* Sobre el tablero pero bajo modales */
    pointer-events: none; /* Desactivado por defecto */
    display: none;
}

.paint-mode-overlay.active {
    display: block;
    pointer-events: all; /* Captura eventos cuando activo */
}

/* ===== LAYOUT PARA PANTALLAS 32:9 (ULTRA-WIDE) ===== */
/* Aspecto 32:9 = ratio ancho/alto ≈ 3.55:1 */
/* Ejemplo: 1920x540px, 2560x720px */
@media (min-width: 1500px) and (max-height: 600px) and (orientation: landscape) {
  /* Variables optimizadas para ultra-wide */
  :root {
    --icons-sidebar-w: 140px !important; /* Sidebar más ancha para 2 columnas de íconos */
    --panel-w-controles: 300px !important; /* Panel para todos los controles agrupados */
    --panel-w-pgn: 400px !important; /* Panel PGN solo (columna ancha e importante) */
    --panel-gap: 8px !important; /* Gap mínimo */
  }

  /* Ocultar íconos móviles en pantallas 32:9 (ya tenemos los íconos en la sidebar izquierda) */
  .chess-layout > .controls-container > .icon-buttons-mobile {
    display: none !important;
  }

  /* Layout principal: Grid de 4 columnas */
  /* [Sidebar] [Tablero] [Controles Agrupados] [PGN Solo] */
  .chess-layout {
    display: grid !important;
    grid-template-columns: var(--icons-sidebar-w) minmax(0, 1fr) var(--panel-w-controles) var(--panel-w-pgn) !important;
    grid-template-rows: 1fr !important;
    column-gap: var(--panel-gap) !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  /* Sidebar: 1 columna para íconos */
  .chess-layout > .icons-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--icons-sidebar-w) !important;
    padding: 4px !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .icons-sidebar .logo-container {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }

  .icons-sidebar .logo-container img {
    max-height: 70px !important;
  }

  /* Grid interno de 2 columnas para íconos */
  .icons-sidebar .icon-buttons-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 2px !important;
    column-gap: 4px !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .icons-sidebar .icon-button {
    width: 100% !important;
    height: 44px !important;
    padding: 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 64px !important;
    margin: 0 auto !important;
  }

  .icons-sidebar .icon-svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Contenedor del tablero: centrado verticalmente perfecto */
  .chess-layout > .chess-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* Centrado vertical perfecto */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important; /* Sin padding superior/inferior */
    padding-bottom: 20px !important; /* Solo espacio para coordenadas abajo */
    padding-left: 16px !important; /* Espacio para coordenadas izquierda - simétrico */
    padding-right: 16px !important; /* Padding simétrico para centrar el tablero */
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Tablero: tamaño perfecto basado en altura disponible */
  .chess-layout > .chess-container .board {
    /* Altura disponible: 100% del viewport menos espacio para coordenadas */
    --available-height: calc(100dvh - 20px); /* Solo espacio para coordenadas abajo */
    --available-width: calc(100vw - var(--icons-sidebar-w) - var(--panel-w-controles) - var(--panel-w-pgn) - var(--panel-gap) * 3 - 16px);
    --board-size-base: min(var(--available-height), var(--available-width)) !important;
    --board-size: calc(var(--board-size-base) * var(--board-zoom-factor)) !important;
    
    width: var(--board-size) !important;
    height: var(--board-size) !important;
    max-width: var(--board-size) !important;
    max-height: var(--board-size) !important;
    min-width: calc(280px * var(--board-zoom-factor)) !important;
    min-height: calc(280px * var(--board-zoom-factor)) !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  @supports (height: 1svh) {
    .chess-layout > .chess-container .board {
      --available-height: calc(100svh - 20px) !important;
      --board-size-base: min(var(--available-height), var(--available-width)) !important;
      --board-size: calc(var(--board-size-base) * var(--board-zoom-factor)) !important;
    }
  }

  /* Controls-container: flexbox vertical para agrupar todos los controles */
  .chess-layout > .controls-container {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 3 !important; /* Solo columna 3 del grid principal */
    grid-row: 1 !important;
    width: var(--panel-w-controles) !important;
    max-width: var(--panel-w-controles) !important;
    height: 100% !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 8px !important;
  }

  @supports (height: 1svh) {
    .chess-layout > .controls-container {
      max-height: 100svh !important;
    }
  }

  /* ===== COLUMNA 3: CONTROLES AGRUPADOS ===== */
  /* Botones principales */
  .chess-layout > .controls-container > .pgn-buttons {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .chess-layout > .controls-container > .pgn-buttons .button {
    width: 100% !important;
    padding: 5px 4px !important; /* Padding reducido */
    font-size: 8px !important; /* Fuente más pequeña */
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Permitir salto de línea */
    overflow-wrap: anywhere !important; /* Forzar salto de palabra */
    word-wrap: break-word !important;
    line-height: 1.1 !important;
    text-align: center !important;
    min-height: 36px !important; /* Altura mínima para múltiples líneas */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }


  /* Navegación */
  .chess-layout > .controls-container > .navigation-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .chess-layout > .controls-container > .navigation-section .navigation-buttons-redesigned {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .chess-layout > .controls-container > .navigation-section .nav-button {
    width: 100% !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .chess-layout > .controls-container > .navigation-section .nav-icon {
    font-size: 14px !important;
  }

  .chess-layout > .controls-container > .navigation-section .nav-text {
    font-size: 10px !important;
  }

  /* Stockfish */
  .chess-layout > .controls-container > #stockfish-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .chess-layout > .controls-container > #stockfish-panel .stockfish-header {
    padding: 6px 8px !important;
  }

  .chess-layout > .controls-container > #stockfish-panel .stockfish-title {
    font-size: 12px !important;
  }

  .chess-layout > .controls-container > #stockfish-panel .analysis-line {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* FEN */
  .chess-layout > .controls-container > .fen-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  /* ===== COLUMNA 4: PGN SOLO ===== */
  /* PGN en columna 4 del grid principal (está dentro de controls-container pero lo posicionamos absolutamente desde el grid principal) */
  .chess-layout {
    position: relative !important;
  }

  .chess-layout > .controls-container > .pgn-section {
    position: fixed !important; /* Usar fixed para posicionar desde el viewport */
    top: 0 !important;
    right: 0 !important; /* Posicionar desde la derecha del viewport (columna 4) */
    width: var(--panel-w-pgn) !important;
    max-width: var(--panel-w-pgn) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10 !important;
  }

  @supports (height: 1svh) {
    .chess-layout > .controls-container > .pgn-section {
      height: 100svh !important;
      max-height: 100svh !important;
    }
  }

  /* Estilos FEN dentro de controls-container */
  .chess-layout > .controls-container > .fen-section .fen-bar {
    padding: 6px !important;
    gap: 6px !important;
  }

  .chess-layout > .controls-container > .fen-section .fen-label {
    font-size: 11px !important;
  }

  .chess-layout > .controls-container > .fen-section .fen-input {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  .chess-layout > .controls-container > .fen-section .fen-button {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  /* Sección PGN: Metadatos y viewer */
  .chess-layout > .controls-container > .pgn-section .pgn-metadata-compact {
    padding: 6px 8px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  .chess-layout > .controls-container > .pgn-section #pgn-viewer {
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 6px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Barra de herramientas PGN: Grid horizontal 5 columnas */
  .chess-layout > .controls-container > .pgn-section .pgn-toolbar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 6px !important;
    margin-top: 8px !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn {
    padding: 5px 3px !important;
    font-size: 9px !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-icon {
    font-size: 12px !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-label {
    font-size: 8px !important;
  }

  /* Tooltips personalizados para botones del PGN toolbar (aparecen arriba para evitar la barra de tareas) */
  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn {
    position: relative !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title]:hover::after {
    content: attr(title) !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    background: var(--theme-modal-bg) !important;
    color: var(--theme-accent-primary) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: 
        0 2px 8px var(--theme-shadow),
        0 0 0 1px var(--theme-shadow-glow) !important;
    font-family: var(--font-main, 'Poppins'), sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-2px) !important;
    border: 5px solid transparent !important;
    border-top-color: var(--theme-modal-bg) !important;
    pointer-events: none !important;
    z-index: 10001 !important;
  }

  /* Ocultar tooltip nativo del navegador */
  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title] {
    pointer-events: auto !important;
  }

  .chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title]:hover {
    pointer-events: auto !important;
  }

  /* Coordenadas más pequeñas para tableros pequeños */
  .chess-layout > .chess-container .cg-wrap coords {
    font-size: 9px !important;
  }

  .chess-layout > .chess-container .cg-wrap coords.files {
    height: 14px !important;
  }

  .chess-layout > .chess-container .cg-wrap coords.ranks {
    width: 14px !important;
  }
}