/* Estilos personalizados para tacTTic Móvil */

body {
    user-select: none;
    -webkit-user-select: none;
}

/* Transiciones suaves */
.tool-btn, .color-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado activo de herramientas */
.tool-btn.active {
    background-color: rgba(50, 152, 186, 0.1);
    color: #3298ba !important;
    box-shadow: inset 0 0 0 1px rgba(50, 152, 186, 0.2);
}

/* Punteros personalizados */
.cursor-crosshair {
    cursor: crosshair;
}

/* Estilo del lienzo vertical */
#canvas-container {
    background-color: #1e1e1e;
    touch-action: none;
}

/* Optimización para móviles */
@media (max-width: 640px) {
    .tool-btn {
        padding: 0.5rem;
    }
    .color-btn {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Marcador de flecha dinámico */
#arrowhead polygon {
    transition: fill 0.2s;
}