/**
 * CONTROLS.CSS - Estilos de Controles y Modal de Variantes
 * Ajedrez de Silicio - Sistema Chessground + Chessops
 */

/* ===== BOTONES PRINCIPALES (GRID 2x3 + 1 COMPLETO) ===== */
.pgn-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    position: relative; /* Para posicionar el overlay */
}

/* Los primeros 6 botones ocupan 2 columnas (grid 2x3) */
.pgn-buttons .button:nth-child(n+1):nth-child(-n+6) {
    grid-column: span 1;
}

/* Los botones 7 y 8 ocupan 1 columna cada uno (misma fila) */
.pgn-buttons .button:nth-child(7),
.pgn-buttons .button:nth-child(8) {
    grid-column: span 1;
}

.pgn-buttons .button {
    background: var(--theme-button-bg);
    color: var(--theme-button-text);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 12px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    text-align: center;
    line-height: 1.3;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efecto de brillo al hover */
.pgn-buttons .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--theme-shadow-glow), transparent);
    transition: left 0.5s ease;
}

.pgn-buttons .button:hover::before {
    left: 100%;
}

.pgn-buttons .button:hover:not(.disabled-by-other):not(:disabled) {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    transform: translateY(-2px) scale(1.02);
    color: var(--theme-button-text-hover);
    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);
}

/* Clase temporal para botones de acción inmediata (1 segundo en rojo) */
.pgn-buttons .button.button-action-feedback {
    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-normal) !important;
}

/* CRÍTICO para táctiles: Asegurar que después de remover la clase de feedback, */
/* los botones específicos vuelvan al estado normal incluso si :hover está activo */
.pgn-buttons .button#borrarMarcas:not(.button-action-feedback):not(:hover):not(:active):not(:focus),
.pgn-buttons .button#editPositionBtn:not(.button-action-feedback):not(:hover):not(:active):not(:focus),
.pgn-buttons .button#loadPgnButton:not(.button-action-feedback):not(:hover):not(:active):not(:focus),
.pgn-buttons .button.force-normal-state {
    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;
    transform: none !important;
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* CRÍTICO para móviles: Forzar estado normal en dispositivos táctiles */
@media (pointer: coarse) {
    .pgn-buttons .button#borrarMarcas.force-normal-state,
    .pgn-buttons .button#editPositionBtn.force-normal-state,
    .pgn-buttons .button#loadPgnButton.force-normal-state,
    .pgn-buttons .button.force-normal-state {
        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 */
    .pgn-buttons .button#borrarMarcas:active,
    .pgn-buttons .button#editPositionBtn:active,
    .pgn-buttons .button#loadPgnButton:active {
        background: var(--theme-button-bg) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-button-text) !important;
        transform: none !important;
    }
}

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

.pgn-buttons .button.disabled-by-other:hover,
.pgn-buttons .button:disabled:hover {
    background: var(--theme-button-bg) !important;
    border-color: var(--theme-border) !important;
    transform: none !important;
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--theme-button-text) !important;
}

.pgn-buttons .button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 2px 8px rgba(197, 0, 57, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* CRÍTICO: Sobrescribir estado :active para el botón Editor de Posición */
.pgn-buttons .button#editPositionBtn:active:not(.button-action-feedback),
.pgn-buttons .button#editPositionBtn.force-normal-state: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;
}

.play-status-label {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--theme-accent-primary);
    opacity: 0.82;
    display: none;
}

.play-status-label.is-visible {
    display: block;
}

/* Estilos para botón Stockfish activo (tanto en panel como en sidebar) */
.button.stockfish-toggle.active,
.icon-button.stockfish-toggle.active {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    color: var(--theme-button-text-hover);
    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);
}

/* ===== NAVEGACIÓN REDISEÑADA ===== */
.navigation-section {
    margin-bottom: 12px;
}

.navigation-buttons-redesigned {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: space-between;
}

