/**
 * VARIATIONS.CSS - Estilos del Visor de Variantes
 * Ajedrez de Silicio - Sistema Chessground + Chessops
 * 
 * Variantes anidadas con indentación progresiva y estilo elegante
 */

/* Comentarios iniciales (antes del primer movimiento) */
.pgn-initial-comment {
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid #d4af37;
    color: #d4af37;
    font-style: italic;
    line-height: 1.5;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.pgn-move-line {
    margin: 4px 0;
    padding: 2px 0;
}

/* ===== NÚMEROS DE JUGADA ===== */
.move-number {
    color: var(--color-text-muted);
    margin-right: 5px;
    font-weight: normal;
    user-select: none;
}

/* ===== RESULTADO DE LA PARTIDA ===== */
.game-result {
    display: inline-block;
    margin-left: 10px;
    color: #D4AF37;
    font-weight: 700;
    font-size: 1.1em;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* ===== MOVIMIENTOS ===== */
.move {
    color: var(--color-primary);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    display: inline-block;
    margin: 0 2px;
    font-weight: 500;
}

.move:hover {
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}

.move.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #000;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

/* ===== VARIANTES ANIDADAS ===== */
.variation {
    display: block;
    margin-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 12px;
    border-left: 2px solid rgba(212, 175, 55, 0.3);
    color: rgba(212, 175, 55, 0.85);
    position: relative;
}

.variation::before {
    content: '⚡';
    position: absolute;
    left: -10px;
    top: 2px;
    font-size: 10px;
    color: rgba(212, 175, 55, 0.5);
}

/* Segundo nivel de variantes */
.variation .variation {
    margin-left: 20px;
    border-left-color: rgba(212, 175, 55, 0.2);
    color: rgba(212, 175, 55, 0.7);
}

.variation .variation::before {
    color: rgba(212, 175, 55, 0.4);
}

/* Tercer nivel y más */
.variation .variation .variation {
    margin-left: 20px;
    border-left-color: rgba(212, 175, 55, 0.1);
    color: rgba(212, 175, 55, 0.6);
}

.variation .variation .variation::before {
    color: rgba(212, 175, 55, 0.3);
}

/* ===== COMENTARIOS ===== */
.comment {
    display: block;
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 12px;
    margin: 6px 0;
    background: rgba(212, 175, 55, 0.05);
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.comment:hover {
    background: rgba(212, 175, 55, 0.08);
    border-left-color: rgba(212, 175, 55, 0.5);
}

/* ===== RESULTADO DE LA PARTIDA ===== */
.pgn-result {
    display: inline-block;
    color: var(--color-accent);
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
    padding: 4px 10px;
    background: rgba(255, 51, 51, 0.1);
    border: 1px solid rgba(255, 51, 51, 0.3);
    border-radius: var(--border-radius-sm);
}

/* ===== PARÉNTESIS VISUALES ===== */
.variation-start::before {
    content: '(';
    color: rgba(212, 175, 55, 0.4);
    margin-right: 4px;
}

.variation-end::after {
    content: ')';
    color: rgba(212, 175, 55, 0.4);
    margin-left: 4px;
}

/* ===== ANIMACIONES ===== */
@keyframes highlightMove {
    0%, 100% {
        background: rgba(212, 175, 55, 0.3);
    }
    50% {
        background: rgba(212, 175, 55, 0.6);
    }
}

.move.highlight {
    animation: highlightMove 1s ease-out;
}

/* ===== LÍNEA PRINCIPAL vs VARIANTES ===== */
.mainline {
    color: var(--color-primary);
}

.mainline .move {
    color: var(--color-primary);
}

/* ===== METADATA HEADER ===== */
.pgn-metadata {
    background: linear-gradient(135deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%);
    border-bottom: 2px solid var(--color-primary);
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.pgn-players {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
}

.pgn-player-white {
    color: #f4cf57;
    text-shadow: 0 0 3px rgba(244, 207, 87, 0.3);
}

.pgn-vs {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: normal;
}

.pgn-player-black {
    color: var(--color-primary);
    text-shadow: 0 0 3px rgba(212, 175, 55, 0.3);
}

.pgn-game-result {
    margin-left: auto;
    color: var(--color-accent);
    font-size: 16px;
    padding: 2px 8px;
    background: rgba(255, 51, 51, 0.1);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 51, 51, 0.3);
}

.pgn-details {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* ===== METADATOS COMPACTOS ===== */
.pgn-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.pgn-meta-info .meta-separator {
    color: rgba(212, 175, 55, 0.4);
    margin: 0 2px;
}

/* Asegurar que el indicador de partida se integre bien */
.pgn-meta-info .game-indicator {
    margin-left: auto;
}

@media (max-width: 768px) {
    .pgn-meta-info {
        font-size: 10px;
        gap: 6px;
    }
    
    .pgn-meta-info .game-indicator {
        margin-left: 0;
        margin-top: 4px;
        width: 100%;
        justify-content: center;
    }
}

/* ===== SCROLL SUAVE ===== */
#pgn-viewer {
    scroll-behavior: smooth;
}

/* ===== ESTADOS HOVER MEJORADOS ===== */
.variation:hover {
    border-left-color: rgba(212, 175, 55, 0.6);
}

.variation:hover::before {
    color: rgba(212, 175, 55, 0.8);
}

/* ===== FIGURINES UNICODE ===== */
.move {
    font-family: "Chess Merida", "Noto Sans", var(--font-mono);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .variation {
        margin-left: 15px;
        padding-left: 10px;
    }
    
    .comment {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .pgn-metadata {
        padding: 8px 10px;
    }
    
    .pgn-players {
        font-size: 13px;
    }
}

/* ===== SÍMBOLOS DE ANOTACIÓN (NAG) ===== */
.nag-symbol {
    color: #ff6b6b;
    font-weight: 700;
    font-size: 0.9em;
    margin-left: 2px;
    font-family: 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
}

.nag-symbol.nag-prefix {
    margin-left: 0;
    margin-right: 4px;
    color: #ffd43b;
}

/* Colores específicos para diferentes tipos de NAGs */
.nag-symbol:has-text('!'):not(:has-text('?')) {
    color: #51cf66; /* Verde para buenas jugadas */
}

.nag-symbol:has-text('?'):not(:has-text('!')) {
    color: #ff6b6b; /* Rojo para malas jugadas */
}

.nag-symbol:has-text('±'),
.nag-symbol:has-text('∓'),
.nag-symbol:has-text('+-'),
.nag-symbol:has-text('-+') {
    color: #ffd43b; /* Amarillo para ventajas */
}

/* Responsivo móviles */
@media (max-width: 768px) {
    .nag-symbol {
        font-size: 0.85em;
    }
    
    .nag-symbol.nag-prefix {
        margin-right: 3px;
    }
}

/* ===== COMENTARIOS PREVIOS ===== */
.pre-comment {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-size: 0.9em;
    background: rgba(212, 175, 55, 0.05);
    padding: 2px 6px;
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    margin-right: 6px;
    border-radius: 3px;
}

/* Responsivo móviles */
@media (max-width: 768px) {
    .pre-comment {
        font-size: 0.85em;
    }
}

/* ===== MINI TABLEROS (DIAGRAMAS) ===== */
.pgn-mini-board {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 8px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-medium);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: 160px;
    height: 160px;
    position: relative;
}

.pgn-mini-board-row {
    display: flex;
    width: 100%;
    height: 12.5%; /* 100% / 8 filas */
}

.pgn-mini-board-square {
    width: 12.5%; /* 100% / 8 columnas */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Colores de casillas - se aplican dinámicamente desde JavaScript usando los colores del tablero principal */
/* Los estilos inline generados por renderMiniBoard() tienen prioridad sobre estos valores */
.pgn-mini-board-square.square-light {
    background-color: #f0d9b5; /* Fallback - será sobrescrito por estilos inline */
}

.pgn-mini-board-square.square-dark {
    background-color: #b58863; /* Fallback - será sobrescrito por estilos inline */
}

.pgn-mini-board-piece {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .pgn-mini-board {
        width: 120px;
        height: 120px;
        margin: 4px 6px;
    }
}

/* Bloques de diagrama - cada diagrama en su propia fila */
.pgn-diagram-block {
    display: block;
    margin: 8px 0;
    text-align: center;
}

.pgn-diagram-block .pgn-mini-board {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

/* Texto de comentario separado de diagramas */
.pgn-comment-text {
    display: block;
    margin: 4px 0;
}

/* Ajustes para que los mini tableros se vean bien dentro de los comentarios */
.comment .pgn-mini-board,
.pre-comment .pgn-mini-board {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 6px;
}

/* Cuando hay un bloque de diagrama dentro de un comentario, debe ser bloque */
.comment .pgn-diagram-block,
.pre-comment .pgn-diagram-block {
    display: block;
    margin: 8px 0;
}

.pgn-initial-comment .pgn-mini-board {
    display: block;
    margin: 8px auto;
}

/* ===== BARRA DE HERRAMIENTAS PGN (solo pantallas grandes) ===== */
.pgn-toolbar {
    display: none; /* Oculto por defecto, se muestra solo en pantallas grandes */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    margin-top: 8px;
    border-top: 1px solid var(--theme-border);
    background: var(--theme-input-bg);
    border-radius: 0 0 6px 6px;
    transition: all var(--transition-theme);
}

.pgn-toolbar-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 4px 8px;
    min-width: auto;
    width: 28px;
    height: 28px;
    background: var(--theme-button-bg);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    color: var(--theme-accent-primary);
    cursor: pointer;
    transition: all var(--transition-theme);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pgn-toolbar-btn:hover: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 2px 6px var(--theme-shadow), 0 0 0 1px var(--theme-shadow-glow);
}

/* Para el botón de diagrama en Falling Code Matrix: efecto visible sin glow verde */
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover:not(:disabled),
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover:not(:disabled) {
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.pgn-toolbar-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px var(--theme-shadow);
}

.pgn-toolbar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-muted);
}

.pgn-toolbar-btn:disabled:hover {
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
    transform: none;
    box-shadow: none;
    color: var(--theme-text-muted);
}

.pgn-toolbar-icon {
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-primary);
    transition: color var(--transition-theme);
}

/* Filtro de sombra para íconos de texto (emoji) - solo si no contiene SVG */
.pgn-toolbar-icon:empty,
.pgn-toolbar-icon:not(:has(svg)) {
    filter: drop-shadow(0 1px 1px var(--theme-shadow-glow));
}

/* Estilos para SVG personalizados en toolbar */
.pgn-toolbar-svg {
    width: 20px;
    height: 20px;
    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"] .pgn-toolbar-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.pgn-toolbar-btn:hover .pgn-toolbar-svg {
    filter: drop-shadow(0 2px 4px var(--theme-shadow-glow));
    transform: scale(1.1);
}

/* Excluir el diagrama del estilo general */
.pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg {
    filter: drop-shadow(0 2px 4px var(--theme-shadow-glow));
    transform: scale(1.1);
}

/* Ajuste específico para Light Matrix: ícono blanco en hover para mejor contraste */
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-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 Falling Code Matrix: íconos del PGN con borde negro y sombra fuerte - EXCLUYENDO el diagrama */
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-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));
    transform: scale(1.1);
    opacity: 1 !important;
}

