/**
 * TOOLTIPS.CSS - Estilos para Tooltips Globales
 * Ajedrez de Silicio - Tooltips adaptables a temas
 */

/* ===== TOOLTIP FLOTANTE GLOBAL (Barra de Íconos) ===== */
#iconsTooltip,
.theme-tooltip {
    background: var(--theme-modal-bg) !important;
    color: var(--theme-accent-primary) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-family: var(--font-main, 'Poppins'), sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 
        0 2px 8px var(--theme-shadow),
        0 0 0 1px var(--theme-shadow-glow) !important;
    border: 1px solid var(--theme-border) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity 0.15s cubic-bezier(.4,0,.2,1), transform 0.15s cubic-bezier(.4,0,.2,1) !important;
    z-index: 13000 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: fixed !important;
}

/* ===== TOOLTIPS DEL PGN TOOLBAR (CSS ::after) ===== */
/* Selector general para todos los botones del PGN toolbar */
.pgn-toolbar-btn[title]:hover::after,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title]:hover::after,
.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;
}

/* Flecha del tooltip del PGN toolbar */
.pgn-toolbar-btn[title]:hover::before,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn[title]:hover::before,
.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;
}

/* Ajuste específico para el primer botón (Reducir Tablero) - alinear a la izquierda */
.pgn-toolbar-btn:first-child[title]:hover::after,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn:first-child[title]:hover::after,
.controls-container .pgn-section .pgn-toolbar-btn:first-child[title]:hover::after {
    left: 0 !important;
    transform: translateX(0) translateY(-8px) !important;
}

.pgn-toolbar-btn:first-child[title]:hover::before,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn:first-child[title]:hover::before,
.controls-container .pgn-section .pgn-toolbar-btn:first-child[title]:hover::before {
    left: 12px !important;
    transform: translateX(0) translateY(-2px) !important;
}

/* Ajuste específico para el último botón (Activar/Desactivar Sonidos) - alinear a la derecha */
.pgn-toolbar-btn:last-child[title]:hover::after,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn:last-child[title]:hover::after,
.controls-container .pgn-section .pgn-toolbar-btn:last-child[title]:hover::after {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(-8px) !important;
}

.pgn-toolbar-btn:last-child[title]:hover::before,
.chess-layout > .controls-container > .pgn-section .pgn-toolbar-btn:last-child[title]:hover::before,
.controls-container .pgn-section .pgn-toolbar-btn:last-child[title]:hover::before {
    left: auto !important;
    right: 12px !important;
    transform: translateX(0) translateY(-2px) !important;
}

/* Asegurar que los botones tengan position relative para que los tooltips funcionen */
.pgn-toolbar-btn[title] {
    position: relative !important;
}

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

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

/* ===== TOOLTIP DEL EDITOR ===== */
#floatingTooltip {
    background: var(--theme-modal-bg) !important;
    color: var(--theme-accent-primary) !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;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}