.navigation-buttons-redesigned .nav-button {
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 8px 6px; /* Reducido ligeramente para 6 botones */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px; /* Reducido ligeramente */
    cursor: pointer;
    transition: all var(--transition-normal);
    flex: 1;
    min-height: 48px; /* Reducido ligeramente */
    justify-content: center;
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.navigation-buttons-redesigned .nav-button:hover {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        0 0 0 2px var(--theme-shadow-glow);
}

.navigation-buttons-redesigned .nav-button .nav-icon {
    font-size: 1.1rem; /* Reducido ligeramente */
    color: var(--theme-accent-primary);
    transition: transform var(--transition-normal);
    line-height: 1;
}

/* Estilos específicos para chevrones (< y >) - mayor tamaño y grosor */
.navigation-buttons-redesigned .nav-button .nav-icon.nav-icon-chevron {
    font-size: 1.4rem;
    font-weight: 900;
    font-family: 'Arial', 'Helvetica', sans-serif;
    letter-spacing: -0.05em;
}

.navigation-buttons-redesigned .nav-button:hover .nav-icon {
    transform: scale(1.2);
    color: var(--color-primary-light);
}

/* Estilos para iconos SVG en botones de navegación */
.navigation-buttons-redesigned .nav-button .nav-icon.nav-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--theme-accent-primary);
}

.navigation-buttons-redesigned .nav-button .nav-icon-svg svg {
    width: 1.68rem; /* Tamaño grande permanente (1.4rem * 1.2) */
    height: 1.68rem;
    transition: filter var(--transition-normal);
}

/* Solo cambio de color en hover, sin cambio de tamaño */
.navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg {
    transform: none; /* Sin cambio de tamaño */
}

.navigation-buttons-redesigned .nav-button.active .nav-icon-svg svg {
    transform: scale(1.1);
}

.navigation-buttons-redesigned .nav-button.disabled-by-other .nav-icon-svg svg {
    opacity: 0.5;
    transform: none;
}

/* Variables CSS para colores SVG según tema en botones de navegación */
:root,
[data-theme="dark-matrix"] {
    --nav-svg-light: #ffffff;
    --nav-svg-dark: #000000;
    --nav-svg-border: #d4af37;
    --nav-svg-arrow: #d4af37;
}

[data-theme="light-matrix"] {
    --nav-svg-light: #ffffff;
    --nav-svg-dark: #2c3e50;
    --nav-svg-border: #64B5F6;
    --nav-svg-arrow: #64B5F6;
}

[data-theme="quantum-matrix"] {
    --nav-svg-light: #ffffff;
    --nav-svg-dark: #0a0a0a;
    --nav-svg-border: #00f5ff;
    --nav-svg-arrow: #00f5ff;
}

[data-theme="aurum-matrix"] {
    --nav-svg-light: #F6E7CB;
    --nav-svg-dark: #2A1F0F;
    --nav-svg-border: #F6E7CB;
    --nav-svg-arrow: #F6E7CB;
}

[data-theme="rose-matrix"] {
    --nav-svg-light: #ffffff;
    --nav-svg-dark: #1a0a1a;
    --nav-svg-border: #FF1493;
    --nav-svg-arrow: #FF1493;
}

[data-theme="falling-code-matrix"] {
    --nav-svg-light: #ffffff;
    --nav-svg-dark: #000000;
    --nav-svg-border: #00FF41;
    --nav-svg-arrow: #00FF41;
}

/* Aplicar colores a los elementos SVG en botones de navegación */
.navigation-buttons-redesigned .nav-icon-svg .nav-chess-square-light {
    fill: var(--nav-svg-light);
}

.navigation-buttons-redesigned .nav-icon-svg .nav-chess-square-dark {
    fill: var(--nav-svg-dark);
}

.navigation-buttons-redesigned .nav-icon-svg .nav-chess-border {
    stroke: var(--nav-svg-border);
}

.navigation-buttons-redesigned .nav-icon-svg .nav-arrow-path {
    fill: var(--nav-svg-arrow);
}

/* Hover effects para SVG en botones de navegación */
.navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-border {
    stroke: var(--color-primary-light);
}

.navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-arrow-path {
    fill: var(--color-primary-light);
}