/* Aplicar stroke solo a elementos que NO sean rectángulos internos del tablero de ajedrez - EXCLUYENDO el diagrama */
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg path,
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg circle,
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg line,
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg polygon,
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg g,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg path,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg circle,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg line,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg polygon,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-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;
}

/* Para rectángulos: solo aplicar stroke si NO están dentro del ícono de diagrama (preservar forma del tablero) */
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg rect,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg rect {
    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;
}

/* Para el ícono de diagrama: efecto SIMPLE y visible - contorno blanco/gris claro para contraste */
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.7))
            drop-shadow(0 0 9px rgba(255, 255, 255, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
    transform: scale(1.15) !important;
}

/* Asegurar que NINGÚN elemento interno del diagrama reciba stroke o filter que distorsione la forma */
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg path,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg rect,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg circle,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg line,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg polygon,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg g,
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg *,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg path,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg rect,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg circle,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg line,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg polygon,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg g,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg * {
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: normal !important;
    filter: none !important;
    /* Mantener los colores originales sin modificar */
    fill: inherit !important;
    opacity: 1 !important;
}

html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-icon,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-icon {
    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;
}

/* Para el ícono de diagrama: NO aplicar filter al icon, solo al SVG */
html[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-icon,
body[data-theme="falling-code-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-icon {
    filter: none !important;
}

html[data-theme="falling-code-matrix"] .pgn-toolbar-btn .pgn-toolbar-svg,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn .pgn-toolbar-svg {
    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: íconos del PGN con borde negro y sombra fuerte - EXCLUYENDO el diagrama */
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-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));
    transform: scale(1.1);
    opacity: 1 !important;
}