/* Ajuste específico para Falling Code Matrix: bordes negros en elementos SVG de navegación */
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-border,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-border {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-arrow-path,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-arrow-path {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-light,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-dark,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-light,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-dark {
    stroke: #000000 !important;
    stroke-width: 2px !important;
    paint-order: stroke fill !important;
}

.navigation-buttons-redesigned .nav-button.active .nav-icon-svg .nav-chess-border {
    stroke: var(--color-primary-light);
}

.navigation-buttons-redesigned .nav-button.active .nav-icon-svg .nav-arrow-path {
    fill: var(--color-primary-light);
}

.navigation-buttons-redesigned .nav-button .nav-text {
    font-size: 0.6rem; /* Reducido ligeramente */
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px; /* Reducido ligeramente */
}

.navigation-buttons-redesigned .nav-button:hover .nav-text {
    color: var(--theme-button-text-hover);
}

/* Estado deshabilitado por "Jugar posición actual" activo */
.navigation-buttons-redesigned .nav-button.disabled-by-other {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.2);
}

.navigation-buttons-redesigned .nav-button.disabled-by-other:hover {
    background: var(--theme-button-bg);
    border-color: var(--theme-border);
    transform: none;
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.navigation-buttons-redesigned .nav-button.disabled-by-other .nav-icon {
    transform: none;
    color: var(--theme-accent-primary);
    opacity: 0.5;
}

.navigation-buttons-redesigned .nav-button.disabled-by-other .nav-text {
    color: var(--theme-text-secondary);
    opacity: 0.5;
}

/* Estado activo para botón de replay */
.navigation-buttons-redesigned .nav-button.active {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    box-shadow: 
        0 4px 12px var(--theme-shadow),
        0 0 0 2px var(--theme-shadow-glow);
}

.navigation-buttons-redesigned .nav-button.active .nav-icon {
    color: var(--color-primary-light);
}

.navigation-buttons-redesigned .nav-button.active .nav-text {
    color: var(--theme-button-text-hover);
}

/* Ajuste específico para Falling Code Matrix: íconos de navegación con borde negro y sombra fuerte */
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon.nav-icon-chevron,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon.nav-icon-chevron {
    filter: drop-shadow(0 0 0 3px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 4px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 8px rgba(0, 0, 0, 1))
            drop-shadow(0 0 12px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 16px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 12px rgba(0, 255, 65, 0.6))
            drop-shadow(0 3px 6px rgba(0, 0, 0, 1)) !important;
    text-shadow: 0 0 0 3px rgba(0, 0, 0, 1),
                 0 0 0 4px rgba(0, 0, 0, 0.9),
                 0 0 8px rgba(0, 0, 0, 1),
                 0 0 12px rgba(0, 0, 0, 0.9),
                 0 0 16px rgba(0, 0, 0, 0.8),
                 0 0 12px rgba(0, 255, 65, 0.6),
                 0 3px 6px rgba(0, 0, 0, 1),
                 -1px -1px 0 rgba(0, 0, 0, 1),
                 1px -1px 0 rgba(0, 0, 0, 1),
                 -1px 1px 0 rgba(0, 0, 0, 1),
                 1px 1px 0 rgba(0, 0, 0, 1) !important;
    -webkit-text-stroke: 3px #000000 !important;
    -webkit-text-fill-color: var(--theme-accent-primary) !important;
    color: var(--theme-accent-primary) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    transform: scale(1.2) !important;
}

html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg {
    filter: drop-shadow(0 0 0 2px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 3px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 6px rgba(0, 0, 0, 1))
            drop-shadow(0 0 10px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 12px rgba(0, 255, 65, 0.6))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
    opacity: 1 !important;
}

html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg path,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg circle,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg rect,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg line,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg polygon,
html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg g,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg path,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg circle,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg rect,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg line,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg polygon,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg g {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important;
}

html[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button .nav-icon,
body[data-theme="falling-code-matrix"] .navigation-buttons-redesigned .nav-button .nav-icon {
    filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.8))
            drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.8));
    opacity: 1 !important;
}

/* Ajuste específico para Rose Matrix: bordes negros en elementos SVG de navegación */
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-border,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-border {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-arrow-path,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-arrow-path {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-light,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-dark,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-light,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg .nav-chess-square-dark {
    stroke: #000000 !important;
    stroke-width: 2px !important;
    paint-order: stroke fill !important;
}

/* Ajuste específico para Rose Matrix: íconos de navegación con borde negro y sombra fuerte */
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon.nav-icon-chevron,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon.nav-icon-chevron {
    filter: drop-shadow(0 0 0 3px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 4px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 8px rgba(0, 0, 0, 1))
            drop-shadow(0 0 12px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 16px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 12px rgba(255, 20, 147, 0.6))
            drop-shadow(0 3px 6px rgba(0, 0, 0, 1)) !important;
    text-shadow: 0 0 0 3px rgba(0, 0, 0, 1),
                 0 0 0 4px rgba(0, 0, 0, 0.9),
                 0 0 8px rgba(0, 0, 0, 1),
                 0 0 12px rgba(0, 0, 0, 0.9),
                 0 0 16px rgba(0, 0, 0, 0.8),
                 0 0 12px rgba(255, 20, 147, 0.6),
                 0 3px 6px rgba(0, 0, 0, 1),
                 -1px -1px 0 rgba(0, 0, 0, 1),
                 1px -1px 0 rgba(0, 0, 0, 1),
                 -1px 1px 0 rgba(0, 0, 0, 1),
                 1px 1px 0 rgba(0, 0, 0, 1) !important;
    -webkit-text-stroke: 3px #000000 !important;
    -webkit-text-fill-color: var(--theme-accent-primary) !important;
    color: var(--theme-accent-primary) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    transform: scale(1.2) !important;
}

html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg {
    filter: drop-shadow(0 0 0 2px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 3px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 6px rgba(0, 0, 0, 1))
            drop-shadow(0 0 10px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 12px rgba(255, 20, 147, 0.6))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
    opacity: 1 !important;
}

html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg path,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg circle,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg rect,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg line,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg polygon,
html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg g,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg path,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg circle,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg rect,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg line,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg polygon,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button:hover .nav-icon-svg svg g {
    stroke: #000000 !important;
    stroke-width: 3px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important;
}

html[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button .nav-icon,
body[data-theme="rose-matrix"] .navigation-buttons-redesigned .nav-button .nav-icon {
    filter: drop-shadow(0 0 4px rgba(255, 20, 147, 0.8))
            drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.8));
    opacity: 1 !important;
}

/* ===== PANEL DE CONTROLES DE REPLAY ===== */
.navigation-section {
    position: relative; /* Necesario para posicionar el panel */
}

.replay-controls-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 
        0 8px 24px var(--theme-shadow),
        0 0 0 1px var(--theme-shadow-glow);
    z-index: 1000;
    min-width: 280px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.replay-controls-panel.hidden {
    display: none;
}

.replay-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-border);
}