/* Aplicar stroke solo a elementos que NO sean rectángulos internos del tablero de ajedrez - EXCLUYENDO el diagrama */
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg path,
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg circle,
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg line,
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg polygon,
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg g,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg path,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg circle,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg line,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg polygon,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-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;
}

/* Para rectángulos: solo aplicar stroke si NO están dentro del ícono de diagrama (preservar forma del tablero) */
html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg rect,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-svg rect {
    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;
}

/* Para el ícono de diagrama: efecto SIMPLE y visible - contorno blanco/gris claro para contraste */
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.7))
            drop-shadow(0 0 9px rgba(255, 255, 255, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
    transform: scale(1.15) !important;
}

/* Asegurar que NINGÚN elemento interno del diagrama reciba stroke o filter que distorsione la forma */
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg path,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg rect,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg circle,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg line,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg polygon,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg g,
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg *,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg path,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg rect,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg circle,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg line,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg polygon,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg g,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-svg * {
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: normal !important;
    filter: none !important;
    /* Mantener los colores originales sin modificar */
    fill: inherit !important;
    opacity: 1 !important;
}

html[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-icon,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:not(#pgnToolbarInsertDiagram):hover .pgn-toolbar-icon {
    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;
}

/* Para el ícono de diagrama: NO aplicar filter al icon, solo al SVG */
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-icon,
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover .pgn-toolbar-icon {
    filter: none !important;
}

html[data-theme="rose-matrix"] .pgn-toolbar-btn .pgn-toolbar-svg,
body[data-theme="rose-matrix"] .pgn-toolbar-btn .pgn-toolbar-svg {
    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;
}

/* Para el botón de diagrama en Rose Matrix: efecto visible sin glow rosa que interfiera */
html[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover:not(:disabled),
body[data-theme="rose-matrix"] #pgnToolbarInsertDiagram:hover:not(:disabled) {
    background: linear-gradient(145deg, #3a1a3a 0%, #2a0a2a 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-icon {
    color: #ffffff !important;
}

[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg path,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg circle,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg rect,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg line,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg polygon,
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg g {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Excepción para íconos de zoom: el símbolo (- o +) debe ser celeste en hover para contraste */
[data-theme="light-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg .zoom-symbol {
    fill: #64B5F6 !important;
    stroke: #64B5F6 !important;
}

.pgn-toolbar-btn:active .pgn-toolbar-svg {
    transform: scale(0.95);
}

/* Elementos internos del SVG de zoom */
.pgn-toolbar-svg .zoom-lens {
    fill: currentColor;
    transition: fill var(--transition-theme);
    opacity: 0.9;
}

.pgn-toolbar-svg .zoom-symbol {
    fill: var(--theme-bg-primary);
    transition: fill var(--transition-theme);
    opacity: 0.95;
}

.pgn-toolbar-svg .zoom-handle {
    stroke: currentColor;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke var(--transition-theme);
    opacity: 0.9;
}

/* Ajustes específicos por tema para el símbolo interno */
[data-theme="light-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #ffffff;
    opacity: 0.9;
}

[data-theme="dark-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #ffffff;
    opacity: 0.85;
}

/* Quantum Matrix: símbolo más oscuro y grueso para contraste con cian */
[data-theme="quantum-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #0a0a0a;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(0, 245, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    transform: scale(1.1);
    transform-origin: center;
}

/* Aurum Matrix: símbolo marrón oscuro para contraste con dorado claro */
[data-theme="aurum-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #5C3A14;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    transform: scale(1.1);
    transform-origin: center;
}

/* Rose Matrix: símbolo rosa neón para contraste con fondo oscuro - ESTADO INICIAL */
html[data-theme="rose-matrix"] .pgn-toolbar-svg .zoom-symbol,
body[data-theme="rose-matrix"] .pgn-toolbar-svg .zoom-symbol,
[data-theme="rose-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #FF69B4 !important;
    opacity: 1 !important;
    stroke: #000000 !important;
    stroke-width: 2.5px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 0 1.5px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 2.5px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 4px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 3px rgba(255, 20, 147, 0.6)) !important;
    transform: scale(1.05);
    transform-origin: center;
}

/* Rose Matrix: símbolo de zoom en hover con borde negro más fuerte */
html[data-theme="rose-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg .zoom-symbol,
body[data-theme="rose-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg .zoom-symbol {
    fill: #FF1493 !important;
    stroke: #000000 !important;
    stroke-width: 4px !important;
    paint-order: stroke fill !important;
    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 8px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 10px rgba(255, 20, 147, 0.8)) !important;
}

/* Falling Code Matrix: símbolo BLANCO para contraste con fondo negro - ESTADO INICIAL */
html[data-theme="falling-code-matrix"] .pgn-toolbar-svg .zoom-symbol,
body[data-theme="falling-code-matrix"] .pgn-toolbar-svg .zoom-symbol,
[data-theme="falling-code-matrix"] .pgn-toolbar-svg .zoom-symbol {
    fill: #FFFFFF !important;
    opacity: 1 !important;
    stroke: #000000 !important;
    stroke-width: 2.5px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 0 1.5px rgba(0, 0, 0, 1))
            drop-shadow(0 0 0 2.5px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 4px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 3px rgba(0, 255, 65, 0.6)) !important;
    transform: scale(1.05);
    transform-origin: center;
}

/* Falling Code Matrix: símbolo de zoom en hover con borde negro más fuerte */
html[data-theme="falling-code-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg .zoom-symbol,
body[data-theme="falling-code-matrix"] .pgn-toolbar-btn:hover .pgn-toolbar-svg .zoom-symbol {
    fill: #00FF41 !important;
    stroke: #000000 !important;
    stroke-width: 4px !important;
    paint-order: stroke fill !important;
    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, 255, 65, 0.8)) !important;
}

.pgn-toolbar-label {
    display: none; /* Ocultar textos, solo mostrar íconos con tooltips */
}

/* Mostrar barra de herramientas solo en pantallas grandes */
@media (min-width: 769px) {
    .pgn-toolbar {
        display: flex;
    }
}