.replay-controls-header span {
    color: var(--theme-accent-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.replay-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.replay-close-btn:hover {
    background: var(--theme-input-bg);
    color: var(--theme-accent-primary);
}

.replay-controls-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.replay-speed-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.replay-speed-controls label {
    color: var(--theme-text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.replay-speed-buttons {
    display: flex;
    gap: 6px;
}

.replay-speed-btn {
    flex: 1;
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--theme-button-text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.replay-speed-btn:hover {
    background: var(--theme-bg-tertiary);
    border-color: var(--theme-accent-primary);
    transform: translateY(-1px);
}

.replay-speed-btn.active {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    color: var(--theme-button-text-hover);
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.replay-action-buttons {
    display: flex;
    gap: 8px;
}

.replay-action-btn {
    flex: 1;
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--theme-button-text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.replay-action-btn:hover {
    background: var(--theme-button-hover);
    border-color: var(--theme-accent-primary);
    color: var(--theme-button-text-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.replay-action-btn span {
    font-size: 1rem;
}

/* ===== MODAL "NO HAY MOVIMIENTOS PARA REPRODUCIR" ===== */
.replay-no-moves-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.replay-no-moves-overlay.visible {
    opacity: 1;
}

.replay-no-moves-modal {
    background: var(--theme-modal-bg);
    border: 2px solid var(--theme-accent-primary);
    border-radius: 16px;
    box-shadow: 
        0 20px 60px var(--theme-shadow),
        0 0 0 1px var(--theme-shadow-glow);
    max-width: 450px;
    width: 90%;
    padding: 32px;
    text-align: center;
    transform: scale(0.9);
    transition: all var(--transition-theme), transform 0.3s ease;
}

.replay-no-moves-modal.visible {
    transform: scale(1);
}

.replay-no-moves-modal .replay-no-moves-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.replay-no-moves-modal .replay-no-moves-message {
    color: var(--theme-text-secondary);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    transition: color var(--transition-theme);
}

.replay-no-moves-ok-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--theme-button-hover);
    border: 2px solid var(--theme-accent-primary);
    border-radius: 8px;
    color: var(--theme-button-text-hover);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-theme);
    font-family: var(--font-main);
    margin-top: 24px;
}

.replay-no-moves-ok-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px var(--theme-shadow-glow);
    transform: translateY(-1px);
}

/* ===== OVERLAYS PARA BLOQUEAR INTERACCIÓN ===== */
.controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999 !important; /* Muy alto para estar por encima de todo */
    background: transparent !important;
    pointer-events: all !important; /* Captura todos los eventos */
    cursor: not-allowed !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== MODAL DE SELECCIÓN DE VARIANTES ===== */
.variation-modal {
    position: fixed;
    z-index: 10000;
    background: linear-gradient(135deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: 16px;
    min-width: 320px;
    max-width: 450px;
    box-shadow: 
        0 8px 32px rgba(212, 175, 55, 0.4),
        0 0 60px rgba(212, 175, 55, 0.2);
    animation: fadeInScale 0.2s ease-out;
    backdrop-filter: blur(4px);
}

.variation-modal.hidden {
    display: none !important;
}

/* ===== HEADER DEL MODAL ===== */
.variation-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    color: var(--color-primary);
    font-weight: bold;
    font-size: 15px;
}

.variation-modal-hint {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: normal;
    font-style: italic;
}

/* ===== CONTENEDOR DE OPCIONES ===== */
.variation-modal-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Scrollbar elegante para opciones */
.variation-modal-options::-webkit-scrollbar {
    width: 6px;
}

.variation-modal-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.variation-modal-options::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

.variation-modal-options::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}

/* Firefox */
.variation-modal-options {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.3);
}

/* ===== OPCIONES DE VARIANTES ===== */
.variation-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    user-select: none;
}

/* Hover state */
.variation-option:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(3px);
}

/* Selected state (con teclado) */
.variation-option.selected {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #000;
    font-weight: bold;
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Estado especial para línea principal */
.variation-option.mainline {
    border-left: 4px solid var(--color-primary-light);
}

.variation-option.mainline .variation-icon {
    color: var(--color-primary-light);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Selected + mainline */
.variation-option.selected.mainline .variation-icon {
    color: #000;
    text-shadow: none;
}

/* ===== ELEMENTOS INTERNOS DE LAS OPCIONES ===== */
.variation-icon {
    font-size: 20px;
    width: 28px;
    min-width: 28px;
    text-align: center;
    line-height: 1;
}

.variation-move {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: bold;
    min-width: 70px;
    letter-spacing: 0.5px;
}

.variation-label {
    font-size: 13px;
    opacity: 0.85;
    font-style: italic;
    flex-grow: 1;
}

/* Cambio de color del label cuando está seleccionado */
.variation-option.selected .variation-label {
    opacity: 1;
    font-weight: 600;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Animación al aparecer cada opción (staggered) */
.variation-option {
    animation: slideInOption 0.2s ease-out backwards;
}

.variation-option:nth-child(1) { animation-delay: 0.02s; }
.variation-option:nth-child(2) { animation-delay: 0.04s; }
.variation-option:nth-child(3) { animation-delay: 0.06s; }
.variation-option:nth-child(4) { animation-delay: 0.08s; }
.variation-option:nth-child(5) { animation-delay: 0.10s; }
.variation-option:nth-child(n+6) { animation-delay: 0.12s; }

@keyframes slideInOption {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== ACCESIBILIDAD ===== */
.variation-option:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Indicador visual cuando el modal está activo */
.variation-modal::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light), var(--color-primary));
    background-size: 200% 200%;
    animation: borderGlow 3s ease infinite;
    z-index: -1;
    opacity: 0.3;
}

@keyframes borderGlow {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

/* ===== BOTONES DE ACCIÓN ===== */
.action-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.btn-primary,
.btn-secondary {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #000;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    background: rgba(212, 175, 55, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--color-primary);
}

/* ===== NOTIFICACIONES ===== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: linear-gradient(135deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
    animation: slideInRight 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification.success {
    border-color: var(--color-success);
}

.notification.error {
    border-color: var(--color-error);
}

.notification.warning {
    border-color: var(--color-warning);
}

.notification-icon {
    font-size: 24px;
}

.notification-message {
    flex: 1;
    color: var(--color-primary);
    font-size: 14px;
}

.notification-close {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.notification-close:hover {
    color: var(--color-primary-light);
    transform: rotate(90deg);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .variation-modal {
        min-width: 280px;
        max-width: 90vw;
        padding: 12px;
    }
    
    .variation-option {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .variation-move {
        font-size: 15px;
        min-width: 60px;
    }
    
    .variation-label {
        font-size: 12px;
    }
    
    .notification {
        min-width: 250px;
        max-width: 90vw;
        top: 10px;
        right: 10px;
    }
}

/* ===== MODAL DE METADATOS (Similar al modal de anotación) ===== */
#pgnMetadataModalOverlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: flex-end; /* Alinea a la derecha */
    align-items: stretch;
    padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 36px);
    background: transparent; /* Fondo transparente */
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#pgnMetadataModalOverlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#pgnMetadataModalOverlay .pgn-modal-container {
    position: relative;
    background: var(--theme-modal-bg);
    border: 1px solid var(--theme-border);
    border-radius: 16px 0 0 16px; /* Bordes redondeados solo a la izquierda */
    box-shadow:
        0 25px 70px var(--theme-shadow),
        0 0 0 1px var(--theme-shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    width: min(480px, 90vw);
    height: calc(100vh - clamp(40px, 8vh, 80px));
    max-height: calc(100vh - clamp(40px, 8vh, 80px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.35s ease-out;
    pointer-events: auto;
    margin: 0;
    transition: all var(--transition-theme);
}

#pgnMetadataModalOverlay .pgn-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 2px solid var(--theme-border);
    background: var(--theme-bg-tertiary);
    border-radius: 0;
    transition: all var(--transition-theme);
}

#pgnMetadataModalOverlay .pgn-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color var(--transition-theme);
}

#pgnMetadataModalOverlay .pgn-modal-close {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all var(--transition-theme);
    opacity: 0.6;
}

#pgnMetadataModalOverlay .pgn-modal-close:hover {
    background: var(--theme-accent-secondary);
    opacity: 0.2;
    color: var(--theme-accent-secondary);
    transform: rotate(90deg);
}

#pgnMetadataModalOverlay .pgn-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

#pgnMetadataModalOverlay .pgn-modal-footer {
    padding: 20px 24px;
    border-top: 2px solid var(--theme-border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
    transition: border-color var(--transition-theme);
}

@media (max-width: 768px) {
    #pgnMetadataModalOverlay {
        justify-content: center;
        align-items: center;
        padding: 16px;
    }

    #pgnMetadataModalOverlay .pgn-modal-container {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 32px);
        border-radius: 16px;
    }

    #pgnMetadataModalOverlay .pgn-modal-footer {
        flex-direction: column;
    }

    #pgnMetadataModalOverlay .pgn-modal-btn {
        width: 100%;
    }
}